105 lines
4.2 KiB
Vue
105 lines
4.2 KiB
Vue
<template>
|
|
<div class="bg-white overflow-hidden flex min-h-0 flex-col">
|
|
<div v-if="isWeekLoading" class="p-6 text-md text-neutral-600">Chargement de la semaine...</div>
|
|
<div v-else 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: weekGridCols }"
|
|
>
|
|
<span>Nom</span>
|
|
<span v-for="day in weekDayHeaders" :key="day.date" class="text-left">{{ day.label }}</span>
|
|
<span>Jour/Nuit <br>sem.</span>
|
|
<span>Total <br>sem.</span>
|
|
<span>Total <br>h. supp.</span>
|
|
<span>+25%</span>
|
|
<span>+50%</span>
|
|
<span>Total <br>récup.</span>
|
|
<span>Panier <br>nuit</span>
|
|
</div>
|
|
|
|
<div class="border-x border-b border-primary-500 rounded-b-md">
|
|
<div
|
|
v-for="row in weeklySummary?.rows ?? []"
|
|
:key="row.employeeId"
|
|
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: weekGridCols }"
|
|
>
|
|
<div class="text-neutral-900 min-w-0">
|
|
<p class="font-semibold truncate">
|
|
{{ row.firstName }} {{ row.lastName }}
|
|
<span class="font-normal text-neutral-600">({{ row.contractName ?? '-' }})</span>
|
|
</p>
|
|
<p class="text-[11px] text-neutral-500 truncate">{{ row.siteName ?? 'Sans site' }}</p>
|
|
</div>
|
|
|
|
<div
|
|
v-for="daily in row.daily"
|
|
:key="daily.date"
|
|
class="text-left leading-4 rounded-md px-2 py-1"
|
|
:class="daily.hasAbsence ? 'text-white' : ''"
|
|
:style="getDailyCellStyle(daily)"
|
|
:title="daily.absenceLabel ?? ''"
|
|
>
|
|
<template v-if="row.trackingMode === 'PRESENCE'">{{ daily.present ?? 0 }}</template>
|
|
<template v-else>
|
|
<div>J {{ formatMinutes(daily.dayMinutes) }}</div>
|
|
<div>N {{ formatMinutes(daily.nightMinutes) }}</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="font-semibold leading-4">
|
|
<template v-if="row.trackingMode === 'PRESENCE'">-</template>
|
|
<template v-else>
|
|
<div>J {{ formatMinutes(row.weeklyDayMinutes) }}</div>
|
|
<div>N {{ formatMinutes(row.weeklyNightMinutes) }}</div>
|
|
</template>
|
|
</div>
|
|
<div class="font-semibold">
|
|
{{ row.trackingMode === 'PRESENCE' ? (row.weeklyPresenceCount ?? 0) : formatMinutes(row.weeklyTotalMinutes) }}
|
|
</div>
|
|
<div class="font-semibold">
|
|
{{ row.trackingMode === 'PRESENCE' ? '-' : formatMinutes(row.weeklyOvertimeTotalMinutes ?? 0) }}
|
|
</div>
|
|
<div class="font-semibold">
|
|
{{ row.trackingMode === 'PRESENCE' || isInterimContract(row.contractType) ? '-' : formatMinutes(row.weeklyOvertime25Minutes ?? 0) }}
|
|
</div>
|
|
<div class="font-semibold">
|
|
{{ row.trackingMode === 'PRESENCE' || isInterimContract(row.contractType) ? '-' : formatMinutes(row.weeklyOvertime50Minutes ?? 0) }}
|
|
</div>
|
|
<div class="font-semibold">
|
|
{{ row.trackingMode === 'PRESENCE' || isInterimContract(row.contractType) ? '-' : formatMinutes(row.weeklyRecoveryMinutes ?? 0) }}
|
|
</div>
|
|
<div class="font-semibold">
|
|
{{ (row.weeklyNightBasketCount ?? 0) > 0 ? row.weeklyNightBasketCount : '-' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { WeeklyWorkHourSummary } from '~/services/dto/work-hour'
|
|
import { CONTRACT_TYPES, type ContractType } from '~/services/dto/contract'
|
|
|
|
const isInterimContract = (contractType?: ContractType | null) => {
|
|
return contractType === CONTRACT_TYPES.INTERIM
|
|
}
|
|
|
|
const getDailyCellStyle = (daily: {
|
|
hasAbsence?: boolean
|
|
absenceColor?: string | null
|
|
}) => {
|
|
if (!daily.hasAbsence) return undefined
|
|
return { backgroundColor: daily.absenceColor || '#dc2626' }
|
|
}
|
|
|
|
defineProps<{
|
|
isWeekLoading: boolean
|
|
weekGridCols: string
|
|
weeklySummary: WeeklyWorkHourSummary | null
|
|
weekDayHeaders: Array<{ date: string; label: string }>
|
|
formatMinutes: (minutes: number) => string
|
|
}>()
|
|
</script>
|