[teams overview] setup, tahanie dat a ich formatovanie...

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

@@ -25,10 +25,13 @@
 		>
 			<template v-slot:split-label="{ split }">
 				<div class="w-100 h-100 d-flex flex-column">
-					<span class="d-flex align-center">
+					<span v-if="split.date" class="d-flex align-center">
 						<img v-if="getHeadingDate(split.date) == 'Dnes'" :src="require('./_img/home-icon.svg')" class="mr-2">
 						<p class="weekday-label">{{ getHeadingDate(split.date) }}</p>
 					</span>
+					<span v-else class="d-flex align-center">
+						<p class="weekday-label">{{ split.firstName }}</p>
+					</span>
 
 					<div v-if="split.unscheduledTime && split.initials" class="unscheduled-time d-flex align-center text-left">
 						<div class="unscheduled-time-initials d-flex align-center justify-center me-4">
@@ -146,7 +149,6 @@ export default {
 
 			this.$nextTick(() => {
 				this.scrollToYesterday()
-				// this._scrollToDefaultTime()
 			})
 		},
 
@@ -156,20 +158,9 @@ export default {
 		},
 
 		onReady() {
-			this.scrollToYesterday()
 			this.correctMargins()
 		},
 
-		scrollToYesterday() {
-
-			return
-			// if (!document.getElementsByClassName('yesterday-cell').length || !document.getElementsByClassName('today-cell').length) return
-
-			// const scrollContainer = document.getElementsByClassName('vuecal__scrollable-body')[0]
-			// const yesterdayCell = document.getElementsByClassName('yesterday-cell')[0]
-			// scrollContainer.scrollLeft = yesterdayCell.offsetLeft - scrollContainer.offsetLeft - 20
-		},
-
 		correctMargins() {
 			if (!document.getElementsByClassName('vuecal__split-days-headers').length) return
 			const heightOfDayHeader = document.getElementsByClassName('vuecal__split-days-headers')[0].clientHeight
@@ -215,17 +206,6 @@ export default {
 			this.focusedEventId = event.task_id
 			// console.log(`Focused: ${event.task_id}`)
 		},
-
-		_scrollToDefaultTime() {
-			const calendarContainer = document.querySelector('.main-content')
-			const defaultTimeToScrollTo = document.querySelectorAll('.vuecal__time-cell')[7]
-			const toolbarHeight = document.querySelector('.v-toolbar').getBoundingClientRect().height
-			const subheaderHeight = document.querySelector('.subheader').getBoundingClientRect().height
-
-			calendarContainer.scrollTo({
-				top: defaultTimeToScrollTo.getBoundingClientRect().top - toolbarHeight - subheaderHeight
-			})
-		},
 	}
 }
 </script>
