fix : wip

2026-02-19 17:44:37 +01:00
parent c2e118dc33
commit 13274ff297
31 changed files with 1539 additions and 126 deletions
--- a/frontend/components/hours/HoursDayView.vue
+++ b/frontend/components/hours/HoursDayView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex flex-1 min-h-0 flex-col">
+  <div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex min-h-0 flex-col">
    <div class="overflow-y-auto min-h-0">
      <div
        class="grid w-full min-w-0 gap-1 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-sm font-semibold text-neutral-700 sticky top-0 z-10"
@@ -12,11 +12,22 @@
        <span class="pr-2">Fin après-midi</span>
        <span class="pl-2">Début soir</span>
        <span class="pr-2">Fin soir</span>
-        <span class="pl-2">Présent</span>
+        <span class="pl-2">Absence</span>
        <span class="pl-2">Jour</span>
        <span>Nuit</span>
        <span>Total</span>
-        <span v-if="isAdmin">Valider</span>
+        <span class="inline-flex items-center gap-2">
+          <span v-if="isAdmin">Valider</span>
+          <span v-else>Validation RH</span>
+          <input
+            v-if="isAdmin"
+            ref="bulkValidationInput"
+            :checked="isBulkValidationChecked"
+            type="checkbox"
+            class="h-4 w-4 cursor-pointer"
+            @change="onBulkValidationChange"
+          />
+        </span>
      </div>

      <div
@@ -33,38 +44,78 @@
          <p class="text-neutral-500 truncate">{{ employee.site?.name ?? 'Sans site' }}</p>
        </div>
        <div class="pl-4">
-          <TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].morningFrom" :disabled="isRowLocked(employee.id)"/>
+          <TimeSelect
+            v-if="isTimeTracking(employee)"
+            v-model="rows[employee.id].morningFrom"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
+          />
          <input
            v-else-if="isPresenceTracking(employee)"
            v-model="rows[employee.id].isPresentMorning"
            type="checkbox"
            class="cursor-pointer h-4 w-4"
-            :disabled="isRowLocked(employee.id)"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
          />
        </div>
        <div class="pr-2">
-          <TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].morningTo" :disabled="isRowLocked(employee.id)"/>
+          <TimeSelect
+            v-if="isTimeTracking(employee)"
+            v-model="rows[employee.id].morningTo"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
+          />
        </div>
        <div class="pl-2">
-          <TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].afternoonFrom" :disabled="isRowLocked(employee.id)"/>
+          <TimeSelect
+            v-if="isTimeTracking(employee)"
+            v-model="rows[employee.id].afternoonFrom"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
+          />
          <input
            v-else-if="isPresenceTracking(employee)"
            v-model="rows[employee.id].isPresentAfternoon"
            type="checkbox"
            class="cursor-pointer h-4 w-4"
-            :disabled="isRowLocked(employee.id)"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
          />
        </div>
        <div class="pr-2">
-          <TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].afternoonTo" :disabled="isRowLocked(employee.id)"/>
+          <TimeSelect
+            v-if="isTimeTracking(employee)"
+            v-model="rows[employee.id].afternoonTo"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
+          />
        </div>
        <div class="pl-2">
-          <TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].eveningFrom" :disabled="isRowLocked(employee.id)"/>
+          <TimeSelect
+            v-if="isTimeTracking(employee)"
+            v-model="rows[employee.id].eveningFrom"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
+          />
        </div>
        <div class="pr-2">
-          <TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].eveningTo" :disabled="isRowLocked(employee.id)"/>
+          <TimeSelect
+            v-if="isTimeTracking(employee)"
+            v-model="rows[employee.id].eveningTo"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
+          />
+        </div>
+        <div class="pl-2 self-stretch flex flex-col justify-between py-0.5">
+          <p
+            class="text-sm text-neutral-700 truncate"
+            :class="getRowAbsenceLabel(employee.id) ? '' : 'invisible'"
+          >
+            {{ getRowAbsenceLabel(employee.id) || '—' }}
+          </p>
+          <button
+            type="button"
+            class="self-start text-left text-xs font-semibold underline"
+            :class="isRowLocked(employee.id) ? 'text-neutral-400 cursor-not-allowed' : 'text-primary-500 cursor-pointer'"
+            :disabled="isRowLocked(employee.id)"
+            @click="onAbsenceClick(employee.id)"
+          >
+            Modifier
+          </button>
        </div>
-        <div class="pl-2"></div>
        <div class="pl-2 text-sm font-semibold text-neutral-700">
          <div v-if="isTimeTracking(employee)">{{ formatMinutes(getRowMetrics(employee.id).dayMinutes) }}</div>
        </div>
