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

<template>
	<v-dialog v-model="visible" max-width="750" max-height="90%" height="700px">
		<W-loadable :content="team && 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>{{ team.id ? 'Upraviť tím' : 'Vytvoriť tím' }}</h1>
					<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$.team.name.$errors
								? errorUtils.parseErrors(v$.team.name.$errors)
								: null
						"
						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"
						>
						</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
						label="Vyhľadať zamestnanca"
						:options="employeesOptions"
						:validations="v$.team.employees"
						class="modal-input"
						@option-selected="employeeSelected"
					/>
				</v-card-actions>

				<v-btn class="button primary block" @click="save()">{{ team.id ? 'UPRAVIŤ' : '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'
import tmUtils 				from '@/plugins/tm@_utils/tm.utils'

const atLeastOne = (value) => value.length

export default {
	emits: ['close', 'update'],

	components: {
		ZAutocomplete,
	},

	data() {
		return {
			visible: false,
			allEmployees: null,
			v$: useVuelidate(),
			errorUtils,
			team: null
		}
	},

	validations() {
		return {
			team: {
				name: { required },
				employees: { atLeastOne }
			},
		}
	},

	methods: {
		async showModal(team = null) {
			this.visible = true
			this.team = null

			try {
				const allEmployees = await this.$axios.get_auth_data('v1/employees')
				this.allEmployees = tmUtils.enrichEmployeesByFullName(allEmployees)

				if (team?.id) {
					const t = await this.$axios.get_auth_data(`v1/teams/${team.id}`)
					this.team  = this._enrichTeam(t)
				} else {
					this.team = {employees: []}
				}
			} catch (error) {
				this.$toast.error(error)
			}
		},

		closeModal() {
			this.visible = false
			this.$emit('close', this.team)
		},

		async save() {
			if (!(await this.v$.$validate())) return

			try {
				if (this.team.id) {
					const { team } = await this.$axios.put_auth(`v1/teams/${this.team.id}`, this.team)
					this.$store.commit('tm/update_team', team)
				} else {
					const { team } = await this.$axios.post_auth(`v1/teams`, this.team)
					this.$store.commit('tm/save_team', team)
				}

				this.closeModal()
			} catch (error) {
				this.$toast.error(error)
			}
		},

		employeeSelected(selectedOption) {
			const employee = this.allEmployees.find((empl) => empl.id == selectedOption.key)
			this.team.employees.push(employee)
		},

		_enrichTeam(team) {
			team.employees = tmUtils.enrichEmployeesByFullName(team.employees)
			return team
		}
	},

	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}`,
				}
			})
		}
	}
}
</script>