[Tasks] WIP

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

@@ -37,9 +37,9 @@
 						<p class="day-name" >{{ split.date.toLocaleDateString('en-EN', { weekday: 'long' }) }}</p>
 					</span>
 
-					<div v-if="split.unscheduledTime && split.initials" class="unscheduled-time d-flex align-center text-left" :class="{'vuecal__cell-split--weekend': split.isWeekend}">
+					<div 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 me-4">
-							<p>{{split.initials}}</p>
+							<p>{{ split.initials }}</p>
 						</div>
 						<div>
 							<p class="mb-0 mt-0 unscheduled-time-name">{{split.name}}</p>
@@ -57,21 +57,22 @@
 			</template>
 
 			<template v-slot:event="{ event }">
+				{{ event }}
 				<!-- <div v-if="!event.nonWorking" @click.stop="editTask(event.id)" 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 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>
+						<small v-if="(event.subtask.project_code && !event.is_blocker)" class="project-code">{{ event.subtask.project_code }}</small>
+						<h3>{{ event.subtask.master_task?.name || event.subtask.master_task }}</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 class="event-initials-date">{{ new Date(event.starts_at).toLocaleDateString('sk-SK') }}</small>
+							<small class="event-initials-date">{{ event.start.toLocaleDateString('sk-SK') }}</small>
 						</div>
 					</div>
 
 					<div class="event-footer d-flex">
-						<v-btn rounded class="event-footer-button me-2" :class="{'completed': event.completed}" @click.stop="clickCompleteTask(event)"><img :src="require('./_img/checkmark.svg')" alt=""></v-btn>
+						<v-btn rounded class="event-footer-button me-2" :class="{'completed': event.subtask.is_finished}" @click.stop="completeTask(event)"><img :src="require('./_img/checkmark.svg')" alt=""></v-btn>
 						<v-btn rounded class="event-footer-button me-2" @click.stop="editTask(event, true)"><img :src="require('./_img/pencil.svg')" alt=""></v-btn>
 						<v-btn rounded class="event-footer-button me-2" @click.stop="deleteTask(event)"><img :src="require('./_img/bin.svg')" alt=""></v-btn>
 					</div>
@@ -89,6 +90,9 @@
 </template>
 
 <script>
+import { addDays } 	from 'date-fns'
+import tmUtils from '@/plugins/tm@_utils/tm.utils'
+
 export default {
 	props: {
 		calData: {
@@ -126,7 +130,7 @@ export default {
 				}
 			},
 			focusedEventId: null,
-			timeCellHeight: 100,
+			timeCellHeight: 100
 		}
 	},
 
@@ -136,10 +140,27 @@ export default {
 			scrollContainer.scrollLeft = 0
 		},
 
-		async eventMoved(e) {
-			this.focusedEventId = e.event.id
-			this.addTimeModal(e.event.id)
-			this.$emit('eventMoved', e)
+		async eventMoved({ event, newSplit }) {
+			const date = addDays(this.calConfig.date, newSplit - 1)
+			const start = date.setHours(Math.round(event.startTimeMinutes / 60), Math.round(event.startTimeMinutes % 60), 0)
+			const end 	= date.setHours(Math.round(event.endTimeMinutes / 60), Math.round(event.endTimeMinutes % 60), 0)
+			
+			const editedSubtask = {
+				...event.subtask,
+				timeblocks: [...event.subtask.timeblocks, {
+					id: event._timeblock_id,
+					start: tmUtils.formatDateTimeForBackend(start),
+					end: tmUtils.formatDateTimeForBackend(end)
+				}]
+			}
+
+			try {
+				const { subtask } = await this.$axios.put_auth(`v1/subtasks/${editedSubtask.id}`, editedSubtask)
+				this.$events.emit('on-subtask-edited', subtask)
+				this.$events.emit('show-task-add-time-modal', { subtask })
+			} catch (error) {
+				this.$toast.error(error.message || error)
+			}
 		},
 
 		onReady() {
@@ -190,32 +211,14 @@ export default {
 			// console.log(`Focused: ${event.task_id}`)
 		},
 
-		async clickCompleteTask(event) {
-			if (!event.completed) {
-				this.completeTask(event)
-			} else {
-				event.completed = !event.completed
-				try {
-					await this.$axios.patch_auth(`v1/subtasks/${event.id}`, event)
-					this.$emit('reopenTask', event)
-				} catch (error) {
-					this.$toast.error(error)
-				}
-			}
-		},
-
-		completeTask(task) {
-			this.$events.emit('show-complete-task-modal', {task})
+		completeTask({ subtask }) {
+			this.$events.emit('show-complete-task-modal', { subtask })
 		},
 
 		editTask(task, editMode) {
 			this.$events.emit('show-task-modal', {task, editMode})
 		},
 
-		addTimeModal(task) {
-			this.$events.emit('show-task-add-time-modal', {task})
-		},
-
 		deleteTask(task) {
 			this.$events.emit('show-delete-task-modal', {task})
 		}