From 340ac2a76d264a2f18404dc42b93080929b98b90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <glasnak@wezeo.com>
Date: Tue, 11 Apr 2023 12:44:37 +0200
Subject: [PATCH] [Subtask] Added autocomplete to modals

---
 .../_components/read-only/z-created-by.vue    |  6 +-
 .../_components/a-task-assigned-employee.vue  | 12 +--
 .../task/_components/z-task-readonly-info.vue |  4 +-
 .../plugins/tm@modal/task/z-task-modal.vue    | 77 ++++++-------------
 .../_components/a-ongoing-table.vue           |  2 +-
 5 files changed, 34 insertions(+), 67 deletions(-)

diff --git a/app/src/plugins/tm@modal/_components/read-only/z-created-by.vue b/app/src/plugins/tm@modal/_components/read-only/z-created-by.vue
index 79242bc..1ae2497 100644
--- a/app/src/plugins/tm@modal/_components/read-only/z-created-by.vue
+++ b/app/src/plugins/tm@modal/_components/read-only/z-created-by.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-row no-gutters class="align-center" v-if="employee">
+    <v-row no-gutters class="align-center">
 		<v-col cols="5">
 			<v-sheet class="py-3">
 				<div class="d-flex align-center">
@@ -12,9 +12,9 @@
 		<v-col cols="7">
 			<v-sheet class="py-3 d-flex align-center">
 				<p class="employee-selected-avatar d-flex justify-center align-center">
-					{{ employee._initials }}
+					{{ employee ? employee._initials : '?' }}
 				</p>
-				<p class="ml-2">{{  employee._fullName }}</p>
+				<p class="ml-2">{{ employee ? employee._fullName : $t('Unasigned') }}</p>
 			</v-sheet>
 		</v-col>
 	</v-row>
diff --git a/app/src/plugins/tm@modal/task/_components/_components/a-task-assigned-employee.vue b/app/src/plugins/tm@modal/task/_components/_components/a-task-assigned-employee.vue
index 4762acf..8599a0b 100644
--- a/app/src/plugins/tm@modal/task/_components/_components/a-task-assigned-employee.vue
+++ b/app/src/plugins/tm@modal/task/_components/_components/a-task-assigned-employee.vue
@@ -22,11 +22,11 @@
 
 <script>
 export default {
-    props: {
-        employee: {
-            type: Object,
-            required: true
-        }
-    }
+	props: {
+		employee: {
+			type: Object,
+			required: true
+		}
+	}
 }
 </script>
\ No newline at end of file
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 1e84856..ad24549 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
@@ -1,9 +1,9 @@
 <template>
-	<A-mastertask-name      	:name="subtask.master_task?.name || task.master_task" :id="subtask.master_task.id" :color="subtask.master_task.color" @close-modal="$emit('close-modal')" />
+	<A-mastertask-name      	:name="subtask._master_task.name" :id="subtask.master_task_id" :color="subtask._master_task.color" @close-modal="$emit('close-modal')" />
     <A-mastertask-status    	:status="subtask.is_finished" />
 	<A-task-timeblocks			:timeblocks="subtask.timeblocks" :subtask="subtask" />
     <Z-created-by 				:employee-id="subtask.created_by" />
-    <A-task-assigned-employee  	:employee="subtask.employee" />
+    <A-task-assigned-employee  	:employee="subtask._employee" />
     <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" />
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 ba8cfaa..7e41277 100644
--- a/app/src/plugins/tm@modal/task/z-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-task-modal.vue
@@ -10,9 +10,10 @@
 				<v-card-actions class="d-flex flex-column modal-content">
 					<v-text-field v-model="subtask.project_code" label="Kód projektu" :value="subtask.project_code" @focus="onInputFocus" class="modal-input" variant="solo" disabled></v-text-field>
 
-					<Z-autocomplete label="Master task" :options="mastertasks.map((mastertask) => ({ key: mastertask.id, value: mastertask.name }))" :validations="v$.subtask.master_task.id" :clear-on-submit="false" :value="subtask?.master_task?.name" :class="{ error: v$.subtask.master_task.id.$errors.length }" class="modal-input" @option-selected="onMasterTaskSelected" />
+					<v-autocomplete v-model="subtask.master_task_id" label="Master task" :class="{error: v$.subtask.master_task_id.$errors.length}" :items="mastertasks" item-title="name" item-value="id" variant="solo" class="modal-input" clearable />
+					
+					<v-autocomplete v-model="subtask.employee_id" label="Priradený" :class="{error: v$.subtask.employee_id.$errors.length}" :items="enrichedEmployees" item-title="_fullName" item-value="id" variant="solo" class="modal-input" clearable />
 
-					<Z-autocomplete label="Priradený" :value="subtask?.employee ? `${subtask?.employee?.name} ${subtask?.employee?.surname}` : ''" :options="enrichedEmployees.map(employee => ({key: employee.id, value: employee._fullName}))" :clear-on-submit="false" :class="{ error: v$.subtask.employee.$errors.length }" class="modal-input" @option-selected="onEmployeeSelected" />
 					<v-text-field v-model="subtask.duration" @focus="onInputFocus" class="modal-input" variant="solo" type="number" label="Časový odhad" :class="{ error: v$.subtask.duration.$errors.length }" :hint="v$.subtask.duration.$errors ? errorUtils.parseErrors(v$.subtask.duration.$errors) : null" append-inner-icon="mdi-clock-outline"></v-text-field>
 
 					<div class="w-100 modal-input">
@@ -28,8 +29,8 @@
 			<v-card v-else height="100%" class="d-flex flex-column scrolling">
 				<div class="d-flex justify-space-between align-center">
 					<div>
