From 2c51813db44a185849d596f0e6037b0c40b74140 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Kalu=C5=BEa?= <kaluza.filip16@gmail.com>
Date: Tue, 13 Dec 2022 16:00:15 +0100
Subject: [PATCH] [timeline] refactor

---
 app/public/mock/v1/overview/tasks.GET.json    |   2 +-
 app/src/plugins/app@vendor/vue-cal/event.vue  |   1 +
 .../tasks/_components/z-timeline.vue          | 253 ++++++++++--------
 3 files changed, 143 insertions(+), 113 deletions(-)

diff --git a/app/public/mock/v1/overview/tasks.GET.json b/app/public/mock/v1/overview/tasks.GET.json
index 68e0988..c9d8393 100644
--- a/app/public/mock/v1/overview/tasks.GET.json
+++ b/app/public/mock/v1/overview/tasks.GET.json
@@ -51,7 +51,7 @@
 				"task_id": 2,
 				"starts_at": "2022-12-12T08:30:00+00:00",
 				"ends_at": "2022-12-12T09:00:00+00:00",
-				"title": "Kratky 30min asdk jasdbhj akhsdh askbsd abjksdk bjas",
+				"title": "Kratky 30min Lorem ipsum dolor sit amet, consectetur adipiscing e",
 				"project_code": "CO-2201",
 				"master_task_color": "#f27e57"
 			},
diff --git a/app/src/plugins/app@vendor/vue-cal/event.vue b/app/src/plugins/app@vendor/vue-cal/event.vue
index 15ec18d..8b3bc71 100644
--- a/app/src/plugins/app@vendor/vue-cal/event.vue
+++ b/app/src/plugins/app@vendor/vue-cal/event.vue
@@ -2,6 +2,7 @@
 .vuecal__event(
   :class="eventClasses"
   :style="eventStyles"
+  :eventId="`event-id-${event.id}`"
   tabindex="0"
   @focus="focusEvent"
   @keypress.enter.stop="onEnterKeypress"
diff --git a/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue b/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue
index 2fa8467..0a660c5 100644
--- a/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue
+++ b/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue
@@ -13,8 +13,8 @@
 			:unscheduledTime="calData.unscheduled_times"
 			:overlaps-per-time-step="false"
 			:showTimeInCells="false"
-			:time-cell-height="70"
-			:snap-to-time="5"
+			:time-cell-height="100"
+			:snap-to-time="15"
 			:min-cell-width="300"
 			@ready="onReady()"
 			@view-change="weekChanged"
@@ -48,15 +48,15 @@
 			</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) <= 12600000, 'mini-event' : getEventLenght(event) <= 7200000, 'micro-event' : getEventLenght(event) <= 3600000}">
-					<div>
+				<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 class="event-content">
 						<small v-if="(event.project_code && !event.is_blocker)" class="project-code">{{ event.project_code }}</small>
 						<h3>{{ event.title }}</h3>
 						<div class="d-flex align-center event-details event-initials-wrapper">
 							<div class="event-initials d-flex justify-center align-center">
 								<small>{{ getUserInitials(event) }}</small>
 							</div>
-							<small>{{ event.start.toLocaleDateString('sk-SK') }}</small>
+							<small class="event-initials-date">{{ event.start.toLocaleDateString('sk-SK') }}</small>
 						</div>
 					</div>
 
