From 86bc41450ece70d18d83ad0129d4acfb1cb4846d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <glasnak@wezeo.com>
Date: Fri, 8 Nov 2024 16:19:45 +0100
Subject: [PATCH] Feat(task) Added estimated hours, fixed edit for office tasks

---
 app/src/plugins/app/_config/App.vue           |  4 +--
 .../_components/a-timeline-event.vue          | 11 +++-----
 .../master-task/_components/a-tasks-table.vue |  9 +------
 .../master-task/z-master-task-modal.vue       |  2 ++
 .../_components/a-task-estimated-duration.vue | 27 +++++++++++++++++++
 .../task/_components/z-task-readonly-info.vue |  7 +++--
 .../plugins/tm@modal/task/z-task-modal.vue    | 14 ++++++++--
 .../z-unable-to-edit-office-task-modal.vue    | 13 ++++++---
 .../_components/a-ongoing-table.vue           | 16 +++++------
 .../_components/a-unscheduled-table.vue       | 13 +++------
 10 files changed, 72 insertions(+), 44 deletions(-)
 create mode 100644 app/src/plugins/tm@modal/task/_components/_components/a-task-estimated-duration.vue

diff --git a/app/src/plugins/app/_config/App.vue b/app/src/plugins/app/_config/App.vue
index 4210a6c..a36e7b3 100644
--- a/app/src/plugins/app/_config/App.vue
+++ b/app/src/plugins/app/_config/App.vue
@@ -137,8 +137,8 @@ export default {
 			this.$store.dispatch('tm/reloadMastertasks')
 		})
 
-		this.$events.on('show-unable-to-edit-office-task-modal', ({ subtask }) => {
-			this.$refs['z-unable-to-edit-office-task-modal'].showModal({ subtask })
+		this.$events.on('show-unable-to-edit-office-task-modal', ({ mode }) => {
+			this.$refs['z-unable-to-edit-office-task-modal'].showModal({ mode })
 		})
 
 		this._showModalsAfterInicialization()
diff --git a/app/src/plugins/tm@dashboard/_components/a-timeline-event.vue b/app/src/plugins/tm@dashboard/_components/a-timeline-event.vue
index 3cebe3e..12894c9 100644
--- a/app/src/plugins/tm@dashboard/_components/a-timeline-event.vue
+++ b/app/src/plugins/tm@dashboard/_components/a-timeline-event.vue
@@ -18,7 +18,7 @@
 					<v-tooltip :text="event.blocker?.approved ? 'Schválený' : 'Neschválený'" location="bottom">
 						<template v-slot:activator="{ props }">
 							<div v-bind="props">
-								<h3>{{ props.event.blocker?.approved ? props.event.blocker.name : props.event.blocker.name + '*' }}</h3>
+								<h3>{{ props.event?.blocker?.approved ? props.event?.blocker?.name : props.event?.blocker?.name + '*' }}</h3>
 							</div>
 						</template>
 					</v-tooltip>
@@ -49,7 +49,7 @@
 
 				<div class="event__footer d-flex">
 					<template v-if="isOfficeEvent">
-						<v-btn rounded class="event__footer__button me-2" @click.stop="editOfficeEvent"><img :src="eye" alt="" /></v-btn>
+						<v-btn rounded class="event__footer__button me-2" @click.stop="emits('edit-task', props.event)"><img :src="eye" alt="" /></v-btn>
 					</template>
 
 					<template v-else-if="event.type == 'adhoc'">
@@ -105,18 +105,13 @@ const subtaskCssClass: ComputedRef<string> = computed(() => {
 	if (eventLength.value <= 9000000) classes.push('short-event')
 	if (eventLength.value <= 5400000) classes.push('mini-event')
 	if (eventLength.value <= 3600000) classes.push('micro-event')
-	if (!props.event.blocker?.approved && props.event.isBlocker) classes.push('not-approved')
+	if (!props.event?.blocker?.approved && props.event?.isBlocker) classes.push('not-approved')
 	return classes.join(' ')
 })
 
 const isOfficeEvent: ComputedRef<boolean> = computed(() => {
 	return true
 })
-
-const editOfficeEvent = () => {
-	const eventBus = instance?.appContext.config.globalProperties.$events
-	eventBus.emit('show-unable-to-edit-office-task-modal', props.event)
-}
 </script>
 
 <style lang="sass" scoped>
diff --git a/app/src/plugins/tm@modal/master-task/_components/a-tasks-table.vue b/app/src/plugins/tm@modal/master-task/_components/a-tasks-table.vue
index b8c01ba..68b11f5 100644
--- a/app/src/plugins/tm@modal/master-task/_components/a-tasks-table.vue
+++ b/app/src/plugins/tm@modal/master-task/_components/a-tasks-table.vue
@@ -79,18 +79,11 @@ export default {
 		},
 
 		openTaskModal(subtask) {
-			// TODO office365: Only for office365 events
-			return this.editOfficeEvent(subtask)
-
-			// this.$events.emit('show-subtask-modal', { subtask, editMode: false })
+			this.$events.emit('show-subtask-modal', { subtask, editMode: false })
 		},
 
 		async clickCompleteTask(subtask) {
 			this.$events.emit('show-complete-task-modal', { subtask })
-		},
-
-		editOfficeEvent(subtask) {
-			this.$events.emit('show-unable-to-edit-office-task-modal', { subtask })
 		}
 	}
 }
