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>

app/pages/machine/[id].vue

@@ -105,16 +105,19 @@
               <label class="label">
                 <span class="label-text">Constructeur</span>
               </label>
-              <input 
+              <ConstructeurSelect
                 v-if="isEditMode"
-                :id="getMachineFieldId('constructeur')"
-                v-model="machineConstructeur" 
-                type="text" 
-                class="input input-bordered"
-                @blur="updateMachineInfo"
+                :key="machine.value?.id"
+                v-model="machineConstructeurId"
+                placeholder="Rechercher un constructeur..."
               />
               <div v-else class="input input-bordered bg-base-200">
-                {{ machineConstructeur || 'Non défini' }}
+                <div class="flex flex-col">
+                  <span class="font-medium">{{ machine.value?.constructeur?.name || 'Non défini' }}</span>
+                  <span class="text-xs text-gray-500">
+                    {{ [machine.value?.constructeur?.email, machine.value?.constructeur?.phone].filter(Boolean).join(' • ') }}
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -350,7 +353,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, computed } from 'vue'
+import { ref, reactive, onMounted, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useMachines } from '~/composables/useMachines'
 import { useComposants } from '~/composables/useComposants'
@@ -362,6 +365,7 @@ import { useDocuments } from '~/composables/useDocuments'
 import { getFileIcon } from '~/utils/fileIcons'
 import ComponentHierarchy from '~/components/ComponentHierarchy.vue'
 import DocumentUpload from '~/components/DocumentUpload.vue'
+import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
 
 const route = useRoute()
 const machineId = route.params.id
@@ -401,7 +405,7 @@ const pieces = ref([])
 const machineName = ref('')
 const machineReference = ref('')
 const machineEmplacement = ref('')
-const machineConstructeur = ref('')
+const machineConstructeurId = ref(null)
 
 // Valeurs des champs personnalisés de la machine
 const machineCustomFieldValues = reactive({})
@@ -409,6 +413,18 @@ const machineCustomFieldValues = reactive({})
 const machineDocumentFiles = ref([])
 const machineDocumentsUploading = ref(false)
 const machineDocumentsLoaded = ref(false)
+const machineConstructeurInitialized = ref(false)
+
+watch(machineConstructeurId, (newValue, oldValue) => {
+  if (!machine.value) return
+  if (!machineConstructeurInitialized.value) {
+    machineConstructeurInitialized.value = true
+    return
+  }
+  if (newValue !== oldValue) {
+    updateMachineInfo()
+  }
+})
 
 // Mode d'édition
 const isEditMode = ref(false)
@@ -434,7 +450,8 @@ const initMachineFields = () => {
     machineName.value = machine.value.name || ''
     machineReference.value = machine.value.reference || ''
     machineEmplacement.value = machine.value.emplacement || ''
-    machineConstructeur.value = machine.value.constructeur || ''
+    machineConstructeurId.value = machine.value.constructeurId || machine.value.constructeur?.id || null
+    machineConstructeurInitialized.value = false
   }
 }
 
@@ -543,7 +560,9 @@ const transformCustomFields = (pieces) => {
     return {
       ...piece,
       customFields,
-      documents: piece.documents || []
+      documents: piece.documents || [],
+      constructeur: piece.constructeur || null,
+      constructeurId: piece.constructeurId || piece.constructeur?.id || null,
     }
   })
 }
@@ -577,7 +596,9 @@ const transformComponentCustomFields = (componentsData) => {
       customFields, // Use customFields for frontend display
       pieces,
       subComponents, // Use the transformed sousComposants as subComponents
-      documents: component.documents || []
+      documents: component.documents || [],
+      constructeur: component.constructeur || null,
+      constructeurId: component.constructeurId || component.constructeur?.id || null,
     };
     
     console.log('Transformed component:', result.name, 'with subComponents:', result.subComponents?.length || 0)
@@ -677,10 +698,11 @@ const updateMachineInfo = async () => {
       name: machineName.value,
       reference: machineReference.value,
       emplacement: machineEmplacement.value,
-      constructeur: machineConstructeur.value
+      constructeurId: machineConstructeurId.value || null
     })
     if (result.success) {
-      // Machine updated successfully
+      machine.value = result.data
+      machineConstructeurId.value = result.data.constructeurId || result.data.constructeur?.id || null
     }
   } catch (error) {
     console.error('Erreur lors de la mise à jour de la machine:', error)
@@ -693,12 +715,12 @@ const updateComponent = async (updatedComponent) => {
     const result = await updateComposantApi(updatedComponent.id, {
       name: updatedComponent.name,
       reference: updatedComponent.reference,
-      constructeur: updatedComponent.constructeur,
+      constructeurId: updatedComponent.constructeurId || updatedComponent.constructeur?.id || null,
       emplacement: updatedComponent.emplacement,
       prix: prixValue && prixValue !== '' ? parseFloat(prixValue) : null
     })
     if (result.success) {
-      // Component updated successfully
+      Object.assign(updatedComponent, result.data)
     }
   } catch (error) {
     console.error('Erreur lors de la mise à jour du composant:', error)
@@ -710,13 +732,12 @@ const updatePieceFromComponent = async (updatedPiece) => {
     const result = await updatePieceApi(updatedPiece.id, {
       name: updatedPiece.name,
       reference: updatedPiece.reference,
-      constructeur: updatedPiece.constructeur,
+      constructeurId: updatedPiece.constructeurId || updatedPiece.constructeur?.id || null,
       emplacement: updatedPiece.emplacement,
       prix: updatedPiece.prix && updatedPiece.prix !== '' ? parseFloat(updatedPiece.prix) : null
     })
     if (result.success) {
-      // Piece updated successfully
-      
+      Object.assign(updatedPiece, result.data)
       // Si la pièce a des champs personnalisés mis à jour, les traiter
       if (updatedPiece.customFields) {
         for (const field of updatedPiece.customFields) {
@@ -741,12 +762,12 @@ const updatePieceInfo = async (updatedPiece) => {
     const result = await updatePieceApi(updatedPiece.id, {
       name: updatedPiece.name,
       reference: updatedPiece.reference,
-      constructeur: updatedPiece.constructeur,
+      constructeurId: updatedPiece.constructeurId || updatedPiece.constructeur?.id || null,
       emplacement: updatedPiece.emplacement,
       prix: updatedPiece.prix && updatedPiece.prix !== '' ? parseFloat(updatedPiece.prix) : null
     })
     if (result.success) {
-      // Piece updated successfully
+      Object.assign(updatedPiece, result.data)
     }
   } catch (error) {
     console.error('Erreur lors de la mise à jour de la pièce:', error)