feat : first commit
This commit is contained in:
211
frontend/pages/absence-types.vue
Normal file
211
frontend/pages/absence-types.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between pb-12">
|
||||
<h1 class="text-4xl font-bold text-primary-500">Types d'absence</h1>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
|
||||
@click="openCreate"
|
||||
>
|
||||
Ajouter un type
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!isLoading && absenceTypes.length === 0"
|
||||
class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600"
|
||||
>
|
||||
Aucun type pour le moment.
|
||||
</div>
|
||||
|
||||
<div v-else class="overflow-hidden rounded-lg border border-neutral-200 bg-white">
|
||||
<div class="grid grid-cols-[120px_120px_1fr_200px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
|
||||
<span class="text-left">Code</span>
|
||||
<span class="text-left">Libellé</span>
|
||||
<span class="text-left">Couleur</span>
|
||||
<span class="text-right">Actions</span>
|
||||
</div>
|
||||
<div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
|
||||
Chargement...
|
||||
</div>
|
||||
<div v-else>
|
||||
<div
|
||||
v-for="type in absenceTypes"
|
||||
:key="type.id"
|
||||
class="grid grid-cols-[120px_120px_1fr_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
|
||||
>
|
||||
<span class="font-semibold text-left">{{ type.code }}</span>
|
||||
<span class="text-left">{{ type.label }}</span>
|
||||
<div class="flex items-center gap-2 justify-start">
|
||||
<span
|
||||
class="inline-block h-3 w-3 rounded-full"
|
||||
:style="{ backgroundColor: type.color }"
|
||||
/>
|
||||
<span class="text-md uppercase text-neutral-500">{{ type.color }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border border-neutral-200 px-2 py-1 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
|
||||
@click="openEdit(type)"
|
||||
>
|
||||
Modifier
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border border-red-200 px-2 py-1 text-md font-semibold text-red-600 hover:bg-red-50"
|
||||
@click="confirmDelete(type)"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
|
||||
<form class="space-y-4" @submit.prevent="handleSubmit">
|
||||
<div>
|
||||
<label class="text-md font-semibold text-neutral-700" for="code">Code</label>
|
||||
<input
|
||||
id="code"
|
||||
v-model="form.code"
|
||||
type="text"
|
||||
maxlength="10"
|
||||
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-primary-200"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-md font-semibold text-neutral-700" for="label">Libellé</label>
|
||||
<input
|
||||
id="label"
|
||||
v-model="form.label"
|
||||
type="text"
|
||||
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-primary-200"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-md font-semibold text-neutral-700" for="color">Couleur</label>
|
||||
<div class="mt-2 flex items-center gap-3">
|
||||
<input
|
||||
id="color"
|
||||
v-model="form.color"
|
||||
type="color"
|
||||
class="h-10 w-16 cursor-pointer rounded-md border border-neutral-300 bg-white p-1"
|
||||
/>
|
||||
<span class="text-md font-semibold text-neutral-600">{{ form.color }}</span>
|
||||
</div>
|
||||
</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"
|
||||
@click="closeDrawer"
|
||||
>
|
||||
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"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
Enregistrer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</AppDrawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { AbsenceType } from '~/services/dto/absence-type'
|
||||
import { createAbsenceType, deleteAbsenceType, listAbsenceTypes, updateAbsenceType } from '~/services/absence-types'
|
||||
|
||||
const isDrawerOpen = ref(false)
|
||||
const isSubmitting = ref(false)
|
||||
const isLoading = ref(false)
|
||||
|
||||
const absenceTypes = ref<AbsenceType[]>([])
|
||||
const editingType = ref<AbsenceType | null>(null)
|
||||
|
||||
const drawerTitle = computed(() =>
|
||||
editingType.value ? "Modifier un type" : "Ajouter un type"
|
||||
)
|
||||
|
||||
const form = reactive({
|
||||
code: '',
|
||||
label: '',
|
||||
color: ''
|
||||
})
|
||||
|
||||
const loadAbsenceTypes = async () => {
|
||||
isLoading.value = true
|
||||
try {
|
||||
absenceTypes.value = await listAbsenceTypes()
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadAbsenceTypes)
|
||||
|
||||
const resetForm = () => {
|
||||
form.code = ''
|
||||
form.label = ''
|
||||
form.color = ''
|
||||
}
|
||||
|
||||
const openCreate = () => {
|
||||
editingType.value = null
|
||||
resetForm()
|
||||
isDrawerOpen.value = true
|
||||
}
|
||||
|
||||
const openEdit = (type: AbsenceType) => {
|
||||
editingType.value = type
|
||||
form.code = type.code
|
||||
form.label = type.label
|
||||
form.color = type.color
|
||||
isDrawerOpen.value = true
|
||||
}
|
||||
|
||||
const closeDrawer = () => {
|
||||
isDrawerOpen.value = false
|
||||
editingType.value = null
|
||||
resetForm()
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (isSubmitting.value) return
|
||||
|
||||
isSubmitting.value = true
|
||||
try {
|
||||
if (editingType.value) {
|
||||
await updateAbsenceType(editingType.value.id, {
|
||||
code: form.code,
|
||||
label: form.label,
|
||||
color: form.color
|
||||
})
|
||||
} else {
|
||||
await createAbsenceType({
|
||||
code: form.code,
|
||||
label: form.label,
|
||||
color: form.color
|
||||
})
|
||||
}
|
||||
|
||||
closeDrawer()
|
||||
await loadAbsenceTypes()
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDelete = async (type: AbsenceType) => {
|
||||
const ok = window.confirm(`Supprimer le type ${type.label} ?`)
|
||||
if (!ok) return
|
||||
|
||||
await deleteAbsenceType(type.id)
|
||||
await loadAbsenceTypes()
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user