[task overview] styl, drag &drop

app/public/mock/v1/overview/tasks.GET.json

@@ -10,8 +10,8 @@
 			{
 				"id": 1,
 				"task_id": 1,
-				"starts_at": "2022-11-28T09:00:00+00:00",
-				"ends_at": "2022-11-29T12:00:00+00:00",
+				"starts_at": "2022-12-06T09:00:00+00:00",
+				"ends_at": "2022-12-06T12:00:00+00:00",
 				"title": "title",
 				"project_code": "CO-2201",
 				"master_task_color": "#121212",
@@ -21,29 +21,30 @@
 			{
 				"id": 2,
 				"task_id": 2,
-				"starts_at": "2022-12-01T12:00:00+00:00",
-				"ends_at": "2022-12-02T16:00:00+00:00",
+				"starts_at": "2022-12-06T12:00:00+00:00",
+				"ends_at": "2022-12-06T16:00:00+00:00",
 				"title": "title",
 				"project_code": "CO-2201",
 				"master_task_color": "#121212",
-				"style": "bakcground: red"
+				"class": "green"
 			},
 
 			{
 				"id": 4,
 				"task_id": null,
-				"starts_at": "2022-11-10T16:00:00+00:00",
-				"ends_at": "2022-11-12T18:00:00+00:00",
+				"starts_at": "2022-12-05T16:00:00+00:00",
+				"ends_at": "2022-12-06T18:00:00+00:00",
 				"title": "title",
 				"is_blocker": true,
-				"master_task_color": null
+				"master_task_color": null,
+				"class": "blue"
 			},
 
 			{
 				"id": 5,
 				"task_id": 1,
-				"starts_at": "2022-11-10T09:00:00+00:00",
-				"ends_at": "2022-11-12T12:00:00+00:00",
+				"starts_at": "2022-12-10T09:00:00+00:00",
+				"ends_at": "2022-12-12T12:00:00+00:00",
 				"title": "title",
 				"project_code": "CO-2201",
 				"master_task_color": "#121212"
@@ -52,8 +53,8 @@
 			{
 				"id": 6,
 				"task_id": 2,
-				"starts_at": "2022-11-10T12:00:00+00:00",
-				"ends_at": "2022-11-12T16:00:00+00:00",
+				"starts_at": "2022-12-10T12:00:00+00:00",
+				"ends_at": "2022-12-12T16:00:00+00:00",
 				"title": "title",
 				"project_code": "CO-2201",
 				"master_task_color": "#121212"

app/src/plugins/tm@dashboard/tasks/_components/_img/bin.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.33325 6.66675L9.33325 11.3334" stroke="#14181F" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.66675 6.66675L6.66675 11.3334" stroke="#14181F" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 4V3.5C3.72386 3.5 3.5 3.72386 3.5 4H4ZM12 4H12.5C12.5 3.72386 12.2761 3.5 12 3.5V4ZM4 4.5H12V3.5H4V4.5ZM11.5 4V13.3333H12.5V4H11.5ZM11.3333 13.5H4.66667V14.5H11.3333V13.5ZM4.5 13.3333V4H3.5V13.3333H4.5ZM4.66667 13.5C4.57462 13.5 4.5 13.4254 4.5 13.3333H3.5C3.5 13.9777 4.02233 14.5 4.66667 14.5V13.5ZM11.5 13.3333C11.5 13.4254 11.4254 13.5 11.3333 13.5V14.5C11.9777 14.5 12.5 13.9777 12.5 13.3333H11.5Z" fill="#14181F"/>
+<path d="M2.66675 4H13.3334" stroke="#14181F" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.6666 4V4.5C10.9427 4.5 11.1666 4.27614 11.1666 4H10.6666ZM5.33325 4H4.83325C4.83325 4.27614 5.05711 4.5 5.33325 4.5V4ZM5.99992 2.5H9.99992V1.5H5.99992V2.5ZM10.1666 2.66667V4H11.1666V2.66667H10.1666ZM10.6666 3.5H5.33325V4.5H10.6666V3.5ZM5.83325 4V2.66667H4.83325V4H5.83325ZM9.99992 2.5C10.092 2.5 10.1666 2.57462 10.1666 2.66667H11.1666C11.1666 2.02233 10.6443 1.5 9.99992 1.5V2.5ZM5.99992 1.5C5.35559 1.5 4.83325 2.02233 4.83325 2.66667H5.83325C5.83325 2.57462 5.90787 2.5 5.99992 2.5V1.5Z" fill="#14181F"/>
+</svg>

app/src/plugins/tm@dashboard/tasks/_components/_img/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 8.00006L6.82843 10.8285L12.4853 5.17163" stroke="black" stroke-opacity="0.87" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

app/src/plugins/tm@dashboard/tasks/_components/_img/pencil.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.33341 13.3334V13.8334C5.46602 13.8334 5.5932 13.7807 5.68697 13.6869L5.33341 13.3334ZM2.66675 13.3334H2.16675C2.16675 13.6095 2.39061 13.8334 2.66675 13.8334V13.3334ZM2.66675 10.6667L2.31319 10.3132C2.21943 10.4069 2.16675 10.5341 2.16675 10.6667H2.66675ZM10.1953 3.13813L10.5489 3.49169V3.49169L10.1953 3.13813ZM11.1382 3.13813L10.7846 3.49169V3.49169L11.1382 3.13813ZM12.862 4.86199L13.2156 4.50844V4.50844L12.862 4.86199ZM12.862 5.8048L12.5085 5.45125L12.862 5.8048ZM5.33341 12.8334H2.66675V13.8334H5.33341V12.8334ZM3.16675 13.3334V10.6667H2.16675V13.3334H3.16675ZM3.0203 11.0203L10.5489 3.49169L9.84179 2.78458L2.31319 10.3132L3.0203 11.0203ZM10.7846 3.49169L12.5085 5.21554L13.2156 4.50844L11.4917 2.78458L10.7846 3.49169ZM12.5085 5.45125L4.97986 12.9798L5.68697 13.6869L13.2156 6.15835L12.5085 5.45125ZM12.5085 5.21554C12.5735 5.28063 12.5735 5.38616 12.5085 5.45125L13.2156 6.15835C13.6712 5.70274 13.6712 4.96405 13.2156 4.50844L12.5085 5.21554ZM10.5489 3.49169C10.614 3.4266 10.7195 3.4266 10.7846 3.49169L11.4917 2.78458C11.0361 2.32897 10.2974 2.32897 9.84179 2.78458L10.5489 3.49169Z" fill="#14181F"/>
+<path d="M8 5.33325L10.6667 7.99992" stroke="#14181F" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

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

@@ -2,16 +2,16 @@
 	<div>
 		<A-task-filter @weekChange="getWeekData" />
 		<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
-			<Z-timeline :calData="timelineData" :calConfig="config" />
+			<Z-timeline :calData="timelineData" :calConfig="config" @eventMoved="onEventMoved" />
 		</W-loadable>
 
 		<v-snackbar 
 			v-model="errorToast" 
 			:timeout="2000" 
-			color="white"
+			color="red"
 			:rounded="true"
 		>
-			Nepodarilo sa nacitat data!
+			{{ errorToastMessage }}
 		</v-snackbar>
 	</div>
 </template>
@@ -30,6 +30,7 @@ export default {
 		return {
 			timelineData: null,
 			errorToast: false,
+			errorToastMessage: "Nepodarilo sa nacitat data!",
 			dataLoaded: false,
 			config: {
 				date: new Date(),
@@ -48,7 +49,7 @@ export default {
 			} catch(error) {
 				this.timelineData = {}
 				console.error(error)
-				this.errorToast = true
+				this.triggerToast("Nepodarilo sa nacitat data!")
 			}
 		},
 
@@ -57,6 +58,8 @@ export default {
 			this.timelineData.dates.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
 			})
@@ -65,6 +68,25 @@ export default {
 			this.config.startHour = Number(this.timelineData.work_hours_from.split(':')[0]) - 1
 			this.config.endHour = Number(this.timelineData.work_hours_to.split(':')[0]) + 1
 		},
+
+		triggerToast(message) {
+			this.errorToastMessage = message
+			this.errorToast = true
+		},
+
+		async onEventMoved(event) {
+			try {
+				await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: event.event.start, end: event.event.end})
+			} catch(error) {
+				this.triggerToast("Nepodarilo sa presunut ulohu!")
+				this.timelineData.dates.filter(e => {
+					if (e.id == event.event.id) {
+						e.start = new Date(event.originalEvent.start)
+						e.end = new Date(event.originalEvent.end)
+					}
+				})
+			}
+		}
 	}
 }
 </script>