feat: add constructors selection and management

app/pages/constructeurs.vue

@@ -0,0 +1,201 @@
+<template>
+  <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>
+      </div>
+      <button class="btn btn-primary" @click="openCreateModal">
+        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6" />
+        </svg>
+        Nouveau constructeur
+      </button>
+    </div>
+
+    <div class="card bg-base-100 shadow-lg">
+      <div class="card-body space-y-4">
+        <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
+          <div class="flex-1">
+            <label class="label"><span class="label-text">Recherche</span></label>
+            <input
+              v-model="searchTerm"
+              type="search"
+              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>
+            </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>
+          Chargement des constructeurs...
+        </div>
+
+        <div v-else-if="filteredConstructeurs.length === 0" class="py-16 text-center text-sm text-gray-500">
+          Aucun constructeur trouvé.
+        </div>
+
+        <div v-else class="overflow-x-auto">
+          <table class="table">
+            <thead>
+              <tr class="text-xs uppercase">
+                <th>Nom</th>
+                <th>Email</th>
+                <th>Téléphone</th>
+                <th class="text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="constructeur in filteredConstructeurs" :key="constructeur.id" class="text-sm">
+                <td>{{ constructeur.name }}</td>
+                <td>{{ constructeur.email || '—' }}</td>
+                <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>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <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">
+          <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 />
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="form-control">
+              <label class="label"><span class="label-text">Email</span></label>
+              <input v-model="form.email" type="email" class="input input-bordered" />
+            </div>
+            <div class="form-control">
+              <label class="label"><span class="label-text">Téléphone</span></label>
+              <input v-model="form.phone" type="text" class="input input-bordered" />
+            </div>
+          </div>
+          <div class="modal-action">
+            <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>
+              {{ editingConstructeur ? 'Enregistrer' : 'Créer' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </dialog>
+  </main>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useToast } from '~/composables/useToast'
+
+const { constructeurs, loading, searchConstructeurs, createConstructeur, updateConstructeur, deleteConstructeur, loadConstructeurs } = useConstructeurs()
+const { showError, showSuccess } = useToast()
+
+const searchTerm = ref('')
+const sortKey = ref('name')
+const modalOpen = ref(false)
+const saving = ref(false)
+const editingConstructeur = ref(null)
+const form = ref({ name: '', email: '', phone: '' })
+
+const filteredConstructeurs = computed(() => {
+  const sorted = [...constructeurs.value].sort((a, b) => {
+    const key = sortKey.value
+    return (a[key] || '').localeCompare(b[key] || '')
+  })
+  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))
+  )
+})
+
+const debouncedSearch = debounce(async () => {
+  await searchConstructeurs(searchTerm.value)
+}, 300)
+
+function debounce(fn, delay) {
+  let timeout
+  return (...args) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => fn(...args), delay)
+  }
+}
+
+const resetForm = () => {
+  form.value = { name: '', email: '', phone: '' }
+  editingConstructeur.value = null
+}
+
+const openCreateModal = () => {
+  resetForm()
+  modalOpen.value = true
+}
+
+const openEditModal = (constructeur) => {
+  editingConstructeur.value = constructeur
+  form.value = {
+    name: constructeur.name,
+    email: constructeur.email || '',
+    phone: constructeur.phone || '',
+  }
+  modalOpen.value = true
+}
+
+const closeModal = () => {
+  modalOpen.value = false
+  resetForm()
+}
+
+const saveConstructeur = async () => {
+  saving.value = true
+  const payload = { ...form.value }
+  if (!payload.email) delete payload.email
+  if (!payload.phone) delete payload.phone
+  let result
+  if (editingConstructeur.value) {
+    result = await updateConstructeur(editingConstructeur.value.id, payload)
+  } else {
+    result = await createConstructeur(payload)
+  }
+  saving.value = false
+  if (result.success) {
+    closeModal()
+    await searchConstructeurs(searchTerm.value)
+  }
+}
+
+const confirmDelete = async (constructeur) => {
+  if (!confirm(`Supprimer le constructeur "${constructeur.name}" ?`)) return
+  const result = await deleteConstructeur(constructeur.id)
+  if (!result.success && result.error) {
+    showError(result.error)
+  }
+}
+
+loadConstructeurs()
+</script>
+
+<style scoped>
+</style>