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

<template>
	<div>
		<A-team-filter :unscheduledTime="unscheduledTime" @dayChanged="getDayData" />

		<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" @reopenTask="reopenTask" @deleteTask="deleteTask" />
		</W-loadable>

		<!-- Kaluza: vyhodit toto a nahradit za wToast -->
		<v-snackbar
			v-model="errorToast"
			:timeout="2000"
			color="red"
			:rounded="true"
		>
			{{ errorToastMessage }}
		</v-snackbar>
	</div>
</template>

<script>
import ATeamFilter from './_components/a-team-filter.vue'
import ZTimeline from '../tasks/_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 getDayData(date) {
			this.config.date = date
			try {
				this.timelineData = await this.$axios.get_auth_data('v1/overview/teams')
				this.generateSplits()
				this.formatData()
				this.generateNonWorkingHours(date)
			} catch(error) {
				// Kaluza: Upravit podla feedbacku v tasks.modal
				this.timelineData = {}
				console.error(error)
				this.triggerToast("Nepodarilo sa nacitat data!")
			}
		},

		generateSplits() {
			this.splitDays = []
			for (let i = 0; i < this.timelineData.length; i++) {
				this.timelineData[i].splitId = i + 1
				this.splitDays.push({
					id: i + 1,
					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]
				})
			}
		},

		// Kaluza: Upravit podla feedbacku v tasks.modal
		formatData() {
			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)
		},

		// Kaluza: Upravit podla feedbacku v tasks.modal
		triggerToast(message) {
			this.errorToastMessage = message
			this.errorToast = true
		},

		// Kaluza: Upravit podla feedbacku v tasks.modal
		async onEventMoved(event) {
			console.log("drag", event)
			// 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})
			// } catch(error) {
			// 	this.triggerToast("Nepodarilo sa presunut ulohu!")
			// 	this.timelineData.tasks.filter(e => {
			// 		if (e.id == event.event.id) {
			// 			e.start = new Date(event.originalEvent.start)
			// 			e.end = new Date(event.originalEvent.end)
			// 		}
			// 	})
			// }
		},

		// Kaluza: Upravit podla feedbacku v tasks.modal
		completeTask(id) {
			this.timelineData.tasks.filter(task => {
				if (task.id == id) {
					task.completed = true
				}
			})
		},

		// Kaluza: Upravit podla feedbacku v tasks.modal
		reopenTask(id) {
			this.timelineData.tasks.filter(task => {
				if (task.id == id) {
					task.completed = false
				}
			})
		},

		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>