113 lines
4.9 KiB
Vue
113 lines
4.9 KiB
Vue
<template>
|
|
<div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex flex-1 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">Présent</span>
|
|
<span class="pl-2">Jour</span>
|
|
<span>Nuit</span>
|
|
<span>Total</span>
|
|
<span v-if="isAdmin">Valider</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)"/>
|
|
<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)"
|
|
/>
|
|
</div>
|
|
<div class="pr-2">
|
|
<TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].morningTo" :disabled="isRowLocked(employee.id)"/>
|
|
</div>
|
|
<div class="pl-2">
|
|
<TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].afternoonFrom" :disabled="isRowLocked(employee.id)"/>
|
|
<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)"
|
|
/>
|
|
</div>
|
|
<div class="pr-2">
|
|
<TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].afternoonTo" :disabled="isRowLocked(employee.id)"/>
|
|
</div>
|
|
<div class="pl-2">
|
|
<TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].eveningFrom" :disabled="isRowLocked(employee.id)"/>
|
|
</div>
|
|
<div class="pr-2">
|
|
<TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].eveningTo" :disabled="isRowLocked(employee.id)"/>
|
|
</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>
|
|
<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>
|
|
<div v-if="isAdmin">
|
|
<input
|
|
: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)"
|
|
@change="onToggleValidation(employee.id, ($event.target as HTMLInputElement).checked)"
|
|
/>
|
|
</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 })
|
|
|
|
defineProps<{
|
|
employees: Employee[]
|
|
isAdmin: boolean
|
|
dayGridCols: string
|
|
contractLabel: (employee: Employee) => string
|
|
isTimeTracking: (employee: Employee) => boolean
|
|
isPresenceTracking: (employee: Employee) => boolean
|
|
isRowLocked: (employeeId: number) => boolean
|
|
isValidationPending: (employeeId: number) => boolean
|
|
onToggleValidation: (employeeId: number, checked: boolean) => void
|
|
getRowMetrics: (employeeId: number) => { dayMinutes: number; nightMinutes: number; totalMinutes: number }
|
|
formatMinutes: (minutes: number) => string
|
|
}>()
|
|
</script>
|