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

<template>
	<div ref="page">
		<A-task-filter v-if="$store.getters['tm/isInitialized']" :split-days="timelineData ? splitDays : null" @filter-changed="onFilterChanged" ref="filter" />
		<Z-timeline v-if="timelineData && !hideCal" :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'
import FilterMixin				from '../_mixins/Filter.mixin'

export default {
	mixins: [FilterMixin],

	components: {
		ATaskFilter,
		ZTimeline
	},

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

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

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

			const now 						= moment()
			const dailyCapacityMinutes 		= (this.user.work_end - this.user.work_start) * 60

			this.timelineData.tasks.forEach(task => {
				if (task.type == 'non-working-hours' || task.subtask?.is_finished || task.blocker?.is_finished)
					return

				if (!schedulesCapacityBySplit[task.split])
					schedulesCapacityBySplit[task.split] = 0

				if (now.isAfter(moment(task._real_end))) {
					// Ignore elapsed task
					return
				}
				else if (now.isAfter(moment(task._real_start)) && now.isBefore(moment(task._real_end))) {
					// Task in progress
					schedulesCapacityBySplit[task.split] += timelineUtils._getDifferenceInMinutes(task._real_end, new Date())
				}
				else {
					// Future task
					schedulesCapacityBySplit[task.split] += timelineUtils._getDifferenceInMinutes(task._real_end, task._real_start)
				}
			})

			schedulesCapacityBySplit[1] = 0 // Set YESTERDAY value to 0

			this.timelineData.homeoffices.forEach(task => {
				homeoffice[task.split - 1] = true
			})

			for (let i = 0; i < 7; i++) {
				if (!schedulesCapacityBySplit[i + 1])
					schedulesCapacityBySplit[i + 1] = 0

				let unscheduledTime

				const date = moment(addDays(this.filter.start, i))

				if (date.isBefore(moment(), 'days')) {
					// Yesterday
					unscheduledTime = 0
				} else if (date.isSame(moment(), 'days')) {
					// Today
					const elapsedMinutes 		= now.diff(now.clone().startOf('day'), 'minutes')
					const workStart		 		= this.user.work_start * 60 > elapsedMinutes ? this.user.work_start : elapsedMinutes / 60
					const todayCapacityMinutes 	= (this.user.work_end - workStart) * 60
					unscheduledTime				= todayCapacityMinutes - schedulesCapacityBySplit[i + 1] / 60 < 0 ? 0 : todayCapacityMinutes - schedulesCapacityBySplit[i + 1]
				} else {
					// Future
					unscheduledTime				= dailyCapacityMinutes - schedulesCapacityBySplit[i + 1]
				}

				if (isNaN(unscheduledTime))
					unscheduledTime = dailyCapacityMinutes

				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: (unscheduledTime / 60).toFixed(1),
					scheduledTime: (schedulesCapacityBySplit[i + 1] / 60).toFixed(1),
					date: addDays(this.filter.start, i),
					isHomeoffice: homeoffice[i] ? true : false,
					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

			const { tasks, blockers, nonWorkingHours, homeoffices } = timelineUtils.generateTimelineTasks(this.subtasks, new Date(this.filter.start), this.filter.employee)

			return {
				name: this.filter.employee.name,
				surname: this.filter.employee.surname,
				unscheduledTime: this.unscheduledTime,
				tasks: [...tasks, ...blockers, ...nonWorkingHours],
				homeoffices
			}
		}
	},

	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) - 1
				this.config.date 				= this.filter.start
				this.subtasks					= [...subtasks, ...blockers]
				this.hideCal = true
				setTimeout(() => { this.hideCal = false }, 0)
			} catch (error) {
				this.$toast.error('Nepodarilo sa nacitat data!')

				if (process.env.NODE_ENV === 'development')
					console.log('[tasks.vue] Error: ', error)
			}

			setTimeout(() => {
				this._initScrollListener()
			}, 100)
		}
	}
}
</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>