From 4a9dfc652081ddb7acc2c4b4ab2ef1671dd123ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <glasnak@wezeo.com>
Date: Tue, 11 Apr 2023 14:22:56 +0200
Subject: [PATCH] [Mastertask] Added v-autocomplete

---
 app/src/plugins/lib@search/search/search.vue  |  7 ++
 .../master-task/_mixins/selects.mixin.ts      | 36 +++++-----
 .../master-task/z-master-task-modal.vue       | 67 ++++++++++++-------
 .../plugins/tm@modal/team/z-team-modal.vue    | 63 ++++++-----------
 4 files changed, 87 insertions(+), 86 deletions(-)

diff --git a/app/src/plugins/lib@search/search/search.vue b/app/src/plugins/lib@search/search/search.vue
index b079f1f..25bd4b8 100644
--- a/app/src/plugins/lib@search/search/search.vue
+++ b/app/src/plugins/lib@search/search/search.vue
@@ -58,6 +58,13 @@ export default {
 			this.onSearch(this.search, false)
 		})
 	},
+
+	unmounted() {
+		this.$events.off('on-subtask-edited')
+		this.$events.off('on-subtask-deleted')
+		this.$events.off('on-mastertask-edited')
+		this.$events.off('on-mastertask-deleted')
+	},
 	
 	methods: {
 		onSearch: debounce(async function (search, reset = true) {
diff --git a/app/src/plugins/tm@modal/master-task/_mixins/selects.mixin.ts b/app/src/plugins/tm@modal/master-task/_mixins/selects.mixin.ts
index 2ebf323..bfadb0b 100644
--- a/app/src/plugins/tm@modal/master-task/_mixins/selects.mixin.ts
+++ b/app/src/plugins/tm@modal/master-task/_mixins/selects.mixin.ts
@@ -3,34 +3,28 @@ export default {
 		employeesOptions() {
 			const selectedEmployees = [...this.mastertask.employees].map(employee => employee.id)
 
-			const employees = this.enrichedEmployees.filter(
+			return this.enrichedEmployees.filter(
 				(employee) => !selectedEmployees.includes(employee.id)
 			) || []
+		},
 
-			return employees.map((employee) => {
-				return {
-					key: employee.id,
-					value: `${employee.name} ${employee.surname}`,
-				}
-			})
+		projectsOptions() {
+			// Added to "paginate" projects, because v-autocomplete was unable to handle so many projects at once
+
+			const projects = this.projects.filter(project => project.code.includes(this.projectCodeSearch))
+			return projects?.length ? projects.slice(0, 10) : this.projects.slice(0, 10)
 		}
 	},
 
 	methods: {
-		onProjectSelected({ key }) {
-			const project = this.projects.find(project => project.id == key)
-			this.mastertask.project_code = project.code
-			this.mastertask.project_id 	 = project.id
-		},
+		// onProjectSelected(id) {
+		// 	const project = this.projects.find(project => project.id == id)
+		// 	this.mastertask.project_code = project.code
+		// 	this.mastertask.project_id 	 = project.id
+		// },
 
-		onMasterTaskSelected({ key }) {
-			const mastertask = this.mastertasks.find(mastertask => mastertask.id == key)
-			this.subtask.master_task	= mastertask
-			this.subtask.project_code 	= mastertask.project_code
-		},
-
-		onEmployeeSelected({ key }) {
-			const employee = this.enrichedEmployees.find(employee => employee.id == key)
+		onEmployeeSelected(id) {
+			const employee = this.enrichedEmployees.find(employee => employee.id == id)
 			this.mastertask.employees.push(employee)
 			this.showAddEmployeeInput = false
 		},
@@ -60,6 +54,6 @@ export default {
 			
 			this.mastertask.team 		= this.teams.find(team => team.id == value)
 			this.mastertask.employees   = this.mastertask.team.employees
-		}
+		},
 	}
 }
\ No newline at end of file
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 d5b3d80..045a086 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
@@ -8,7 +8,7 @@
 				</div>
 
 				<v-card-actions class="d-flex flex-column modal-content">
-					<Z-autocomplete label="Kód projektu" :options="projects.map((project) => ({ key: project.id, value: project.code }))" :validations="v$.mastertask.project_code" :clear-on-submit="false" :value="mastertask.project_code" :class="{ error: v$.mastertask.project_code.$errors.length }" class="modal-input" @option-selected="onProjectSelected" />
+					<v-autocomplete v-model="mastertask.project_id" :label="$t('Project code')" :class="{error: v$.mastertask.project_id.$errors.length}" :items="projectsOptions" item-title="code" item-value="id" variant="solo" class="modal-input" clearable @update:search="projectCodeSearch = $event" />
 
 					<v-text-field v-model="mastertask.name" @focus="onInputFocus" class="modal-input" label="Názov mastertasku" variant="solo" :class="{ error: v$.mastertask.name.$errors.length }" :hint="v$.mastertask.name.$errors ? errorUtils.parseErrors(v$.mastertask.name.$errors) : null"></v-text-field>
 
@@ -16,17 +16,26 @@
 
 					<v-text-field v-model="mastertask.duration" @focus="onInputFocus" class="modal-input mt-5" variant="solo" type="number" disabled :label="`${mastertask.duration} h`"></v-text-field>
 
-					<v-select v-model="this.mastertask.team_id" @focus="onInputFocus" class="modal-input border-select" :class="{ error: v$.mastertask.team_id.$errors.length }" label="Tím" variant="solo" :items="teams" item-value="id" item-title="name"></v-select>
+					<v-select v-model="mastertask.team_id" @focus="onInputFocus" class="modal-input border-select" :class="{ error: v$.mastertask.team_id.$errors.length }" label="Tím" variant="solo" :items="teams" item-value="id" item-title="name"></v-select>
 
-					<template v-if="!mastertask.id">
+					<template v-if="!mastertask.id && mastertask.team_id">
 						<v-text-field v-for="(employee, index) in mastertask.employees" :key="employee.id" @focus="onInputFocus" :class="{ error: !mastertask.employees[index].duration }" class="modal-input" :label="`${employee.name} ${employee.surname}`" variant="solo" placeholder="h" v-model="mastertask.employees[index].duration" type="number" min="1" @input="onEmployeeDurationChanged">
 							<p class="employee-select-avatar d-flex justify-center align-center">
 								{{ employee.name.charAt(0) + employee.surname.charAt(0) }}
 							</p>
 						</v-text-field>
 					</template>
+					<template v-else-if="mastertask.subtasks">
+						<v-text-field v-for="(subtask, index) in enrichedSubtasks" :key="subtask.id" @focus="onInputFocus" :class="{ error: !mastertask.subtasks[index].duration }" class="modal-input" :label="`${subtask._fullName}`" variant="solo" placeholder="h" v-model="mastertask.subtasks[index].duration" type="number" min="1" @input="onEmployeeDurationChanged">
+							<p class="employee-select-avatar d-flex justify-center align-center">
+								{{  subtask._initials }}
+							</p>
+						</v-text-field>
+					</template>
 
-					<Z-autocomplete label="Vyhľadať zamestnanca" v-if="showAddEmployeeInput" :options="employeesOptions" class="modal-input" @option-selected="onEmployeeSelected" />
+					<v-autocomplete v-if="showAddEmployeeInput" :label="$t('Search for employee')" :class="{error: v$.mastertask.project_id.$errors.length}" :items="employeesOptions" item-title="_fullName" item-value="id" variant="solo" class="modal-input" clearable @update:model-value="onEmployeeSelected" />
+
+					<!-- <Z-autocomplete label="Vyhľadať zamestnanca"  :options="employeesOptions" class="modal-input" @option-selected="onEmployeeSelected" /> -->
 
 					<v-btn class="w-100 mb-5 button secondary" :disabled="!mastertask.team?.id" @click="showAddEmployeeInput = true"> <v-icon class="mx-1" icon="mdi-plus" />Pridať zamestnanca </v-btn>
 
@@ -79,11 +88,11 @@ import ZFilesUpload from '@/plugins/tm@_components/z-files-upload.vue'
 import useVuelidate from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 import errorUtils from '@/plugins/lib@auth/_utils/error.utils'
-import ZAutocomplete from '@/plugins/tm@_components/z-autocomplete.vue'
+// import ZAutocomplete from '@/plugins/tm@_components/z-autocomplete.vue'
 import VuetifyFixFocusMixin from '@/plugins/tm@modal/_mixins/vuetify-fix-focus'
 import moment from 'moment'
 import { QuillEditor } from '@vueup/vue-quill'
-import tmUtils from '@/plugins/tm@_utils/tm.utils'
+// import tmUtils from '@/plugins/tm@_utils/tm.utils'
 
 import '@vueup/vue-quill/dist/vue-quill.snow.css'
 
@@ -94,7 +103,7 @@ import { mapGetters } from 'vuex'
 
 export default {
 	// MIXINS
-	// computed: employeesOptions
+	// computed: employeesOptions, projectsOptions
 	// methods: onProjectSelected, onEmployeeSelected, onEmployeeDurationChanged
 	// watch: mastertask.team_id
 
@@ -106,7 +115,7 @@ export default {
 		ATasksTable,
 		Datepicker,
 		ZFilesUpload,
-		ZAutocomplete,
+		// ZAutocomplete,
 		QuillEditor
 	},
 
@@ -119,6 +128,7 @@ export default {
 			mastertask: null,
 			showAddEmployeeInput: false,
 			date: null,
+			projectCodeSearch: null
 		}
 	},
 
@@ -127,13 +137,29 @@ export default {
 			'teams',
 			'projects',
 			'enrichedEmployees'
-		])
+		]),
+
+
+		enrichedSubtasks() {
+			if (!this.mastertask?.subtasks)
+				return null
+			
+			return this.mastertask.subtasks.map(subtask => {
+				const employee = this.enrichedEmployees.find(employee => employee.id == subtask.employee_id)
+
+				return {
+					...subtask, 
+					_initials: employee ? employee.name.charAt(0) + employee.surname.charAt(0) : '?',
+					_fullName: employee ? `${employee.name} ${employee.surname}` : ''
+				}
+			})
+		}
 	},
 
 	validations() {
 		return {
 			mastertask: {
-				project_code: { required },
+				project_id: { required },
 				team_id: { required },
 				name: { required },
 				description: { required },
@@ -171,7 +197,8 @@ export default {
 
 	methods: {
 		async showModal({mastertask, editMode = false}) {
-			this.visible = true
+			this.editMode 	= null
+			this.visible 	= true
 			this.mastertask = null
 			this.$nextTick(() => this.v$.$reset())
 
@@ -179,11 +206,14 @@ export default {
 				if (mastertask?.id) {
 					this.mastertask = await this.$axios.get_auth_data(`v1/mastertasks/${mastertask.id}`)
 
-					const project = this.projects.find((project) => project.code == this.mastertask?.project_code)
+					console.log(this.mastertask)
 
-					this.mastertask.team_id 		= this.mastertask.team?.id || null
+					// TODO zmazat ked zacne prichadzat project_id a team_id
+					const project = this.projects.find((project) => project.code == this.mastertask.project_code)
 					this.mastertask.project_id 		= project.id
-					this.mastertask.project_code 	= project.code
+					this.mastertask.team_id 		= this.mastertask.team?.id || null
+
+					// this.mastertask.project_code 	= project.code
 				} else {
 					this.mastertask = { employees: [], duration: 0 }
 				}
@@ -205,15 +235,6 @@ export default {
 			if (this.$refs['description'])
 				this.mastertask.description = this.$refs['description'].getHTML()
 
-			// this.mastertask.subtasks = this.mastertask.subtasks.map(subtask => {
-			// 	const employee = this.mastertask.employees.find(employee => employee.id == subtask.employee_id)
-			// 	subtask.duration = employee.duration
-
-			// 	return subtask
-			// })
-
-			// this.mastertask.project_code = null
-
 			try {
 				this.mastertask.deadline = moment(this.mastertask.deadline).format('YYYY-MM-DD HH:MM:SS')
 
diff --git a/app/src/plugins/tm@modal/team/z-team-modal.vue b/app/src/plugins/tm@modal/team/z-team-modal.vue
index 0fa6b4b..08e640a 100644
--- a/app/src/plugins/tm@modal/team/z-team-modal.vue
+++ b/app/src/plugins/tm@modal/team/z-team-modal.vue
@@ -1,53 +1,33 @@
 <template>
 	<v-dialog v-model="visible" max-width="750" max-height="90%" height="700px">
-		<W-loadable :content="team && allEmployees" class="h-100">
+		<W-loadable :content="team" class="h-100">
 			<v-card height="100%" class="d-flex flex-column">
 				<div class="d-flex justify-space-between align-center modal-header">
 					<h1>{{ team.id ? 'Upraviť tím' : 'Vytvoriť tím' }}</h1>
-					<v-icon
-						@click.stop="closeModal()"
-						icon="mdi-close"
-						size="large"
-					></v-icon>
+					<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
 				</div>
 
 				<v-card-actions class="d-flex flex-column modal-content">
-					<v-text-field
-						class="modal-input"
-						label="Názov tímu"
-						variant="solo"
-						:class="{ error: v$.team.name.$errors.length }"
-						:hint="
+					<v-text-field class="modal-input" label="Názov tímu" variant="solo"
+						:class="{ error: v$.team.name.$errors.length }" :hint="
 							v$.team.name.$errors
 								? errorUtils.parseErrors(v$.team.name.$errors)
 								: null
-						"
-						v-model="team.name"
-					></v-text-field>
+						" v-model="team.name"></v-text-field>
 
-					<div
-						class="relative w-100"
-						v-for="(employee, index) in team.employees"
-						:key="employee.id"
-					>
-						<v-text-field
-							class="modal-input"
-							disabled
-							label="Zamestanec"
-							variant="solo"
-							v-model="team.employees[index]._fullName"
-						>
+					<div class="relative w-100" v-for="(employee, index) in team.employees" :key="employee.id">
+						<v-text-field class="modal-input" disabled label="Zamestanec" variant="solo"
+							v-model="team.employees[index]._fullName">
 						</v-text-field>
 
-						<v-icon
-							class="remove-input"
-							@click.stop="team.employees.splice(index, 1)"
-							icon="mdi-close"
-							size="small"
-						></v-icon>
+						<v-icon class="remove-input" @click.stop="team.employees.splice(index, 1)" icon="mdi-close"
+							size="small"></v-icon>
 					</div>
 
-					<v-autocomplete v-model="employeeSelect" label="Priradený" :class="{error: v$.team.employees.$errors.length}" :items="employeesOptions" item-title="_fullName" item-value="id" variant="solo" class="modal-input" clearable ref="autocomplete" />
+					<v-autocomplete v-model="employeeSelect" label="Priradený"
+						:class="{ error: v$.team.employees.$errors.length }" :items="employeesOptions"
+						item-title="_fullName" item-value="id" variant="solo" class="modal-input" clearable
+						ref="autocomplete" />
 				</v-card-actions>
 
 				<v-btn class="button primary block" @click="save()">{{ team.id ? 'UPRAVIŤ' : 'VYTVORIŤ' }}</v-btn>
@@ -57,11 +37,10 @@
 </template>
 
 <script>
-// import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
-import useVuelidate		from '@vuelidate/core'
-import { required } 	from '@vuelidate/validators'
-import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
-import tmUtils 				from '@/plugins/tm@_utils/tm.utils'
+import useVuelidate from '@vuelidate/core'
+import { required } from '@vuelidate/validators'
+import errorUtils from '@/plugins/lib@auth/_utils/error.utils'
+import tmUtils from '@/plugins/tm@_utils/tm.utils'
 import { mapGetters } from 'vuex'
 
 const atLeastOne = (value) => value.length
@@ -103,7 +82,7 @@ export default {
 	},
 
 	methods: {
-		async showModal({ team = null}) {
+		async showModal({ team = null }) {
 			this.visible = true
 			this.team = null
 			this.$nextTick(() => this.v$.$reset())
@@ -111,9 +90,9 @@ export default {
 			try {
 				if (team?.id) {
 					const t = await this.$axios.get_auth_data(`v1/teams/${team.id}`)
-					this.team  = this._enrichTeam(t)
+					this.team = this._enrichTeam(t)
 				} else {
-					this.team = {employees: []}
+					this.team = { employees: [] }
 				}
 			} catch (error) {
 				this.$toast.error(error)