feat : refacto de la partie calendrier + ajout de validation sur les formulaires + ajout des jours fériés

frontend/pages/employees.vue

@@ -60,35 +60,50 @@
     <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
       <form class="space-y-4" @submit.prevent="handleSubmit">
         <div>
-          <label class="text-md font-semibold text-neutral-700" for="first-name">Prénom</label>
+          <label class="text-md font-semibold text-neutral-700" for="first-name">
+            Prénom <span class="text-red-600">*</span>
+          </label>
           <input
             id="first-name"
             v-model="form.firstName"
             type="text"
-            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
+            :class="firstNameFieldClass"
           />
+          <p v-if="showFirstNameError" class="mt-1 text-sm text-red-600">
+            Le prénom est obligatoire.
+          </p>
         </div>
         <div>
-          <label class="text-md font-semibold text-neutral-700" for="last-name">Nom</label>
+          <label class="text-md font-semibold text-neutral-700" for="last-name">
+            Nom <span class="text-red-600">*</span>
+          </label>
           <input
             id="last-name"
             v-model="form.lastName"
             type="text"
-            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
+            :class="lastNameFieldClass"
           />
+          <p v-if="showLastNameError" class="mt-1 text-sm text-red-600">
+            Le nom est obligatoire.
+          </p>
         </div>
         <div>
-          <label class="text-md font-semibold text-neutral-700" for="site">Site</label>
+          <label class="text-md font-semibold text-neutral-700" for="site">
+            Site <span class="text-red-600">*</span>
+          </label>
           <select
             id="site"
             v-model="form.siteId"
-            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+            :class="siteFieldClass"
           >
             <option value="">Aucun site</option>
             <option v-for="site in sites" :key="site.id" :value="site.id">
               {{ site.name }}
             </option>
           </select>
+          <p v-if="showSiteError" class="mt-1 text-sm text-red-600">
+            Le site est obligatoire.
+          </p>
         </div>
         <div class="flex justify-end gap-3 pt-2">
           <button
@@ -101,7 +116,7 @@
           <button
             type="submit"
             class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-            :disabled="isSubmitting"
+            :class="submitButtonClass"
           >
             Enregistrer
           </button>
@@ -134,6 +149,59 @@ const form = reactive({
   siteId: '' as number | ''
 })
 
+const validationTouched = reactive({
+  firstName: false,
+  lastName: false,
+  siteId: false
+})
+
+const isFirstNameValid = computed(() => form.firstName.trim() !== '')
+const isLastNameValid = computed(() => form.lastName.trim() !== '')
+const isSiteValid = computed(() => form.siteId !== '')
+const isFormValid = computed(
+  () => isFirstNameValid.value && isLastNameValid.value && isSiteValid.value
+)
+
+const showFirstNameError = computed(
+  () => validationTouched.firstName && !isFirstNameValid.value
+)
+const showLastNameError = computed(
+  () => validationTouched.lastName && !isLastNameValid.value
+)
+const showSiteError = computed(
+  () => validationTouched.siteId && !isSiteValid.value
+)
+
+const baseInputClass =
+  'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200'
+const firstNameFieldClass = computed(() => {
+  if (showFirstNameError.value) {
+    return `${baseInputClass} border-red-500`
+  }
+  return `${baseInputClass} border-neutral-300`
+})
+const lastNameFieldClass = computed(() => {
+  if (showLastNameError.value) {
+    return `${baseInputClass} border-red-500`
+  }
+  return `${baseInputClass} border-neutral-300`
+})
+const siteFieldClass = computed(() => {
+  const baseSelectClass =
+    'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
+  if (showSiteError.value) {
+    return `${baseSelectClass} border-red-500`
+  }
+  return `${baseSelectClass} border-neutral-300`
+})
+
+const submitButtonClass = computed(() => {
+  if (isSubmitting.value || !isFormValid.value) {
+    return 'opacity-50 cursor-not-allowed'
+  }
+  return ''
+})
+
 const loadEmployees = async () => {
   isLoading.value = true
   try {
@@ -153,6 +221,10 @@ onMounted(async () => {
 
 const handleSubmit = async () => {
   if (isSubmitting.value) return
+  validationTouched.firstName = true
+  validationTouched.lastName = true
+  validationTouched.siteId = true
+  if (!isFormValid.value) return
 
   isSubmitting.value = true
   try {
@@ -181,6 +253,14 @@ const handleSubmit = async () => {
   }
 }
 
+watch(isDrawerOpen, (isOpen) => {
+  if (!isOpen) {
+    validationTouched.firstName = false
+    validationTouched.lastName = false
+    validationTouched.siteId = false
+  }
+})
+
 const openEdit = (employee: Employee) => {
   editingEmployee.value = employee
   form.firstName = employee.firstName