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

<template>
	<div>
		<A-team-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" @eventMoved="onEventMoved" @completeTask="completeTask" @deleteTask="deleteTask" />
		</W-loadable>
	</div>
</template>

<script>
import ATeamFilter from './_components/a-team-filter.vue'
import ZTimeline from '@/plugins/tm@dashboard/_components/z-timeline.vue'

import { setHours, setMinutes, setSeconds } from 'date-fns'

export default {
	components: {
		ATeamFilter,
		ZTimeline,
	},

	data() {
		return {
			timelineData: null,
			formatedTasks: {tasks: []},
			errorToast: false,
			errorToastMessage: "Nepodarilo sa nacitat data!",
			dataLoaded: false,
			splitDays: [],
			unscheduledTime: 0,
			config: {
				date: new Date(),
				scrollHour: 7,
			}
		}
	},

	methods: {
		async getTimelineData(data) {
			this.config.date = data.date
			try {
				this.timelineData = await this.$axios.get_auth_data('v1/overview/teams', {date: data.date, team: data.teamId})
				this.generateEmployees()
				this.formatTimelineDataToTimelineFormat()
				this.generateNonWorkingHours(data.date)
			} catch(error) {
				this.timelineData = {error: error || 'Nepodarilo sa nacitat data!'}
				console.error(error)
			}
		},

		generateEmployees() {
			this.splitDays = []
			for (let i = 0; i < this.timelineData.length; i++) {
				this.timelineData[i].splitId = i + 1
				this.splitDays.push({
					id: i + 1,
					employeeId: this.timelineData[i].id, 
					firstName: this.timelineData[i].name,
					name: this.timelineData[i].name + " " + this.timelineData[i].surname,
					initials: this.timelineData[i].name.charAt(0).toUpperCase() + this.timelineData[i].surname.charAt(0).toUpperCase(),
					unscheduledTime: Math.floor(this.timelineData[i].unscheduled_time / 60) + "," + String(this.timelineData[i].unscheduled_time % 60)[0]
				})
			}
		},

		formatTimelineDataToTimelineFormat() {
			this.timelineData.tasks = []
			this.unscheduledTime = 0

			// format events
			this.timelineData.forEach(user => {
				user.tasks.forEach(event => {
					event.name = user.name
					event.surname = user.surname

					event.start = new Date(event.starts_at)
					event.end = new Date(event.ends_at)
					event.split = user.splitId
				})
				this.timelineData.tasks.push(...user.tasks)
				this.unscheduledTime += user.unscheduled_time
			})

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

		generateNonWorkingHours(date) {
			let nonWorkingHours = []
			let workStartHour = 23

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

				if (workStartHour > Number(user.work_hours_from.split(':')[0])) workStartHour = Number(user.work_hours_from.split(':')[0])

				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: user.splitId,
					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: user.splitId,
					draggable: false
				})
			})

			this.config.scrollHour = workStartHour - 1
			this.timelineData.tasks.push(...nonWorkingHours)
		},

		async onEventMoved(event) {
			console.log("drag", event)
			const task = this.timelineData.tasks.find(task => task.id == event.event.id)
			const newEmployeeId = this.splitDays.find(split => split.id == event.newSplit).employeeId

			try {
				// await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: newEmployeeId})
				task.split = event.newSplit
				task.start = event.event.start
				task.end = event.event.end
			} catch(error) {
				task.split = event.oldSplit
				task.start = new Date(event.originalEvent.start)
				task.end = new Date(event.originalEvent.end)
				this.$toast.error(error)
			}
		},

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

		deleteTask(id) {
			this.timelineData.tasks.splice(this.timelineData.tasks.findIndex(item => item.id === id), 1)
		}
	}
}
</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>