From 1df98087dd993cfc5e88ddc83989e276027d414f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <matej.glasnak@blume.sk>
Date: Mon, 23 Jun 2025 01:25:59 +0200
Subject: [PATCH] refactor(timeline): streamline event display and improve
 layout consistency across components

---
 .../_components/a-timeline-event.vue          | 112 +++++++++---------
 .../tm@dashboard/_components/z-timeline.vue   |  43 ++++---
 app/src/plugins/tm@dashboard/tasks/tasks.vue  |   2 +
 .../teams/_mixins/TeamsCalendar.mixin.ts      |   1 +
 4 files changed, 84 insertions(+), 74 deletions(-)

diff --git a/app/src/plugins/tm@dashboard/_components/a-timeline-event.vue b/app/src/plugins/tm@dashboard/_components/a-timeline-event.vue
index a8eab3d..2ae991c 100644
--- a/app/src/plugins/tm@dashboard/_components/a-timeline-event.vue
+++ b/app/src/plugins/tm@dashboard/_components/a-timeline-event.vue
@@ -24,58 +24,54 @@
 				</template>
 			</div>
 
-			<div class="event__footer-wrapper" :style="{ backgroundColor: eventColor.backgroundColor }">
-				<div class="event__footer-wrapper__top">
-					<div class="d-flex align-center event-details event-initials-wrapper">
-						<div class="event-initials d-flex justify-center align-center" :style="{ borderColor: eventColor.color }">
-							<small class="text-inherit">{{ props.event.initials }}</small>
-						</div>
-						<small class="event-initials-date text-inherit">{{ props.event.date?.toLocaleDateString('sk-SK') }}</small>
-					</div>
-
-					<div v-if="['subtask'].includes(event.type)" class="d-flex align-center">
-						<v-icon icon="mdi-skull-outline" size="small" />
-						<small v-if="props.event?.subtask.deadline" class="ml-1">{{ deadline }}</small>
-						<v-tooltip v-else text="Deadline z Mastertasku" location="bottom">
-							<template v-slot:activator="{ props }">
-								<small class="cursor-pointer ml-1" v-if="!props.event?.subtask?.deadline" v-bind="props">{{ deadline }}*</small>
-							</template>
-						</v-tooltip>
-					</div>
-
-					<div v-if="['office365'].includes(event.type)" class="d-flex align-center mt-1">
-						<v-icon icon="mdi-pin-outline" size="small" />
-						<small v-if="props.event?.subtask.office365_location" :style="{ color: eventColor.color }" class="ml-1">{{ props.event?.subtask.office365_location }}</small>
-						<v-tooltip v-else text="Miesto" location="bottom">
-							<template v-slot:activator="{ props }">
-								<small class="cursor-pointer ml-1" :style="{ color: eventColor.color }" v-if="!props.event?.subtask?.office365_location" v-bind="props">{{ office365_location }}*</small>
-							</template>
-						</v-tooltip>
-					</div>
-				</div>
-
-				<div class="event__office-footer" v-if="isOfficeEvent">
-					<img :src="office365" alt="" />
-				</div>
-
-				<div class="event__footer d-flex">
-					<template v-if="isOfficeEvent">
-						<v-btn rounded class="event__footer__button me-2" @click.stop="emits('edit-task', props.event)"><img :src="eye" alt="" /></v-btn>
-					</template>
-
-					<template v-else-if="event.type == 'adhoc'">
-						<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('edit-blocker', props.event)"><img :src="pencil" alt="" /></v-btn>
-						<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('delete-blocker', props.event)"><img :src="bin" alt="" /></v-btn>
-					</template>
-
-					<template v-else-if="props.event.type == 'subtask'">
-						<v-btn rounded class="event__footer__button me-2" :class="{ completed: props.event.subtask?.is_finished }" @click.stop="emits('complete-task', props.event)"><img :src="checkmarkDouble" alt="" /></v-btn>
-						<v-btn rounded class="event__footer__button me-2" :class="{ completed: props.event._timeblock_is_finished }" @click.stop="emits('toggle-timeblock-is-finished', props.event)"><img :src="checkmark" alt="" /></v-btn>
-						<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('edit-task', props.event)"><img :src="eye" alt="" /></v-btn>
-						<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('delete-timeblock-in-task', props.event)"><img :src="bin" alt="" /></v-btn>
-					</template>
+			<div class="d-flex align-center event-details event-initials-wrapper">
+				<div class="event-initials d-flex justify-center align-center" :style="{ borderColor: eventColor.color }">
+					<small class="text-inherit">{{ props.event.initials }}</small>
 				</div>
