From 2aec357f76558985df793d4802b4ae2ce0c44e80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <glasnak@wezeo.com>
Date: Sat, 20 May 2023 13:30:22 +0200
Subject: [PATCH] [Timeblocks] Added option to close timeblock

---
 .../app/_img/icons/checkmark-double.svg       |  6 ++++
 app/src/plugins/app/_theme/global.sass        |  5 ++-
 .../tm@dashboard/_components/z-timeline.vue   | 17 ++++++++--
 .../tasks/_utils/timeline.utils.ts            |  1 +
 .../teams/_mixins/TeamsCalendar.mixin.ts      |  1 +
 .../_components/a-task-spent-time.vue         |  2 +-
 .../_components/a-task-timeblocks.vue         | 32 +++++++++++++++++--
 7 files changed, 57 insertions(+), 7 deletions(-)
 create mode 100644 app/src/plugins/app/_img/icons/checkmark-double.svg

diff --git a/app/src/plugins/app/_img/icons/checkmark-double.svg b/app/src/plugins/app/_img/icons/checkmark-double.svg
new file mode 100644
index 0000000..cc0fd44
--- /dev/null
+++ b/app/src/plugins/app/_img/icons/checkmark-double.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" fill="white"/>
+<path d="M2 7.82843L4.82843 10.6569L10.4853 5" stroke="black" stroke-opacity="0.87" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="7.03906" y="7.61621" width="1.09208" height="1.7726" transform="rotate(45 7.03906 7.61621)" fill="white"/>
+<path d="M6 7.82843L8.82843 10.6569L14.4853 5" stroke="black" stroke-opacity="0.87" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/app/src/plugins/app/_theme/global.sass b/app/src/plugins/app/_theme/global.sass
index 88e8ac0..f49f852 100644
--- a/app/src/plugins/app/_theme/global.sass
+++ b/app/src/plugins/app/_theme/global.sass
@@ -43,7 +43,7 @@
 	height: 24px
 	width: 24px
 
-.remove-date
+.circle-border
 	border: 1px solid rgba(0, 0, 0, 0.2)
 	border-radius: 50%
 	padding: 13px
@@ -53,6 +53,9 @@
 .is-finished
 	background: #06dece !important
 
+.strike-through
+	text-decoration: line-through
+
 .add-date
 	color: white
 	border-radius: 50%
diff --git a/app/src/plugins/tm@dashboard/_components/z-timeline.vue b/app/src/plugins/tm@dashboard/_components/z-timeline.vue
index a1c2bb0..0d2646b 100644
--- a/app/src/plugins/tm@dashboard/_components/z-timeline.vue
+++ b/app/src/plugins/tm@dashboard/_components/z-timeline.vue
@@ -65,7 +65,7 @@
 					</div>
 				</div>
 
-				<div v-else-if="['subtask', 'blocker', 'adhoc', 'vacation', 'free_day'].includes(event.type)" class="custom-event-body w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLength(event) <= 9000000, 'mini-event' : getEventLength(event) <= 5400000, 'micro-event' : getEventLength(event) <= 3600000}" :style="{backgroundColor: event.color || event.subtask.color}">
+				<div v-else-if="['subtask', 'blocker', 'adhoc', 'vacation', 'free_day'].includes(event.type)" class="custom-event-body w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLength(event) <= 9000000, 'mini-event' : getEventLength(event) <= 5400000, 'micro-event' : getEventLength(event) <= 3600000}" :style="{backgroundColor: event._timeblock_is_finished ? '#dedfe0' : event.color || event.subtask.color}">
 					<div class="event-content" :class="{'is-blocker': event.isBlocker}"> 
 						<template v-if="event.type == 'subtask'">
 							<small v-if="event.subtask.project_code" class="project-code">{{ event.subtask.project_code }}</small>
@@ -91,7 +91,8 @@
 						</template>
 
 						<template v-else-if="event.type == 'subtask'">
-							<v-btn rounded class="event-footer-button me-2" :class="{'completed': event.subtask?.is_finished}" @click.stop="completeTask(event)"><img :src="require('@/plugins/app/_img/icons/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('@/plugins/app/_img/icons/checkmark-double.svg')" alt=""></v-btn>
+							<v-btn rounded class="event-footer-button me-2" :class="{'completed': event._timeblock_is_finished}" @click.stop="toggleTimeblockIsFinished(event)"><img :src="require('@/plugins/app/_img/icons/checkmark.svg')" alt=""></v-btn>
 							<v-btn rounded class="event-footer-button me-2" @click.stop="editTask(event)"><img :src="require('@/plugins/app/_img/icons/eye.svg')" alt=""></v-btn>
 							<v-btn rounded class="event-footer-button me-2" @click.stop="deleteTask(event)"><img :src="require('@/plugins/app/_img/icons/bin.svg')" alt=""></v-btn>
 						</template>
@@ -222,6 +223,18 @@ export default {
 			this.$events.emit('show-complete-task-modal', { subtask })
 		},
 
