feat: add constructors selection and management

app/app.vue

@@ -16,6 +16,7 @@
             <li><NuxtLink to="/sites">Sites</NuxtLink></li>
             <li><NuxtLink to="/generator">Générateur</NuxtLink></li>
             <li><NuxtLink to="/documents">Documents</NuxtLink></li>
+            <li><NuxtLink to="/constructeurs">Constructeurs</NuxtLink></li>
           </ul>
         </div>
         <div class="flex items-center space-x-3">
@@ -37,6 +38,7 @@
           <li><NuxtLink to="/sites" class="link link-hover">Sites</NuxtLink></li>
           <li><NuxtLink to="/generator" class="link link-hover">Générateur</NuxtLink></li>
           <li><NuxtLink to="/documents" class="link link-hover">Documents</NuxtLink></li>
+          <li><NuxtLink to="/constructeurs" class="link link-hover">Constructeurs</NuxtLink></li>
         </ul>
       </div>
       <div class="navbar-end">

app/components/ComponentItem.vue

@@ -20,7 +20,7 @@
           <h3 class="text-lg font-semibold">{{ component.name }}</h3>
           <div class="flex flex-wrap gap-2 mt-2">
             <span v-if="component.reference" class="badge badge-outline badge-sm">{{ component.reference }}</span>
-            <span v-if="component.constructeur" class="badge badge-outline badge-sm">{{ component.constructeur }}</span>
+            <span v-if="component.constructeur" class="badge badge-outline badge-sm">{{ component.constructeur?.name }}</span>
             <span v-if="component.emplacement" class="badge badge-outline badge-sm">{{ component.emplacement }}</span>
             <span v-if="component.prix" class="badge badge-primary badge-sm">{{ component.prix }}€</span>
           </div>
@@ -54,17 +54,6 @@
             />
             <div v-else class="input input-bordered input-sm bg-base-200">{{ component.reference || 'Non définie' }}</div>
           </div>
-          <div class="form-control">
-            <label class="label"><span class="label-text font-medium">Constructeur</span></label>
-            <input
-              v-if="isEditMode"
-              v-model="component.constructeur"
-              type="text"
-              class="input input-bordered input-sm"
-              @blur="updateComponent"
-            />
-            <div v-else class="input input-bordered input-sm bg-base-200">{{ component.constructeur || 'Non défini' }}</div>
-          </div>
           <div class="form-control">
             <label class="label"><span class="label-text font-medium">Emplacement</span></label>
             <input
@@ -88,6 +77,21 @@
             />
             <div v-else class="input input-bordered input-sm bg-base-200">{{ component.prix ? `${component.prix}€` : 'Non défini' }}</div>
           </div>
+          <div class="form-control">
+            <label class="label"><span class="label-text font-medium">Constructeur</span></label>
+            <ConstructeurSelect
+              v-if="isEditMode"
+              v-model="component.constructeurId"
+            />
+            <div v-else class="input input-bordered input-sm bg-base-200">
+              <div class="flex flex-col">
+                <span class="font-medium">{{ component.constructeur?.name || 'Non défini' }}</span>
+                <span class="text-xs text-gray-500">
+                  {{ [component.constructeur?.email, component.constructeur?.phone].filter(Boolean).join(' • ') }}
+                </span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -251,7 +255,9 @@
 import { ref, watch, computed } from 'vue'
 import PieceItem from './PieceItem.vue'
 import DocumentUpload from './DocumentUpload.vue'
+import ConstructeurSelect from './ConstructeurSelect.vue'
 import { useDocuments } from '~/composables/useDocuments'
