From 5d6a2f9b66cf3c51982d8b49ee81960076a88062 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <glasnak@wezeo.com>
Date: Tue, 11 Apr 2023 12:59:43 +0200
Subject: [PATCH] [Team] Added v-autocomplete to modal

---
 .../plugins/tm@modal/team/z-team-modal.vue    | 62 ++++++++-----------
 1 file changed, 26 insertions(+), 36 deletions(-)

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 55f1dd5..0fa6b4b 100644
--- a/app/src/plugins/tm@modal/team/z-team-modal.vue
+++ b/app/src/plugins/tm@modal/team/z-team-modal.vue
@@ -47,13 +47,7 @@
 						></v-icon>
 					</div>
 
-					<Z-autocomplete
-						label="Vyhľadať zamestnanca"
-						:options="employeesOptions"
-						:validations="v$.team.employees"
-						class="modal-input"
-						@option-selected="employeeSelected"
-					/>
+					<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>
@@ -63,31 +57,42 @@
 </template>
 
 <script>
-import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
+// 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 { mapGetters } from 'vuex'
 
 const atLeastOne = (value) => value.length
 
 export default {
 	emits: ['close', 'update'],
 
-	components: {
-		ZAutocomplete,
-	},
-
 	data() {
 		return {
 			visible: false,
-			allEmployees: null,
 			v$: useVuelidate(),
 			errorUtils,
+			employeeSelect: null,
 			team: null
 		}
 	},
 
+	computed: {
+		...mapGetters('tm', [
+			'enrichedEmployees'
+		]),
+
+		employeesOptions() {
+			const selectedEmployeesIds = this.team.employees.map(
+				(employee) => employee.id
+			)
+
+			return this.enrichedEmployees.filter(employee => !selectedEmployeesIds.includes(employee.id))
+		}
+	},
+
 	validations() {
 		return {
 			team: {
@@ -104,9 +109,6 @@ export default {
 			this.$nextTick(() => this.v$.$reset())
 
 			try {
-				const allEmployees = await this.$axios.get_auth_data('v1/employees')
-				this.allEmployees = tmUtils.enrichEmployees(allEmployees)
-
 				if (team?.id) {
 					const t = await this.$axios.get_auth_data(`v1/teams/${team.id}`)
 					this.team  = this._enrichTeam(t)
@@ -141,33 +143,21 @@ export default {
 			}
 		},
 
-		employeeSelected(selectedOption) {
-			const employee = this.allEmployees.find((empl) => empl.id == selectedOption.key)
-			this.team.employees.push(employee)
-		},
-
 		_enrichTeam(team) {
 			team.employees = tmUtils.enrichEmployees(team.employees)
 			return team
 		}
 	},
 
-	computed: {
-		employeesOptions() {
-			const selectedEmployeesIds = this.team.employees.map(
-				(employee) => employee.id
-			)
+	watch: {
+		employeeSelect(employeeId) {
+			if (!employeeId)
+				return
 
-			const employees = this.allEmployees.filter(
-				(employee) => !selectedEmployeesIds.includes(employee.id)
-			)
-
-			return employees.map((employee) => {
-				return {
-					key: employee.id,
-					value: `${employee.name} ${employee.surname}`,
-				}
-			})
+			const employee = this.enrichedEmployees.find(employee => employee.id == employeeId)
+			this.team.employees.push(employee)
+			this.employeeSelect = null
+			this.$refs.autocomplete.search = ''
 		}
 	}
 }