feat(constructeur) : update composant edit flow with supplier references

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 16:52:50 +02:00
parent c5988ec7a6
commit 80739a4528
6 changed files with 143 additions and 33 deletions
--- a/app/pages/component/[id]/edit.vue
+++ b/app/pages/component/[id]/edit.vue
@@ -141,6 +141,11 @@
          </div>
        </div>

+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
+
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div class="form-control">
            <label class="label">
@@ -350,13 +355,15 @@
 </template>

 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRoute } from '#imports'
 import { useComponentEdit } from '~/composables/useComponentEdit'
 import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurs } from '~/composables/useConstructeurs'

 const route = useRoute()
 const { updateDocument } = useDocuments()
+const { getConstructeurById } = useConstructeurs()
 const versionRefreshKey = ref(0)

 const {
@@ -371,6 +378,8 @@ const {
  previewVisible,
  selectedTypeId,
  editionForm,
+  constructeurLinks,
+  constructeurIdsFromForm,
  customFieldInputs,
  historyFieldLabels,
  canEdit,
@@ -401,6 +410,26 @@ const {
  fetchComponent,
 } = useComponentEdit(String(route.params.id))

+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => editionForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    // Remove links whose ID was removed from the select
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+
 const editingDocument = ref<any | null>(null)
 const editModalVisible = ref(false)

--- a/app/pages/component/[id]/index.vue
+++ b/app/pages/component/[id]/index.vue
@@ -128,7 +128,7 @@

          <!-- Référence + Fournisseurs (if value or edit mode) -->
          <div
-            v-if="isEditMode || component.reference || editionForm.constructeurIds.length"
+            v-if="isEditMode || component.reference || constructeurLinks.length"
            class="grid grid-cols-1 gap-4 md:grid-cols-2"
          >
            <div v-if="isEditMode || component.reference" class="form-control">
@@ -148,7 +148,7 @@
              </div>
            </div>

-            <div v-if="isEditMode || editionForm.constructeurIds.length" class="form-control">
+            <div v-if="isEditMode || constructeurLinks.length" class="form-control">
              <label class="label">
                <span class="label-text">Fournisseur</span>
              </label>
@@ -160,18 +160,20 @@
                placeholder="Rechercher un ou plusieurs fournisseurs..."
                :initial-options="component?.constructeurs || []"
              />
-              <div v-else class="flex flex-wrap gap-2">
-                <span
-                  v-for="id in editionForm.constructeurIds"
-                  :key="id"
-                  class="badge badge-outline"
-                >
-                  {{ getConstructeurById(id)?.name || id }}
-                </span>
-              </div>
            </div>
          </div>

+          <!-- Constructeur links table -->
+          <ConstructeurLinksTable
+            v-if="isEditMode && constructeurLinks.length"
+            v-model="constructeurLinks"
+          />
+          <ConstructeurLinksTable
+            v-else-if="!isEditMode && constructeurLinks.length"
+            :model-value="constructeurLinks"
+            :readonly="true"
+          />
+
          <!-- Prix (if value or edit mode) -->
          <div v-if="isEditMode || component.prix" class="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div class="form-control">
@@ -254,7 +256,7 @@
                    </div>
                  </template>
                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center gap-2">
-                    {{ resolvePieceLabel(slot.selectedPieceId) || '— Non sélectionné' }}
+                    {{ slot.selectedPieceName || '— Non sélectionné' }}
                    <span v-if="slot.quantity > 1" class="badge badge-sm">x{{ slot.quantity }}</span>
                  </div>
                </div>
@@ -281,7 +283,7 @@
                    />
                  </template>
                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
-                    {{ resolveProductLabel(slot.selectedProductId) || '— Non sélectionné' }}
+                    {{ slot.selectedProductName || '— Non sélectionné' }}
                  </div>
                </div>
              </div>
@@ -307,7 +309,7 @@
                    />
                  </template>
                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
-                    {{ resolveSubcomponentLabel(slot.selectedComponentId) || '— Non sélectionné' }}
+                    {{ slot.selectedComponentName || '— Non sélectionné' }}
                  </div>
                </div>
              </div>
@@ -435,12 +437,13 @@
 </template>

 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute } from '#imports'
 import { useComponentEdit } from '~/composables/useComponentEdit'
 import { useDocuments } from '~/composables/useDocuments'
 import { usePermissions } from '~/composables/usePermissions'
 import { useConstructeurs } from '~/composables/useConstructeurs'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'

 const route = useRoute()
 const { canEdit } = usePermissions()
@@ -461,6 +464,8 @@ const {
  previewVisible,
  selectedTypeId,
  editionForm,
+  constructeurLinks,
+  constructeurIdsFromForm,
  customFieldInputs,
  historyFieldLabels,
  canSubmit,
@@ -497,6 +502,26 @@ const submitEdition = async () => {
  }
 }

+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => editionForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    // Remove links whose ID was removed from the select
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+
 const editingDocument = ref<any | null>(null)
 const editModalVisible = ref(false)

--- a/app/pages/component/create.vue
+++ b/app/pages/component/create.vue
@@ -92,6 +92,11 @@
          </div>
        </div>

+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
+
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div class="form-control">
            <label class="label">
@@ -215,10 +220,16 @@
 </template>

 <script setup lang="ts">
+import { watch } from 'vue'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+
+const { getConstructeurById } = useConstructeurs()
+
 const {
  selectedTypeId,
  submitting,
  creationForm,
+  constructeurLinks,
  customFieldInputs,
  structureAssignments,
  selectedDocuments,
@@ -249,4 +260,23 @@ const {
  resolveSubcomponentLabel,
  submitCreation,
 } = useComponentCreate()
+
+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => creationForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
 </script>