Changes 0228092025 Laptop

resources/js/Pages/Cases/Partials/ContractDrawer.vue

@@ -2,12 +2,13 @@
 import ActionMessage from '@/Components/ActionMessage.vue';
 import DialogModal from '@/Components/DialogModal.vue';
 import InputLabel from '@/Components/InputLabel.vue';
+import InputError from '@/Components/InputError.vue';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
 import SectionTitle from '@/Components/SectionTitle.vue';
 import TextInput from '@/Components/TextInput.vue';
 import DatePickerField from '@/Components/DatePickerField.vue';
 import { useForm } from '@inertiajs/vue3';
-import { watch } from 'vue';
+import { watch, nextTick, ref as vRef } from 'vue';
 
 const props = defineProps({
     client_case: Object,
@@ -22,7 +23,10 @@ console.log(props.types);
 const emit = defineEmits(['close']);
 
 const close = () => {
-    emit('close');
+    // Clear any previous validation warnings when closing
+    formContract.clearErrors()
+    formContract.recentlySuccessful = false
+    emit('close')
 }
 
 // form state for create or edit
@@ -58,6 +62,20 @@ watch(() => props.show, (open) => {
         // reset for create
         applyContract(null)
     }
+    if (!open) {
+        // Ensure warnings are cleared when dialog hides
+        formContract.clearErrors()
+        formContract.recentlySuccessful = false
+    }
+})
+
+// optional: focus the reference input when a reference validation error appears
+const contractRefInput = vRef(null)
+watch(() => formContract.errors.reference, async (err) => {
+    if (err && props.show) {
+        await nextTick()
+        try { contractRefInput.value?.focus?.() } catch (e) {}
+    }
 })
 
 const storeOrUpdate = () => {
@@ -90,6 +108,9 @@ const storeOrUpdate = () => {
         <template #title>{{ formContract.uuid ? 'Uredi pogodbo' : 'Dodaj pogodbo' }}</template>
         <template #content>
             <form @submit.prevent="storeOrUpdate">
+                <div v-if="formContract.errors.reference" class="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+                    {{ formContract.errors.reference }}
+                </div>
                 <SectionTitle class="mt-4 border-b mb-4">
                     <template #title>
                         Pogodba
@@ -102,9 +123,10 @@ const storeOrUpdate = () => {
                         ref="contractRefInput"
                         v-model="formContract.reference"
                         type="text"
-                        class="mt-1 block w-full"
+                        :class="['mt-1 block w-full', formContract.errors.reference ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : '']"
                         autocomplete="contract-reference"
                     />
+                    <InputError :message="formContract.errors.reference" />
                 </div>
                 <DatePickerField
                     id="contractStartDate"