SIRH/frontend/components/driver-hours/DriverHoursDayView.vue

<template>
    <div class="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 border-black bg-tertiary-500 px-4 py-3 text-sm font-semibold text-black rounded-t-md sticky top-0 z-10"
                :style="{ gridTemplateColumns: dayGridCols }"
            >
                <span>Nom</span>
                <span class="pl-2">Statut</span>
                <span class="pl-4">Heure de jour</span>
                <span class="pl-2">Heure de nuit</span>
                <span class="pl-2">Heure atelier</span>
                <span class="pl-2">Total</span>
                <span>Petit déj.</span>
                <span>Déjeuner</span>
                <span>Dîner</span>
                <span>Nuitée</span>
                <span v-if="isAdmin" class="flex justify-between items-center">
          <span>Valider</span>
          <input
              ref="bulkValidationInput"
              :checked="isBulkValidationChecked"
              type="checkbox"
              class="h-4 w-4 cursor-pointer"
              @change="onBulkValidationChange"
          />
        </span>
                <span v-else-if="!isSiteManager">Site <Icon name="mdi:check-bold" class="ml-1"/></span>
                <span v-if="!isAdmin">RH <Icon name="mdi:check-bold" class="ml-1"/></span>
            </div>

            <div class="border-x border-b border-primary-500 rounded-b-md">
                <div
                    v-for="employee in employees"
                    :key="employee.id"
                    class="grid w-full min-w-0 items-center gap-1 border-b border-primary-500 px-4 py-2 text-sm font-bold text-primary-500 last:border-b-0 hover:bg-tertiary-500"
                    :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 inline-flex items-center gap-2">
                            <span>
                                {{ employee.site?.name ?? 'Sans site' }}<span v-if="getRowContractNature(employee.id)"> — {{ contractNatureLabel(getRowContractNature(employee.id) ?? undefined) }}</span>
                            </span>
                            <span
                                v-if="isAdmin && (rows[employee.id]?.isSiteValid ?? false)"
                                class="rounded-full bg-green-500 flex justify-center item-center text-white p-0.5"
                                title="Validation site"
                            >
                <Icon name="mdi:check"/>
              </span>
                        </p>
                        <p v-if="isAdmin && getRowUpdatedAt(employee.id)" class="text-neutral-400 text-xs truncate">
                            Modifié le {{ getRowUpdatedAt(employee.id) }}
                        </p>
                    </div>
                    <div class="pl-2 min-w-0 self-stretch flex flex-col gap-1 justify-between py-0.5">
                        <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
                            type="button"
                            class="self-start text-left text-xs font-semibold underline"
                            :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
                        </button>
                    </div>
                    <div class="pl-4">
                        <TimeSelect
                            v-model="rows[employee.id].dayHours"
                            :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
                        />
                        <p
                            v-if="isHoliday && getRowMetrics(employee.id).virtualHolidayMinutes > 0"
                            class="mt-1 text-xs font-semibold text-sky-700"
                        >
                            = {{ formatMinutes(getRowMetrics(employee.id).dayMinutes) }} (férié)
                        </p>
                    </div>
                    <div class="pl-2">
                        <TimeSelect
                            v-model="rows[employee.id].nightHours"
                            :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
                        />
                    </div>
                    <div class="pl-2">
                        <TimeSelect
                            v-model="rows[employee.id].workshopHours"
                            :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
                        />
                    </div>
                    <div class="pl-2 text-sm font-semibold">
                        {{ formatMinutes(getRowMetrics(employee.id).totalMinutes) }}
                    </div>
                    <div class="flex">
                        <input
                            v-model="rows[employee.id].hasBreakfast"
                            type="checkbox"
                            class="cursor-pointer h-4 w-4"
                            :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
                        />
                    </div>
                    <div class="flex">
                        <input
                            v-model="rows[employee.id].hasLunch"
                            type="checkbox"
                            class="cursor-pointer h-4 w-4"
                            :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
                        />
                    </div>
                    <div class="flex">
                        <input
                            v-model="rows[employee.id].hasDinner"
                            type="checkbox"
                            class="cursor-pointer h-4 w-4"
                            :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
                        />
                    </div>
                    <div class="flex">
                        <input
                            v-model="rows[employee.id].hasOvernight"
                            type="checkbox"
                            class="cursor-pointer h-4 w-4"
                            :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
                        />
                    </div>
                    <div v-if="isAdmin" class="text-right">
                        <input
                            :checked="rows[employee.id]?.isValid ?? false"
                            type="checkbox"
                            class="h-4 w-4 cursor-pointer"
                            @change="onToggleValidation(employee.id, ($event.target as HTMLInputElement).checked)"
                        />
                    </div>
                    <div v-else-if="!isSiteManager" class="text-right p-5">
                        <span v-if="rows[employee.id]?.isSiteValid" class="text-xs font-semibold text-neutral-700">Validé</span>
                        <span v-else class="text-xs text-neutral-500">-</span>
                    </div>
                    <div v-if="!isAdmin">
                        <span v-if="rows[employee.id]?.isValid" class="text-xs font-semibold text-neutral-700">Validé</span>
                        <span v-else class="text-xs text-neutral-500">-</span>
                    </div>
                </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 { DriverHourRow } from '~/services/dto/work-hour'
