280 lines
8.5 KiB
Vue
280 lines
8.5 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex items-center justify-between pb-12">
|
|
<h1 class="text-4xl font-bold text-primary-500">Employés</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="isDrawerOpen = true"
|
|
>
|
|
Ajouter un employé
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!isLoading && employees.length === 0"
|
|
class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600"
|
|
>
|
|
Aucun employé pour le moment.
|
|
</div>
|
|
|
|
<div v-else class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
|
|
<div class="grid grid-cols-[120px_1fr_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">Prénom</span>
|
|
<span class="text-left">Nom</span>
|
|
<span class="text-left">Site</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="employee in employees"
|
|
:key="employee.id"
|
|
class="grid grid-cols-[120px_1fr_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>{{ employee.firstName }}</span>
|
|
<span>{{ employee.lastName }}</span>
|
|
<span>{{ employee.site?.name ?? '-' }}</span>
|
|
<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(employee)"
|
|
>
|
|
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(employee)"
|
|
>
|
|
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="first-name">
|
|
Prénom <span class="text-red-600">*</span>
|
|
</label>
|
|
<input
|
|
id="first-name"
|
|
v-model="form.firstName"
|
|
type="text"
|
|
:class="firstNameFieldClass"
|
|
/>
|
|
<p v-if="showFirstNameError" class="mt-1 text-sm text-red-600">
|
|
Le prénom est obligatoire.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-md font-semibold text-neutral-700" for="last-name">
|
|
Nom <span class="text-red-600">*</span>
|
|
</label>
|
|
<input
|
|
id="last-name"
|
|
v-model="form.lastName"
|
|
type="text"
|
|
:class="lastNameFieldClass"
|
|
/>
|
|
<p v-if="showLastNameError" class="mt-1 text-sm text-red-600">
|
|
Le nom est obligatoire.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-md font-semibold text-neutral-700" for="site">
|
|
Site <span class="text-red-600">*</span>
|
|
</label>
|
|
<select
|
|
id="site"
|
|
v-model="form.siteId"
|
|
:class="siteFieldClass"
|
|
>
|
|
<option value="">Aucun site</option>
|
|
<option v-for="site in sites" :key="site.id" :value="site.id">
|
|
{{ site.name }}
|
|
</option>
|
|
</select>
|
|
<p v-if="showSiteError" class="mt-1 text-sm text-red-600">
|
|
Le site est obligatoire.
|
|
</p>
|
|
</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="isDrawerOpen = 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"
|
|
:class="submitButtonClass"
|
|
>
|
|
Enregistrer
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</AppDrawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Employee } from '~/services/dto/employee'
|
|
import type { Site } from '~/services/dto/site'
|
|
import { createEmployee, deleteEmployee, listEmployees, updateEmployee } from '~/services/employees'
|
|
import { listSites } from '~/services/sites'
|
|
|
|
const isDrawerOpen = ref(false)
|
|
const isSubmitting = ref(false)
|
|
const isLoading = ref(false)
|
|
const editingEmployee = ref<Employee | null>(null)
|
|
const drawerTitle = computed(() =>
|
|
editingEmployee.value ? 'Modifier un employé' : 'Ajouter un employé'
|
|
)
|
|
|
|
const employees = ref<Employee[]>([])
|
|
const sites = ref<Site[]>([])
|
|
|
|
const form = reactive({
|
|
firstName: '',
|
|
lastName: '',
|
|
siteId: '' as number | ''
|
|
})
|
|
|
|
const validationTouched = reactive({
|
|
firstName: false,
|
|
lastName: false,
|
|
siteId: false
|
|
})
|
|
|
|
const isFirstNameValid = computed(() => form.firstName.trim() !== '')
|
|
const isLastNameValid = computed(() => form.lastName.trim() !== '')
|
|
const isSiteValid = computed(() => form.siteId !== '')
|
|
const isFormValid = computed(
|
|
() => isFirstNameValid.value && isLastNameValid.value && isSiteValid.value
|
|
)
|
|
|
|
const showFirstNameError = computed(
|
|
() => validationTouched.firstName && !isFirstNameValid.value
|
|
)
|
|
const showLastNameError = computed(
|
|
() => validationTouched.lastName && !isLastNameValid.value
|
|
)
|
|
const showSiteError = computed(
|
|
() => validationTouched.siteId && !isSiteValid.value
|
|
)
|
|
|
|
const baseInputClass =
|
|
'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200'
|
|
const firstNameFieldClass = computed(() => {
|
|
if (showFirstNameError.value) {
|
|
return `${baseInputClass} border-red-500`
|
|
}
|
|
return `${baseInputClass} border-neutral-300`
|
|
})
|
|
const lastNameFieldClass = computed(() => {
|
|
if (showLastNameError.value) {
|
|
return `${baseInputClass} border-red-500`
|
|
}
|
|
return `${baseInputClass} border-neutral-300`
|
|
})
|
|
const siteFieldClass = computed(() => {
|
|
const baseSelectClass =
|
|
'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
|
|
if (showSiteError.value) {
|
|
return `${baseSelectClass} border-red-500`
|
|
}
|
|
return `${baseSelectClass} border-neutral-300`
|
|
})
|
|
|
|
const submitButtonClass = computed(() => {
|
|
if (isSubmitting.value || !isFormValid.value) {
|
|
return 'opacity-50 cursor-not-allowed'
|
|
}
|
|
return ''
|
|
})
|
|
|
|
const loadEmployees = async () => {
|
|
isLoading.value = true
|
|
try {
|
|
employees.value = await listEmployees()
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
const loadSites = async () => {
|
|
sites.value = await listSites()
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await Promise.all([loadEmployees(), loadSites()])
|
|
})
|
|
|
|
const handleSubmit = async () => {
|
|
if (isSubmitting.value) return
|
|
validationTouched.firstName = true
|
|
validationTouched.lastName = true
|
|
validationTouched.siteId = true
|
|
if (!isFormValid.value) return
|
|
|
|
isSubmitting.value = true
|
|
try {
|
|
if (editingEmployee.value) {
|
|
await updateEmployee(editingEmployee.value.id, {
|
|
firstName: form.firstName,
|
|
lastName: form.lastName,
|
|
siteId: form.siteId === '' ? null : Number(form.siteId)
|
|
})
|
|
} else {
|
|
await createEmployee({
|
|
firstName: form.firstName,
|
|
lastName: form.lastName,
|
|
siteId: form.siteId === '' ? null : Number(form.siteId)
|
|
})
|
|
}
|
|
|
|
form.firstName = ''
|
|
form.lastName = ''
|
|
form.siteId = ''
|
|
editingEmployee.value = null
|
|
isDrawerOpen.value = false
|
|
await loadEmployees()
|
|
} finally {
|
|
isSubmitting.value = false
|
|
}
|
|
}
|
|
|
|
watch(isDrawerOpen, (isOpen) => {
|
|
if (!isOpen) {
|
|
validationTouched.firstName = false
|
|
validationTouched.lastName = false
|
|
validationTouched.siteId = false
|
|
}
|
|
})
|
|
|
|
const openEdit = (employee: Employee) => {
|
|
editingEmployee.value = employee
|
|
form.firstName = employee.firstName
|
|
form.lastName = employee.lastName
|
|
form.siteId = employee.site?.id ?? ''
|
|
isDrawerOpen.value = true
|
|
}
|
|
|
|
const confirmDelete = async (employee: Employee) => {
|
|
const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
|
|
if (!ok) return
|
|
|
|
await deleteEmployee(employee.id)
|
|
await loadEmployees()
|
|
}
|
|
</script>
|