106 lines
5.2 KiB
Vue
106 lines
5.2 KiB
Vue
<template>
|
|
<div class="h-full min-h-0 overflow-auto rounded-lg border border-neutral-200 bg-white">
|
|
<div class="min-w-[900px]">
|
|
<div class="grid" :style="gridStyle">
|
|
<div
|
|
class="sticky left-0 top-0 z-30 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700"
|
|
>
|
|
Employés
|
|
</div>
|
|
<div
|
|
v-for="day in daysInMonth"
|
|
:key="day.date"
|
|
class="sticky top-0 z-20 border-b border-neutral-200 bg-tertiary-500 px-2 py-3 text-center text-xs font-semibold text-neutral-700"
|
|
>
|
|
<div>{{ day.label }}</div>
|
|
<div class="text-[10px] text-neutral-500">{{ day.weekday }}</div>
|
|
</div>
|
|
|
|
<template v-for="employee in visibleEmployees" :key="employee.id">
|
|
<div
|
|
class="sticky left-0 z-10 border-b border-neutral-100 px-4 py-3 text-md font-semibold text-black"
|
|
:style="{ backgroundColor: employee.site?.color ?? '#304998' }"
|
|
>
|
|
{{ formatEmployeeName(employee) }}
|
|
</div>
|
|
<div
|
|
v-for="day in daysInMonth"
|
|
:key="employee.id + '-' + day.date"
|
|
class="border-b border-neutral-100 px-2 py-2 text-center text-xs text-neutral-800"
|
|
>
|
|
<template v-if="getCellInfo(employee.id, day.date)">
|
|
<button
|
|
type="button"
|
|
class="relative flex h-8 w-full items-center justify-center overflow-hidden rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 hover:border-primary-500/40"
|
|
:class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
|
|
:style="getCellStyle(employee.id, day.date)"
|
|
:disabled="isHolidayDate(day.date)"
|
|
@click="handleCellClick(employee, day.date)"
|
|
>
|
|
<span v-if="!getCellInfo(employee.id, day.date)?.halfLabel">
|
|
{{ getCellInfo(employee.id, day.date)?.code }}
|
|
</span>
|
|
<template v-else>
|
|
<span
|
|
v-if="getCellInfo(employee.id, day.date)?.halfLabel === 'AM'"
|
|
class="absolute top-0 left-0 flex h-1/2 w-full items-center justify-center text-[10px] font-semibold"
|
|
>
|
|
{{ getCellInfo(employee.id, day.date)?.code }}
|
|
</span>
|
|
<span
|
|
v-else
|
|
class="absolute bottom-0 left-0 flex h-1/2 w-full items-center justify-center text-[10px] font-semibold"
|
|
>
|
|
{{ getCellInfo(employee.id, day.date)?.code }}
|
|
</span>
|
|
</template>
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<button
|
|
type="button"
|
|
class="relative flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 hover:border-primary-500/40"
|
|
:class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
|
|
:style="getCellStyle(employee.id, day.date)"
|
|
:disabled="isHolidayDate(day.date)"
|
|
@click="handleCellClick(employee, day.date)"
|
|
>
|
|
<span></span>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Employee } from '~/services/dto/employee'
|
|
import type { HalfDay } from '~/services/dto/half-day'
|
|
|
|
type DayInfo = {
|
|
date: string
|
|
label: string
|
|
weekday: string
|
|
}
|
|
|
|
defineProps<{
|
|
daysInMonth: DayInfo[]
|
|
visibleEmployees: Employee[]
|
|
gridStyle: Record<string, string>
|
|
getCellStyle: (employeeId: number, date: string) => Record<string, string> | undefined
|
|
getCellInfo: (employeeId: number, date: string) => { id: number; code: string; color: string; halfLabel?: HalfDay; textColor?: string } | null
|
|
formatEmployeeName: (employee: Employee) => string
|
|
isHolidayDate: (date: string) => boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'cell-click', employee: Employee, date: string): void
|
|
}>()
|
|
|
|
const handleCellClick = (employee: Employee, date: string) => {
|
|
emit('cell-click', employee, date)
|
|
}
|
|
</script>
|