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

<template>
	<v-dialog v-model="visible" max-width="650" max-height="90%" height="700px">
		<W-loadable :content="blocker && 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>{{ blocker.id ? 'Upraviť' : 'Vytvoriť'}} blocker</h1>
					<v-icon
						@click.stop="close()"
						icon="mdi-close"
						size="large"
					></v-icon>
				</div>

				<v-card-actions class="d-flex flex-column modal-content">
					<v-text-field
						@focus="onInputFocus"
						class="modal-input"
						label="Názov blocker"
						:class="{ error: v$.blocker.name.$errors.length }"
						:hint="
							v$.blocker.name.$errors
								? errorUtils.parseErrors(v$.blocker.name.$errors)
								: null
						"
						v-model="blocker.name"
						variant="solo"
					></v-text-field>
					<div
						class="employee-position w-100"
						v-for="(employee, index) in blocker.employees"
						:key="employee.id"
					>
						<v-text-field
							class="modal-input"
							disabled
							label="Zamestanec"
							variant="outlined"
							v-model="blocker.employees[index]._fullName"
						>
						</v-text-field>
						<v-icon
							class="remove-input"
							@click.stop="blocker.employees.splice(index, 1)"
							icon="mdi-close"
							size="small"
						></v-icon>
					</div>
					<Z-autocomplete
						:options="employeesOptions"
						class="modal-input"
						:class="{ error: v$.blocker.employees.$errors.length }"
						@option-selected="employeeSelected"
					/>
					<Datepicker
						class="modal-input"
						v-model="blocker.date"
						format="dd.MM.yyyy, HH:mm"
						locale="sk"
						:class="{ error: v$.blocker.date.$errors.length }"
						@focus="onDateFocus"
						:validations="v$.blocker.employees"
						select-text="Vybrať"
						cancel-text="Zrušiť"
						placeholder="Trvanie od - do"
						:start-time="startTime"
						range
					/>
				</v-card-actions>

				<v-btn class="z-btn" @click="save()">{{ blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'}}</v-btn>
			</v-card>
		</W-loadable>
	</v-dialog>
</template>

<script>
import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
import Datepicker	 	from '@vuepic/vue-datepicker'
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 {
	emits: ['close'],

	components: {
		ZAutocomplete,
		Datepicker,
	},

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

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

	async created() {
		try {
			const allEmployees = await this.$axios.get_auth_data('v1/employees')
			this.allEmployees  = this._enrichEmployeesByFullName(allEmployees)
		} catch (error) {
			this.$toast.error(error)
		}
	},

	methods: {
		async create(blocker = null) {
			if (blocker) {
				this.blocker = blocker
				await this._load()
			} else {
				this.blocker = {
					name: '',
					date: null,
					employees: []
				}
			}

			this.visible = true
		},

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

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

			try {
				if (this.blocker.id)
					await this._edit()
				else
					await this._create()

				this.close()
				this.$router.push({ name: 'Dashboard - Tasks' })
			} catch (error) {
				console.log(error)
			}
		},

		close() {
			this.visible = false
			this.$emit('close', this.blocker)
			this.blocker = null
		},

		async _create() {
			try {
				await this.$axios.post_auth('v1/blockers', this.blocker)
			} catch (error) {
				this.$toast.error(error)
			}
		},

		async _edit() {
			try {
				await this.$axios.post_auth(`v1/blockers/${this.blocker.id}`, this.blocker)
			} catch (error) {
				this.$toast.error(error)
			}
		},

		async _load() {
			try {
				const blocker 		= await this.$axios.get_auth_data(`v1/blockers/${this.blocker.id}`)
				blocker.employees 	= this._enrichEmployeesByFullName(blocker.employees)

				this.blocker = blocker
			} catch (error) {
				this.$toast.error(error)
			}
		},

		// Vuetify input was automatically focus after date input was clicked. This will prevent this unwanted behavior
		onDateFocus($event) {
			if ($event == undefined) {
				this.preventInputFocus = true
			}
		},

		onInputFocus($event) {
			if (this.preventInputFocus) {
				$event.target.blur()
				this.preventInputFocus = false
			}
		},

		_enrichEmployeesByFullName(employees) {
			return employees.map(employee => {
				employee._fullName = `${employee.name} ${employee.surname}`
				return employee
			})
		}
	},

	computed: {
		employeesOptions() {
			const selectedEmployeesIds = this.blocker.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>

<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>