+				<small class="event-initials-date text-inherit">{{ props.event.date?.toLocaleDateString('sk-SK') }}</small>
 			</div>
+
+			<div v-if="['subtask'].includes(event.type)" class="d-flex align-center">
+				<v-icon icon="mdi-skull-outline" size="small" />
+				<small v-if="props.event?.subtask.deadline" class="ml-1">{{ deadline }}</small>
+				<v-tooltip v-else text="Deadline z Mastertasku" location="bottom">
+					<template v-slot:activator="{ props }">
+						<small class="cursor-pointer ml-1" v-if="!props.event?.subtask?.deadline" v-bind="props">{{ deadline }}*</small>
+					</template>
+				</v-tooltip>
+			</div>
+
+			<div v-if="['office365'].includes(event.type)" class="d-flex align-center mt-1">
+				<v-icon icon="mdi-pin-outline" size="small" />
+				<small v-if="props.event?.subtask.office365_location" :style="{ color: eventColor.color }" class="ml-1">{{ props.event?.subtask.office365_location }}</small>
+				<!-- <v-tooltip v-else text="Miesto" location="bottom">
+					<template v-slot:activator="{ props }">
+						<small class="cursor-pointer ml-1" :style="{ color: eventColor.color }" v-if="!props.event?.subtask?.office365_location" v-bind="props">{{ office365_location }}*</small>
+					</template>
+				</v-tooltip> -->
+			</div>
+		</div>
+
+		<div class="event__office-footer" v-if="isOfficeEvent">
+			<img :src="office365" alt="" />
+		</div>
+
+		<div class="event__footer d-flex" :style="{ backgroundColor: eventColor.backgroundColor }">
+			<template v-if="isOfficeEvent">
+				<v-btn rounded class="event__footer__button me-2" @click.stop="emits('edit-task', props.event)"><img :src="eye" alt="" /></v-btn>
+			</template>
+
+			<template v-else-if="event.type == 'adhoc'">
+				<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('edit-blocker', props.event)"><img :src="pencil" alt="" /></v-btn>
+				<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('delete-blocker', props.event)"><img :src="bin" alt="" /></v-btn>
+			</template>
+
+			<template v-else-if="props.event.type == 'subtask'">
+				<v-btn rounded class="event__footer__button me-2" :class="{ completed: props.event.subtask?.is_finished }" @click.stop="emits('complete-task', props.event)"><img :src="checkmarkDouble" alt="" /></v-btn>
+				<v-btn rounded class="event__footer__button me-2" :class="{ completed: props.event._timeblock_is_finished }" @click.stop="emits('toggle-timeblock-is-finished', props.event)"><img :src="checkmark" alt="" /></v-btn>
+				<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('edit-task', props.event)"><img :src="eye" alt="" /></v-btn>
+				<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('delete-timeblock-in-task', props.event)"><img :src="bin" alt="" /></v-btn>
+			</template>
 		</div>
 	</div>
 </template>
