[tm@modals] Refactoring

app/src/plugins/tm@modal/team/z-team-modal.vue

@@ -5,7 +5,7 @@
 				<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="close()"
+						@click.stop="closeModal()"
 						icon="mdi-close"
 						size="large"
 					></v-icon>
@@ -26,7 +26,7 @@
 					></v-text-field>
 
 					<div
-						class="employee-position w-100"
+						class="relative w-100"
 						v-for="(employee, index) in team.employees"
 						:key="employee.id"
 					>
@@ -54,7 +54,7 @@
 					/>
 				</v-card-actions>
 
-				<v-btn class="z-btn" @click="save()">{{ team.id ? 'UPRAVIŤ' : 'VYTVORIŤ' }}</v-btn>
+				<v-btn class="button primary" @click="save()">{{ team.id ? 'UPRAVIŤ' : 'VYTVORIŤ' }}</v-btn>
 			</v-card>
 		</W-loadable>
 	</v-dialog>
@@ -65,6 +65,7 @@ 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'
 
 const atLeastOne = (value) => value.length
 
@@ -95,89 +96,49 @@ export default {
 	},
 
 	methods: {
-		async save() {
-			if (!(await this.v$.$validate()))
-				return
-
-			try {
-				if (this.team.id)
-					await this._edit()
-				else
-					await this._create()
-
-				this.close()
-			} catch (error) {
-				this.$toast(error)
-			}
-		},
-
 		async showModal(team = null) {
 			this.visible = true
 			this.team = null
 
 			try {
 				const allEmployees = await this.$axios.get_auth_data('v1/employees')
-				this.allEmployees = this._enrichEmployeesByFullName(allEmployees)
+				this.allEmployees = tmUtils.enrichEmployeesByFullName(allEmployees)
+
+				if (team?.id) {
+					const t = await this.$axios.get_auth_data(`v1/teams/${team.id}`)
+					this.team  = {...t, employees: tmUtils.enrichEmployeesByFullName(t.employees)}
+				} else {
+					this.team = {employees: []}
+				}
 			} catch (error) {
 				this.$toast.error(error)
 			}
-
-			if (team?.id) {
-				await this._load(team.id)
-			} else {
-				const team = {
-					name: '',
-					employees: []
-				}
-
-				setTimeout(() => {
-					this.team = team
-				})
-			}
 		},
 
-		close() {
+		closeModal() {
 			this.visible = false
 			this.$emit('close', this.team)
 		},
 
-		async _create() {
-			try {
-				await this.$axios.post_auth(`v1/teams`, this.team)
-			} catch (error) {
-				this.$toast.error(error)
-			}
-		},
+		async save() {
+			if (!(await this.v$.$validate()))
+				return
 
-		async _edit() {
 			try {
-				await this.$axios.post_auth(`v1/teams/${this.team.id}`, this.team)
-			} catch (error) {
-				this.$toast.error(error)
-			}
-		},
+				if (this.team.id)
+					await this.$axios.post_auth(`v1/teams/${this.team.id}`, this.team)
+				else
+					await this.$axios.post_auth(`v1/teams`, this.team)
 
-		async _load(id) {
-			try {
-				const team 		= await this.$axios.get_auth_data(`v1/teams/${id}`)
-				team.employees 	= this._enrichEmployeesByFullName(team.employees)
-
-				this.team = team
+				this.closeModal()
 			} catch (error) {
-				this.$toast.error(error)
+				this.$toast(error)
 			}
 		},
 
 		employeeSelected(selectedOption) {
 			const employee = this.allEmployees.find((empl) => empl.id == selectedOption.key)
 			this.team.employees.push(employee)
-		},
-
-		_enrichEmployeesByFullName(employees) {
-			return employees.map(employee => {
-				employee._fullName = `${employee.name} ${employee.surname}`
-				return employee
-			})
 		}
 	},
 
@@ -199,32 +160,4 @@ export default {
 		}
 	}
 }
-</script>
-
-<style lang="sass" scoped>
-.modal-input
-	width: 100%
-	flex: 0 0 auto
-.modal-header
-	flex: 0 0 auto
-
-.modal-content
-	flex: 1 1 100%
-	margin: 10px 0
-	overflow-y: scroll
-
-.z-btn
-	height: 50px
-	width: 100%
-	flex: 0 0 auto
-
-.remove-input
-	pointer-events: auto
-	opacity: 2
-	position: absolute
-	left: 92%
-	top: 25%
-
-.employee-position
-	position: relative
-</style>
+</script>