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, differenceInCalendarDays } 	from 'date-fns'
import { mapGetters } 							from 'vuex'
import moment 									from 'moment'
import timelineUtils 							from './_utils/timeline.utils'

export default {
	components: {
		ATaskFilter,
		ZTimeline
	},

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

	computed: {
		...mapGetters('tm', [
			'ongoingSubtasks'
		]),

		splitDays() {
			const days = []

			for (let i = 0; i < 7; i++) {
				days.push({
					id: i + 1,
					name: this.filter.employee.name + " " + this.filter.employee.surname,
					initials: this.filter.employee.name.charAt(0).toUpperCase() + this.filter.employee.surname.charAt(0).toUpperCase(),
					unscheduledTime: this.timelineData.unscheduledTime,
					date: addDays(this.filter.start, 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', (subtask) => {
			this.subtasks = this.subtasks.map(st => {
				if (st.id == subtask.id)
					return subtask
				
				return st
			})
		})
	},

	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 } 		= await this.$axios.get_auth(`v1/subtasks?${queryParameters}`)
				this.config.scrollHour 	= this.filter.employee.work_start - 1
				this.subtasks			= subtasks

				setTimeout(() => console.log(this.timelineData), 1000)
			} 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>