[Complete task modal] Added complete task modal

app/.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

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

@@ -41,67 +41,67 @@
 				"task_id": 1,
 				"starts_at": "2022-12-12T08:01:00+00:00",
 				"ends_at": "2022-12-12T09:00:00+00:00",
-				"title": "title",
+				"title": "Task 1",
 				"project_code": "CO-2201",
 				"master_task_color": "#E9FFE6"
 			},
 
-			{
-				"id": 1,
-				"task_id": 1,
-				"starts_at": "2022-12-12T08:30:00+00:00",
-				"ends_at": "2022-12-12T09:00:00+00:00",
-				"title": "Kratky task",
-				"project_code": "CO-2201",
-				"master_task_color": "#f27e57"
-			},
-
-			{
-				"id": 1,
-				"task_id": 1,
-				"starts_at": "2022-12-12T07:30:00+00:00",
-				"ends_at": "2022-12-12T07:45:00+00:00",
-				"title": "Kratky task",
-				"project_code": "CO-2201",
-				"master_task_color": "#57e0f2"
-			},
-
 			{
 				"id": 2,
 				"task_id": 2,
+				"starts_at": "2022-12-12T08:30:00+00:00",
+				"ends_at": "2022-12-12T09:00:00+00:00",
+				"title": "Kratky 30min",
+				"project_code": "CO-2201",
+				"master_task_color": "#f27e57"
+			},
+
+			{
+				"id": 3,
+				"task_id": 3,
+				"starts_at": "2022-12-12T10:30:00+00:00",
+				"ends_at": "2022-12-12T10:45:00+00:00",
+				"title": "Kratky 15min",
+				"project_code": "CO-2201",
+				"master_task_color": "#57e0f2"
+			},
+
+			{
+				"id": 4,
+				"task_id": 4,
 				"starts_at": "2022-12-12T08:00:00+00:00",
 				"ends_at": "2022-12-12T10:00:00+00:00",
-				"title": "title",
+				"title": "Task 2",
 				"project_code": "CO-2201",
 				"master_task_color": "#FDE1FF"
 			},
 
 			{
-				"id": 4,
+				"id": 5,
-				"task_id": null,
+				"task_id": 5,
 				"starts_at": "2022-12-13T07:00:00+00:00",
 				"ends_at": "2022-12-13T11:00:00+00:00",
-				"title": "title",
+				"title": "Task 5",
 				"is_blocker": true,
 				"master_task_color": null
 			},
 
 			{
-				"id": 5,
+				"id": 6,
-				"task_id": 1,
+				"task_id": 6,
 				"starts_at": "2022-12-13T09:00:00+00:00",
 				"ends_at": "2022-12-13T12:00:00+00:00",
-				"title": "title",
+				"title": "Task 6",
 				"project_code": "CO-2201",
 				"master_task_color": "#E9FFE6"
 			},
 
 			{
-				"id": 6,
+				"id": 7,
-				"task_id": 2,
+				"task_id": 7,
 				"starts_at": "2022-12-14T12:00:00+00:00",
 				"ends_at": "2022-12-14T16:00:00+00:00",
-				"title": "title",
+				"title": "Task 7",
 				"project_code": "CO-2201",
 				"master_task_color": "#E7DBF8"
 			}

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

@@ -13,11 +13,12 @@
 			:unscheduledTime="calData.unscheduled_times"
 			:overlaps-per-time-step="false"
 			:showTimeInCells="false"
-			:time-cell-height="100"
+			:time-cell-height="70"
 			:min-cell-width="300"
 			@ready="onReady()"
 			@view-change="weekChanged"
 			@event-drop="eventMoved"
+			@event-focus="eventFocused"
 		>
 			<template v-slot:weekday-heading="{ heading }">
 				<div class="w-100 h-100 d-flex flex-column">
@@ -48,9 +49,9 @@
 			<template v-slot:event="{ event }">
 				<div class="event-content-wrapper w-100 h-100 d-flex flex-column justify-space-between">
 					<div>
-						<small v-if="event.project_code && (event.end.getTime() - event.start.getTime() >= 7200000) && !event.is_blocker" class="project-code">{{ event.project_code }}</small>
+						<small v-if="(event.project_code && (event.end.getTime() - event.start.getTime() >= 7200000) && !event.is_blocker)" class="project-code">{{ event.project_code }}</small>
 						<h3>{{ event.title }}</h3>