@@ -73,16 +124,17 @@
        </div>
        <div class="text-sm font-semibold text-neutral-700">
          <div v-if="isTimeTracking(employee)">{{ formatMinutes(getRowMetrics(employee.id).totalMinutes) }}</div>
+          <div v-else>{{ getPresenceDayValue(employee.id) }}</div>
        </div>
-        <div v-if="isAdmin">
+        <div>
          <input
+            v-if="isAdmin"
            :checked="rows[employee.id]?.isValid ?? false"
            type="checkbox"
-            class="h-4 w-4"
-            :class="rows[employee.id]?.workHourId ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'"
-            :disabled="!rows[employee.id]?.workHourId || isValidationPending(employee.id)"
+            class="h-4 w-4 cursor-pointer"
            @change="onToggleValidation(employee.id, ($event.target as HTMLInputElement).checked)"
          />
+          <span v-else-if="rows[employee.id]?.isValid" class="text-xs font-semibold text-neutral-700">Validé</span>
        </div>
      </div>
    </div>
@@ -95,8 +147,9 @@ import TimeSelect from '~/components/ui/TimeSelect.vue'
 import type { HourRow } from './types'

 const rows = defineModel<Record<number, HourRow>>('rows', { required: true })
+const bulkValidationInput = ref<HTMLInputElement | null>(null)

