[master-task-modal employees]

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

@@ -16,6 +16,12 @@
 						@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>
@@ -42,6 +48,7 @@
 					<Z-autocomplete
 						:options="employeesOptions"
 						class="modal-input"
+						:class="{ error: v$.blocker.employees.$errors.length }"
 						@option-selected="employeeSelected"
 					/>
 					<Datepicker
@@ -49,10 +56,12 @@
 						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="02.12.2022,10:17  -  18.12.2022,10:17"
+						placeholder="Trvanie od - do"
 						range
 					/>
 				</v-card-actions>
@@ -66,6 +75,11 @@
 <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 {
 	components: {
@@ -89,14 +103,26 @@ export default {
 	data() {
 		return {
 			allEmployees: null,
+			v$: useVuelidate(),
+			errorUtils,
 			blocker: {
 				name: '',
-				data: null,
+				date: null,
 				employees: []
 			}
 		}
 	},
 
+	validations() {
+		return {
+			blocker: {
+				name: { required },
+				date: { required },
+				employees: { atLeastOne }
+			}
+		}
+	},
+
 	async created() {
 		if (this.blockerId)
 			await this._load()
@@ -116,6 +142,8 @@ export default {
 		},
 
 		async save() {
+			if (!(await this.v$.$validate())) return console.log(this.v$)
+
 			try {
 				if (this.blocker.id)
 					await this._edit()