@@ -206,20 +206,34 @@ export default {
 				&::-webkit-scrollbar
 					display: none
 
-			.vuecal__body
-				-ms-overflow-style: none
-				scrollbar-width: none
-				&::-webkit-scrollbar
-					display: none
+				&.week-view
+				border-left: 1px solid rgba(0, 0, 0, .1)
+				padding-left: 20px
 
-			.vuecal__now-line
-				display: none !important
+			.vuecal__flex
+				flex-wrap: nowrap !important
 
-			.weekday-label
-				justify-content: start !important
-				font-size: 24px
-				font-weight: 700
 
+			// TIME COLUMN
+			.vuecal__time-column
+				width: 150px
+				box-shadow: none !important
+
+				.time-column-line
+					width: 40px
+					height: 0
+					border: 1px solid rgba(33, 33, 33, 0.08)
+					margin-left: 10px
+
+			@media (max-width: 450px)
+				.vuecal__time-column
+					width: 70px
+
+					.time-column-line
+						width: 10px
+
+
+			// HEADING 
 			.vuecal__weekdays-headings,
 			.vuecal__cell:before
 				border: none
@@ -229,6 +243,11 @@ export default {
 				min-height: 100%
 				padding-right: 20px
 
+				.weekday-label
+					justify-content: start !important
+					font-size: 24px
+					font-weight: 700
+
 				.unscheduled-time
 					background: rgba(0, 0, 0, 0.04)
 					border-radius: 24px
@@ -251,125 +270,135 @@ export default {
 							color: white
 
 
-			.vuecal__cells.week-view
-				border-left: 1px solid rgba(0, 0, 0, .1)
-				padding-left: 20px
+			// BODY
+			.vuecal__body
+				-ms-overflow-style: none
+				scrollbar-width: none
+				&::-webkit-scrollbar
+					display: none
 
-			.vuecal__time-column
-				width: 150px
-				box-shadow: none !important
+				.vuecal__now-line
+					display: none !important
 
-				.time-column-line
-					width: 40px
-					height: 0
-					border: 1px solid rgba(33, 33, 33, 0.08)
-					margin-left: 10px
+				.vuecal__cell
+					padding: 10px 20px 10px 0px
 
-			@media (max-width: 450px)
-				.vuecal__time-column
-					width: 70px
+				.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
+				.vuecal__cell--current:not(.vuecal__cell--today),
+				.vuecal__cell--today,
+				.vuecal__cell--highlighted,
+				.vuecal__cell--selected
+					background-color: white
 
-					.time-column-line
-						width: 10px
+				// EVENT
+				.vuecal__event
+					border-radius: 16px
+					padding: 20px 10px
+					text-align: left
+					background: rgba(248, 248, 248, 1)
+					min-height: 40px
+					transition: min-height .4s, height .4s, box-shadow .4s
 
-			.vuecal__flex
-				flex-wrap: nowrap !important
+					&.vuecal__event--focus
+						z-index: 100 !important
+						min-height: 250px !important
 
-			.vuecal__cell
-				padding: 10px 20px 10px 0px
+					&:not(.vuecal__event--focus)
+						&:has(.short-event)
+							padding: 10px !important
 
-			.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
-			.vuecal__cell--current:not(.vuecal__cell--today),
-			.vuecal__cell--today
-				background-color: white
+						&:has(.micro-event)
+							padding: 5px 10px !important
 
-			.vuecal__event
-				border-radius: 16px
-				padding: 20px 10px
-				text-align: left
-				background: rgba(248, 248, 248, 1)
-				min-height: 35px
+						.short-event
+							.project-code
+								display: none !important
 
-				&:has(.mini-event)
-					padding: 10px !important
+							h3
+								font-size: 16px !important
 
-				&.vuecal__event--focus
-					z-index: 100 !important
-					min-height: 300px !important
+						.mini-event
+							.event-content
+								display: flex
+								align-items: center
+								flex-wrap: nowrap
+								justify-content: space-between
+								width: 100%
 
-				&:not(.vuecal__event--focus)
-					.short-event
-						.project-code
-							display: none !important
+							.event-initials-wrapper
+								margin-bottom: 0
+								.event-initials
+									margin-right: 0 
 
-						h3
-							font-size: 16px !important
+							h3
+								font-size: 14px !important
+								text-overflow: ellipsis
+								width: calc( 100% - 35px )
+								white-space: nowrap
+								overflow: hidden
+								margin: 0
+							
+							.event-initials-date
+								display: none !important
 
-					.mini-event
+						.micro-event
 
-						h3
-							font-size: 14px !important
-					
-						.event-initials-wrapper
-							display: none !important
+							.event-footer
+								display: none !important
+
+					&.event-blocker
+						background: #B00020 !important
+
+						h3,
+						.event-details *
+							color: white !important
+
+						.event-details .event-initials
+							border: 1px solid white
 
-					.micro-event
 						.event-footer
-							display: none !important
+							border-top: 1px solid rgba(255, 255, 255, 0.19)
 
-				.project-code
-					margin: 0 0 20px
-					display: block
+					.project-code
+						margin: 0 0 20px
+						display: block
 
-				h3
-					font-size: 18px
-					font-weight: 400
-					color: Black
-					margin: 0 0 10px
-
-				small
-					color: black
-
-				.event-initials-wrapper
-					margin-bottom: 20px
-
-				.event-initials
-					height: 30px
-					width: 30px
-					border: 1px solid black
-					border-radius: 50%
-					padding: 5px
-					margin-right: 7px
+					h3
+						font-size: 18px
+						font-weight: 400
+						color: Black
+						margin: 0 0 10px
+						max-height: 100%
 
 					small
-						font-size: 11px
+						color: black
 
-				.event-footer
-					padding-top: 15px
-					border-top: 1px solid rgba(33, 33, 33, 0.08)
+					.event-initials-wrapper
+						margin-bottom: 20px
 
-					.event-footer-button
-						box-shadow: none !important
-						padding: 9px !important
-						min-height: fit-content
-						height: fit-content
-						min-width: fit-content
-						width: fit-content
+					.event-initials
+						height: 30px
+						width: 30px
+						border: 1px solid black
+						border-radius: 50%
+						padding: 5px
+						margin-right: 7px
 
-						img
-							width: 18px
-
-				// &:hover,
-				&.event-blocker
-					background: #B00020 !important
-
-					h3,
-					.event-details *
-						color: white !important
-
-					.event-details .event-initials
-						border: 1px solid white
+						small
+							font-size: 11px
 
 					.event-footer
-						border-top: 1px solid rgba(255, 255, 255, 0.19)
+						padding-top: 15px
+						border-top: 1px solid rgba(33, 33, 33, 0.08)
+
+						.event-footer-button
+							box-shadow: none !important
+							padding: 9px !important
+							min-height: fit-content
+							height: fit-content
+							min-width: fit-content
+							width: fit-content
+
+							img
+								width: 18px
 </style>