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-2">Absence</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">Jour</span>
                <span>Nuit</span>
                <span>Total</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" class="inline-flex items-center gap-2">
          <span>Site</span>
          <input
              ref="bulkSiteValidationInput"
              :checked="isBulkSiteValidationChecked"
              type="checkbox"
              class="h-4 w-4"
              :class="canBulkToggleSiteValidation ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'"
              :disabled="!canBulkToggleSiteValidation"
              @change="onBulkSiteValidationChange"
          />
        </span>
                <span v-else>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
                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 inline-flex items-center gap-2">
                        <span>{{ employee.site?.name ?? 'Sans site' }}</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">
                    <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>
                    <button
                        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)"
                        @click="onAbsenceClick(employee.id)"
                    >
                        Modifier
                    </button>
                </div>
                <div class="pl-4">
                    <TimeSelect
                        v-if="isTimeTracking(employee)"
                        v-model="rows[employee.id].morningFrom"
                        :disabled="!hasContractAtSelectedDate(employee.id) || 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="!hasContractAtSelectedDate(employee.id) || 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="!hasContractAtSelectedDate(employee.id) || 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="!hasContractAtSelectedDate(employee.id) || 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="!hasContractAtSelectedDate(employee.id) || 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="!hasContractAtSelectedDate(employee.id) || 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="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
                    />
                </div>
                <div class="pr-2">
                    <TimeSelect
                        v-if="isTimeTracking(employee)"
                        v-model="rows[employee.id].eveningTo"
                        :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
                    />
                </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 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 class="text-right p-5">
                    <input
                        v-if="isSiteManager"
                        :checked="rows[employee.id]?.isSiteValid ?? false"
                        type="checkbox"
                        class="h-4 w-4 cursor-pointer"
                        :disabled="(!canToggleSiteValidation(employee.id) && !canCreateSiteValidationRowFromAbsence(employee.id)) || isSiteValidationPending(employee.id)"
                        @change="onToggleSiteValidation(employee.id, ($event.target as HTMLInputElement).checked)"
                    />
                    <span v-else-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>
</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 bulkSiteValidationInput = ref<HTMLInputElement | null>(null)

const props = defineProps<{
    employees: Employee[]
    isAdmin: boolean
    isSiteManager: boolean
    dayGridCols: string
    isHoliday: boolean
    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
    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; totalMinutes: number }
    getRowAbsenceLabel: (employeeId: number) => string
    getRowAbsenceStyle: (employeeId: number) => { backgroundColor: string } | undefined
    getRowUpdatedAt: (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)
}

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>