[timeline] dynamicke tyzdne, non-working hours

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