-						<p>{{ subtask.master_task?.project_code }}</p>
-						<h1>{{  subtask.master_task?.name }}</h1>
+						<p>{{ subtask._master_task.project_code }}</p>
+						<h1>{{  subtask._master_task.name }}</h1>
 					</div>
 
 					<v-icon @click.stop="closeModal()" icon="mdi-close" size="large" class="pb-5"></v-icon>
@@ -83,7 +84,7 @@ export default {
 		ZTaskReadonlyInfo,
 		ZFilesUpload,
 		QuillEditor,
-		ZAutocomplete
+		// ZAutocomplete
 	},
 
 	data() {
@@ -95,7 +96,6 @@ export default {
 			errorUtils,
 			v$: useVuelidate(),
 			preventInputFocus: false,
-			mastertaskIdSelect: null,
 			showDatePicker: false,
 			selectedNewDate: []
 		}
@@ -105,24 +105,15 @@ export default {
 		...mapGetters('tm', [
 			'mastertasks',
 			'enrichedEmployees'
-		]),
-
-		filteredEmployees() {
-			if (!this.enrichedEmployees || !this.subtask?.master_task) return []
-
-			const selectedEmployees = this.subtask.master_task.employees?.map((employee) => employee.id) || []
-			return this.enrichedEmployees.filter((employee) => !selectedEmployees.includes(employee.id))
-		}
+		])
 	},
 
 	validations() {
 		return {
 			subtask: {
-				master_task: {
-					id: { required }
-				},
+				master_task_id: { required },
 				duration: { required },
-				employee: { required }
+				employee_id: { required }
 			}
 		}
 	},
@@ -153,7 +144,6 @@ export default {
 					this.subtask = this._enrichTask(data)
 				} else {
 					this.subtask = { master_task: mastertask, timeblocks: [{start: tmUtils.formatDateTimeForBackend(moment()), end: tmUtils.formatDateTimeForBackend(moment())}] }
-					this.mastertaskIdSelect = mastertask.id
 				}
 
 				this.editMode = editMode || !this.subtask.id
@@ -178,7 +168,7 @@ export default {
 					const { subtask } = await this.$axios.put_auth(`v1/subtasks/${this.subtask.id}`, this.subtask)
 					this.$store.commit('tm/update_subtask', subtask)
 				} else {
-					const { subtask } = await this.$axios.post_auth(`v1/mastertasks/${this.subtask.master_task.id}/subtasks`, this.subtask)
+					const { subtask } = await this.$axios.post_auth(`v1/mastertasks/${this.subtask.master_task_id}/subtasks`, this.subtask)
 					this.subtask.id = subtask.id
 					this.$store.commit('tm/update_subtask', subtask)
 				}
@@ -190,17 +180,6 @@ export default {
 			}
 		},
 
-		async addNewDate() {
-			if (this.selectedNewDate) {
-				this.subtask.timeblocks.push({
-					start: this.selectedNewDate[0],
-					end: this.selectedNewDate[1]
-				})
-				this.showDatePicker = false
-				this.selectedNewDate = []
-			}
-		},
-
 		async downloadFile(id) {
 			try {
 				const file = await this.$axios.get_auth_data(`v1/subtasks/${this.subtask.id}`, { responseType: "arraybuffer" })
@@ -210,10 +189,6 @@ export default {
 			}
 		},
 
-		removeDate(index) {
-			this.subtask.timeblocks.splice(index, 1)
-		},
-
 		openDeleteTaskModal(subtask) {
 			this.$events.emit("show-delete-task-modal", { subtask })
 		},
@@ -226,35 +201,27 @@ export default {
 			this.subtask.files = files
 		},
 
-		onEmployeeSelected({ key }) {
-			this.subtask.employee_id = key
-		},
-
 		_enrichTask(subtask) {
-			subtask.master_task 		= this.mastertasks.find((mastertask) => mastertask.id == subtask.master_task_id)
-			subtask.employee 			= this.enrichedEmployees.find((employee) => employee.id == subtask.employee_id)
-			subtask._created_by 		= this.enrichedEmployees.find((employee) => employee.id == subtask.created_by)
-			this.mastertaskIdSelect 	= subtask.master_task?.id
-
-			return subtask
+			return {
+				...subtask,
+				_created_by: this.enrichedEmployees.find((employee) => employee.id == subtask.created_by),
+				_employee: this.enrichedEmployees.find((employee) => employee.id == subtask.employee_id),
+				_master_task: this.mastertasks.find((mastertask) => mastertask.id == subtask.master_task_id)
+			}
 		}
 	},
 
 	watch: {
-		mastertaskIdSelect(value) {
-			if (!value || !this.subtask) return
+		'subtask.employee_id'(value, oldValue) {
+			if (!value || !oldValue) return
 
-			this.subtask.master_task = this.mastertasks.find((mastertask) => mastertask.id == value)
-			this.subtask.project_code = this.subtask.master_task.project_code
+			this.subtask.timeblocks = []
+			this.subtask._employee 	= this.enrichedEmployees.find((employee) => employee.id == this.subtask.employee_id)
 		},
 
-		"subtask.employee_id"(value, oldValue) {
+		'subtask.master_task_id'(value) {
 			if (!value) return
-
-			if (value && oldValue) 
-				this.subtask.timeblocks = []
-
-			this.subtask.employee = this.enrichedEmployees.find((employee) => employee.id == value)
+			this.subtask._master_task = this.mastertasks.find((mastertask) => mastertask.id == this.subtask.master_task_id)
 		},
 
 		editMode() {
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 a6373e8..0970562 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
@@ -38,7 +38,7 @@ export default {
 			required: true
 		}
 	},
-
+	
 	methods: {
 		editTask(subtask, editMode = false) {
 			this.$events.emit('show-subtask-modal', {subtask, editMode})