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

<template>
	<div>
		<A-task-filter v-if="$store.getters['tm/isInitialized']" :unscheduledTime="timelineData?.unscheduledTime || 0" @filter-changed="onFilterChanged" />
		<Z-timeline v-if="timelineData" :calData="timelineData" :calConfig="config" :splits="splitDays" />
	</div>
</template>

<script>
import ATaskFilter 								from './_components/a-tasks-filter.vue'
import ZTimeline 								from '@/plugins/tm@dashboard/_components/z-timeline.vue'
import { addDays, subDays } 					from 'date-fns'
import moment 									from 'moment'
import timelineUtils 							from './_utils/timeline.utils'
import { mapGetters } 							from 'vuex'

export default {
	components: {
		ATaskFilter,
		ZTimeline
	},

	data() {
		return {
			filter: null,
			subtasks: null,
			config: {
				date: subDays(new Date(), 1),
				scrollHour: 7,
			}
		}
	},

	computed: {
		...mapGetters('auth', [
			'user'
		]),

		splitDays() {
			const days = []
			const workingHours = {}
			const homeoffice = {}

			console.log(this.timelineData.tasks.filter(task => task.type != 'subtask' && task.type != 'non-working-hours'))

			this.timelineData.tasks.forEach(task => {
				if (!workingHours[task.split])
					workingHours[task.split] = 0

				if (task.type == 'home_office') {
					return homeoffice[task.split] = true
				}

				if (task.type == 'non-working-hours' || task.subtask?.is_finished || task.blocker?.is_finished)
					return

				workingHours[task.split] += timelineUtils._getDifferenceInHours(task.end, task.start)
			})

			for (let i = 0; i < 7; i++) {
				days.push({
					id: i + 1,
					fullname: `${this.filter.employee.name} ${this.filter.employee.surname}`,
					initials: this.filter.employee.name.charAt(0).toUpperCase() + this.filter.employee.surname.charAt(0).toUpperCase(),
					unscheduledTime: workingHours[i + 1],
					date: addDays(this.filter.start, i),
					isHomeoffice: homeoffice[i],
					isWeekend: timelineUtils.isWeekend(addDays(this.filter.start, i))
				})
			}

			return days
		},

		unscheduledTime() {
			if (!this.subtasks) return 0

			return timelineUtils.getUnscheduledTime(this.subtasks)
		},


		timelineData() {
			if (!this.subtasks || !this.filter)
				return null

			return {
				name: this.filter.employee.name,
				surname: this.filter.employee.surname,
				unscheduledTime: this.unscheduledTime,
				tasks: timelineUtils.generateTimelineTasks(this.subtasks, new Date(this.filter.start), this.filter.employee)
			}
		}
	},

	mounted() {
		this.$events.on('on-subtask-edited', () => {
			this.onFilterChanged(this.filter)
		})

		this.$events.on('on-subtask-deleted', () => {
			this.onFilterChanged(this.filter)
		})

		this.$events.on('on-blocker-edited', () => {
			this.onFilterChanged(this.filter)
		})

		this.$events.on('on-blocker-deleted', () => {
			this.onFilterChanged(this.filter)
		})
	},

	unmounted() {
		this.$events.off('on-subtask-edited')
		this.$events.off('on-subtask-deleted')
		this.$events.off('on-blocker-edited')
		this.$events.off('on-blocker-deleted')
	},

	methods: {
		async onFilterChanged(filter) {
			this.filter = filter
			const urlQueryObject = {}

			if (filter.start) 		urlQueryObject.start 		= moment(filter.start).format('YYYY-MM-DD')
			if (filter.end) 		urlQueryObject.end 			= moment(filter.end).format('YYYY-MM-DD')
			if (filter.employee) 	urlQueryObject.employee_id 	= filter.employee.id

			const queryParameters = new URLSearchParams(urlQueryObject).toString()

			try {
				const { subtasks, blockers } 	= await this.$axios.get_auth(`v1/subtasks?${queryParameters}`)
				this.config.scrollHour 			= (this.filter?.employee.work_start / 60) - 1
				this.config.date 				= this.filter.start
				this.subtasks					= [...subtasks, ...blockers]
			} catch (error) {
				this.$toast.error('Nepodarilo sa nacitat data!')
			}
		}
	}
}
</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>