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

feat(heures) : calendrier des jours validés (vue Jour) + harmonisation Malio UI

Browse Source 
- 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:
Autin
2026-06-16 15:47:23 +02:00
parent 5d2b5d1c54
commit 34dc52d92b
37 changed files with 1881 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/employees/BonusTab.vue
+24 -21
View File
@@ -33,7 +33,10 @@
</button>
</div>
<AppDrawer v-model="isDrawerOpen" :title="isEditing ? 'Modification prime' : 'Nouvelle prime'">
<MalioDrawer v-model="isDrawerOpen">
<template #header>
<h2 class="text-[32px] font-semibold text-primary-500">{{ isEditing ? 'Modification prime' : 'Nouvelle prime' }}</h2>
</template>
<form class="space-y-4" @submit.prevent="onSubmit">
<div>
<label class="text-md font-semibold text-neutral-700" for="bonus-month">
@@ -75,38 +78,38 @@
</div>
<div v-if="isEditing" 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="onDelete"
>
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 disabled:cursor-not-allowed disabled:opacity-50"
/>
<MalioButton
label="Modifier"
variant="primary"
button-class="w-full"
:disabled="!isFormValid"
>
Modifier
</button>
@click="onSubmit"
/>
</div>
<div v-else class="flex justify-center pt-2">
<button
type="submit"
class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
<MalioButton
label="Ajouter"
icon-name="mdi:plus"
icon-position="left"
variant="primary"
button-class="w-[200px]"
:disabled="!isFormValid"
>
+ Ajouter
</button>
@click="onSubmit"
/>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</section>
</template>
<script setup lang="ts">
import type { Bonus } from '~/services/dto/bonus'
import AppDrawer from '~/components/AppDrawer.vue'
const props = defineProps<{
bonuses: Bonus[]
frontend/components/employees/ContractTab.vue
+33 -28
View File
@@ -43,7 +43,10 @@
</button>
</div>
<AppDrawer :model-value="isContractDrawerOpen" title="Modifier le contrat" @update:model-value="onUpdateContractDrawerOpen">
<MalioDrawer :model-value="isContractDrawerOpen" @update:model-value="onUpdateContractDrawerOpen">
<template #header>
<h2 class="text-[32px] font-semibold text-primary-500">Modifier le contrat</h2>
</template>
<div class="mb-4 flex border-b border-neutral-200">
<button
type="button"
@@ -141,13 +144,12 @@
</div>
<div class="flex justify-center pt-2">
<button
type="submit"
class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
<MalioButton
label="Modifier"
button-class="w-[200px]"
:disabled="isContractSubmitting || !isContractEndDateValid"
>
Modifier
</button>
@click="onSubmitCloseContract"
/>
</div>
</form>
</div>
@@ -188,27 +190,29 @@
class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
/>
</div>
<button
type="button"
class="w-full rounded-md bg-primary-500 px-4 py-2 text-base font-semibold text-white transition hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-60"
<MalioButton
:label="form.id ? 'Modifier' : 'Ajouter'"
button-class="w-full"
:disabled="!form.startDate || isSuspensionSubmitting"
@click="onSubmitSuspension(index)"
>
{{ form.id ? 'Modifier' : 'Ajouter' }}
</button>
/>
</div>
<button
type="button"
class="w-full rounded-md border-2 border-dashed border-primary-500/50 px-4 py-3 text-base font-semibold text-primary-500/50 transition hover:border-primary-500 hover:text-primary-500"
<MalioButton
label="Ajouter une suspension"
icon-name="mdi:plus"
icon-position="left"
variant="tertiary"
button-class="w-full"
@click="onAddSuspensionForm"
>
+ Ajouter une suspension
</button>
/>
</div>
</AppDrawer>
</MalioDrawer>
<AppDrawer :model-value="isCreateContractDrawerOpen" title="Ajouter un contrat" @update:model-value="onUpdateCreateContractDrawerOpen">
<MalioDrawer :model-value="isCreateContractDrawerOpen" @update:model-value="onUpdateCreateContractDrawerOpen">
<template #header>
<h2 class="text-[32px] font-semibold text-primary-500">Ajouter un contrat</h2>
</template>
<form class="space-y-4" @submit.prevent="onSubmitCreateContract">
<div>
<label class="text-md font-semibold text-neutral-700" for="create-contract-nature">
@@ -282,16 +286,17 @@
/>
<div class="sticky bottom-0 -mx-[20px] bg-white px-[20px] py-3 flex justify-center">
<button
type="submit"
class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
<MalioButton
label="Ajouter"
icon-name="mdi:plus"
icon-position="left"
button-class="w-[200px]"
:disabled="isCreateContractSubmitting || !isCreateContractFormValid"
>
+ Ajouter
</button>
@click="onSubmitCreateContract"
/>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</section>
</template>
frontend/components/employees/FormationTab.vue
+24 -21
View File
@@ -47,7 +47,10 @@
</button>
</div>
<AppDrawer v-model="isDrawerOpen" title="Formation">
<MalioDrawer v-model="isDrawerOpen">
<template #header>
<h2 class="text-[32px] font-semibold text-primary-500">Formation</h2>
</template>
<form class="space-y-4" @submit.prevent="onSubmit">
<div>
<label class="text-md font-semibold text-neutral-700" for="formation-start-date">
@@ -107,39 +110,39 @@
</div>
<div v-if="isEditing" 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="onDelete"
>
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 disabled:cursor-not-allowed disabled:opacity-50"
/>
<MalioButton
label="Modifier"
variant="primary"
button-class="w-full"
:disabled="!isFormValid"
>
Modifier
</button>
@click="onSubmit"
/>
</div>
<div v-else class="flex justify-center pt-2">
<button
type="submit"
class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
<MalioButton
label="Ajouter"
icon-name="mdi:plus"
icon-position="left"
variant="primary"
button-class="w-[200px]"
:disabled="!isFormValid"
>
+ Ajouter
</button>
@click="onSubmit"
/>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</section>
</template>
<script setup lang="ts">
import type {Formation} from '~/services/dto/formation'
import {getFormationJustificatifUrl} from '~/services/formations'
import AppDrawer from '~/components/AppDrawer.vue'
const props = defineProps<{
formations: Formation[]
frontend/components/employees/LeaveTab.vue
+32 -31
View File
@@ -111,7 +111,10 @@
</select>
</div>
</div>
<AppDrawer v-model="isFractionedDrawerOpen" title="Jours fractionnés">
<MalioDrawer v-model="isFractionedDrawerOpen">
<template #header>
<h2 class="text-[32px] font-semibold text-primary-500">Jours fractionnés</h2>
</template>
<form class="space-y-4" @submit.prevent="handleSubmitFractioned">
<div>
<label class="text-md font-semibold text-neutral-700" for="fractioned-days">
@@ -127,24 +130,25 @@
/>
</div>
<div class="flex justify-end gap-3 pt-2">
<button
type="button"
class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
<div class="grid grid-cols-2 gap-3 pt-2">
<MalioButton
label="Annuler"
variant="tertiary"
button-class="w-full"
@click="isFractionedDrawerOpen = false"
>
Annuler
</button>
<button
type="submit"
class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
>
Enregistrer
</button>
/>
<MalioButton
label="Enregistrer"
button-class="w-full"
@click="handleSubmitFractioned"
/>
</div>
</form>
</AppDrawer>
<AppDrawer v-model="isPaidLeaveDrawerOpen" title="Congés N-1 payés">
</MalioDrawer>
<MalioDrawer v-model="isPaidLeaveDrawerOpen">
<template #header>
<h2 class="text-[32px] font-semibold text-primary-500">Congés N-1 payés</h2>
</template>
<form class="space-y-4" @submit.prevent="handleSubmitPaidLeave">
<div>
<label class="text-md font-semibold text-neutral-700" for="paid-leave-days">
@@ -160,23 +164,21 @@
/>
</div>
<div class="flex justify-end gap-3 pt-2">
<button
type="button"
class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
<div class="grid grid-cols-2 gap-3 pt-2">
<MalioButton
label="Annuler"
variant="tertiary"
button-class="w-full"
@click="isPaidLeaveDrawerOpen = false"
>
Annuler
</button>
<button
type="submit"
class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
>
Enregistrer
</button>
/>
<MalioButton
label="Enregistrer"
button-class="w-full"
@click="handleSubmitPaidLeave"
/>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</section>
</template>
@@ -184,7 +186,6 @@
import type {Absence} from '~/services/dto/absence'
import type {EmployeeLeaveSummary} from '~/services/dto/employee-leave-summary'
import {normalizeDate, toYmd} from '~/utils/date'
import AppDrawer from '~/components/AppDrawer.vue'
type DayLeaveState = {
am: boolean
frontend/components/employees/MileageTab.vue
+24 -21
View File
@@ -64,7 +64,10 @@
</div>
<AppDrawer v-model="isDrawerOpen" title="Frais">
<MalioDrawer v-model="isDrawerOpen">
<template #header>
<h2 class="text-[32px] font-semibold text-primary-500">Frais</h2>
</template>
<form class="space-y-4" @submit.prevent="onSubmit">
<div>
<label class="text-md font-semibold text-neutral-700" for="mileage-month">
@@ -157,39 +160,39 @@
</div>
<div v-if="isEditing" 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="onDelete"
>
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 disabled:cursor-not-allowed disabled:opacity-50"
/>
<MalioButton
label="Modifier"
variant="primary"
button-class="w-full"
:disabled="!isFormValid"
>
Modifier
</button>
@click="onSubmit"
/>
</div>
<div v-else class="flex justify-center pt-2">
<button
type="submit"
class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
<MalioButton
label="Ajouter"
icon-name="mdi:plus"
icon-position="left"
variant="primary"
button-class="w-[200px]"
:disabled="!isFormValid"
>
+ Ajouter
</button>
@click="onSubmit"
/>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</section>
</template>
<script setup lang="ts">
import type {MileageAllowance} from '~/services/dto/mileage-allowance'
import {getKmReceiptUrl, getAmountReceiptUrl} from '~/services/mileage-allowances'
import AppDrawer from '~/components/AppDrawer.vue'
const props = defineProps<{
allowances: MileageAllowance[]
frontend/components/employees/ObservationTab.vue
+24 -21
View File
@@ -31,7 +31,10 @@
</button>
</div>
<AppDrawer v-model="isDrawerOpen" :title="isEditing ? 'Modification observation' : 'Nouvelle observation'">
<MalioDrawer v-model="isDrawerOpen">
<template #header>
<h2 class="text-[32px] font-semibold text-primary-500">{{ isEditing ? 'Modification observation' : 'Nouvelle observation' }}</h2>
</template>
<form class="space-y-4" @submit.prevent="onSubmit">
<div>
<label class="text-md font-semibold text-neutral-700" for="observation-month">
@@ -59,38 +62,38 @@
</div>
<div v-if="isEditing" 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="onDelete"
>
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 disabled:cursor-not-allowed disabled:opacity-50"
/>
<MalioButton
label="Modifier"
variant="primary"
button-class="w-full"
:disabled="!isFormValid"
>
Modifier
</button>
@click="onSubmit"
/>
</div>
<div v-else class="flex justify-center pt-2">
<button
type="submit"
class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
<MalioButton
label="Ajouter"
icon-name="mdi:plus"
icon-position="left"
variant="primary"
button-class="w-[200px]"
:disabled="!isFormValid"
>
+ Ajouter
</button>
@click="onSubmit"
/>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</section>
</template>
<script setup lang="ts">
import type { Observation } from '~/services/dto/observation'
import AppDrawer from '~/components/AppDrawer.vue'
const props = defineProps<{
observations: Observation[]
frontend/components/employees/RttTab.vue
+16 -16
View File
@@ -203,7 +203,10 @@
</div>
<!-- Payment Drawer -->
<AppDrawer v-model="isPaymentDrawerOpen" title="Payer des RTT">
<MalioDrawer v-model="isPaymentDrawerOpen">
<template #header>
<h2 class="text-[32px] font-semibold text-primary-500">Payer des RTT</h2>
</template>
<form @submit.prevent="onSubmitPayment">
<div class="mb-4">
<label class="block text-sm font-medium text-neutral-700">Mois</label>
@@ -254,30 +257,27 @@
class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
/>
</div>
<div class="flex justify-end gap-3">
<button
type="button"
class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50"
<div class="grid grid-cols-2 gap-3 pt-2">
<MalioButton
label="Annuler"
variant="tertiary"
button-class="w-full"
@click="isPaymentDrawerOpen = false"
>
Annuler
</button>
<button
type="submit"
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-medium text-white hover:bg-primary-600"
>
Enregistrer
</button>
/>
<MalioButton
label="Enregistrer"
button-class="w-full"
@click="onSubmitPayment"
/>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</section>
</template>
<script setup lang="ts">
import type { EmployeeRttSummary, EmployeeRttWeekSummary } from '~/services/dto/employee-rtt-summary'
import type { ContractPhase } from '~/services/dto/contract-phase'
import AppDrawer from '~/components/AppDrawer.vue'
type RttYearOption = {
value: number