import { contractNatureLabel } from '~/utils/contract'

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

const props = defineProps<{
    employees: Employee[]
    isAdmin: boolean
    isSiteManager: boolean
    dayGridCols: string
    isHoliday: boolean
    holidayLabel: string
    contractLabel: (employee: Employee) => string
    isRowLocked: (employeeId: number) => boolean
    hasContractAtSelectedDate: (employeeId: number) => boolean
    isValidationPending: (employeeId: number) => boolean
    isSiteValidationPending: (employeeId: number) => boolean
    canToggleValidation: (employeeId: number) => boolean
    canToggleSiteValidation: (employeeId: number) => boolean
    canCreateSiteValidationRowFromAbsence: (employeeId: number) => boolean
    isBulkValidationChecked: boolean
    isBulkValidationIndeterminate: boolean
    isBulkSiteValidationChecked: boolean
    isBulkSiteValidationIndeterminate: boolean
    canBulkToggleSiteValidation: boolean
    onToggleValidation: (employeeId: number, checked: boolean) => void
    onToggleSiteValidation: (employeeId: number, checked: boolean) => void
    onToggleValidationBulk: (checked: boolean) => Promise<void> | void
    onToggleSiteValidationBulk: (checked: boolean) => Promise<void> | void
    getRowMetrics: (employeeId: number) => { dayMinutes: number; nightMinutes: number; workshopMinutes: number; totalMinutes: number; virtualHolidayMinutes: number }
    getRowAbsenceLabel: (employeeId: number) => string
    getRowAbsenceStyle: (employeeId: number) => { backgroundColor: string } | undefined
    getRowContractNature: (employeeId: number) => 'CDI' | 'CDD' | 'INTERIM' | null
    getRowUpdatedAt: (employeeId: number) => string
    onAbsenceClick: (employeeId: number) => void
    formatMinutes: (minutes: number) => string
}>()

const onBulkValidationChange = (event: Event) => {
    props.onToggleValidationBulk((event.target as HTMLInputElement).checked)
}

const onBulkSiteValidationChange = (event: Event) => {
    props.onToggleSiteValidationBulk((event.target as HTMLInputElement).checked)
}

const onToggleSiteValidation = (employeeId: number, checked: boolean) => {
    props.onToggleSiteValidation(employeeId, checked)
}

watch(
    () => props.isBulkValidationIndeterminate,
    (isIndeterminate) => {
        if (!bulkValidationInput.value) return
        bulkValidationInput.value.indeterminate = isIndeterminate
    },
    { immediate: true }
)

watch(
    () => props.isBulkSiteValidationIndeterminate,
    (isIndeterminate) => {
        if (!bulkSiteValidationInput.value) return
        bulkSiteValidationInput.value.indeterminate = isIndeterminate
    },
    { immediate: true }
)
</script>