MALIO-DEV/SIRH
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 67 Wiki Activity

feat : ajout des demi-journées d'absence dans le calendrier et l'export pdf
Some checks failed
Auto Tag Develop / tag (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Autin
2026-02-10 16:11:09 +01:00
parent 4cf00e6ef3
commit 2a8c874985
11 changed files with 404 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/components/AbsenceFormDrawer.vue
View File

@@ -39,24 +39,44 @@
</p>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="space-y-4">
<div>
<label class="text-md font-semibold text-neutral-700" for="start-date">Date de début</label>
<input
id="start-date"
v-model="absenceForm.startDate"
type="date"
class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
/>
<label class="text-md font-semibold text-neutral-700" for="start-date">Début</label>
<div class="mt-2 grid grid-cols-2 gap-2">
<input
id="start-date"
v-model="absenceForm.startDate"
type="date"
class="w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
/>
<select
v-model="absenceForm.startHalf"
class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
>
<option v-for="half in HALF_DAYS" :key="half.value" :value="half.value">
{{ half.label }}
</option>
</select>
</div>
</div>
<div>
<label class="text-md font-semibold text-neutral-700" for="end-date">Date de fin</label>
<input
id="end-date"
v-model="absenceForm.endDate"
type="date"
class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
/>
<label class="text-md font-semibold text-neutral-700" for="end-date">Fin</label>
<div class="mt-2 grid grid-cols-2 gap-2">
<input
id="end-date"
v-model="absenceForm.endDate"
type="date"
class="w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
/>
<select
v-model="absenceForm.endHalf"
class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
>
<option v-for="half in HALF_DAYS" :key="half.value" :value="half.value">
{{ half.label }}
</option>
</select>
</div>
</div>
</div>
@@ -103,6 +123,8 @@ import { computed, reactive, toRef, watch } from 'vue'
import type { Employee } from '~/services/dto/employee'
import type { AbsenceType } from '~/services/dto/absence-type'
import type { Absence } from '~/services/dto/absence'
import type { HalfDay } from '~/services/dto/half-day'
import { HALF_DAYS } from '~/services/dto/half-day'
import AppDrawer from '~/components/AppDrawer.vue'
const props = defineProps<{
@@ -113,7 +135,9 @@ const props = defineProps<{
employeeId: number | ''
typeId: number | ''
startDate: string
startHalf: HalfDay
endDate: string
endHalf: HalfDay
comment: string
}
editingAbsence: Absence | null

55
frontend/components/CalendarGrid.vue
View File

@@ -28,18 +28,46 @@
: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>
<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>
@@ -49,6 +77,7 @@
<script setup lang="ts">
import type { Employee } from '~/services/dto/employee'
import type { HalfDay } from '~/services/dto/half-day'
type DayInfo = {
date: string
@@ -61,7 +90,7 @@ defineProps<{
visibleEmployees: Employee[]
gridStyle: Record<string, string>
getCellStyle: (employeeId: number, date: string) => Record<string, string> | undefined
getCellCode: (employeeId: number, date: string) => string
getCellInfo: (employeeId: number, date: string) => { id: number; code: string; color: string; halfLabel?: HalfDay; textColor?: string } | null
formatEmployeeName: (employee: Employee) => string
isHolidayDate: (date: string) => boolean
}>()