fix : exclusion de certain jour férié et affichage différent des jours férié dans la page d'heure

2026-04-14 11:25:44 +02:00
parent 46cb7f1a16
commit 399fd7335e
13 changed files with 96 additions and 20 deletions
--- a/frontend/components/driver-hours/DriverHoursDayView.vue
+++ b/frontend/components/driver-hours/DriverHoursDayView.vue
@@ -56,19 +56,31 @@
                        </p>
                    </div>
                    <div class="pl-2 min-w-0 self-stretch flex flex-col gap-1 justify-between py-0.5">
-                        <p
-                            class="w-full min-w-0 rounded-md px-2 py-1 text-xs truncate"
-                            :class="getRowAbsenceLabel(employee.id) ? 'text-white' : 'invisible'"
-                            :title="getRowAbsenceLabel(employee.id) || ''"
-                            :style="getRowAbsenceStyle(employee.id)"
-                        >
-                            {{ getRowAbsenceLabel(employee.id) || '—' }}
-                        </p>
+                        <div class="flex flex-col gap-1 min-w-0">
+                            <p
+                                class="w-full min-w-0 rounded-md px-2 py-1 text-xs truncate"
+                                :class="getRowAbsenceLabel(employee.id) ? 'text-white' : 'invisible'"
+                                :title="getRowAbsenceLabel(employee.id) || ''"
+                                :style="getRowAbsenceStyle(employee.id)"
+                            >
+                                {{ getRowAbsenceLabel(employee.id) || '—' }}
+                            </p>
+                            <p
+                                v-if="isHoliday"
+                                class="w-full min-w-0 rounded-md px-2 py-1 text-xs truncate text-sky-900 inline-flex items-center gap-1"
+                                style="background-color: #b3e5fc"
+                                :title="holidayLabel || 'Férié'"
+                            >
+                                <Icon name="mdi:calendar-star" size="14" class="shrink-0"/>
+                                <span class="truncate">{{ holidayLabel || 'Férié' }}</span>
+                            </p>
+                        </div>
                        <button
+                            v-if="!isHoliday"
                            type="button"
                            class="self-start text-left text-xs font-semibold underline"
-                            :class="isHoliday || isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id) ? 'text-neutral-400 cursor-not-allowed' : 'text-primary-500 cursor-pointer'"
-                            :disabled="isHoliday || isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id)"
+                            :class="isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id) ? 'text-neutral-400 cursor-not-allowed' : 'text-primary-500 cursor-pointer'"
+                            :disabled="isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id)"
                            @click="onAbsenceClick(employee.id)"
                        >
                            Modifier