-defineProps<{
+const props = defineProps<{
  employees: Employee[]
  isAdmin: boolean
  dayGridCols: string
@@ -104,9 +157,31 @@ defineProps<{
  isTimeTracking: (employee: Employee) => boolean
  isPresenceTracking: (employee: Employee) => boolean
  isRowLocked: (employeeId: number) => boolean
+  isHalfLockedByAbsence: (employeeId: number, half: 'AM' | 'PM') => boolean
+  isEveningLockedByAbsence: (employeeId: number) => boolean
  isValidationPending: (employeeId: number) => boolean
+  canToggleValidation: (employeeId: number) => boolean
+  isBulkValidationChecked: boolean
+  isBulkValidationIndeterminate: boolean
  onToggleValidation: (employeeId: number, checked: boolean) => void
+  onToggleValidationBulk: (checked: boolean) => void
  getRowMetrics: (employeeId: number) => { dayMinutes: number; nightMinutes: number; totalMinutes: number }
+  getRowAbsenceLabel: (employeeId: number) => string
+  getPresenceDayValue: (employeeId: number) => string
+  onAbsenceClick: (employeeId: number) => void
  formatMinutes: (minutes: number) => string
 }>()
+
+const onBulkValidationChange = (event: Event) => {
+  props.onToggleValidationBulk((event.target as HTMLInputElement).checked)
+}
+
+watch(
+  () => props.isBulkValidationIndeterminate,
+  (isIndeterminate) => {
+    if (!bulkValidationInput.value) return
+    bulkValidationInput.value.indeterminate = isIndeterminate
+  },
+  { immediate: true }
+)
 </script>
--- a/frontend/components/hours/HoursToolbar.vue
+++ b/frontend/components/hours/HoursToolbar.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="py-6 flex flex-col gap-3">
-    <SiteFilterSelector v-if="sites.length > 0" v-model="selectedSiteIds" :sites="sites" />
+    <SiteFilterSelector v-if="sites.length > 0 && isAdmin" v-model="selectedSiteIds" :sites="sites" />

    <div class="flex justify-between items-center gap-4">
      <div class="flex gap-4 flex-wrap">
@@ -34,14 +34,46 @@
        </button>
      </div>

+      <div
+        v-else
+        class="inline-flex h-10 w-[320px] overflow-hidden rounded-md border border-primary-500 bg-white"
+      >
+        <button
+          type="button"
+          class="flex-1 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="weekShortcutButtonClass('previousWeek')"
+          @click="emit('set-previous-week')"
+        >
+          {{ getWeekShortcutLabel('previousWeek') }}
+        </button>
+        <button
+          type="button"
+          class="flex-1 border-x border-primary-500 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="weekShortcutButtonClass('thisWeek')"
+          @click="emit('set-this-week')"
+        >
+          {{ getWeekShortcutLabel('thisWeek') }}
+        </button>
+        <button
+          type="button"
+          class="flex-1 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="weekShortcutButtonClass('nextWeek')"
+          @click="emit('set-next-week')"
+        >
+          {{ getWeekShortcutLabel('nextWeek') }}
+        </button>
+      </div>
+
      <div class="relative inline-flex h-10 w-[320px] items-center overflow-hidden rounded-md border border-primary-500 bg-white">
        <input
          ref="nativeDateInput"
-          v-model="selectedDate"
-          type="date"
+          :value="pickerValue"
+          :type="viewMode === 'week' ? 'week' : 'date'"
          class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
          tabindex="-1"
          aria-hidden="true"
+          @input="onPickerInput"
+          @change="onPickerInput"
        />
        <button
          type="button"
@@ -91,7 +123,7 @@
      </div>
    </div>

-    <div class="w-80 max-w-full">
+    <div v-if="isAdmin" class="w-80 max-w-full">
      <EmployeeNameFilterInput v-model="employeeFilter" />
    </div>
  </div>
@@ -101,6 +133,7 @@
 import type { Site } from '~/services/dto/site'
 import EmployeeNameFilterInput from '~/components/EmployeeNameFilterInput.vue'
 import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
+import { weekInputValueToYmd, ymdToWeekInputValue } from '~/utils/date'

 const selectedDate = defineModel<string>('selectedDate', { required: true })
 const viewMode = defineModel<'day' | 'week'>('viewMode', { required: true })
@@ -112,16 +145,25 @@ defineProps<{
  sites: Site[]
  formattedSelectedDate: string
  shortcutButtonClass: (target: 'yesterday' | 'today' | 'tomorrow') => string
+  weekShortcutButtonClass: (target: 'previousWeek' | 'thisWeek' | 'nextWeek') => string
+  getWeekShortcutLabel: (target: 'previousWeek' | 'thisWeek' | 'nextWeek') => string
 }>()

 const emit = defineEmits<{
  (e: 'set-yesterday'): void
  (e: 'set-today'): void
  (e: 'set-tomorrow'): void
+  (e: 'set-previous-week'): void
+  (e: 'set-this-week'): void
+  (e: 'set-next-week'): void
  (e: 'shift-date', value: number): void
 }>()

 const nativeDateInput = ref<HTMLInputElement | null>(null)
+const pickerValue = computed(() => {
+  if (viewMode.value === 'week') return ymdToWeekInputValue(selectedDate.value)
+  return selectedDate.value
+})

 const viewModeButtonClass = (mode: 'day' | 'week') => {
  if (viewMode.value === mode) {
@@ -141,4 +183,18 @@ const openDatePicker = () => {
  input.focus()
  input.click()
 }
+
+const onPickerInput = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value
+  if (!value) return
+
+  if (viewMode.value === 'week') {
+    const ymd = weekInputValueToYmd(value)
+    if (!ymd) return
+    selectedDate.value = ymd
+    return
+  }
+
+  selectedDate.value = value
+}
 </script>
--- a/frontend/components/hours/HoursWeekView.vue
+++ b/frontend/components/hours/HoursWeekView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex flex-1 min-h-0 flex-col">
+  <div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex min-h-0 flex-col">
    <div v-if="isWeekLoading" class="p-6 text-md text-neutral-600">Chargement de la semaine...</div>
    <div v-else class="overflow-y-auto min-h-0">
      <div
@@ -8,16 +8,18 @@
      >
        <span>Nom</span>
        <span v-for="day in weekDayHeaders" :key="day.date" class="text-left">{{ day.label }}</span>
-        <span>Jour/Nuit sem.</span>
-        <span>Total sem.</span>
+        <span>Jour/Nuit <br>sem.</span>
+        <span>Total <br>sem.</span>
+        <span>Total <br>h. supp.</span>
        <span>+25%</span>
        <span>+50%</span>
+        <span>Total <br>récup.</span>
      </div>

      <div
        v-for="row in weeklySummary?.rows ?? []"
        :key="row.employeeId"
-        class="grid w-full min-w-0 items-center gap-1 border-b border-neutral-100 px-4 py-2 text-sm last:border-b-0"
+        class="grid w-full min-w-0 items-center gap-1 border-b border-neutral-100 px-4 py-2 text-sm last:border-b-0 hover:bg-tertiary-500"
        :style="{ gridTemplateColumns: weekGridCols }"
      >
        <div class="text-neutral-900 min-w-0">
@@ -46,12 +48,18 @@
        <div class="font-semibold">
          {{ row.trackingMode === 'PRESENCE' ? (row.weeklyPresenceCount ?? 0) : formatMinutes(row.weeklyTotalMinutes) }}
        </div>
+        <div class="font-semibold">
+          {{ row.trackingMode === 'PRESENCE' ? '-' : formatMinutes(row.weeklyOvertimeTotalMinutes ?? 0) }}
+        </div>
        <div class="font-semibold">
          {{ row.trackingMode === 'PRESENCE' ? '-' : formatMinutes(row.weeklyOvertime25Minutes ?? 0) }}
        </div>
        <div class="font-semibold">
          {{ row.trackingMode === 'PRESENCE' ? '-' : formatMinutes(row.weeklyOvertime50Minutes ?? 0) }}
        </div>
+        <div class="font-semibold">
+          {{ row.trackingMode === 'PRESENCE' ? '-' : formatMinutes(row.weeklyRecoveryMinutes ?? 0) }}
+        </div>
      </div>
    </div>
  </div>