-						<div v-if="event.end.getTime() - event.start.getTime() >= 7200000" class="d-flex align-center event-details">
+						<div v-if="(event.end.getTime() - event.start.getTime() >= 7200000) || focusedEventId == event.task_id" class="d-flex align-center event-details">
 							<div class="event-initials d-flex justify-center align-center">
 								<small>{{ getUserInitials(event) }}</small>
 							</div>
@@ -58,19 +59,30 @@
 						</div>
 					</div>
 
-					<div class="event-footer d-flex" v-if="event.end.getTime() - event.start.getTime() >= 3600000">
+					<div class="event-footer d-flex" v-if="(event.end.getTime() - event.start.getTime() >= 3600000) || focusedEventId == event.task_id">
-						<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="this.showCompleteModal = {task: event}"><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="editTask(event.id)" :style="{opacity: 0.3}"><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>
+						<v-btn rounded class="event-footer-button me-2" @click="this.showDeleteModal = {task: event}"><img :src="require('./_img/bin.svg')" alt=""></v-btn>
 					</div>
 				</div>
 			</template>
 		</Vue-cal>
+
+		<Z-complete-task-modal v-if="showCompleteModal" :visible="showCompleteModal ? true : false" :task="showCompleteModal.task" @close="showCompleteModal = null" />
+		<Z-delete-task-modal v-if="showDeleteModal" :visible="showDeleteModal ? true : false" :task="showDeleteModal.task" @close="showDeleteModal = null" />
 	</div>
 </template>
 
 <script>
+import ZCompleteTaskModal 	from '@/plugins/tm@modal/task/z-complete-task-modal.vue'
+import ZDeleteTaskModal 	from '@/plugins/tm@modal/task/z-delete-task-modal.vue'
+
 export default {
+	components: {
+		ZCompleteTaskModal,
+		ZDeleteTaskModal
+	},
+
 	props: {
 		calData: {
 			type: Object,
@@ -99,6 +111,9 @@ export default {
 					create: false
 				}
 			},
+			focusedEventId: null,
+			showCompleteModal: null,
+			showDeleteModal: null
 		}
 	},
 
@@ -158,16 +173,12 @@ export default {
 			}
 		},
 
-		completeTask(id) {
-			console.log('complete', id)
-		},
-
 		editTask(id) {
 			console.log('edit', id)
 		},
 
-		deleteTask(id) {
+		eventFocused(event) {
-			console.log('delete', id)
+			this.focusedEventId = event.task_id
 		}
 	}
 }
@@ -313,6 +324,7 @@ export default {
 				// &:hover,
 				&:focus
 					z-index: 100 !important
+					min-height: 200px !important
 
 				&.event-blocker
 					background: #B00020 !important

app/src/plugins/tm@modal/task/z-complete-task-modal.vue

@@ -0,0 +1,65 @@
+<template>
+	<v-dialog v-model="show" max-width="650">
+		<v-card>
+			<div class="d-flex justify-space-between align-center">
+				<h1>Ste si istý, že chcete ukončiť <b>{{ task.title }}</b>?</h1>
+
+				<v-icon
+					@click.stop="show = false"
+					icon="mdi-close"
+					size="large"
+				></v-icon>
+			</div>
+			<v-card-actions class="mt-10 d-flex justify-start align-center">
+				<v-btn class="z-btn" variant="flat" @click="complete()">ÁNO</v-btn>
+				<v-btn class="ml-7 cancel-btn" @click.stop="show = false">ZRUŠIŤ</v-btn>
+			</v-card-actions>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script>
+export default {
+	emits: ['close'],
+
+	props: {
+		visible: {
+			type: Boolean,
+			required: true
+		},
+
+		task: {
+			type: Object,
+			required: true
+		}
+	},
+
+	methods: {
+		async complete() {
+			try {
+				const task = {
+					...this.task,
+					is_finished: true
+				}
+
+				await this.$axios.post(`v1/tasks/${task.id}`, task)
+				this.show = false
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		}
+	},
+
+	computed: {
+		show: {
+			get() {
+				return this.visible
+			},
+
+			set(value) {
+				if (!value) this.$emit('close')
+			}
+		},
+	}
+}
+</script>

app/src/plugins/tm@modal/task/z-delete-task-modal.vue

@@ -39,7 +39,6 @@ export default {
 			try {
 				await this.$axios.delete(`v1/tasks/${this.task.id}`)
 				this.show = false
-				this.$emit('confirmDelete', this.task.id)
 			} catch (error) {
 				this.$toast.error(error)
 			}