@@ -288,6 +268,7 @@ export default {
 				z-index: 999
 				background: white
 				padding-bottom: 15px
+				width: calc( 100% - 20px )
 
 			.vuecal__cell-split
 				margin-right: 20px

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

@@ -51,7 +51,6 @@ export default {
 				this.formatData(week.firstDay)
 				this.generateSplits(week.firstDay)
 				this.generateNonWorkingHours(week.firstDay)
-				this.assignTasksToSplits()
 			} catch(error) {
 				this.timelineData = {}
 				console.error(error)
@@ -125,10 +124,6 @@ export default {
 			this.timelineData.tasks.push(...nonWorkingHours)
 		},
 
-		assignTasksToSplits() {
-			console.log('asasasas')
-		},
-
 		triggerToast(message) {
 			this.errorToastMessage = message
 			this.errorToast = true

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

@@ -3,12 +3,12 @@
 		<A-team-filter @dayChanged="getDayData" />
 
 		<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
-			<Z-timeline />
+			<Z-timeline :calData="timelineData" :calConfig="config" :splits="splitDays" @eventMoved="onEventMoved" />
 		</W-loadable>
 
-		<v-snackbar 
-			v-model="errorToast" 
-			:timeout="2000" 
+		<v-snackbar
+			v-model="errorToast"
+			:timeout="2000"
 			color="red"
 			:rounded="true"
 		>
@@ -21,6 +21,8 @@
 import ATeamFilter from './_components/a-team-filter.vue'
 import ZTimeline from '../tasks/_components/z-timeline.vue'
 
+import { setHours, setMinutes, setSeconds } from 'date-fns'
+
 export default {
 	components: {
 		ATeamFilter,
@@ -29,13 +31,119 @@ export default {
 
 	data() {
 		return {
-			timelineData: {kokot: "kokot"}
+			timelineData: null,
+			formatedTasks: {tasks: []},
+			errorToast: false,
+			errorToastMessage: "Nepodarilo sa nacitat data!",
+			dataLoaded: false,
+			splitDays: [],
+			config: {
+				date: new Date(),
+				scrollHour: 7,
+			}
 		}
 	},
 
 	methods: {
-		getDayData(date) {
-			console.log(date)
+		async getDayData(date) {
+			this.config.date = date
+			try {
+				this.timelineData = await this.$axios.get_auth_data('v1/overview/teams')
+				this.generateSplits()
+				this.formatData()
+				this.generateNonWorkingHours(date)
+			} catch(error) {
+				this.timelineData = {}
+				console.error(error)
+				this.triggerToast("Nepodarilo sa nacitat data!")
+			}
+		},
+
+		generateSplits() {
+			this.splitDays = []
+			for (let i = 0; i < this.timelineData.length; i++) {
+				this.timelineData[i].splitId = i + 1
+				this.splitDays.push({
+					id: i + 1,
+					firstName: this.timelineData[i].name,
+					name: this.timelineData[i].name + " " + this.timelineData[i].surname,
+					initials: this.timelineData[i].name.charAt(0).toUpperCase() + this.timelineData[i].surname.charAt(0).toUpperCase(),
+					unscheduledTime: Math.floor(this.timelineData[i].unscheduled_time / 60) + "," + String(this.timelineData[i].unscheduled_time % 60)[0]
+				})
+			}
+		},
+
+		formatData() {
+			this.timelineData.tasks = []
+			
+			// format events
+			this.timelineData.forEach(user => {
+				user.tasks.forEach(event => {
+					event.name = user.name
+					event.surname = user.surname
+
+					event.start = new Date(event.starts_at)
+					event.end = new Date(event.ends_at)
+					event.split = user.splitId
+				})
+				this.timelineData.tasks.push(...user.tasks)
+			})
+		},
+
+		generateNonWorkingHours(date) {
+			let nonWorkingHours = []
+			let workStartHour = 23
+
+			this.timelineData.forEach(user => {
+				const start1 = { hour: 0, minutes: 0, seconds: 0}
+				const end1 = { hour: Number(user.work_hours_from.split(':')[0]), minutes: Number(user.work_hours_from.split(':')[1]) - 1, seconds: 0 }
+				const start2 = { hour: Number(user.work_hours_to.split(':')[0]), minutes: Number(user.work_hours_to.split(':')[1]) + 1, seconds: 0 }
+				const end2 = { hour: 23, minutes: 59, seconds: 59}
+
+				if (workStartHour > Number(user.work_hours_from.split(':')[0])) workStartHour = Number(user.work_hours_from.split(':')[0])
+
+				nonWorkingHours.push({
+					title: "Non working hours",
+					start: setSeconds(setMinutes(setHours(date, start1.hour), start1.minutes), start1.seconds),
+					end: setSeconds(setMinutes(setHours(date, end1.hour), end1.minutes), end1.seconds),
+					nonWorking: true,
+					split: user.splitId,
+					draggable: false
+				})
+				nonWorkingHours.push({
+					title: "Non working hours",
+					start: setSeconds(setMinutes(setHours(date, start2.hour), start2.minutes), start2.seconds),
+					end: setSeconds(setMinutes(setHours(date, end2.hour), end2.minutes), end2.seconds),
+					nonWorking: true,
+					split: user.splitId,
+					draggable: false
+				})
+			})
+
+			this.config.scrollHour = workStartHour - 1
+			this.timelineData.tasks.push(...nonWorkingHours)
+		},
+
+		triggerToast(message) {
+			this.errorToastMessage = message
+			this.errorToast = true
+		},
+
+		async onEventMoved(event) {
+			console.log("drag", event)
+			// try {
+			// 	const newStartDate = addDays(event.event.start, differenceInCalendarDays(this.splitDays.filter((split) => {return split.id == event.newSplit})[0].date, event.event.start))
+			// 	const newEndDate = addDays(event.event.end, differenceInCalendarDays( newStartDate, event.event.start))
+			// 	await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: newStartDate, end: newEndDate})
+			// } catch(error) {
+			// 	this.triggerToast("Nepodarilo sa presunut ulohu!")
+			// 	this.timelineData.tasks.filter(e => {
+			// 		if (e.id == event.event.id) {
+			// 			e.start = new Date(event.originalEvent.start)
+			// 			e.end = new Date(event.originalEvent.end)
+			// 		}
+			// 	})
+			// }
 		}
 	}
 }
@@ -50,4 +158,5 @@ export default {
 @media (max-width: 1312px)
 	.w-loadable
 		height: calc( 100% - 202px )
+
 </style>