+		async toggleTimeblockIsFinished(event) {
+			if (!event.timeblock.is_finished)
+				this.$events.emit('show-task-add-time-modal', { subtask: event.subtask })
+
+			try {
+				await this.$axios.put_auth(`v1/timeblocks/${event._timeblock_id}`, {is_finished: !event.timeblock.is_finished})
+				// TODO: Co mi to vrati? A updatenut
+			} catch (error) {
+				this.$toast.error(error.message || error)
+			}
+		},
+
 		editTask({subtask}) {
 			this.$events.emit('show-subtask-modal', {subtask})
 		},
diff --git a/app/src/plugins/tm@dashboard/tasks/_utils/timeline.utils.ts b/app/src/plugins/tm@dashboard/tasks/_utils/timeline.utils.ts
index 00a5b8b..4636c1b 100644
--- a/app/src/plugins/tm@dashboard/tasks/_utils/timeline.utils.ts
+++ b/app/src/plugins/tm@dashboard/tasks/_utils/timeline.utils.ts
@@ -62,6 +62,7 @@ export default {
 			subtask: subtask,
 			type: 'subtask',
 			_timeblock_id: timeblock.id,
+			_timeblock_is_finished: timeblock.is_finished,
 			_real_start: new Date(timeblock.start),
 			_real_end: new Date(timeblock.end)
 		}
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 d623f98..c131329 100644
--- a/app/src/plugins/tm@dashboard/teams/_mixins/TeamsCalendar.mixin.ts
+++ b/app/src/plugins/tm@dashboard/teams/_mixins/TeamsCalendar.mixin.ts
@@ -139,6 +139,7 @@ export default {
 							type: 'subtask',
 							subtask,
 							_timeblock_id: timeblock.id,
+							_timeblock_is_finished: timeblock.is_finished,
 							_real_start: new Date(timeblock.start),
 							_real_end: new Date(timeblock.end)
 						})
diff --git a/app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue b/app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue
index bde19cb..179f25e 100644
--- a/app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue
+++ b/app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue
@@ -22,7 +22,7 @@
 
 				<template v-if="subtask.timesheets.length">
 					<div v-for="timesheet in subtask.timesheets" :key="timesheet.id" class="d-flex align-center mb-3">
-						<v-icon @click.stop="deleteTimesheet(timesheet)" class="remove-date cursor-pointer mr-2" icon="mdi-minus" size="medium" />
+						<v-icon @click.stop="deleteTimesheet(timesheet)" class="circle-border cursor-pointer mr-2" icon="mdi-minus" size="medium" />
 						
 						<div class="d-flex align-center flex-start width-100">
 							<p class="task-badge rounded-pill">{{ timesheet.time }}</p>
diff --git a/app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue b/app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue
index c1fe155..31b0914 100644
--- a/app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue
+++ b/app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue
@@ -17,8 +17,9 @@
 				</div>
 
 				<div v-for="timeblock in timeblocks" :key="timeblock.id" class="d-flex align-center mb-3">
-					<v-icon @click.stop="deleteTimeblock(timeblock)" class="remove-date cursor-pointer mr-2" icon="mdi-minus" size="medium" />
-					<p class="task-badge rounded-pill">{{ tmUtils.formatDateTime(timeblock.start) }} - {{ tmUtils.formatDateTime(timeblock.end) }}</p>
+					<v-icon @click.stop="deleteTimeblock(timeblock)" class="circle-border cursor-pointer mr-2" icon="mdi-minus" size="medium" />
+					<p class="task-badge rounded-pill" :class="{'strike-through': timeblock.is_finished}">{{ tmUtils.formatDateTime(timeblock.start) }} - {{ tmUtils.formatDateTime(timeblock.end) }}</p>
+					<v-icon @click.stop="toggleTimeblockIsFinished(timeblock)" class="circle-border cursor-pointer ml-2" :class="{'completed': timeblock.is_finished}" icon="mdi-check" size="medium" />
 				</div>
 			</v-sheet>
 		</v-col>
@@ -113,6 +114,26 @@ export default {
 			this._update(subtask)
 		},
 
+		async toggleTimeblockIsFinished(originalTimeblock) {
+			// TODO: Pridat odpracovany cas modal?
+			const subtask = JSON.parse(JSON.stringify(this.subtask))
+			const timeblock = JSON.parse(JSON.stringify(originalTimeblock))
+
+			console.log(subtask)
+			console.log(timeblock)
+			if (!timeblock.is_finished)
+				this.$events.emit('show-task-add-time-modal', { subtask })
+
+			timeblock.is_finished = !timeblock.is_finished
+
+			try {
+				await this.$axios.put_auth(`v1/timeblocks/${timeblock.id}`, timeblock)
+				// TODO: Co mi to vrati? A updatenut
+			} catch (error) {
+				this.$toast.error(error.message || error)
+			}
+		},
+
 		async deleteTimeblock({ id }) {
 			const subtask = JSON.parse(JSON.stringify(this.subtask))
 			subtask.timeblocks = subtask.timeblocks.filter(timeblock => timeblock.id != id)
@@ -143,4 +164,9 @@ export default {
 		}
 	}
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="sass">
+.completed
+	background: #06dece
+</style>
\ No newline at end of file