Lesstime/frontend/modules/absence/components/EmployeeDrawer.vue

<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>