SIRH/frontend/components/hours/HoursDayView.vue

<template>
  <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"
        :style="{ gridTemplateColumns: dayGridCols }"
      >
        <span>Nom</span>
        <span class="pl-4">Début matin</span>
        <span class="pr-2">Fin matin</span>
        <span class="pl-2">Début après-midi</span>
        <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">Absence</span>
        <span class="pl-2">Jour</span>
        <span>Nuit</span>
        <span>Total</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
        v-for="employee in employees"
        :key="employee.id"
        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"
        :style="{ gridTemplateColumns: dayGridCols }"
      >
        <div class="text-neutral-900 min-w-0">
          <p class="font-semibold truncate">
            {{ employee.firstName }} {{ employee.lastName }}
            <span class="font-normal text-neutral-600">({{ contractLabel(employee) }})</span>
          </p>
          <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) || (!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) || (!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) || (!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) || (!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) || (!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) || (!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) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
          />
        </div>
        <div class="pr-2">
          <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 text-sm font-semibold text-neutral-700">
          <div v-if="isTimeTracking(employee)">{{ formatMinutes(getRowMetrics(employee.id).dayMinutes) }}</div>
        </div>
        <div class="text-sm font-semibold text-neutral-700">
          <div v-if="isTimeTracking(employee)">{{ formatMinutes(getRowMetrics(employee.id).nightMinutes) }}</div>
        </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>
          <input
            v-if="isAdmin"
            :checked="rows[employee.id]?.isValid ?? false"
            type="checkbox"
            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>
  </div>
</template>

<script setup lang="ts">
import type { Employee } from '~/services/dto/employee'
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)

const props = defineProps<{
  employees: Employee[]
  isAdmin: boolean
  dayGridCols: string
  contractLabel: (employee: Employee) => string
  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>