77 lines
3.1 KiB
Vue
77 lines
3.1 KiB
Vue
<template>
|
|
<div class="max-h-[80vh] 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 z-20 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="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"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="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 v-if="getCellCode(employee.id, day.date)">
|
|
{{ getCellCode(employee.id, day.date) }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Employee } from '~/services/dto/employee'
|
|
|
|
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
|
|
getCellCode: (employeeId: number, date: string) => string
|
|
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>
|