240 lines
12 KiB
Vue
240 lines
12 KiB
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">Absence</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>
|
|
<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'
|
|
|
|
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
|
|
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>
|