+import { getFileIcon } from '~/utils/fileIcons'
 
 const props = defineProps({
   component: {
@@ -280,6 +286,7 @@ const uploadingDocuments = ref(false)
 const loadingDocuments = ref(false)
 const documentsLoaded = ref(!!(props.component.documents && props.component.documents.length))
 const componentDocuments = computed(() => props.component.documents || [])
+const documentIcon = (doc) => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
 
 const { uploadDocuments, deleteDocument, loadDocumentsByComponent } = useDocuments()
 
@@ -294,6 +301,17 @@ watch(
   { immediate: true }
 )
 
+watch(
+  () => props.component.constructeurId,
+  (newVal, oldVal) => {
+    if (!props.isEditMode) return
+    if (oldVal === undefined) return
+    if (newVal !== oldVal) {
+      updateComponent()
+    }
+  }
+)
+
 watch(
   () => props.component.documents,
   (docs) => {

app/components/ConstructeurSelect.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="space-y-2 constructeur-select">
+    <label v-if="label" class="label"><span class="label-text">{{ label }}</span></label>
+    <div class="flex items-center gap-2">
+      <div class="relative flex-1">
+        <input
+          type="text"
+          v-model="searchTerm"
+          class="input input-bordered w-full pr-10"
+          :placeholder="placeholder"
+          @focus="openDropdown = true; ensureOptionsLoaded()"
+          @input="onSearch"
+        />
+        <button
+          type="button"
+          class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs"
+          @click="ensureOptionsLoaded(true)"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16l4-4 4 4m0-8l-4 4-4-4" />
+          </svg>
+        </button>
+        <ul
+          v-if="openDropdown"
+          class="menu bg-base-100 border border-base-200 rounded-box shadow-lg mt-1 w-full max-h-48 overflow-y-auto absolute z-20"
+        >
+          <li v-if="options.length === 0" class="px-3 py-2 text-xs text-gray-500">
+            Aucun constructeur trouvé
+          </li>
+          <li
+            v-for="option in options"
+            :key="option.id"
+            class="px-3 py-2"
+            @click="selectOption(option)"
+          >
+            <div class="flex flex-col">
+              <span class="font-medium">{{ option.name }}</span>
+              <span class="text-xs text-gray-500">
+                {{ [option.email, option.phone].filter(Boolean).join(' • ') || '—' }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <button type="button" class="btn btn-outline btn-sm" @click="openCreateModal = true">
+        Nouveau
+      </button>
+    </div>
+
+    <div v-if="selectedConstructeur" class="text-xs text-gray-500">
+      <span class="font-medium">{{ selectedConstructeur.name }}</span>
+      <span v-if="selectedConstructeur.email"> • {{ selectedConstructeur.email }}</span>
+      <span v-if="selectedConstructeur.phone"> • {{ selectedConstructeur.phone }}</span>
+    </div>
+
+    <dialog class="modal" :class="{ 'modal-open': openCreateModal }">
+      <div class="modal-box">
+        <h3 class="font-bold text-lg mb-4">Nouveau constructeur</h3>
+        <form @submit.prevent="handleCreate">
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Nom</span></label>
+            <input v-model="createForm.name" type="text" class="input input-bordered" required />
+          </div>
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Email</span></label>
+            <input v-model="createForm.email" type="email" class="input input-bordered" placeholder="ex: contact@constructeur.com" />
+          </div>
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Téléphone</span></label>
+            <input v-model="createForm.phone" type="text" class="input input-bordered" placeholder="ex: 01 23 45 67 89" />
+          </div>
+
+          <div class="modal-action">
+            <button type="button" class="btn" @click="closeCreateModal">Annuler</button>
+            <button type="submit" class="btn btn-primary" :disabled="creating">
+              <span v-if="creating" class="loading loading-spinner loading-xs mr-2"></span>
+              Créer
+            </button>
+          </div>
+        </form>
+      </div>
+    </dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: null,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: 'Sélectionner ou créer un constructeur...',
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { constructeurs, searchConstructeurs, createConstructeur } = useConstructeurs()
+const searchTerm = ref('')
+const openDropdown = ref(false)
+const openCreateModal = ref(false)
+const creating = ref(false)
+const options = ref([])
+let searchTimeout = null
+
+const createForm = ref({
+  name: '',
+  email: '',
+  phone: '',
+})
+
+const selectedConstructeur = computed(() =>
+  constructeurs.value.find(item => item.id === props.modelValue) || null
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue && !selectedConstructeur.value) {
+      // ensure current selection is loaded
+      ensureOptionsLoaded(true)
+    }
+    if (newValue) {
+      const match = constructeurs.value.find(item => item.id === newValue)
+      if (match) {
+        searchTerm.value = match.name
+      }
+    }
+  },
+  { immediate: true }
+)
+
+const ensureOptionsLoaded = async (force = false) => {
+  if (options.value.length && !force) return
+  const result = await searchConstructeurs(searchTerm.value)
+  if (result.success) {
+    options.value = result.data
+  }
+}
+
+const onSearch = () => {
+  openDropdown.value = true
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(async () => {
+    const result = await searchConstructeurs(searchTerm.value)
+    if (result.success) {
+      options.value = result.data
+    }
+  }, 250)
+}
+
+const selectOption = (option) => {
+  emit('update:modelValue', option.id)
+  openDropdown.value = false
+  searchTerm.value = option.name
+}
+
+const closeCreateModal = () => {
+  openCreateModal.value = false
+  createForm.value = { name: '', email: '', phone: '' }
+}
+
+const handleCreate = async () => {
+  creating.value = true
+  const payload = { ...createForm.value }
+  if (!payload.phone) delete payload.phone
+  if (!payload.email) delete payload.email
+  const result = await createConstructeur(payload)
+  creating.value = false
+  if (result.success) {
+    emit('update:modelValue', result.data.id)
+    searchTerm.value = result.data.name
+    closeCreateModal()
+    await ensureOptionsLoaded(true)
+  }
+}
+
+const clickHandler = (event) => {
+  const element = event.target
+  if (element && element.closest) {
+    if (
+      element.closest('.menu') ||
+      element.closest('.modal-box') ||
+      element.closest('.btn') ||
+      element.closest('.constructeur-select')
+    ) {
+      return
+    }
+  }
+  openDropdown.value = false
+}
+
+onMounted(() => {
+  window.addEventListener('click', clickHandler)
+  ensureOptionsLoaded()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', clickHandler)
+  clearTimeout(searchTimeout)
+})
+</script>
+watch(
+  constructeurs,
+  (list) => {
+    options.value = [...list]
+  },
+  { immediate: true }
+)

app/components/DocumentUpload.vue

@@ -78,7 +78,7 @@ const props = defineProps({
   },
   maxFileSizeMb: {
     type: Number,
-    default: 100,
+    default: 200,
   },
 })
 

app/components/PieceItem.vue

@@ -34,15 +34,16 @@
       </div>
       <div>
         <span class="font-medium">Constructeur:</span> 
-        <input 
-          v-if="isEditMode"
-          :id="`piece-constructeur-${piece.id}`"
-          v-model="pieceData.constructeur" 
-          type="text" 
-          class="input input-sm input-bordered ml-2"
-          @blur="updatePiece"
+        <span v-if="!isEditMode" class="ml-2">
+          <span class="font-medium">{{ piece.constructeur?.name || 'Non défini' }}</span>
+          <span v-if="piece.constructeur" class="block text-xs text-gray-500">
+            {{ [piece.constructeur?.email, piece.constructeur?.phone].filter(Boolean).join(' • ') }}
+          </span>
+        </span>
+        <ConstructeurSelect
+          v-else
+          v-model="piece.constructeurId"
         />
-        <span v-else class="ml-2">{{ pieceData.constructeur || 'Non défini' }}</span>
       </div>
       <div>
         <span class="font-medium">Emplacement:</span> 
@@ -229,6 +230,7 @@ import { useToast } from '~/composables/useToast'
 import { useDocuments } from '~/composables/useDocuments'
 import { getFileIcon } from '~/utils/fileIcons'
 import DocumentUpload from '~/components/DocumentUpload.vue'
+import ConstructeurSelect from './ConstructeurSelect.vue'
 
 const props = defineProps({
   piece: {
@@ -247,7 +249,6 @@ const emit = defineEmits(['update', 'edit', 'custom-field-update'])
 const pieceData = reactive({
   name: props.piece.name || '',
   reference: props.piece.reference || '',
-  constructeur: props.piece.constructeur || '',
   emplacement: props.piece.emplacement || '',
   prix: props.piece.prix || ''
 })
@@ -336,6 +337,17 @@ watch(
   }
 )
 
+watch(
+  () => props.piece.constructeurId,
+  (newVal, oldVal) => {
+    if (!props.isEditMode) return
+    if (oldVal === undefined) return
+    if (newVal !== oldVal) {
+      updatePiece()
+    }
+  }
+)
+
 // Méthodes pour gérer les champs personnalisés
 const setCustomFieldValue = (fieldValueId, value) => {
   const fieldValue = props.piece.customFieldValues?.find(fv => fv.id === fieldValueId)
@@ -349,7 +361,8 @@ const updatePiece = () => {
   emit('update', {
     ...props.piece,
     ...pieceData,
-    prix: prixValue && prixValue !== '' ? parseFloat(prixValue) : null
+    prix: prixValue && prixValue !== '' ? parseFloat(prixValue) : null,
+    constructeurId: props.piece.constructeurId || null,
   })
 }
 
@@ -377,7 +390,6 @@ onMounted(() => {
   // Initialiser les données avec les props
   pieceData.name = props.piece.name || ''
   pieceData.reference = props.piece.reference || ''
-  pieceData.constructeur = props.piece.constructeur || ''
   pieceData.emplacement = props.piece.emplacement || ''
   pieceData.prix = props.piece.prix || ''
   

app/composables/useComposants.js

@@ -78,11 +78,12 @@ export function useComposants() {
     try {
       const result = await patch(`/composants/${id}`, composantData)
       if (result.success) {
+        const updated = result.data
         const index = composants.value.findIndex(comp => comp.id === id)
         if (index !== -1) {
-          composants.value[index] = result.data
+          composants.value[index] = updated
         }
-        showSuccess(`Composant "${composantData.name}" mis à jour avec succès`)
+        showSuccess(`Composant "${updated?.name || composantData.name || ''}" mis à jour avec succès`)
       }
       return result
     } catch (error) {
@@ -131,4 +132,4 @@ export function useComposants() {
     getComposants,
     isLoading
   }
-} 
+} 

app/composables/useConstructeurs.js

@@ -0,0 +1,108 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+import { useToast } from './useToast'
+
+const constructeurs = ref([])
+const loading = ref(false)
+
+export function useConstructeurs() {
+  const { get, post, patch, delete: del } = useApi()
+  const { showSuccess, showError } = useToast()
+
+  const loadConstructeurs = async (search = '') => {
+    loading.value = true
+    try {
+      const query = search ? `?search=${encodeURIComponent(search)}` : ''
+      const result = await get(`/constructeurs${query}`)
+      if (result.success) {
+        constructeurs.value = result.data
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors du chargement des constructeurs:', error)
+      return { success: false, error: error.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const searchConstructeurs = async (search = '') => {
+    return loadConstructeurs(search)
+  }
+
+  const createConstructeur = async (data) => {
+    loading.value = true
+    try {
+      const result = await post('/constructeurs', data)
+      if (result.success) {
+        constructeurs.value = [result.data, ...constructeurs.value]
+        showSuccess(`Constructeur "${result.data.name}" créé`)
+      } else if (result.error) {
+        showError(result.error)
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors de la création du constructeur:', error)
+      showError("Impossible de créer le constructeur")
+      return { success: false, error: error.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const updateConstructeur = async (id, data) => {
+    loading.value = true
+    try {
+      const result = await patch(`/constructeurs/${id}`, data)
+      if (result.success) {
+        const index = constructeurs.value.findIndex(item => item.id === id)
+        if (index !== -1) {
+          constructeurs.value[index] = result.data
+        }
+        showSuccess(`Constructeur "${result.data.name}" mis à jour`)
+      } else if (result.error) {
+        showError(result.error)
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour du constructeur:', error)
+      showError("Impossible de mettre à jour le constructeur")
+      return { success: false, error: error.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteConstructeur = async (id) => {
+    loading.value = true
+    try {
+      const result = await del(`/constructeurs/${id}`)
+      if (result.success) {
+        constructeurs.value = constructeurs.value.filter(item => item.id !== id)
+        showSuccess('Constructeur supprimé')
+      } else if (result.error) {
+        showError(result.error)
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors de la suppression du constructeur:', error)
+      showError("Impossible de supprimer le constructeur")
+      return { success: false, error: error.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const getConstructeurById = (id) => constructeurs.value.find(item => item.id === id)
+
+  return {
+    constructeurs,
+    loading,
+    loadConstructeurs,
+    searchConstructeurs,
+    createConstructeur,
+    updateConstructeur,
+    deleteConstructeur,
+    getConstructeurById,
+  }
+}

app/composables/useMachines.js

@@ -62,7 +62,7 @@ export function useMachines() {
         if (index !== -1) {
           machines.value[index] = result.data
         }
-        showSuccess(`Machine "${machineData.name}" mise à jour avec succès`)
+        showSuccess(`Machine "${result.data?.name || machineData.name || ''}" mise à jour avec succès`)
       }
       return result
     } catch (error) {
@@ -120,4 +120,4 @@ export function useMachines() {
     getMachines,
     isLoading
   }
-} 
+} 

app/composables/usePieces.js

@@ -78,11 +78,12 @@ export function usePieces() {
     try {
       const result = await patch(`/pieces/${id}`, pieceData)
       if (result.success) {
+        const updated = result.data
         const index = pieces.value.findIndex(piece => piece.id === id)
         if (index !== -1) {
-          pieces.value[index] = result.data
+          pieces.value[index] = updated
         }
-        showSuccess(`Pièce "${pieceData.name}" mise à jour avec succès`)
+        showSuccess(`Pièce "${updated?.name || pieceData.name || ''}" mise à jour avec succès`)
       }
       return result
     } catch (error) {
@@ -131,4 +132,4 @@ export function usePieces() {
     getPieces,
     isLoading
   }
-} 
+} 

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)