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

frontend/components/AbsencePrintDrawer.vue

@@ -0,0 +1,172 @@
+<template>
+    <AppDrawer v-model="drawerOpen" title="Imprimer les absences">
+        <form class="space-y-4" @submit.prevent="handleSubmit">
+            <div class="grid grid-cols-2 gap-4">
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="print-from">
+                        Date de début <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="print-from"
+                        v-model="printForm.from"
+                        type="date"
+                        :class="fromFieldClass"
+                    />
+                    <p v-if="showFromError" class="mt-1 text-sm text-red-600">
+                        La date de début est obligatoire.
+                    </p>
+                </div>
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="print-to">
+                        Date de fin <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="print-to"
+                        v-model="printForm.to"
+                        type="date"
+                        :class="toFieldClass"
+                    />
+                    <p v-if="showToError" class="mt-1 text-sm text-red-600">
+                        La date de fin est obligatoire.
+                    </p>
+                </div>
+            </div>
+
+            <div class="space-y-2">
+                <p class="text-md font-semibold text-neutral-700">
+                    Sites <span class="text-red-600">*</span>
+                </p>
+                <div class="flex flex-wrap gap-4 rounded-md border border-neutral-300 px-3 py-2">
+                    <div v-for="site in sites" :key="site.id" class="flex items-center gap-2">
+                        <div :style="{ backgroundColor: site.color }" class="h-4 w-4 rounded"></div>
+                        <label class="text-md" :for="`print-site-${site.id}`">{{ site.name }}</label>
+                        <input
+                            :id="`print-site-${site.id}`"
+                            v-model="printForm.siteIds"
+                            :value="site.id"
+                            type="checkbox"
+                            class="h-4 w-4"
+                        />
+                    </div>
+                </div>
+                <p v-if="showSitesError" class="text-sm text-red-600">
+                    Sélectionne au moins un site.
+                </p>
+            </div>
+
+            <div class="flex justify-end gap-3 pt-2">
+                <button
+                    type="button"
+                    class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+                    @click="handleCancel"
+                >
+                    Annuler
+                </button>
+                <button
+                    type="submit"
+                    class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                    :class="submitButtonClass"
+                >
+                    Imprimer
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, toRef, watch } from 'vue'
+import AppDrawer from '~/components/AppDrawer.vue'
+
+type SiteOption = {
+    id: number
+    name: string
+    color: string
+}
+
+const props = defineProps<{
+    modelValue: boolean
+    sites: SiteOption[]
+    printForm: {
+        from: string
+        to: string
+        siteIds: number[]
+    }
+}>()
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: boolean): void
+    (event: 'submit'): void
+    (event: 'cancel'): void
+}>()
+
+const drawerOpen = computed({
+    get: () => props.modelValue,
+    set: (value: boolean) => emit('update:modelValue', value)
+})
+
+const printForm = toRef(props, 'printForm')
+
+const validationTouched = reactive({
+    from: false,
+    to: false,
+    sites: false
+})
+
+const isFromValid = computed(() => printForm.value.from.trim() !== '')
+const isToValid = computed(() => printForm.value.to.trim() !== '')
+const isSitesValid = computed(() => printForm.value.siteIds.length > 0)
+const isFormValid = computed(
+    () => isFromValid.value && isToValid.value && isSitesValid.value
+)
+
+const showFromError = computed(() => validationTouched.from && !isFromValid.value)
+const showToError = computed(() => validationTouched.to && !isToValid.value)
+const showSitesError = computed(() => validationTouched.sites && !isSitesValid.value)
+
+const baseInputClass =
+    'mt-2 w-full rounded-md border px-3 py-2 text-md text-neutral-900'
+const fromFieldClass = computed(() => {
+    if (showFromError.value) {
+        return `${baseInputClass} border-red-500`
+    }
+    return `${baseInputClass} border-neutral-300`
+})
+const toFieldClass = computed(() => {
+    if (showToError.value) {
+        return `${baseInputClass} border-red-500`
+    }
+    return `${baseInputClass} border-neutral-300`
+})
+
+const submitButtonClass = computed(() => {
+    if (!isFormValid.value) {
+        return 'opacity-50 cursor-not-allowed'
+    }
+    return ''
+})
+
+const handleSubmit = () => {
+    validationTouched.from = true
+    validationTouched.to = true
+    validationTouched.sites = true
+    if (!isFormValid.value) return
+    emit('submit')
+}
+
+const handleCancel = () => {
+    emit('cancel')
+    emit('update:modelValue', false)
+}
+
+watch(
+    () => props.modelValue,
+    (isOpen) => {
+        if (!isOpen) {
+            validationTouched.from = false
+            validationTouched.to = false
+            validationTouched.sites = false
+        }
+    }
+)
+</script>