[Modals] Refactoring

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

@@ -0,0 +1,235 @@
+<template>
+	<v-dialog v-model="show" max-width="650" max-height="90%" height="700px">
+		<W-loadable :content="allEmployees" class="h-100">
+			<v-card height="100%" class="d-flex flex-column">
+				<div class="d-flex justify-space-between align-center modal-header">
+					<h1>Vytvoriť tím</h1>
+					<v-icon
+						@click.stop="show = false"
+						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$.team.name.$errors
+								? errorUtils.parseErrors(v$.team.name.$errors)
+								: null
+						"
+						v-model="team.name"
+					></v-text-field>
+
+					<div
+						class="employee-position 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>
+					</div>
+
+					<Z-autocomplete
+						:options="employeesOptions"
+						:validations="v$.team.employees"
+						class="modal-input"
+						@option-selected="employeeSelected"
+					/>
+				</v-card-actions>
+
+				<v-btn class="z-btn" @click="save()">VYTVORIŤ</v-btn>
+			</v-card>
+		</W-loadable>
+	</v-dialog>
+</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'
+
+const atLeastOne = (value) => value.length
+
+export default {
+	components: {
+		ZAutocomplete,
+	},
+
+	props: {
+		visible: {
+			type: Boolean,
+			required: true
+		},
+
+		teamId: {
+			type: Number || null,
+			required: false,
+			default: null
+		}
+	},
+
+	data() {
+		return {
+			allEmployees: null,
+			v$: useVuelidate(),
+			errorUtils,
+			team: {
+				name: '',
+				employees: []
+			},
+		}
+	},
+
+	validations() {
+		return {
+			team: {
+				name: { required },
+				employees: { atLeastOne }
+			},
+		}
+	},
+
+	async created() {
+		if (this.teamId)
+			await this._load()
+
+		try {
+			const allEmployees = await this.$axios.get_auth_data('v1/employees')
+			this.allEmployees = this._enrichEmployeesByFullName(allEmployees)
+		} catch (error) {
+			this.$toast.error(error)
+		}
+	},
+
+	methods: {
+		async save() {
+			if (!(await this.v$.$validate())) return console.log(this.v$)
+
+			try {
+				if (this.team.id)
+					await this._edit()
+				else
+					await this._create()
+
+				this.$router.push({ name: 'Overview - Teams' })
+				this.show = false
+			} catch (error) {
+				console.log(error)
+			}
+		},
+
+		async _create() {
+			try {
+				await this.$axios.post_auth('v1/teams', this.team)
+			} catch (error) {
+				this.$toast.error(error.response.data.error)
+			}
+		},
+
+		async _edit() {
+			try {
+				await this.$axios.post_auth(`v1/teams/${this.team.id}`, this.team)
+			} catch (error) {
+				this.$toast.error(error.response.data.error)
+			}
+		},
+
+		async _load() {
+			try {
+				const team = await this.$axios.get_auth_data(`v1/teams/${this.teamId}`)
+				team.employees = this._enrichEmployeesByFullName(team.employees)
+
+				this.team = team
+			} catch (error) {
+				this.$toast.error(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
+			})
+		}
+	},
+
+	computed: {
+		employeesOptions() {
+			const selectedEmployeesIds = this.team.employees.map(
+				(employee) => employee.id
+			)
+			const employees = this.allEmployees.filter(
+				(employee) => !selectedEmployeesIds.includes(employee.id)
+			)
+
+			return employees.map((employee) => {
+				return {
+					key: employee.id,
+					value: `${employee.name} ${employee.surname}`,
+				}
+			})
+		},
+
+		show: {
+			get() {
+				return this.visible
+			},
+
+			set(value) {
+				if (!value) this.$emit('close')
+			}
+		},
+	}
+}
+</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>