diff --git a/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue b/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
index a704351..2122d07 100644
--- a/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
+++ b/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
@@ -21,6 +21,8 @@
 						:class="{ error: v$.mastertask._deadline_time.$errors.length }" :hint="v$.mastertask._deadline_time.$errors ? errorUtils.parseErrors(v$.mastertask._deadline_time.$errors) : null" />
 					</div>
 
+					<v-text-field v-model="mastertask.estimated_duration" @focus="onInputFocus" class="modal-input" variant="solo" type="number" label="Nacenené hodiny"></v-text-field>
+
 					<v-text-field v-model="mastertask.duration" @focus="onInputFocus" class="modal-input" variant="solo" type="number" :label="`${mastertask.duration} h`" :disabled="true"></v-text-field>
 
 					<v-select v-model="mastertask.team_id" @focus="onInputFocus" class="modal-input border-select" :class="{error: v$.mastertask.employees.$errors.length}" label="Tím" variant="solo" :items="teams" item-value="id" item-title="name" :disabled="!!mastertask.id" :clearable="true" />
diff --git a/app/src/plugins/tm@modal/task/_components/_components/a-task-estimated-duration.vue b/app/src/plugins/tm@modal/task/_components/_components/a-task-estimated-duration.vue
new file mode 100644
index 0000000..7ba4559
--- /dev/null
+++ b/app/src/plugins/tm@modal/task/_components/_components/a-task-estimated-duration.vue
@@ -0,0 +1,27 @@
+<template>
+	<v-row no-gutters class="align-center">
+		<v-col cols="5">
+			<v-sheet class="py-3">
+				<div class="d-flex align-center">
+					<v-icon icon="mdi-clock-time-three-outline" size="large"></v-icon>
+					<p class="mx-3">Nacenené hodiny</p>
+				</div>
+			</v-sheet>
+		</v-col>
+		<v-col cols="7">
+			<v-sheet class="py-3">
+				<p>{{ hours || 0 }} h</p>
+			</v-sheet>
+		</v-col>
+	</v-row>
+</template>
+
+<script>
+export default {
+	props: {
+		hours: {
+			type: [Number, undefined]
+		}
+	}
+}
+</script>
diff --git a/app/src/plugins/tm@modal/task/_components/z-task-readonly-info.vue b/app/src/plugins/tm@modal/task/_components/z-task-readonly-info.vue
index e32c62c..836acd6 100644
--- a/app/src/plugins/tm@modal/task/_components/z-task-readonly-info.vue
+++ b/app/src/plugins/tm@modal/task/_components/z-task-readonly-info.vue
@@ -5,6 +5,7 @@
 	<A-task-timeblocks			:timeblocks="subtask.timeblocks" :subtask="subtask" @update-subtask="$emit('update-subtask', $event)" />
     <Z-created-by 				:employee-id="subtask.created_by" />
     <A-task-assigned-employee  	:employee="subtask._employee" />