@@ -160,15 +156,15 @@ const isOfficeEvent: ComputedRef<boolean> = computed(() => {
 		padding: 20px 10px
 		width: 100%
 
-	&__footer-wrapper
-		position: absolute
-		bottom: 0
-		left: 0
-		right: 0
-		border-top: 1px solid rgba(33, 33, 33, 0.08)
+	// &__footer-wrapper
+	// 	position: absolute
+	// 	bottom: 0
+	// 	left: 0
+	// 	right: 0
+	// 	border-top: 1px solid rgba(33, 33, 33, 0.08)
 
-		&__top
-			padding: 10px 10px 0 10px
+	// 	&__top
+	// 		padding: 10px 10px 0 10px
 
 	&__footer
 		flex-flow: row wrap
diff --git a/app/src/plugins/tm@dashboard/_components/z-timeline.vue b/app/src/plugins/tm@dashboard/_components/z-timeline.vue
index 311f0b8..062648e 100644
--- a/app/src/plugins/tm@dashboard/_components/z-timeline.vue
+++ b/app/src/plugins/tm@dashboard/_components/z-timeline.vue
@@ -24,7 +24,10 @@
       @event-focus="eventFocused"
     >
       <template v-slot:split-label="{ split }">
-        <div class="w-[120px] h-100 d-flex flex-column">
+        <div
+          class="h-100 d-flex flex-column"
+          style="width: 100%; margin-right: 10px; margin-left: 10px"
+        >
           <span v-if="split.date" class="d-flex align-center">
             <img
               v-if="split.isHomeoffice"
@@ -52,14 +55,15 @@
             class="unscheduled-time d-flex align-center text-left"
             :class="{ 'vuecal__cell-split--weekend': split.isWeekend }"
           >
-            <div
-              class="unscheduled-time-initials d-flex align-center justify-center"
-            >
+            <div class="unscheduled-time-initials">
               <p>{{ split.initials }}</p>
             </div>
             <div class="text-wrap me-4">
               <p class="mb-0 mt-0 unscheduled-time-name">
-                {{ split.fullname }}
+                {{ split.name }}
+              </p>
+              <p class="mb-0 mt-0 unscheduled-time-name">
+                {{ split.surname }}
               </p>
               <h1 class="mb-0 mt-0">{{ split.unscheduledTime }} h</h1>
               <h1 class="mb-0 mt-0" style="font-weight: 400">
@@ -454,12 +458,13 @@ export default {
 				width: calc( 100% - 20px )
 
 			.vuecal__cell-split
-				margin-right: 20px
+				margin-right: 10px
+				margin-left: 10px
 
 			.day-split-header
 				height: fit-content
 				min-height: 100%
-				padding-right: 20px
+				// margin-left: 10px
 
 				.weekday-label
 					justify-content: start !important
@@ -477,6 +482,15 @@ export default {
 					border-radius: 24px
 					padding: 10px 10px
 					margin-top: 10px
+					container-type: inline-size
+					width: 100%
+
+					@container (max-width: 120px)
+						.unscheduled-time-name
+							width: 60px
+							overflow: hidden
+							text-overflow: ellipsis
+							white-space: nowrap
 
 					.text-wrap
 						width: min-content
@@ -491,10 +505,14 @@ export default {
 							line-height: normal
 
 					.unscheduled-time-initials
-						width: 30px
-						height: 30px
+						display: flex
+						align-items: center
+						justify-content: center
+						width: 30px !important
+						height: 30px !important
 						background: #6200EE
 						border-radius: 50%
+						flex-shrink: 0
 
 						p
 							font-weight: 400
@@ -548,17 +566,10 @@ export default {
 
 					&.vuecal__event--focus
 						z-index: 100 !important
-						// min-height: 350px !important
 						height: fit-content !important
 						width: 100% !important
 						left: 0 !important
 
-						.event__footer-wrapper
-							position: relative
-
-							&__top
-								padding: 10px 0 0 0
-
 					&:not(.vuecal__event--focus)
 						&:has(.micro-event) .event__body
 							padding: 5px !important
diff --git a/app/src/plugins/tm@dashboard/tasks/tasks.vue b/app/src/plugins/tm@dashboard/tasks/tasks.vue
index e7eebfb..93fb470 100644
--- a/app/src/plugins/tm@dashboard/tasks/tasks.vue
+++ b/app/src/plugins/tm@dashboard/tasks/tasks.vue
@@ -99,6 +99,8 @@ export default {
 
 				days.push({
 					id: i + 1,
+					name: this.filter.employee.name,
+					surname: this.filter.employee.surname,
 					fullname: `${this.filter.employee.name} ${this.filter.employee.surname}`,
 					initials: this.filter.employee.name.charAt(0).toUpperCase() + this.filter.employee.surname.charAt(0).toUpperCase(),
 					unscheduledTime: (unscheduledTime / 60).toFixed(1),
diff --git a/app/src/plugins/tm@dashboard/teams/_mixins/TeamsCalendar.mixin.ts b/app/src/plugins/tm@dashboard/teams/_mixins/TeamsCalendar.mixin.ts
index 48ebfec..9520700 100644
--- a/app/src/plugins/tm@dashboard/teams/_mixins/TeamsCalendar.mixin.ts
+++ b/app/src/plugins/tm@dashboard/teams/_mixins/TeamsCalendar.mixin.ts
@@ -60,6 +60,7 @@ export default {
 				days.push({
 					id: index + 1,
 					name: employee.name,
+					surname: employee.surname,
 					employee_id: employee.id,
 					date: this.filter.start,
 					fullname: `${employee.name} ${employee.surname}`,