[Modals] Refactoring

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

@@ -0,0 +1,237 @@
+<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ť blocker</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
+						@focus="onInputFocus"
+						class="modal-input"
+						label="Názov blocker"
+						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"
+						@option-selected="employeeSelected"
+					/>
+					<Datepicker
+						class="modal-input"
+						v-model="blocker.date"
+						format="dd.MM.yyyy, HH:mm"
+						locale="sk"
+						@focus="onDateFocus"
+						select-text="Vybrať"
+						cancel-text="Zrušiť"
+						placeholder="02.12.2022,10:17  -  18.12.2022,10:17"
+						range
+					/>
+				</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 Datepicker	 	from '@vuepic/vue-datepicker'
+
+export default {
+	components: {
+		ZAutocomplete,
+		Datepicker,
+	},
+
+	props: {
+		visible: {
+			type: Boolean,
+			required: true
+		},
+
+		blockerId: {
+			type: Number || null,
+			required: false,
+			default: null
+		}
+	},
+
+	data() {
+		return {
+			allEmployees: null,
+			blocker: {
+				name: '',
+				data: null,
+				employees: []
+			}
+		}
+	},
+
+	async created() {
+		if (this.blockerId)
+			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: {
+		employeeSelected(selectedOption) {
+			const employee = this.allEmployees.find((empl) => empl.id == selectedOption.key)
+			this.blocker.employees.push(employee)
+		},
+
+		async save() {
+			try {
+				if (this.blocker.id)
+					await this._edit()
+				else
+					await this._create()
+
+				this.$router.push({ name: 'Dashboard - Tasks' })
+				this.show = false
+			} catch (error) {
+				console.log(error)
+			}
+		},
+
+		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.blockerId}`)
+				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}`,
+				}
+			})
+		},
+
+		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>