chore: update frontend configuration
This commit is contained in:
Matthieu
@@ -2,8 +2,12 @@
|
||||
<main class="container mx-auto px-6 py-8 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Constructeurs</h1>
|
||||
<p class="text-sm text-gray-500">Gérez les constructeurs et leurs coordonnées.</p>
|
||||
<h1 class="text-3xl font-bold">
|
||||
Constructeurs
|
||||
</h1>
|
||||
<p class="text-sm text-gray-500">
|
||||
Gérez les constructeurs et leurs coordonnées.
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn btn-primary" @click="openCreateModal">
|
||||
<IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
|
||||
@@ -22,20 +26,26 @@
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Nom, email ou téléphone"
|
||||
@input="debouncedSearch"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<label class="label"><span class="label-text">Tri</span></label>
|
||||
<select v-model="sortKey" class="select select-bordered w-full">
|
||||
<option value="name">Nom</option>
|
||||
<option value="email">Email</option>
|
||||
<option value="phone">Téléphone</option>
|
||||
<option value="name">
|
||||
Nom
|
||||
</option>
|
||||
<option value="email">
|
||||
Email
|
||||
</option>
|
||||
<option value="phone">
|
||||
Téléphone
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="py-16 text-center text-sm text-gray-500">
|
||||
<span class="loading loading-spinner loading-lg mb-2"></span>
|
||||
<span class="loading loading-spinner loading-lg mb-2" />
|
||||
Chargement des constructeurs...
|
||||
</div>
|
||||
|
||||
@@ -50,7 +60,9 @@
|
||||
<th>Nom</th>
|
||||
<th>Email</th>
|
||||
<th>Téléphone</th>
|
||||
<th class="text-right">Actions</th>
|
||||
<th class="text-right">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -60,8 +72,12 @@
|
||||
<td>{{ constructeur.phone || '—' }}</td>
|
||||
<td class="text-right">
|
||||
<div class="flex justify-end gap-2">
|
||||
<button class="btn btn-ghost btn-xs" @click="openEditModal(constructeur)">Modifier</button>
|
||||
<button class="btn btn-error btn-xs" @click="confirmDelete(constructeur)">Supprimer</button>
|
||||
<button class="btn btn-ghost btn-xs" @click="openEditModal(constructeur)">
|
||||
Modifier
|
||||
</button>
|
||||
<button class="btn btn-error btn-xs" @click="confirmDelete(constructeur)">
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -73,20 +89,24 @@
|
||||
|
||||
<dialog class="modal" :class="{ 'modal-open': modalOpen }">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg mb-4">{{ editingConstructeur ? 'Modifier' : 'Nouveau' }} constructeur</h3>
|
||||
<form @submit.prevent="saveConstructeur" class="space-y-4">
|
||||
<h3 class="font-bold text-lg mb-4">
|
||||
{{ editingConstructeur ? 'Modifier' : 'Nouveau' }} constructeur
|
||||
</h3>
|
||||
<form class="space-y-4" @submit.prevent="saveConstructeur">
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text">Nom</span></label>
|
||||
<input v-model="form.name" type="text" class="input input-bordered" required />
|
||||
<input v-model="form.name" type="text" class="input input-bordered" required>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FieldEmail v-model="form.email" label="Email" />
|
||||
<FieldPhone v-model="form.phone" label="Téléphone" />
|
||||
</div>
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" @click="closeModal">Annuler</button>
|
||||
<button type="button" class="btn" @click="closeModal">
|
||||
Annuler
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" :disabled="saving">
|
||||
<span v-if="saving" class="loading loading-spinner loading-xs mr-2"></span>
|
||||
<span v-if="saving" class="loading loading-spinner loading-xs mr-2" />
|
||||
{{ editingConstructeur ? 'Enregistrer' : 'Créer' }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -119,7 +139,7 @@ const filteredConstructeurs = computed(() => {
|
||||
const key = sortKey.value
|
||||
return (a[key] || '').localeCompare(b[key] || '')
|
||||
})
|
||||
if (!searchTerm.value) return sorted
|
||||
if (!searchTerm.value) { return sorted }
|
||||
const term = searchTerm.value.toLowerCase()
|
||||
return sorted.filter(item =>
|
||||
[item.name, item.email, item.phone].some(value => value && value.toLowerCase().includes(term))
|
||||
@@ -130,7 +150,7 @@ const debouncedSearch = debounce(async () => {
|
||||
await searchConstructeurs(searchTerm.value)
|
||||
}, 300)
|
||||
|
||||
function debounce(fn, delay) {
|
||||
function debounce (fn, delay) {
|
||||
let timeout
|
||||
return (...args) => {
|
||||
clearTimeout(timeout)
|
||||
@@ -153,7 +173,7 @@ const openEditModal = (constructeur) => {
|
||||
form.value = {
|
||||
name: constructeur.name,
|
||||
email: constructeur.email || '',
|
||||
phone: constructeur.phone || '',
|
||||
phone: constructeur.phone || ''
|
||||
}
|
||||
modalOpen.value = true
|
||||
}
|
||||
@@ -166,8 +186,8 @@ const closeModal = () => {
|
||||
const saveConstructeur = async () => {
|
||||
saving.value = true
|
||||
const payload = { ...form.value }
|
||||
if (!payload.email) delete payload.email
|
||||
if (!payload.phone) delete payload.phone
|
||||
if (!payload.email) { delete payload.email }
|
||||
if (!payload.phone) { delete payload.phone }
|
||||
let result
|
||||
if (editingConstructeur.value) {
|
||||
result = await updateConstructeur(editingConstructeur.value.id, payload)
|
||||
@@ -182,7 +202,7 @@ const saveConstructeur = async () => {
|
||||
}
|
||||
|
||||
const confirmDelete = async (constructeur) => {
|
||||
if (!confirm(`Supprimer le constructeur "${constructeur.name}" ?`)) return
|
||||
if (!confirm(`Supprimer le constructeur "${constructeur.name}" ?`)) { return }
|
||||
const result = await deleteConstructeur(constructeur.id)
|
||||
if (!result.success && result.error) {
|
||||
showError(result.error)
|
||||
|
||||
Reference in New Issue
Block a user