feat(ongoing tasks): added option to close task along with all it's unfinished timeblocks

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

@@ -0,0 +1,159 @@
+<template>
+	<v-dialog v-model="visible" max-width="750" persistent>
+		<v-card>
+			<div class="d-flex justify-space-between align-center">
+				<h1>Sub Task má nedokončené úlohy</h1>
+
+				<v-icon
+					@click.stop="closeModal()"
+					icon="mdi-close"
+					size="large"
+				></v-icon>
+			</div>
+
+			<div class="card-content">
+				<div v-for="(timeblock) in subtask?.timeblocks" :key="timeblock.id" class="d-flex align-center mb-3">
+					<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="handleFinishTimeblock(timeblock)" class="finish-icon circle-border cursor-pointer ml-2" :class="{'disabled': loadingTimeblocks[timeblock.id] || loadingCloseAll, 'finished': timeblock.is_finished}" icon="mdi-check" size="medium" />
+				</div>
+			</div>
+
+			<div class="card-actions">
+				<v-btn @click="closeModal()" class="button secondary">Zrušiť</v-btn>
+				<v-btn @click="handleFinishAllTimeblocks()" :loading="loadingCloseAll" class="button primary">Uzatvoriť všetky</v-btn>
+			</div>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script>
+import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin'
+import tmUtils from '@/plugins/tm@_utils/tm.utils'
+
+export default {
+	mixins: [ modalMixin ],
+	emits: ['close', 'on-subtask-edited'],
+
+	props: {
+		mode: {
+			type: String,
+			default: 'edit' // edit or delete
+		}
+	},
+
+	data() {
+		return {
+			tmUtils,
+			visible: false,
+			subtask: null,
+			loadingTimeblocks: {},
+			loadingCloseAll: false
+		}
+	},
+
+	methods: {
+		async showModal({ subtask }) {
+			this.subtask = subtask
+			this.visible = true
+		},
+
+		async complete() {
+			console.log('complete')
+		},
+
+		closeModal() {
+			this.visible = false
+		},
+
+		async handleFinishTimeblock(timeblock) {
+			const subtask = JSON.parse(JSON.stringify(this.subtask))
+
+			try {
+				this.loadingTimeblocks[timeblock.id] = true
+				await this.$axios.put_auth(`v1/timeblocks/${timeblock.id}`, {...timeblock, is_finished: 1})
+				timeblock.is_finished = 1
+
+				const areAllTimeblocksFinished = subtask.timeblocks.every(timeblock => timeblock.is_finished)
+
+				if (areAllTimeblocksFinished) {
+					await this._finishSubtask()
+					this.$store.dispatch('tm/removeOngoingSubtask', this.subtask.id)
+				}
+
+				this.$events.emit('on-subtask-edited', subtask)
+				this.closeModal()
+			} catch (error) {
+				this.$toast.error(error.message || error)
+
+				if (process.env.NODE_ENV === 'development')
+					console.log('[a-task-timeblocks.vue] Error: ', error)
+			} finally {
+				this.loadingTimeblocks[timeblock.id] = false
+			} 
+		},
+
+		async handleFinishAllTimeblocks() {
+			this.loadingCloseAll = true
+
+			try {
+				const promises = this.subtask.timeblocks.map(timeblock => {
+					return this.$axios.put_auth(`v1/timeblocks/${timeblock.id}`, {...timeblock, is_finished: 1})
+				})
+
+				await Promise.all(promises)
+
+				this.subtask.timeblocks = this.subtask.timeblocks.map(timeblock => {
+					timeblock.is_finished = 1
+					return timeblock
+				})
+
+				await this._finishSubtask()
+
+				this.$store.dispatch('tm/removeOngoingSubtask', this.subtask.id)
+				this.$events.emit('on-subtask-edited', this.subtask)
+				this.closeModal()
+			} catch (error) {
+				this.$toast.error(error.message || error)
+			} finally {
+				this.loadingCloseAll = false
+			}
+		},
+
+		async _finishSubtask() {
+			const tempSubtask = {...this.subtask, is_finished: 1, timesheets: this.subtask.timesheets.map((timesheet) => {
+				delete timesheet.employee_name
+				return timesheet
+			})}
+
+			return this.$axios.put_auth(`v1/subtasks/${tempSubtask.id}`, tempSubtask)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.card-content {
+	margin-top: 20px;
+	padding: 20px;
+}
+
+.card-actions {
+	width: 100%;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 10px;
+}
+
+.finish-icon {
+	cursor: pointer;
+
+	&.disabled {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	&.finished {
+		background: #06dece;
+	}
+}
+</style>