feat(absence) : extract Absence front into Nuxt module layer

LST-66 (2.3) front. Companion to the backend module migration. - Move pages (absences, team-absences), 8 components, the absences service + DTO and the useAbsenceHelpers composable into frontend/modules/absence/ (auto-detected layer; composable now auto-imported). - Rewrite consumers: AdminAbsencePolicyTab and the time-tracking calendar (getPublicHolidays) point to ~/modules/absence/... - Middlewares (employee/admin) and shared services (clients, users, user-data DTO) stay at the root. i18n stays global. - Routes /absences and /team-absences preserved. nuxt build passes; routes confirmed.
2026-06-20 18:36:48 +02:00
parent 306cfd34cd
commit 163bf0891a
16 changed files with 21 additions and 27 deletions
@@ -0,0 +1,143 @@
+<template>
+    <MalioDrawer v-model="open" drawer-class="max-w-lg">
+        <template #header>
+            <div>
+                <h2 class="text-xl font-bold">{{ $t('absences.admin.employees.drawer.title') }}</h2>
+                <p v-if="user" class="text-sm text-neutral-500">{{ user.username }}</p>
+            </div>
+        </template>
+        <form v-if="user" class="grid grid-cols-1 gap-4 sm:grid-cols-2" @submit.prevent="save">
+            <!-- Dates en pleine largeur (1 par ligne) : le popover du calendrier
+                 a besoin de toute la largeur pour s'afficher correctement. -->
+            <div class="sm:col-span-2">
+                <MalioDate
+                    v-model="form.hireDate"
+                    :label="$t('absences.admin.employees.fields.hireDate')"
+                    group-class="w-full"
+                />
+            </div>
+            <div class="sm:col-span-2">
+                <MalioDate
+                    v-model="form.endDate"
+                    :label="$t('absences.admin.employees.fields.endDate')"
+                    group-class="w-full"
+                />
+            </div>
+            <MalioSelect
+                v-model="form.contractType"
+                :label="$t('absences.admin.employees.fields.contractType')"
+                :options="contractOptions"
+                empty-option-label="—"
+                group-class="w-full"
+            />
+            <MalioInputText
+                v-model="form.workTimeRatio"
+                :label="$t('absences.admin.employees.fields.workTimeRatio')"
+                input-class="w-full"
+            />
+            <MalioInputText
+                v-model="form.annualLeaveDays"
+                :label="$t('absences.admin.employees.fields.annualLeaveDays')"
+                input-class="w-full"
+            />
+            <MalioInputText
+                v-model="form.referencePeriodStart"
+                :label="$t('absences.admin.employees.fields.referencePeriodStart')"
+                input-class="w-full"
+            />
+            <MalioInputText
+                v-model="form.initialLeaveBalance"
+                :label="$t('absences.admin.employees.fields.initialLeaveBalance')"
+                input-class="w-full"
+            />
+
+            <div class="col-span-full mt-2 flex justify-end">
+                <MalioButton
+                    :label="$t('absences.admin.employees.drawer.save')"
+                    button-class="w-auto px-6"
+                    :disabled="submitting"
+                    @click="save"
+                />
+            </div>
+        </form>
+    </MalioDrawer>
+</template>
+
+<script setup lang="ts">
+import type { ContractType, UserData } from '~/services/dto/user-data'
+import { useUserService } from '~/services/users'
+
+const props = defineProps<{
+    modelValue: boolean
+    user: UserData | null
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+    'saved': []
+}>()
+
+const { t } = useI18n()
+const { update } = useUserService()
+
+const open = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+})
+
+const submitting = ref(false)
+
+const contractOptions = [
+    { label: t('absences.admin.employees.contract.cdi'), value: 'CDI' },
+    { label: t('absences.admin.employees.contract.cdd'), value: 'CDD' },
+    { label: t('absences.admin.employees.contract.stage'), value: 'STAGE' },
+    { label: t('absences.admin.employees.contract.alternance'), value: 'ALTERNANCE' },
+    { label: t('absences.admin.employees.contract.autre'), value: 'AUTRE' },
+]
+
+const form = reactive({
+    hireDate: null as string | null,
+    endDate: null as string | null,
+    contractType: null as ContractType | null,
+    workTimeRatio: '1.0',
+    annualLeaveDays: '25',
+    referencePeriodStart: '06-01',
+    initialLeaveBalance: '0',
+})
+
+function hydrate(u: UserData | null) {
+    if (!u) return
+    form.hireDate = u.hireDate ? u.hireDate.slice(0, 10) : null
+    form.endDate = u.endDate ? u.endDate.slice(0, 10) : null
+    form.contractType = u.contractType ?? null
+    form.workTimeRatio = String(u.workTimeRatio ?? 1)
+    form.annualLeaveDays = String(u.annualLeaveDays ?? 25)
+    form.referencePeriodStart = u.referencePeriodStart ?? '06-01'
+    form.initialLeaveBalance = String(u.initialLeaveBalance ?? 0)
+}
+
+watch(() => props.modelValue, (isOpen) => {
+    if (isOpen) hydrate(props.user)
+})
+
+async function save() {
+    if (!props.user) return
+    submitting.value = true
+    try {
+        await update(props.user.id, {
+            isEmployee: true,
+            hireDate: form.hireDate || null,
+            endDate: form.endDate || null,
+            contractType: form.contractType,
+            workTimeRatio: Number(form.workTimeRatio) || 1,
+            annualLeaveDays: Number(form.annualLeaveDays) || 0,
+            referencePeriodStart: form.referencePeriodStart || '06-01',
+            initialLeaveBalance: Number(form.initialLeaveBalance) || 0,
+        })
+        emit('saved')
+        open.value = false
+    } finally {
+        submitting.value = false
+    }
+}
+</script>