[task overview] styl, drag &drop

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

@@ -10,12 +10,13 @@
 			:onEventClick="taskClicked"
 			:editable-events="vueCalConfig.editing"
 			:events="calData.dates"
-			:min-event-width="90"
-			:overlaps-per-time-step="true"
+			:overlaps-per-time-step="false"
+			:showTimeInCells="false"
 			:time-cell-height="200"
 			:min-cell-width="300"
 			@ready="scrollToYesterday"
 			@view-change="weekChanged"
+			@event-drop="eventMoved"
 		>
 			<template v-slot:weekday-heading="{ heading }">
 				<span class="d-flex align-center">
@@ -32,15 +33,24 @@
 			</template>
 
 			<template v-slot:event="{ event }">
-				<div class="vuecal__event-title vuecal__event-title--edit"
-					contenteditable
-					@blur="event.title = $event.target.innerHTML"
-					v-html="event.title" />
-				<small class="vuecal__event-time">
+				<div class="event-content-wrapper w-100 h-100 d-flex flex-column justify-space-between">
+					<div>
+						<small v-if="event.project_code" class="project-code">{{ event.project_code }}</small>
+						<h3>{{ event.title }}</h3>
+						<div class="d-flex align-center">
+							<div class="event-initials d-flex justify-center align-center">
+								<small>{{ getUserInitials(event) }}</small>
+							</div>
+							<small>{{ event.start.toLocaleDateString('sk-SK') }}</small>
+						</div>
+					</div>
 
-				<strong>Event start:</strong> <span>{{ event.start.formatTime("h O'clock") }}</span><br/>
-				<strong>Event end:</strong> <span>{{ event.end.formatTime("h O'clock") }}</span>
-				</small>
+					<div class="event-footer d-flex">
+						<v-btn rounded class="event-footer-button me-2" @click="completeTask(event.id)"><img :src="require('./_img/checkmark.svg')" alt=""></v-btn>
+						<v-btn rounded class="event-footer-button me-2" @click="editTask(event.id)"><img :src="require('./_img/pencil.svg')" alt=""></v-btn>
+						<v-btn rounded class="event-footer-button me-2" @click="deleteTask(event.id)"><img :src="require('./_img/bin.svg')" alt=""></v-btn>
+					</div>
+				</div>
 			</template>
 		</Vue-cal>
 	</div>
@@ -83,6 +93,10 @@ export default {
 			})
 		},
 
+		async eventMoved(e) {
+			this.$emit('eventMoved', e)
+		},
+
 		scrollToYesterday() {
 			if (!document.getElementsByClassName('yesterday-cell').length) return
 
@@ -105,8 +119,24 @@ export default {
 			return date.toLocaleDateString('sk-SK')
 		},
 
+		getUserInitials(event) {
+			return event.name.charAt(0).toUpperCase() + event.surname.charAt(0).toUpperCase()
+		},
+
 		taskClicked(task) {
 			console.log("task", task)
+		},
+
+		completeTask(id) {
+			console.log('complete', id)
+		},
+
+		editTask(id) {
+			console.log('edit', id)
+		},
+
+		deleteTask(id) {
+			console.log('delete', id)
 		}
 	}
 }
@@ -134,6 +164,9 @@ export default {
 				&::-webkit-scrollbar
 					display: none
 
+			.vuecal__now-line
+				display: none !important
+
 			.weekday-label
 				justify-content: start !important 
 				font-size: 24px
@@ -179,9 +212,45 @@ export default {
 				border-radius: 16px
 				padding: 20px 10px
 				text-align: left
+				background: rgba(248, 248, 248, 1)
 
-				.vuecal__event-title
-					text-align: left
+				.project-code
+					margin: 0 0 20px
+					display: block
+
+				h3
+					font-weight: 400
+					color: Black
+					margin: 0 0 10px
+
+				small
+					color: black
+
+				.event-initials
+					height: 30px
+					width: 30px
+					border: 1px solid black
+					border-radius: 50%
+					padding: 5px
+					margin-right: 7px
+
+					small
+						font-size: 11px
+
+				.event-footer
+					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
 
 				&:hover
 					z-index: 10