jandl-taskmanager-app/app/src/plugins/tm@dashboard/tasks/tasks.vue

<template>
	<div>
		<A-task-filter :unscheduledTime="unscheduledTime" @dataChanged="getTimelineData" />

		<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
			<Z-timeline :calData="timelineData" :calConfig="config" :splits="splitDays" @reopenTask="toggleCompleteTask" />
		</W-loadable>
	</div>
</template>

<script>
import ATaskFilter 			from './_components/a-tasks-filter.vue'
import ZTimeline 			from '@/plugins/tm@dashboard/_components/z-timeline.vue'
import { addDays, setHours, setMinutes, setSeconds, differenceInCalendarDays } from 'date-fns'

export default {
	components: {
		ATaskFilter,
		ZTimeline
	},

	data() {
		return {
			timelineData: null,
			splitDays: [],
			unscheduledTime: 0,
			config: {
				date: new Date(),
				scrollHour: 7,
			}
		}
	},

	mounted() {
		this.$events.on('on-task-deleted', (task) => {
			this.deleteTask(task)
		})

		this.$events.on('on-task-completed', (task) => {
			this.toggleCompleteTask(task)
		})

		this.$events.on('on-task-edited', (task) => {
			this.editTask(task)
		})
	},

	methods: {
		async getTimelineData(data) {
			this.config.date = data.firstDay
			const lastDay = addDays(data.firstDay, 6)
			try {
				this.timelineData = await this.$axios.get_auth_data('v1/overview/tasks', {firstDay: data.firstDay, lastDay: lastDay, employeeId: data.employeeId})
				this.formatTimelineDataToTimelineFormat(data.firstDay)
				this.generateDays(data.firstDay)
				this.generateNonWorkingHours(data.firstDay)
			} catch (error) {
				this.timelineData = {error: error || 'Nepodarilo sa nacitat data!'}
				console.error(error)
				// console.log(this.$store.getters['auth/user'])
			}
		},

		generateDays(date) {
			this.splitDays = []
			for (let i = 0; i < 7; i++) {
				this.splitDays.push({
					id: i + 1,
					name: this.timelineData.name + " " + this.timelineData.surname,
					initials: this.timelineData.name.charAt(0).toUpperCase() + this.timelineData.surname.charAt(0).toUpperCase(),
					unscheduledTime: Math.floor(this.timelineData.unscheduled_times[i].time / 60) + "," + String(this.timelineData.unscheduled_times[i].time % 60)[0],
					date: addDays(date, i),
					isWeekend: this.isWeekend(addDays(date, i))
				})
			}
		},

		isWeekend(date) {
			if (date.getDay() == 6 || date.getDay() == 0) return true
			return false
		},

		formatTimelineDataToTimelineFormat(date) {
			// format events
			this.timelineData.tasks.forEach(event => {
				event.name = this.timelineData.name
				event.surname = this.timelineData.surname

				// convert all dates to one to show in day-splits
				const startDate = new Date(event.starts_at)
				const endDate = new Date(event.ends_at)
				const diffInDays = differenceInCalendarDays(date, startDate)

				event.start = addDays(startDate, diffInDays)
				event.end = addDays(endDate, diffInDays)
				event.split = diffInDays * (-1) + 1
			})

			// console.log(this.timelineData.tasks)

			this.unscheduledTime = 0

			this.timelineData.unscheduled_times.forEach(time => {
				time.name = this.timelineData.name
				time.surname = this.timelineData.surname
				this.unscheduledTime += time.time
			})

			this.unscheduledTime = Math.floor(this.unscheduledTime / 60) + "," + String(this.unscheduledTime % 60)[0] + " h"

			this.config.scrollHour = Number(this.timelineData.work_hours_from.split(':')[0]) - 1
		},

		generateNonWorkingHours(date) {
			const nonWorkingHours = []
			const start1 = { hour: 0, minutes: 0, seconds: 0}
			const end1 = { hour: Number(this.timelineData.work_hours_from.split(':')[0]), minutes: Number(this.timelineData.work_hours_from.split(':')[1]) - 1, seconds: 0 }
			const start2 = { hour: Number(this.timelineData.work_hours_to.split(':')[0]), minutes: Number(this.timelineData.work_hours_to.split(':')[1]) + 1, seconds: 0 }
			const end2 = { hour: 23, minutes: 59, seconds: 59}

			for (let i = 0; i < 7; i++) {
				nonWorkingHours.push({
					title: "Non working hours",
					start: setSeconds(setMinutes(setHours(date, start1.hour), start1.minutes), start1.seconds),
					end: setSeconds(setMinutes(setHours(date, end1.hour), end1.minutes), end1.seconds),
					nonWorking: true,
					split: i + 1,
					draggable: false
				})
				nonWorkingHours.push({
					title: "Non working hours",
					start: setSeconds(setMinutes(setHours(date, start2.hour), start2.minutes), start2.seconds),
					end: setSeconds(setMinutes(setHours(date, end2.hour), end2.minutes), end2.seconds),
					nonWorking: true,
					split: i + 1,
					draggable: false
				})
			}

			this.timelineData.tasks.push(...nonWorkingHours)
		},

		async onEventMoved(event) {
			// console.log("drag", event)
			const task = this.timelineData.tasks.find(task => task.id == event.event.id)

			try {
				const newStartDate = addDays(event.event.start, differenceInCalendarDays(this.splitDays.filter((split) => {return split.id == event.newSplit})[0].date, event.event.start))
				const newEndDate = addDays(event.event.end, differenceInCalendarDays( newStartDate, event.event.start))

				// await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: newStartDate, end: newEndDate})
				task.start = newStartDate
				task.end = newEndDate
				task.split = event.newSplit
			} catch(error) {
				this.$toast.error(error)

				task.start = new Date(event.originalEvent.start)
				task.end = new Date(event.originalEvent.end)
				task.split = event.oldSplit
			}
		},

		deleteTask(task) {
			const id = task.id
			this.timelineData.tasks.splice(this.timelineData.tasks.findIndex(item => item.id === id), 1)
		},

		toggleCompleteTask(task) {
			const taskInTasks = this.timelineData.tasks.find(e => e.id == task.id)
			taskInTasks.completed = !taskInTasks.completed
		},

		editTask(task) {
			const taskIndex = this.timelineData.tasks.findIndex(item => item.id === task.id)
			this.timelineData.tasks[taskIndex] = task
		},
	}
}
</script>

<style lang="sass" scoped>
.w-loadable
	text-align: center
	padding-top: 20px
	height: calc( 100% - 121px )

@media (max-width: 1312px)
	.w-loadable
		height: calc( 100% - 202px )

</style>