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

frontend/components/CalendarGrid.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
+        <div class="min-w-[900px]">
+            <div class="grid" :style="gridStyle">
+                <div
+                    class="sticky left-0 z-20 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700"
+                >
+                    Employés
+                </div>
+                <div
+                    v-for="day in daysInMonth"
+                    :key="day.date"
+                    class="border-b border-neutral-200 bg-tertiary-500 px-2 py-3 text-center text-xs font-semibold text-neutral-700"
+                >
+                    <div>{{ day.label }}</div>
+                    <div class="text-[10px] text-neutral-500">{{ day.weekday }}</div>
+                </div>
+
+                <template v-for="employee in visibleEmployees" :key="employee.id">
+                    <div
+                        class="sticky left-0 z-10 border-b border-neutral-100 px-4 py-3 text-md font-semibold text-black"
+                        :style="{ backgroundColor: employee.site?.color ?? '#304998' }"
+                    >
+                        {{ formatEmployeeName(employee) }}
+                    </div>
+                    <div
+                        v-for="day in daysInMonth"
+                        :key="employee.id + '-' + day.date"
+                        class="border-b border-neutral-100 px-2 py-2 text-center text-xs text-neutral-800"
+                    >
+                        <button
+                            type="button"
+                            class="flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 hover:border-primary-500/40"
+                            :class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
+                            :style="getCellStyle(employee.id, day.date)"
+                            :disabled="isHolidayDate(day.date)"
+                            @click="handleCellClick(employee, day.date)"
+                        >
+                            <span v-if="getCellCode(employee.id, day.date)">
+                                {{ getCellCode(employee.id, day.date) }}
+                            </span>
+                        </button>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Employee } from '~/services/dto/employee'
+
+type DayInfo = {
+    date: string
+    label: string
+    weekday: string
+}
+
+defineProps<{
+    daysInMonth: DayInfo[]
+    visibleEmployees: Employee[]
+    gridStyle: Record<string, string>
+    getCellStyle: (employeeId: number, date: string) => Record<string, string> | undefined
+    getCellCode: (employeeId: number, date: string) => string
+    formatEmployeeName: (employee: Employee) => string
+    isHolidayDate: (date: string) => boolean
+}>()
+
+const emit = defineEmits<{
+    (event: 'cell-click', employee: Employee, date: string): void
+}>()
+
+const handleCellClick = (employee: Employee, date: string) => {
+    emit('cell-click', employee, date)
+}
+</script>