+	<A-task-estimated-duration  	:hours="subtask.estimated_duration" />
     <A-task-planned-time        :hours="subtask.duration" />
     <A-task-remaining-time      :hours="subtask.duration - subtask.spent_time" />
     <A-task-spent-time          :hours="subtask.spent_time" :subtask="subtask" />
@@ -23,6 +24,7 @@ import ATaskSpentTime           from './_components/a-task-spent-time.vue'
 import ATaskRemainingTime       from './_components/a-task-remaining-time.vue'
 import ATaskDeadline 			from './_components/a-task-deadline.vue'
 import ATaskDescription         from './_components/a-task-description.vue'
+import ATaskEstimatedDuration   from './_components/a-task-estimated-duration.vue'
 import ZFiles 					from '@/plugins/tm@modal/_components/read-only/z-files.vue'
 
 export default {
@@ -39,9 +41,10 @@ export default {
         ATaskSpentTime,
         ATaskRemainingTime,
         ATaskDescription,
-		ATaskDeadline
+		ATaskDeadline,
+		ATaskEstimatedDuration
     },
-    
+
 	props: {
 		subtask: {
 			type: Object,
diff --git a/app/src/plugins/tm@modal/task/z-task-modal.vue b/app/src/plugins/tm@modal/task/z-task-modal.vue
index 02df6c7..b850383 100644
--- a/app/src/plugins/tm@modal/task/z-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-task-modal.vue
@@ -109,7 +109,7 @@
 				<div class="d-flex justify-space-between align-center modal-header border-bottom pb-4">
 					<h1>{{ subtask.title }}</h1>
 					<div class="d-flex justify-start">
-						<img class="icon" :src="require('@/plugins/app/_img/icons/pencil.svg')" alt="pencil-icon" @click.stop="editMode = !editMode" />
+						<img class="icon" :src="require('@/plugins/app/_img/icons/pencil.svg')" alt="pencil-icon" @click.stop="toggleEditMode" />
 						<img class="icon trash" :src="require('@/plugins/app/_img/icons/bin.svg')" alt="trash-icon" @click.stop="openDeleteTaskModal(subtask)" />
 					</div>
 				</div>
@@ -239,6 +239,14 @@ export default {
 	},
 
 	methods: {
+		toggleEditMode() {
+			// TODO office365: Only for office365 events
+			return this.$events.emit('show-unable-to-edit-office-task-modal', { mode: 'edit' })
+
+
+			// this.editMode = !this.editMode
+		},
+
 		openDatepicker(ref) {
 			this.$refs[ref].openMenu()
 		},
@@ -385,7 +393,9 @@ export default {
 		},
 
 		openDeleteTaskModal(subtask) {
-			this.$events.emit('show-delete-task-modal', { subtask })
+			// TODO office365: Only for office365 events
+			this.$events.emit('show-unable-to-edit-office-task-modal', { mode: 'delete' })
+			// this.$events.emit('show-delete-task-modal', { subtask })
 		},
 
 		showCompleteTaskModal() {
diff --git a/app/src/plugins/tm@modal/task/z-unable-to-edit-office-task-modal.vue b/app/src/plugins/tm@modal/task/z-unable-to-edit-office-task-modal.vue
index bef8718..910bbb4 100644
--- a/app/src/plugins/tm@modal/task/z-unable-to-edit-office-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-unable-to-edit-office-task-modal.vue
@@ -2,10 +2,10 @@
 	<v-dialog v-model="visible" max-width="750" persistent>
 		<v-card>
 			<div class="d-flex justify-space-between align-center">
-				<h1>Sub Task zosynchronizovaný z Office365 sa nedá upravovat. Upravte ho vo svojom kalendári a pockajte
-					na zosynchronizovanie s Task Managerom</h1>
+				<h1 v-if="mode === 'edit'">Sub Task zosynchronizovaný z Office365 sa nedá upravovat. Upravte ho vo svojom kalendári a pockajte na zosynchronizovanie s Task Managerom</h1>
+				<h1 v-else-if="mode === 'delete'">Sub Task zosynchronizovaný z Office365 sa nedá zmazať. Zmažte ho vo svojom kalendári a pockajte na zosynchronizovanie s Task Managerom</h1>
 
-					<v-icon
+				<v-icon
 					@click.stop="closeModal()"
 					icon="mdi-close"
 					size="large"
@@ -22,6 +22,13 @@ export default {
 	mixins: [ modalMixin ],
 	emits: ['close', 'on-subtask-edited'],
 
+	props: {
+		mode: {
+			type: String,
+			default: 'edit' // edit or delete
+		}
+	},
+
 	data() {
 		return {
 			visible: false,
diff --git a/app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue b/app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue
index b2bc41f..d41de10 100644
--- a/app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue
+++ b/app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue
@@ -30,7 +30,7 @@
 					<div class="d-flex justify-start align-center">
 						<!-- TODO office365: Only for office365 events -->
 						<template v-if="true">
-							<img class="pencil-icon" :src="eye" @click.stop="editOfficeEvent(subtask)">
+							<img class="pencil-icon" :src="eye" @click.stop="editTask(subtask, false)">
 							<img class="office-icon" :src="office365" />
 						</template>
 
@@ -75,14 +75,14 @@ export default {
 
 	methods: {
 		editTask(subtask, editMode = false) {
-			// TODO office365: Only for office365 events
-			return this.editOfficeEvent(subtask)
-
-			// this.$events.emit('show-subtask-modal', {subtask, editMode})
+			this.$events.emit('show-subtask-modal', {subtask, editMode})
 		},
 
 		deleteTask(subtask) {
-			this.$events.emit('show-delete-task-modal', {subtask})
+			// TODO office365: Only for office365 events
+			this.$events.emit('show-unable-to-edit-office-task-modal', { mode: 'delete' })
+
+			// this.$events.emit('show-delete-task-modal', {subtask})
 		},
 
 		getDeadline(subtask) {
@@ -111,10 +111,6 @@ export default {
 			const timeblockDeadline = this.getSelectedTimeblockDeadline(subtask.timeblocks)
 
 			return timeblockDeadline !== '' ? timeblockDeadline : 'Žiadny termín'
-		},
-
-		editOfficeEvent(subtask) {
-			this.$events.emit('show-unable-to-edit-office-task-modal', { subtask })
 		}
 	}
 }
diff --git a/app/src/plugins/tm@overview/tasks-unscheduled/_components/a-unscheduled-table.vue b/app/src/plugins/tm@overview/tasks-unscheduled/_components/a-unscheduled-table.vue
index ae74183..42cfbf5 100644
--- a/app/src/plugins/tm@overview/tasks-unscheduled/_components/a-unscheduled-table.vue
+++ b/app/src/plugins/tm@overview/tasks-unscheduled/_components/a-unscheduled-table.vue
@@ -69,14 +69,13 @@ export default {
 
 	methods: {
 		editTask(subtask, editMode) {
-			// TODO office365: Only for office365 events
-			return this.editOfficeEvent(subtask)
-
-			// this.$events.emit('show-subtask-modal', {subtask, editMode})
+			this.$events.emit('show-subtask-modal', {subtask, editMode})
 		},
 
 		deleteTask(subtask) {
-			this.$events.emit('show-delete-task-modal', {subtask})
+			// TODO office365: Only for office365 events
+			this.$events.emit('show-unable-to-edit-office-task-modal', { mode: 'delete' })
+			// this.$events.emit('show-delete-task-modal', {subtask})
 		},
 
 		getDeadline(subtask) {
@@ -84,10 +83,6 @@ export default {
 				return moment(subtask.deadline).format('DD.MM.yyyy')
 
 			return moment(subtask.master_task_deadline).format('DD.MM.yyyy')
-		},
-
-		editOfficeEvent(subtask) {
-			this.$events.emit('show-unable-to-edit-office-task-modal', { subtask })
 		}
 	}
 }