@@ -164,6 +176,7 @@ const props = defineProps<{
    isSiteManager: boolean
    dayGridCols: string
    isHoliday: boolean
+    holidayLabel: string
    contractLabel: (employee: Employee) => string
    isRowLocked: (employeeId: number) => boolean
    hasContractAtSelectedDate: (employeeId: number) => boolean
--- a/frontend/components/hours/HoursDayView.vue
+++ b/frontend/components/hours/HoursDayView.vue
@@ -66,6 +66,15 @@
                        >
                            {{ getRowAbsenceLabel(employee.id) || '—' }}
                        </p>
+                        <p
+                            v-if="isHoliday"
+                            class="w-full min-w-0 rounded-md px-2 py-1 text-xs truncate text-sky-900 inline-flex items-center gap-1"
+                            style="background-color: #b3e5fc"
+                            :title="holidayLabel || 'Férié'"
+                        >
+                            <Icon name="mdi:calendar-star" size="14" class="shrink-0"/>
+                            <span class="truncate">{{ holidayLabel || 'Férié' }}</span>
+                        </p>
                        <p
                            v-if="hasRowFormation(employee.id)"
                            class="w-full min-w-0 rounded-md px-2 py-1 text-xs truncate text-white bg-indigo-500 inline-flex items-center gap-1"
@@ -76,11 +85,11 @@
                        </p>
                    </div>
                    <button
-                        v-if="!hasRowFormation(employee.id)"
+                        v-if="!hasRowFormation(employee.id) && !isHoliday"
                        type="button"
                        class="self-start text-left text-xs font-semibold underline"
-                        :class="isHoliday || isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id) ? 'text-neutral-400 cursor-not-allowed' : 'text-primary-500 cursor-pointer'"
-                        :disabled="isHoliday || isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id)"
+                        :class="isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id) ? 'text-neutral-400 cursor-not-allowed' : 'text-primary-500 cursor-pointer'"
+                        :disabled="isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id)"
                        @click="onAbsenceClick(employee.id)"
                    >
                        Modifier
@@ -198,6 +207,7 @@ const props = defineProps<{
    isSiteManager: boolean
    dayGridCols: string
    isHoliday: boolean
+    holidayLabel: string
    contractLabel: (employee: Employee) => string
    isTimeTracking: (employee: Employee) => boolean
    isPresenceTracking: (employee: Employee) => boolean
--- a/frontend/composables/useDriverHoursPage.ts
+++ b/frontend/composables/useDriverHoursPage.ts
@@ -381,7 +381,6 @@ export const useDriverHoursPage = () => {
    if (dayRow && dayRow.hasContractAtDate === false) {
      return 'Contrat non démarré'
    }
-    if (isSelectedDateHoliday.value) return 'Férié'
    if (!dayRow?.absenceLabel) return ''
    if (dayRow.absenceHalf === 'AM' || dayRow.absenceHalf === 'PM') {
      const halfLabel = dayRow.absenceHalf === 'AM' ? 'Matin' : 'ap.-m.'
@@ -941,6 +940,7 @@ export const useDriverHoursPage = () => {
    saveButtonClass,
    formattedSelectedDate,
    isSelectedDateHoliday,
+    selectedHolidayLabel,
    weekDayHeaders,
    shortcutButtonClass,
    weekShortcutButtonClass,
--- a/frontend/composables/useHoursPage.ts
+++ b/frontend/composables/useHoursPage.ts
@@ -458,7 +458,6 @@ export const useHoursPage = () => {
    if (dayRow && dayRow.hasContractAtDate === false) {
      return 'Contrat non démarré'
    }
-    if (isSelectedDateHoliday.value) return 'Férié'
    if (!dayRow?.absenceLabel) return ''
    if (dayRow.absenceHalf === 'AM' || dayRow.absenceHalf === 'PM') {
      const halfLabel = dayRow.absenceHalf === 'AM' ? 'Matin' : 'ap.-m.'
@@ -1127,6 +1126,7 @@ export const useHoursPage = () => {
    saveButtonClass,
    formattedSelectedDate,
    isSelectedDateHoliday,
+    selectedHolidayLabel,
    weekDayHeaders,
    shortcutButtonClass,
    weekShortcutButtonClass,
--- a/frontend/data/documentation-content.ts
+++ b/frontend/data/documentation-content.ts
@@ -56,6 +56,7 @@ export const documentationSections: DocSection[] = [
          { type: 'list', content: 'Matin : heure de début et heure de fin\nAprès-midi : heure de début et heure de fin\nSoir : heure de début et heure de fin' },
          { type: 'paragraph', content: 'Le sélecteur de temps fonctionne par tranches de 15 minutes (00, 15, 30, 45). La saisie libre est possible mais sera corrigée automatiquement.' },
          { type: 'note', content: 'Les calculs sont mis à jour automatiquement : heures de jour (06:00–21:00), heures de nuit (00:00–06:00 et 21:00–24:00) et total.' },
+          { type: 'note', content: 'Jours fériés : le nom du férié apparaît en badge bleu dans la colonne Absence. La saisie d\'heures (ou de jours de présence) reste autorisée — elle est même nécessaire pour ne pas être en déficit sur la semaine concernée. La création d\'une absence sur un férié reste bloquée.' },
        ],
      },
      {
--- a/frontend/pages/driver-hours.vue
+++ b/frontend/pages/driver-hours.vue
@@ -43,6 +43,7 @@
                    :is-site-manager="isSiteManager"
                    :day-grid-cols="dayGridCols"
                    :is-holiday="isSelectedDateHoliday"
+                    :holiday-label="selectedHolidayLabel"
                    :contract-label="contractLabel"
                    :is-row-locked="isRowLocked"
                    :has-contract-at-selected-date="hasContractAtSelectedDate"
@@ -174,6 +175,7 @@ const {
  closeAbsenceDrawer,
  formatMinutes,
  isSelectedDateHoliday,
+  selectedHolidayLabel,
  handleSave
 } = useDriverHoursPage()

--- a/frontend/pages/hours.vue
+++ b/frontend/pages/hours.vue
@@ -43,6 +43,7 @@
                    :is-site-manager="isSiteManager"
                    :day-grid-cols="dayGridCols"
                    :is-holiday="isSelectedDateHoliday"
+                    :holiday-label="selectedHolidayLabel"
                    :contract-label="contractLabel"
                    :is-time-tracking="isTimeTracking"
                :is-presence-tracking="isPresenceTracking"
@@ -141,6 +142,7 @@ const {
  isSubmitting,
  dayGridCols,
  isSelectedDateHoliday,
+  selectedHolidayLabel,
  weekGridCols,
  saveButtonClass,
  formattedSelectedDate,