[timeline] dynamicke tyzdne, non-working hours

app/src/plugins/tm@dashboard/tasks/_components/a-tasks-filter.vue

@@ -47,8 +47,8 @@ export default {
 
 	methods: {
 		getWeek() {
-			this.firstDay = addDays(startOfWeek(this.date), 1)
-			this.lastDay = addDays(endOfWeek(this.date), 1)
+			this.firstDay = subDays(this.date, 1)
+			this.lastDay = addDays(this.date, 5)
 
 			this.$emit('weekChange', {firstDay: this.firstDay, lastDay: this.lastDay})
 			this.selectedDate = String(this.firstDay.toLocaleDateString('sk-SK') + ' - ' + this.lastDay.toLocaleDateString('sk-SK'))

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

@@ -3,7 +3,8 @@
 		<Vue-cal
 			:hide-view-selector="true"
 			:hide-title-bar="true"
-			:disable-views="['years', 'year', 'month', 'day']"
+			:disable-views="['years', 'year', 'month', 'week']"
+			active-view="day"
 			:selected-date="calConfig.date"
 			:onEventClick="taskClicked"
 			:editable-events="vueCalConfig.editing"
@@ -12,28 +13,30 @@
 			:overlaps-per-time-step="false"
 			:showTimeInCells="false"
 			:time-cell-height="timeCellHeight"
-			:snap-to-time="8 * 60"
+			:snap-to-time="15"
 			:scroll-to-hour="calConfig.scrollHour"
-			:min-cell-width="300"
+			:split-days="splits"
+			:sticky-split-labels="true"
+			:min-split-width="300"
 			@ready="onReady()"
 			@view-change="weekChanged"
 			@event-drop="eventMoved"
 			@event-focus="eventFocused"
 		>
-			<template v-slot:weekday-heading="{ heading }">
+			<template v-slot:split-label="{ split }">
 				<div class="w-100 h-100 d-flex flex-column">
 					<span class="d-flex align-center">
-						<img v-if="getHeadingDate(heading.date) == 'Dnes'" :src="require('./_img/home-icon.svg')" class="mr-2">
-						<p>{{ getHeadingDate(heading.date) }}</p>
+						<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>
 
-					<div v-if="heading.unscheduledTime && heading.initials" class="unscheduled-time d-flex align-center text-left">
+					<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">
-							<p>{{heading.initials}}</p>
+							<p>{{split.initials}}</p>
 						</div>
 						<div>
-							<p class="mb-0 mt-0 unscheduled-time-name">{{heading.name}}</p>
-							<h1 class="mb-0 mt-0">{{heading.unscheduledTime}} h</h1>
+							<p class="mb-0 mt-0 unscheduled-time-name">{{split.name}}</p>
+							<h1 class="mb-0 mt-0">{{split.unscheduledTime}} h</h1>
 						</div>
 					</div>
 				</div>
@@ -47,7 +50,7 @@
 			</template>
 
 			<template v-slot:event="{ event }">
-				<div class="event-wrapper w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 9000000, 'mini-event' : getEventLenght(event) <= 5400000, 'micro-event' : getEventLenght(event) <= 3600000}">
+				<div v-if="!event.nonWorking" class="w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 9000000, 'mini-event' : getEventLenght(event) <= 5400000, 'micro-event' : getEventLenght(event) <= 3600000}">
 					<div class="event-content">
 						<small v-if="(event.project_code && !event.is_blocker)" class="project-code">{{ event.project_code }}</small>
 						<h3>{{ event.title }}</h3>
@@ -55,7 +58,8 @@
 							<div class="event-initials d-flex justify-center align-center">
 								<small>{{ getUserInitials(event) }}</small>
 							</div>
-							<small class="event-initials-date">{{ event.start.toLocaleDateString('sk-SK') }}</small>
+							<!-- <small class="event-initials-date">{{ new Date(event.start_at).toLocaleDateString('sk-SK') }}</small> -->
+							<small class="event-initials-date">{{ event.start_at }}</small>
 						</div>
 					</div>
 
@@ -65,6 +69,13 @@
 						<v-btn rounded class="event-footer-button me-2" @click="this.showDeleteModal = {task: event}"><img :src="require('./_img/bin.svg')" alt=""></v-btn>
 					</div>
 				</div>
+
+				<div v-else class="non-working-event w-100 h-100 d-flex flex-column justify-center">
+					<div class="d-flex justify-center align-center">
+						<v-icon icon="mdi-cancel" color="black"></v-icon>
+						<h3 class="mb-0 ms-2">{{ event.title }}</h3>
+					</div>
+				</div>
 			</template>
 		</Vue-cal>
 
@@ -97,6 +108,13 @@ export default {
 			default() {
 				return {date: new Date(), scrollHour: 7}
 			}
+		},
+		splits: {
+			type: Array,
+			required: false,
+			default() {
+				return []
+			}
 		}
 	},
 
@@ -119,7 +137,7 @@ export default {
 	},
 
 	mounted() {
-		this._scrollToDefaultTime()	
+		console.log(this.calData.tasks)
 	},
 
 	methods: {
@@ -129,6 +147,7 @@ export default {
 
 			this.$nextTick(() => {
 				this.scrollToYesterday()
+				// this._scrollToDefaultTime()
 			})
 		},
 
@@ -143,15 +162,18 @@ export default {
 		},
 
 		scrollToYesterday() {
-			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
+			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() {
-			const heightOfDayHeader = document.getElementsByClassName('vuecal__heading')[0].clientHeight
+			if (!document.getElementsByClassName('vuecal__split-days-headers').length) return
+			const heightOfDayHeader = document.getElementsByClassName('vuecal__split-days-headers')[0].clientHeight
 			document.getElementsByClassName('vuecal__time-column')[0].style.marginTop = `${heightOfDayHeader}px`
 			document.getElementsByClassName('vuecal__cells-body')[0].style.marginTop = `${heightOfDayHeader}px`
 		},
@@ -191,7 +213,7 @@ export default {
 
 		eventFocused(event) {
 			this.focusedEventId = event.task_id
-			console.log(`Focused: ${event.task_id}`)
+			// console.log(`Focused: ${event.task_id}`)
 		},
 
 		_scrollToDefaultTime() {
@@ -215,7 +237,7 @@ export default {
 	.calendar-wrapper
 		width: 100%
 		height: 100%
-		// padding-top: 50px
+		// padding: 0 20px 0 0 
 
 		&:deep()
 			.vuecal__cells
@@ -224,7 +246,6 @@ export default {
 				&::-webkit-scrollbar
 					display: none
 
-				&.week-view
 				border-left: 1px solid rgba(0, 0, 0, .1)
 				padding-left: 20px
 
@@ -252,21 +273,26 @@ export default {
 
 
 			// HEADING
-			.vuecal__weekdays-headings,
+			// .vuecal__weekdays-headings,
 			.vuecal__cell:before
 				border: none
 
 			.vuecal__scrollable-body
 				position: relative
 
-			.vuecal__weekdays-headings
+			// .vuecal__weekdays-headings
+			.vuecal__split-days-headers
 				position: absolute
 				top: 0
 				left: 20px
 				z-index: 999
 				background: white
+				padding-bottom: 15px
 
-			.vuecal__heading
+			.vuecal__cell-split
+				margin-right: 20px
+
+			.day-split-header
 				height: fit-content
 				min-height: 100%
 				padding-right: 20px
@@ -308,8 +334,8 @@ export default {
 				.vuecal__now-line
 					display: none !important
 
-				.vuecal__cell
-					padding: 10px 20px 10px 0px
+				// .vuecal__cell
+				// 	padding: 10px 20px 10px 0px
 
 				.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
 				.vuecal__cell--current:not(.vuecal__cell--today),
@@ -319,6 +345,7 @@ export default {
 					background-color: white
 
 				// EVENT
+
 				.vuecal__event
 					border-radius: 16px
 					padding: 20px 10px
@@ -327,6 +354,10 @@ export default {
 					min-height: 40px
 					transition: min-height .4s, height .4s, box-shadow .4s, width .4s, left .4s
 
+					&:has(.non-working-event)
+						background: repeating-linear-gradient(135deg, rgba(215, 215, 215, 1), rgba(215, 215, 215, 1) 1px, rgba(224, 224, 224, 1) 1px, rgba(224, 224, 224, 1) 20px)
+						border: 1px solid rgba(215, 215, 215, 1)
+
 					&.vuecal__event--focus
 						z-index: 100 !important
 						min-height: 250px !important

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

@@ -3,7 +3,7 @@
 		<A-task-filter @weekChange="getWeekData" />
 
 		<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
-			<Z-timeline :calData="timelineData" :calConfig="config" @eventMoved="onEventMoved" />
+			<Z-timeline :calData="timelineData" :calConfig="config" :splits="splitDays" @eventMoved="onEventMoved" />
 		</W-loadable>
 
 		<v-snackbar
@@ -21,6 +21,8 @@
 import ATaskFilter from './_components/a-tasks-filter.vue'
 import ZTimeline from './_components/z-timeline.vue'
 
+import { addDays, setHours, setMinutes, setSeconds, differenceInCalendarDays } from 'date-fns'
+
 export default {
 	components: {
 		ATaskFilter,
@@ -33,6 +35,7 @@ export default {
 			errorToast: false,
 			errorToastMessage: "Nepodarilo sa nacitat data!",
 			dataLoaded: false,
+			splitDays: [],
 			config: {
 				date: new Date(),
 				scrollHour: 7,
@@ -45,7 +48,10 @@ export default {
 			this.config.date = week.firstDay
 			try {
 				this.timelineData = await this.$axios.get_auth_data('v1/overview/tasks')
-				this.formatData()
+				this.formatData(week.firstDay)
+				this.generateSplits(week.firstDay)
+				this.generateNonWorkingHours(week.firstDay)
+				this.assignTasksToSplits()
 			} catch(error) {
 				this.timelineData = {}
 				console.error(error)
@@ -53,15 +59,33 @@ export default {
 			}
 		},
 
-		formatData() {
+		generateSplits(date) {
+			this.splitDays = []
+			for (let i = 0; i < 7; i++) {
+				this.splitDays.push({
+					id: i + 1,
+					name: this.timelineData.name + " " + this.timelineData.surname,
+					initials: this.timelineData.name.charAt(0).toUpperCase() + this.timelineData.surname.charAt(0).toUpperCase(),
+					unscheduledTime: Math.floor(this.timelineData.unscheduled_times[i].time / 60) + "," + String(this.timelineData.unscheduled_times[i].time % 60)[0],
+					date: addDays(date, i)
+				})
+			}
+		},
+
+		formatData(date) {
 			// format events
 			this.timelineData.tasks.forEach(event => {
-				event.start = new Date(event.starts_at)
-				event.end = new Date(event.ends_at)
 				event.name = this.timelineData.name
 				event.surname = this.timelineData.surname
-				delete event.starts_at
-				delete event.ends_at
+
+				// convert all dates to one to show in day-splits
+				const startDate = new Date(event.starts_at)
+				const endDate = new Date(event.ends_at)
+				const diffInDays = differenceInCalendarDays(date, startDate)
+
+				event.start = addDays(startDate, diffInDays)
+				event.end = addDays(endDate, diffInDays)
+				event.split = Math.abs(diffInDays) + 1
 			})
 
 			this.timelineData.unscheduled_times.forEach(time => {
@@ -72,15 +96,48 @@ export default {
 			this.config.scrollHour = Number(this.timelineData.work_hours_from.split(':')[0]) - 1
 		},
 
+		generateNonWorkingHours(date) {
+			const nonWorkingHours = []
+			const start1 = { hour: 0, minutes: 0, seconds: 0}
+			const end1 = { hour: Number(this.timelineData.work_hours_from.split(':')[0]), minutes: Number(this.timelineData.work_hours_from.split(':')[1]) - 1, seconds: 0 }
+			const start2 = { hour: Number(this.timelineData.work_hours_to.split(':')[0]), minutes: Number(this.timelineData.work_hours_to.split(':')[1]) + 1, seconds: 0 }
+			const end2 = { hour: 23, minutes: 59, seconds: 59}
+
+			for (let i = 0; i < 7; i++) {
+				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: i + 1
+				})
+				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: i + 1
+				})
+			}
+
+			this.timelineData.tasks.push(...nonWorkingHours)
+		},
+
+		assignTasksToSplits() {
+			console.log('asasasas')
+		},
+
 		triggerToast(message) {
 			this.errorToastMessage = message
 			this.errorToast = true
 		},
 
 		async onEventMoved(event) {
-			console.log(`ID from dragStop: ${event.event.id}`)
+			console.log("drag", event)
 			// try {
-			// 	await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: event.event.start, end: event.event.end})
+			// 	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 => {

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

@@ -31,6 +31,12 @@ export default {
 		return {
 			timelineData: {kokot: "kokot"}
 		}
+	},
+
+	methods: {
+		getDayData(date) {
+			console.log(date)
+		}
 	}
 }
 </script>