[Blockers] Blockers POST, PUT

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

@@ -25,45 +25,19 @@
 						v-model="blocker.name"
 						variant="solo"
 					></v-text-field>
-					<div
-						class="relative 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
-						label="Vyhľadať zamestnanca"
-						:options="employeesOptions"
-						class="modal-input"
-						:class="{ error: v$.blocker.employees.$errors.length }"
-						@option-selected="employeeSelected"
-					/>
+					<v-select v-model="blocker.employee_id" ref="employee-select" @focus="onInputFocus" class="modal-input border-select" label="Priradený" :class="{ error: v$.blocker.employee_id.$errors.length }" variant="solo" :items="enrichedEmployees" item-value="id" item-title="_fullName"></v-select>
 					<Datepicker
 						class="modal-input"
-						v-model="blocker.date"
+						v-model="startEndDate"
 						format="dd.MM.yyyy, HH:mm"
 						locale="sk"
-						:class="{ error: v$.blocker.date.$errors.length }"
-						@focus="onDateFocus"
+						:class="{ error: v$.blocker.start.$errors.length || v$.blocker.end.$errors.length }"
 						:validations="v$.blocker.employees"
 						select-text="Vybrať"
 						cancel-text="Zrušiť"
 						placeholder="Trvanie od - do"
 						range
+						ref="datepicker"
 					/>
 				</v-card-actions>
 
@@ -74,15 +48,13 @@
 </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'
 import VuetifyFixFocusMixin from  '@/plugins/tm@modal/_mixins/vuetify-fix-focus'
 import tmUtils 				from '@/plugins/tm@_utils/tm.utils'
-
-const atLeastOne = (value) => value.length
+import { mapGetters } from 'vuex'
 
 export default {
 	mixins: [VuetifyFixFocusMixin],
@@ -90,44 +62,32 @@ export default {
 	emits: ['close'],
 
 	components: {
-		ZAutocomplete,
-		Datepicker,
+		Datepicker
 	},
 
 	data() {
 		return {
 			visible: false,
-			employees: null,
 			v$: useVuelidate(),
 			errorUtils,
-			blocker: null
+			blocker: null,
+			startEndDate: null
 		}
 	},
 
 	computed: {
-		employeesOptions() {
-			const selectedEmployeesIds = this.blocker.employees.map(
-				(employee) => employee.id
-			)
-			const employees = this.employees.filter(
-				(employee) => !selectedEmployeesIds.includes(employee.id)
-			)
-
-			return employees.map((employee) => {
-				return {
-					key: employee.id,
-					value: `${employee.name} ${employee.surname}`,
-				}
-			})
-		}
+		...mapGetters('tm', [
+			'enrichedEmployees'
+		])
 	},
 
 	validations() {
 		return {
 			blocker: {
 				name: { required },
-				date: { required },
-				employees: { atLeastOne }
+				start: { required },
+				end: { required },
+				employee_id: { required }
 			}
 		}
 	},
@@ -136,35 +96,30 @@ export default {
 		async showModal({ blocker }) {
 			this.visible = true
 			this.blocker = null
+			this.startEndDate = null
 			this.$nextTick(() => this.v$.$reset())
 
 			try {
-				const employees = await this.$axios.get_auth_data('v1/employees')
-				this.employees 	= tmUtils.enrichEmployees(employees)
-
 				if (blocker?.id) {
-					const b 	  = await this.$axios.get_auth_data(`v1/blockers/${blocker.id}`)
-					this.blocker  = {...b, employees: tmUtils.enrichEmployees(b.employees)}
+					blocker = await this.$axios.get_auth_data(`v1/blockers/${blocker.id}`)
+					blocker.employee_id = blocker.employee.id
+					this.startEndDate = [new Date(blocker.start), new Date(blocker.end)]
+					this.blocker = blocker
 				} else {
-					this.blocker  = {employees: []}
+					this.blocker  = {start: null}
 				}
 			} catch (error) {
 				this.$toast.error(error)
 			}
 		},
 
-		employeeSelected(selectedOption) {
-			const employee = this.employees.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.$axios.post_auth(`v1/blockers/${this.blocker.id}`, this.blocker)
+					await this.$axios.put_auth(`v1/blockers/${this.blocker.id}`, this.blocker)
 				else
 					await this.$axios.post_auth('v1/blockers', this.blocker)
 
@@ -175,9 +130,23 @@ export default {
 		},
 
 		closeModal() {
+			this.$refs['datepicker'].clearValue()
 			this.visible = false
 			this.$emit('close', this.blocker)
 		}
+	},
+
+	watch: {
+		startEndDate(value) {
+			if (!value || !value[1])
+				return
+
+			this.blocker = {
+				...this.blocker,
+				start: tmUtils.formatDateTimeForBackend(this.startEndDate[0]),
+				end: tmUtils.formatDateTimeForBackend(this.startEndDate[1]),
+			}
+		}
 	}
 }
 </script>