101 lines
3.2 KiB
Vue
101 lines
3.2 KiB
Vue
<template>
|
|
<AppDrawer v-model="drawerOpen" title="Export heures">
|
|
<form class="space-y-4" @submit.prevent="handleSubmit">
|
|
<div>
|
|
<label class="text-md font-semibold text-neutral-700" for="yearly-hours-year">
|
|
Année <span class="text-red-600">*</span>
|
|
</label>
|
|
<select
|
|
id="yearly-hours-year"
|
|
v-model="selectedYear"
|
|
:class="selectFieldClass"
|
|
>
|
|
<option v-for="y in years" :key="y" :value="y">{{ y }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="text-md font-semibold text-neutral-700" for="yearly-hours-month">
|
|
Mois
|
|
</label>
|
|
<select
|
|
id="yearly-hours-month"
|
|
v-model="selectedMonth"
|
|
:class="selectFieldClass"
|
|
>
|
|
<option value="">Toute l'année</option>
|
|
<option v-for="m in months" :key="m.value" :value="m.value">{{ m.label }}</option>
|
|
</select>
|
|
</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"
|
|
>
|
|
Imprimer
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</AppDrawer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
import AppDrawer from '~/components/AppDrawer.vue'
|
|
|
|
const props = defineProps<{
|
|
modelValue: boolean
|
|
employeeId: number
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'update:modelValue', value: boolean): void
|
|
(event: 'submit', payload: { year: number; month: number | null }): void
|
|
}>()
|
|
|
|
const drawerOpen = computed({
|
|
get: () => props.modelValue,
|
|
set: (value: boolean) => emit('update:modelValue', value)
|
|
})
|
|
|
|
const currentYear = new Date().getFullYear()
|
|
const years = Array.from({ length: 6 }, (_, i) => currentYear - i)
|
|
const months = [
|
|
{ value: 1, label: 'Janvier' },
|
|
{ value: 2, label: 'Février' },
|
|
{ value: 3, label: 'Mars' },
|
|
{ value: 4, label: 'Avril' },
|
|
{ value: 5, label: 'Mai' },
|
|
{ value: 6, label: 'Juin' },
|
|
{ value: 7, label: 'Juillet' },
|
|
{ value: 8, label: 'Août' },
|
|
{ value: 9, label: 'Septembre' },
|
|
{ value: 10, label: 'Octobre' },
|
|
{ value: 11, label: 'Novembre' },
|
|
{ value: 12, label: 'Décembre' }
|
|
]
|
|
const selectedYear = ref(currentYear)
|
|
const selectedMonth = ref<number | ''>('')
|
|
|
|
const baseInputClass = 'mt-2 w-full rounded-md border px-3 py-2 text-md text-neutral-900'
|
|
const selectFieldClass = computed(() => `${baseInputClass} border-neutral-300`)
|
|
|
|
const handleSubmit = () => {
|
|
emit('submit', {
|
|
year: selectedYear.value,
|
|
month: selectedMonth.value === '' ? null : selectedMonth.value
|
|
})
|
|
}
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(isOpen) => {
|
|
if (!isOpen) {
|
|
selectedYear.value = currentYear
|
|
selectedMonth.value = ''
|
|
}
|
|
}
|
|
)
|
|
</script>
|