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

<template>
	<div>
		<A-team-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 ATeamFilter from './_components/a-team-filter.vue'
import ZTimeline from '@/plugins/tm@dashboard/_components/z-timeline.vue'

import { setHours, setMinutes, addDays } from 'date-fns'
import moment from 'moment'
import timelineUtils from '../tasks/_utils/timeline.utils'

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

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

	computed: {
		splitDays() {
			const days = []

			this.filter.team.employees.forEach((employee, index) => {
				let workingHours = 0

				this.timelineData.tasks.forEach(task => {
					if (task?.subtask?.employee_id == employee.id)
						workingHours += timelineUtils._getDifferenceInHours(task.end, task.start)
				})

				days.push({
					id: index + 1,
					name: employee.name,
					fullname: `${employee.name} ${employee.surname}`,
					initials: employee.name.charAt(0).toUpperCase() + employee.surname.charAt(0).toUpperCase(),
					unscheduledTime: workingHours
				})
			})

			return days
		},

		timelineData() {
			if (!this.subtasks)
				return 

			// let unscheduledTime = 0
			// const tasks = [...this._generateNonWorking(), ...this._generateTasks()]

			// tasks.forEach(task => {
			// 	if (!task.nonWorking)
			// 		workingHours += timelineUtils._getDifferenceInHours(task.end, task.start)
			// })

			return {
				unscheduledTime: 333,
				tasks: [...this._generateNonWorking(), ...this._generateTasks()]
			}
		}
	},

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

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

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

	methods: {
		_generateTasks() {
			const tasks = []
			const calendarDate 	= moment(this.filter.start).format('DD-MM-YYYY')
			// const diffInDays 	= differenceInCalendarDays(date, new Date(timeblock.start))

			this.subtasks.forEach(subtask => {
				let split 	 = null
				let employee = null

				this.filter.team.employees.forEach((e, index) => {
					if (e.id == subtask.employee_id) {
						split = index + 1
						employee = e
					}
				})

				subtask.timeblocks.forEach(timeblock => {
					const formattedDate = moment(timeblock.start).format('DD-MM-YYYY')

					if (formattedDate == calendarDate) {
						tasks.push({
							id: subtask.id,
							start: new Date(timeblock.start),
							end: new Date(timeblock.end),
							master_task: subtask.master_task,
							name: employee?.name,
							surname: employee?.surname,
							// date: new Date(timeblock.start),
							isWeekend: moment(timeblock.start).day() % 6 == 0,
							initials: employee?.name?.charAt(0)?.toUpperCase() + employee?.surname?.charAt(0)?.toUpperCase(),
							split: split,
							project_code: subtask.project_code,
							subtask: subtask,
							_timeblock_id: timeblock.id
						})
					}
				})
			})

			return tasks
		},

		_generateNonWorking() {
			const tasks 		  	= []
			const date 				= new Date(this.filter.start)
			let earliestStartHour 	= null
			this.config.date		= date

			this.filter.team.employees.forEach((employee, index) => {
				if (!earliestStartHour || employee.work_start < earliestStartHour)
					earliestStartHour = employee.work_start

				tasks.push({
					title: "Non working hours",
					start: setMinutes(setHours(date, 0), 0),
					end: setMinutes(setHours(date, employee.work_start), 0),
					split: index + 1,
					nonWorking: true,
					draggable: false
				})

				tasks.push({
					title: "Non working hours",
					start: setMinutes(setHours(date, employee.work_end), 0),
					end: setMinutes(setHours(date, 23), 59),
					split: index + 1,
					nonWorking: true,
					draggable: false
				})
			})

			this.config.scrollHour = earliestStartHour - 1
			return tasks
		},

		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.team) 		urlQueryObject.team_id 		= filter.team.id

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

			try {
				const { subtasks } 		= await this.$axios.get_auth(`v1/subtasks?${queryParameters}`)
				this.subtasks			= subtasks
			} 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>