fix : wip

frontend/pages/absence-types.vue

@@ -19,10 +19,11 @@
     </div>
 
     <div v-else class="overflow-hidden rounded-lg border border-neutral-200 bg-white">
-      <div class="grid grid-cols-[120px_120px_1fr_200px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
+      <div class="grid grid-cols-[120px_160px_1fr_220px_200px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
         <span class="text-left">Code</span>
         <span class="text-left">Libellé</span>
         <span class="text-left">Couleur</span>
+        <span class="text-left">Compte en heures</span>
         <span class="text-right">Actions</span>
       </div>
       <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
@@ -32,7 +33,7 @@
         <div
           v-for="type in absenceTypes"
           :key="type.id"
-          class="grid grid-cols-[120px_120px_1fr_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
+          class="grid grid-cols-[120px_160px_1fr_220px_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
         >
           <span class="font-semibold text-left">{{ type.code }}</span>
           <span class="text-left">{{ type.label }}</span>
@@ -43,6 +44,14 @@
             />
             <span class="text-md uppercase text-neutral-500">{{ type.color }}</span>
           </div>
+          <div class="text-left">
+            <span
+              class="inline-flex rounded-md px-2 py-1 text-sm font-semibold"
+              :class="type.countAsWorkedHours ? 'bg-emerald-100 text-emerald-700' : 'bg-neutral-100 text-neutral-700'"
+            >
+              {{ type.countAsWorkedHours ? 'Oui' : 'Non' }}
+            </span>
+          </div>
           <div class="flex items-center justify-end gap-2">
             <button
               type="button"
@@ -94,6 +103,31 @@
             Le libellé est obligatoire.
           </p>
         </div>
+        <div>
+          <label class="text-md font-semibold text-neutral-700">
+            Compté comme travaillé
+          </label>
+          <div class="mt-2 flex items-center gap-6">
+            <label class="inline-flex items-center gap-2 text-md text-neutral-800">
+              <input
+                v-model="form.countAsWorkedHours"
+                type="radio"
+                class="h-4 w-4"
+                :value="true"
+              />
+              Oui
+            </label>
+            <label class="inline-flex items-center gap-2 text-md text-neutral-800">
+              <input
+                v-model="form.countAsWorkedHours"
+                type="radio"
+                class="h-4 w-4"
+                :value="false"
+              />
+              Non
+            </label>
+          </div>
+        </div>
         <div>
           <label class="text-md font-semibold text-neutral-700" for="color">
             Couleur <span class="text-red-600">*</span>
@@ -150,7 +184,8 @@ const drawerTitle = computed(() =>
 const form = reactive({
   code: '',
   label: '',
-  color: '#222783'
+  color: '#222783',
+  countAsWorkedHours: true
 })
 
 const validationTouched = reactive({
@@ -214,6 +249,7 @@ const resetForm = () => {
   form.code = ''
   form.label = ''
   form.color = '#222783'
+  form.countAsWorkedHours = true
 }
 
 const openCreate = () => {
@@ -227,6 +263,7 @@ const openEdit = (type: AbsenceType) => {
   form.code = type.code
   form.label = type.label
   form.color = type.color
+  form.countAsWorkedHours = type.countAsWorkedHours
   isDrawerOpen.value = true
 }
 
@@ -249,13 +286,15 @@ const handleSubmit = async () => {
       await updateAbsenceType(editingType.value.id, {
         code: form.code,
         label: form.label,
-        color: form.color
+        color: form.color,
+        countAsWorkedHours: form.countAsWorkedHours
       })
     } else {
       await createAbsenceType({
         code: form.code,
         label: form.label,
-        color: form.color
+        color: form.color,
+        countAsWorkedHours: form.countAsWorkedHours
       })
     }