[Calendar] Fixed non working hours, added blockers to teams

app/src/plugins/tm@dashboard/_components/z-timeline.vue

@@ -79,7 +79,7 @@
 							<div class="event-initials d-flex justify-center align-center">
 								<small>{{ event.initials }}</small>
 							</div>
-							<small class="event-initials-date">{{ event.date.toLocaleDateString('sk-SK') }}</small>
+							<small class="event-initials-date">{{ event.date?.toLocaleDateString('sk-SK') }}</small>
 						</div>
 					</div>
 

app/src/plugins/tm@dashboard/tasks/_utils/timeline.utils.ts

@@ -99,11 +99,13 @@ export default {
 	generateTimelineNonWorkingHours(date, employee) {
 		const events = []
 
+		const { start: dayStart, end: dayEnd } = this._getDayStartEnd(date)
+
 		for (let i = 0; i < 7; i++) {
 			events.push({
 				title: "Non working hours",
-				start: setMinutes(setHours(date, 0), 0),
-				end: setMinutes(setHours(date, employee.work_start), 0),
+				start: dayStart,
+				end: this._setMinutesToDate(employee.work_start, date),
 				type: 'non-working-hours',
 				split: i + 1,
 				draggable: false
@@ -111,14 +113,16 @@ export default {
 
 			events.push({
 				title: "Non working hours",
-				start: setMinutes(setHours(date, employee.work_end), 0),
-				end: setMinutes(setHours(date, 23), 59),
+				start: this._setMinutesToDate(employee.work_end, date),
+				end: dayEnd,
 				type: 'non-working-hours',
 				split: i + 1,
 				draggable: false
 			})
 		}
 
+		console.log(events)
+
 		return events
 	},
 
@@ -130,5 +134,18 @@ export default {
 		let diff =(date1.getTime() - date2.getTime()) / 1000;
 		diff /= (60 * 60)
 		return Math.abs(Math.round(diff))
+	},
+
+	_getDayStartEnd(date) {
+		return {
+			start: this._setMinutesToDate(0, date),
+			end: this._setMinutesToDate(1439, date)
+		}
+	},
+
+	_setMinutesToDate(minutes, date) {
+		const newDate = new Date(date)
+		newDate.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0)
+		return newDate
 	}
 }

app/src/plugins/tm@dashboard/tasks/tasks.vue

@@ -88,11 +88,11 @@ export default {
 			this.onFilterChanged(this.filter)
 		})
 
-		this.$events.on('on-blocker-edited', () => {
+		this.$events.on('on-subtask-deleted', () => {
 			this.onFilterChanged(this.filter)
 		})
 
-		this.$events.on('on-subtask-deleted', () => {
+		this.$events.on('on-blocker-edited', () => {
 			this.onFilterChanged(this.filter)
 		})
 
@@ -104,6 +104,8 @@ export default {
 	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: {

app/src/plugins/tm@dashboard/teams/_mixins/TeamsCalendar.mixin.ts

@@ -0,0 +1,162 @@
+import { setHours, setMinutes } from 'date-fns'
+import moment 					from 'moment'
+import timelineUtils 			from '@/plugins/tm@dashboard/tasks/_utils/timeline.utils'
+
+
+export default {
+	computed: {
+		calendarData() {
+			if (!this.subtasks || !this.blockers)
+				return
+
+			return {
+				unscheduledTime: 333,
+				tasks: [...this._generateNonWorking(), ...this._generateTasks(), ...this._generateBlockers()]
+			}
+		},
+
+		splitDays() {
+			const days = []
+
+			this.filter.team.employees.forEach((employee, index) => {
+				let workingHours = 0
+
+				this.calendarData.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
+		},
+	},
+
+	methods: {
+		_generateNonWorking() {
+			const nonWorkingHours 	 = []
+			const date 				 = new Date(this.filter.start)
+			let earliestStartHour 	 = null
+			this.calendarConfig.date = date
+
+			const { start: dayStart, end: dayEnd } = this._getDayStartEnd()
+
+			this.filter.team.employees.forEach((employee, index) => {
+				if (!earliestStartHour || employee.work_start < earliestStartHour)
+					earliestStartHour = employee.work_start
+
+
+				nonWorkingHours.push({
+					title: "Non working hours",
+					start: dayStart,
+					end: this._setMinutesToDate(employee.work_start),
+					split: index + 1,
+					type: 'non-working-hours',
+					draggable: false
+				})
+
+				nonWorkingHours.push({
+					title: "Non working hours",
+					start: this._setMinutesToDate(employee.work_end),
+					end: dayEnd,
+					split: index + 1,
+					type: 'non-working-hours',
+					draggable: false
+				})
+			})
+
+			this.calendarConfig.scrollHour = earliestStartHour - 1
+			return nonWorkingHours
+		},
+
+		_generateTasks() {
+			const tasks = []
+			const calendarDate 	= moment(this.filter.start).format('DD-MM-YYYY')
+
+			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
+		},
+
+		_generateBlockers() {
+			const blockers = []
+
+			this.blockers.forEach(blocker => {
+				let split 	 = null
+				let employee = null
+
+				this.filter.team.employees.forEach((e, index) => {
+					if (e.id == blocker.employee?.id) {
+						split = index + 1
+						employee = e
+					}
+				})
+
+				blockers.push({
+					blocker,
+					split,
+					start: new Date(blocker.start),
+					end: new Date(blocker.end),
+					type: 'blocker',
+					initials: `${employee?.name[0]}${employee?.surname[0]}`,
+					color: '#B00020',
+					draggable: false,
+					isWeekend: moment(blocker.start).day() % 6 == 0,
+				})
+			})
+
+			return blockers
+		},
+
+		_getDayStartEnd() {
+			return {
+				start: this._setMinutesToDate(0),
+				end: this._setMinutesToDate(1439)
+			}
+		},
+
+		_setMinutesToDate(minutes, date = new Date(this.filter.start)) {
+			date.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0)
+			return date
+		}
+	}
+}

app/src/plugins/tm@dashboard/teams/teams.vue

@@ -1,20 +1,20 @@
 <template>
 	<div>
-		<A-team-filter v-if="$store.getters['tm/isInitialized']"  :unscheduledTime="timelineData?.unscheduledTime || 0" @filter-changed="onFilterChanged" />
+		<A-team-filter v-if="$store.getters['tm/isInitialized']"  :unscheduledTime="calendarData?.unscheduledTime || 0" @filter-changed="onFilterChanged" />
 		
-		<Z-timeline v-if="timelineData" :calData="timelineData" :calConfig="config" :splits="splitDays" />
+		<Z-timeline v-if="calendarData" :cal-data="calendarData" :cal-config="calendarConfig" :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'
+import TeamsCalendar from './_mixins/TeamsCalendar.mixin' 
 
 export default {
+	mixins: [TeamsCalendar],
+
 	components: {
 		ATeamFilter,
 		ZTimeline,
@@ -24,48 +24,14 @@ export default {
 		return {
 			filter: null,
 			subtasks: null,
-			config: {
+			blockers: null,
+			calendarConfig: {
 				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
-
-			return {
-				unscheduledTime: 333,
-				tasks: [...this._generateNonWorking(), ...this._generateTasks()]
-			}
-		}
-	},
-
 	mounted() {
 		this.$events.on('on-subtask-edited', () => {
 			this.onFilterChanged(this.filter)
@@ -74,91 +40,24 @@ export default {
 		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: {
-		_generateTasks() {
-			const tasks = []
-			const calendarDate 	= moment(this.filter.start).format('DD-MM-YYYY')
-
-			this.subtasks.forEach(subtask => {
-				// TODO Implement blockers
-				if (subtask.type == 'blocker') return
-
-				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,
-					type: 'non-working-hours',
-					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,
-					type: 'non-working-hours',
-					draggable: false
-				})
-			})
-
-			this.config.scrollHour = earliestStartHour - 1
-			return tasks
-		},
-
 		async onFilterChanged(filter) {
 			this.filter = filter
 
@@ -172,7 +71,8 @@ export default {
 
 			try {
 				const { subtasks, blockers } 	= await this.$axios.get_auth(`v1/subtasks?${queryParameters}`)
-				this.subtasks					= [...subtasks, ...blockers.map(blocker => ({...blocker, type: 'blocker'}))]
+				this.subtasks = subtasks
+				this.blockers = blockers
 			} catch (error) {
 				this.$toast.error('Nepodarilo sa nacitat data!')
 			}