feat(heures) : calendrier des jours validés (vue Jour) + harmonisation Malio UI
- Calendrier MalioDate en vue Jour (Heures + Heures Conducteurs) : jours entièrement validés (admin) peints en vert. Endpoint GET /work-hours/validation-status?from=&to=[&driver=1] (scope conducteur inversé), chargement à la volée par mois, refresh après validation/saisie/absence. - Suite à @malio/layer-ui 1.7.11 : reserveMessageSpace=false sur les champs ; tous les drawers migrés sur MalioDrawer (titre via slot #header, AppDrawer custom supprimé) ; boutons d'action en MalioButton (deux boutons partagent l'espace) ; inputs date en MalioDate ; MalioDateWeek en vue Semaine. - Boutons d'ajout uniformisés sur « Ajouter » + icône. - .env : EXCLUDED_PUBLIC_HOLIDAYS="null". - Doc : doc/hours-validated-days.md, documentation-content.ts, CLAUDE.md. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<AppDrawer v-model="drawerOpen" title="Nouvelle absence">
|
||||
<MalioDrawer v-model="drawerOpen">
|
||||
<template #header>
|
||||
<h2 class="text-[32px] font-semibold text-primary-500">Nouvelle absence</h2>
|
||||
</template>
|
||||
<form class="space-y-4" @submit.prevent="handleSubmit">
|
||||
<MalioSelect
|
||||
<MalioSelect :reserve-message-space="false"
|
||||
:model-value="absenceForm.employeeId === '' ? null : absenceForm.employeeId"
|
||||
:options="employeeOptions"
|
||||
label="Employé *"
|
||||
@@ -12,7 +15,7 @@
|
||||
@update:model-value="onEmployeeChange"
|
||||
/>
|
||||
|
||||
<MalioSelect
|
||||
<MalioSelect :reserve-message-space="false"
|
||||
:model-value="absenceForm.typeId === '' ? null : absenceForm.typeId"
|
||||
:options="typeOptions"
|
||||
label="Type d'absence *"
|
||||
@@ -24,16 +27,16 @@
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<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"
|
||||
<label class="text-md font-semibold text-neutral-700">Début</label>
|
||||
<div class="mt-2 space-y-2">
|
||||
<MalioDate
|
||||
v-model="absenceForm.startDate"
|
||||
type="date"
|
||||
:class="[dateInputBaseClass, absenceForm.startDate ? 'border-black' : 'border-m-muted']"
|
||||
:clearable="false"
|
||||
:reserve-message-space="false"
|
||||
:disabled="props.lockDates"
|
||||
group-class="w-full"
|
||||
/>
|
||||
<MalioSelect
|
||||
<MalioSelect :reserve-message-space="false"
|
||||
:model-value="absenceForm.startHalf"
|
||||
:options="halfDayOptions"
|
||||
min-width=""
|
||||
@@ -42,16 +45,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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"
|
||||
<label class="text-md font-semibold text-neutral-700">Fin</label>
|
||||
<div class="mt-2 space-y-2">
|
||||
<MalioDate
|
||||
v-model="absenceForm.endDate"
|
||||
type="date"
|
||||
:class="[dateInputBaseClass, absenceForm.endDate ? 'border-black' : 'border-m-muted']"
|
||||
:clearable="false"
|
||||
:reserve-message-space="false"
|
||||
:disabled="props.lockDates"
|
||||
group-class="w-full"
|
||||
/>
|
||||
<MalioSelect
|
||||
<MalioSelect :reserve-message-space="false"
|
||||
:model-value="absenceForm.endHalf"
|
||||
:options="halfDayOptions"
|
||||
min-width=""
|
||||
@@ -72,31 +75,30 @@
|
||||
</div>
|
||||
|
||||
<div v-if="editingAbsence" class="grid grid-cols-2 gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center rounded-md bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600"
|
||||
<MalioButton
|
||||
label="Supprimer"
|
||||
variant="danger"
|
||||
button-class="w-full"
|
||||
@click="handleDelete"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="flex items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
|
||||
:class="submitButtonClass"
|
||||
>
|
||||
Modifier
|
||||
</button>
|
||||
/>
|
||||
<MalioButton
|
||||
label="Modifier"
|
||||
variant="primary"
|
||||
button-class="w-full"
|
||||
:disabled="props.isSubmitting || !isFormValid"
|
||||
@click="handleSubmit"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="flex justify-center pt-2">
|
||||
<MalioButton
|
||||
type="submit"
|
||||
label="Valider"
|
||||
button-class="w-[200px]"
|
||||
:disabled="props.isSubmitting || !isFormValid"
|
||||
@click="handleSubmit"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</AppDrawer>
|
||||
</MalioDrawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -106,7 +108,6 @@ 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<{
|
||||
modelValue: boolean
|
||||
@@ -159,13 +160,6 @@ const showTypeError = computed(
|
||||
() => validationTouched.type && !isTypeValid.value
|
||||
)
|
||||
|
||||
const submitButtonClass = computed(() => {
|
||||
if (props.isSubmitting || !isFormValid.value) {
|
||||
return 'opacity-50 cursor-not-allowed'
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
const employeeOptions = computed(() =>
|
||||
props.employees.map((e) => ({ label: `${e.firstName} ${e.lastName}`, value: e.id }))
|
||||
)
|
||||
@@ -174,9 +168,6 @@ const typeOptions = computed(() =>
|
||||
)
|
||||
const halfDayOptions = HALF_DAYS.map((h) => ({ label: h.label, value: h.value }))
|
||||
|
||||
const dateInputBaseClass =
|
||||
'h-10 w-full rounded-md border px-3 text-md text-black outline-none focus:border-2 focus:border-m-primary'
|
||||
|
||||
const onEmployeeChange = (value: string | number | null) => {
|
||||
absenceForm.value.employeeId = value === null ? '' : Number(value)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user