refactor(frontend) : extract StructureSkeletonPreview shared component

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/components/common/StructureSkeletonPreview.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
+    <div class="flex items-center justify-between gap-4">
+      <div>
+        <h2 class="font-semibold text-base-content">Squelette sélectionné</h2>
+        <p class="text-xs text-base-content/70">
+          {{ description }}
+        </p>
+      </div>
+      <span class="badge badge-outline">{{ previewBadge }}</span>
+    </div>
+
+    <details v-if="structure" class="collapse collapse-arrow bg-base-100">
+      <summary class="collapse-title text-sm font-medium">
+        Consulter le détail du squelette
+      </summary>
+      <div class="collapse-content text-sm text-base-content/80" :class="variant === 'component' ? 'space-y-4' : 'space-y-2'">
+        <!-- Custom fields: component variant (rich display) -->
+        <div v-if="variant === 'component' && customFields.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
+          <ul class="space-y-2">
+            <li
+              v-for="field in customFields"
+              :key="field.customFieldId || field.id || field.name"
+              class="rounded bg-base-200/60 px-3 py-2"
+            >
+              <p class="font-medium text-sm text-base-content">
+                {{ field.name || field.key }}
+              </p>
+              <p class="text-xs text-base-content/70 mt-1">
+                Type : {{ field.type || 'text' }}<span v-if="field.required"> &bull; Obligatoire</span>
+                <span v-if="Array.isArray(field.options) && field.options.length">
+                  &bull; Options : {{ field.options.join(', ') }}
+                </span>
+                <span v-if="field.defaultValue">
+                  &bull; Défaut : {{ field.defaultValue }}
+                </span>
+              </p>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Custom fields: piece variant (simple display) -->
+        <div v-if="variant === 'piece' && customFields.length" class="space-y-1">
+          <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li v-for="field in customFields" :key="field.name">
+              <span class="font-medium">{{ field.name }}</span>
+              <span v-if="field.value !== undefined && field.value !== null"> : {{ field.value }}</span>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Pieces: component variant only -->
+        <div v-if="variant === 'component' && pieces.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Pièces imposées</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li
+              v-for="(piece, index) in pieces"
+              :key="piece.role || piece.typePieceId || piece.familyCode || index"
+            >
+              {{ resolvePieceLabelFn(piece) }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- Products: component variant only -->
+        <div v-if="variant === 'component' && products.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Produits imposés</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li
+              v-for="(product, index) in products"
+              :key="product.role || product.typeProductId || product.familyCode || index"
+            >
+              {{ resolveProductLabelFn(product) }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- Subcomponents: component variant only -->
+        <div v-if="variant === 'component' && subcomponents.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li
+              v-for="(subcomponent, index) in subcomponents"
+              :key="subcomponent.alias || subcomponent.typeComposantId || subcomponent.familyCode || index"
+            >
+              {{ resolveSubcomponentLabelFn(subcomponent) }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- Empty state: component variant -->
+        <p
+          v-if="variant === 'component' && showEmptyState && !customFields.length && !pieces.length && !products.length && !subcomponents.length"
+          class="text-xs text-gray-500"
+        >
+          Ce squelette ne définit pas encore de pièces, sous-composants ou valeurs par défaut.
+        </p>
+
+        <!-- Empty state: piece variant -->
+        <p v-if="variant === 'piece' && !customFields.length" class="text-xs text-base-content/70">
+          Ce squelette ne définit pas encore de champs personnalisés.
+        </p>
+      </div>
+    </details>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  getStructureCustomFields,
+  getStructurePieces,
+  getStructureProducts,
+  getStructureSubcomponents,
+} from '~/shared/utils/structureDisplayUtils'
+
+const props = withDefaults(defineProps<{
+  structure: Record<string, any> | null
+  description?: string
+  previewBadge: string
+  variant: 'component' | 'piece'
+  showEmptyState?: boolean
+  resolvePieceLabel?: (piece: Record<string, any>) => string
+  resolveProductLabel?: (product: Record<string, any>) => string
+  resolveSubcomponentLabel?: (subcomponent: Record<string, any>) => string
+}>(), {
+  description: '',
+  showEmptyState: false,
+  resolvePieceLabel: undefined,
+  resolveProductLabel: undefined,
+  resolveSubcomponentLabel: undefined,
+})
+
+const customFields = computed(() =>
+  getStructureCustomFields(props.structure),
+)
+
+const pieces = computed(() =>
+  props.variant === 'component' ? getStructurePieces(props.structure) : [],
+)
+
+const products = computed(() =>
+  props.variant === 'component' ? getStructureProducts(props.structure) : [],
+)
+
+const subcomponents = computed(() =>
+  props.variant === 'component' ? getStructureSubcomponents(props.structure) : [],
+)
+
+const fallbackLabel = (item: Record<string, any>) =>
+  item?.name || item?.label || item?.role || item?.alias || 'N/A'
+
+const resolvePieceLabelFn = (piece: Record<string, any>) =>
+  props.resolvePieceLabel ? props.resolvePieceLabel(piece) : fallbackLabel(piece)
+
+const resolveProductLabelFn = (product: Record<string, any>) =>
+  props.resolveProductLabel ? props.resolveProductLabel(product) : fallbackLabel(product)
+
+const resolveSubcomponentLabelFn = (subcomponent: Record<string, any>) =>
+  props.resolveSubcomponentLabel ? props.resolveSubcomponentLabel(subcomponent) : fallbackLabel(subcomponent)
+</script>

app/pages/component/[id]/edit.vue

@@ -138,91 +138,17 @@
           </div>
         </div>
 
-        <div v-if="selectedType" class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
-          <div class="flex items-center justify-between gap-4">
-            <div>
-              <h2 class="font-semibold text-base-content">Squelette sélectionné</h2>
-              <p class="text-xs text-base-content/70">
-                {{ selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.' }}
-              </p>
-            </div>
-            <span class="badge badge-outline">{{ formatStructurePreview(selectedTypeStructure) }}</span>
-          </div>
-
-          <details v-if="selectedTypeStructure" class="collapse collapse-arrow bg-base-100">
-            <summary class="collapse-title text-sm font-medium">
-              Consulter le détail du squelette
-            </summary>
-            <div class="collapse-content space-y-4 text-sm text-base-content/80">
-              <div v-if="getStructureCustomFields(selectedTypeStructure).length" class="space-y-2">
-                <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
-                <ul class="space-y-2">
-                  <li
-                    v-for="field in getStructureCustomFields(selectedTypeStructure)"
-                    :key="field.customFieldId || field.id || field.name"
-                    class="rounded bg-base-200/60 px-3 py-2"
-                  >
-                    <p class="font-medium text-sm text-base-content">
-                      {{ field.name || field.key }}
-                    </p>
-                    <p class="text-xs text-base-content/70 mt-1">
-                      Type : {{ field.type || 'text' }}<span v-if="field.required"> • Obligatoire</span>
-                      <span v-if="Array.isArray(field.options) && field.options.length">
-                        • Options : {{ field.options.join(', ') }}
-                      </span>
-                      <span v-if="field.defaultValue">
-                        • Défaut : {{ field.defaultValue }}
-                      </span>
-                    </p>
-                  </li>
-                </ul>
-              </div>
-
-              <div v-if="getStructurePieces(selectedTypeStructure).length" class="space-y-2">
-                <h3 class="font-semibold text-sm text-base-content">Pièces imposées</h3>
-                <ul class="list-disc list-inside space-y-1">
-                  <li
-                    v-for="(piece, index) in getStructurePieces(selectedTypeStructure)"
-                    :key="piece.role || piece.typePieceId || piece.familyCode || index"
-                  >
-                    {{ resolvePieceLabel(piece) }}
-                  </li>
-                </ul>
-              </div>
-
-              <div v-if="getStructureProducts(selectedTypeStructure).length" class="space-y-2">
-                <h3 class="font-semibold text-sm text-base-content">Produits imposés</h3>
-                <ul class="list-disc list-inside space-y-1">
-                  <li
-                    v-for="(product, index) in getStructureProducts(selectedTypeStructure)"
-                    :key="product.role || product.typeProductId || product.familyCode || index"
-                  >
-                    {{ resolveProductLabel(product) }}
-                  </li>
-                </ul>
-              </div>
-
-              <div v-if="getStructureSubcomponents(selectedTypeStructure).length" class="space-y-2">
-                <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
-                <ul class="list-disc list-inside space-y-1">
-                  <li
-                    v-for="(subcomponent, index) in getStructureSubcomponents(selectedTypeStructure)"
-                    :key="subcomponent.alias || subcomponent.typeComposantId || subcomponent.familyCode || index"
-                  >
-                    {{ resolveSubcomponentLabel(subcomponent) }}
-                  </li>
-                </ul>
-              </div>
-
-              <p
-                v-if="!getStructureCustomFields(selectedTypeStructure).length && !getStructurePieces(selectedTypeStructure).length && !getStructureProducts(selectedTypeStructure).length && !getStructureSubcomponents(selectedTypeStructure).length"
-                class="text-xs text-gray-500"
-              >
-                Ce squelette ne définit pas encore de pièces, sous-composants ou valeurs par défaut.
-              </p>
-            </div>
-          </details>
-        </div>
+        <StructureSkeletonPreview
+          v-if="selectedType"
+          :structure="selectedTypeStructure"
+          :description="selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.'"
+          :preview-badge="formatStructurePreview(selectedTypeStructure)"
+          variant="component"
+          show-empty-state
+          :resolve-piece-label="resolvePieceLabel"
+          :resolve-product-label="resolveProductLabel"
+          :resolve-subcomponent-label="resolveSubcomponentLabel"
+        />
 
         <div
           v-if="structureSelections.hasAny"
@@ -368,10 +294,8 @@ import { useComponentHistory } from '~/composables/useComponentHistory'
 import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
 import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
 import {
-  getStructureCustomFields,
   getStructurePieces,
   getStructureProducts,
-  getStructureSubcomponents,
   resolvePieceLabel as _resolvePieceLabel,
   resolveProductLabel as _resolveProductLabel,
   resolveSubcomponentLabel,

app/pages/component/create.vue

@@ -109,84 +109,16 @@
           </div>
         </div>
 
-        <div v-if="selectedType" class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
-          <div class="flex items-center justify-between gap-4">
-            <div>
-              <h2 class="font-semibold text-base-content">Squelette sélectionné</h2>
-              <p class="text-xs text-base-content/70">
-                {{ selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.' }}
-              </p>
-            </div>
-            <span class="badge badge-outline">{{ formatStructurePreview(selectedTypeStructure) }}</span>
-          </div>
-
-          <details v-if="selectedTypeStructure" class="collapse collapse-arrow bg-base-100">
-            <summary class="collapse-title text-sm font-medium">
-              Consulter le détail du squelette
-            </summary>
-            <div class="collapse-content space-y-4 text-sm text-base-content/80">
-              <div v-if="getStructureCustomFields(selectedTypeStructure).length" class="space-y-2">
-                <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
-                <ul class="space-y-2">
-                  <li
-                    v-for="field in getStructureCustomFields(selectedTypeStructure)"
-                    :key="field.customFieldId || field.id || field.name"
-                    class="rounded bg-base-200/60 px-3 py-2"
-                  >
-                    <p class="font-medium text-sm text-base-content">
-                      {{ field.name || field.key }}
-                    </p>
-                    <p class="text-xs text-base-content/70 mt-1">
-                      Type : {{ field.type || 'text' }}<span v-if="field.required"> • Obligatoire</span>
-                      <span v-if="Array.isArray(field.options) && field.options.length">
-                        • Options : {{ field.options.join(', ') }}
-                      </span>
-                      <span v-if="field.defaultValue">
-                        • Défaut : {{ field.defaultValue }}
-                      </span>
-                    </p>
-                  </li>
-                </ul>
-              </div>
-
-              <div v-if="getStructurePieces(selectedTypeStructure).length" class="space-y-2">
-                <h3 class="font-semibold text-sm text-base-content">Pièces imposées</h3>
-                <ul class="list-disc list-inside space-y-1">
-                  <li
-                    v-for="(piece, index) in getStructurePieces(selectedTypeStructure)"
-                    :key="piece.role || piece.typePieceId || piece.familyCode || index"
-                  >
-                    {{ resolvePieceLabel(piece) }}
-                  </li>
-                </ul>
-              </div>
-
-              <div v-if="getStructureProducts(selectedTypeStructure).length" class="space-y-2">
-                <h3 class="font-semibold text-sm text-base-content">Produits imposés</h3>
-                <ul class="list-disc list-inside space-y-1">
-                  <li
-                    v-for="(product, index) in getStructureProducts(selectedTypeStructure)"
-                    :key="product.role || product.typeProductId || product.familyCode || index"
-                  >
-                    {{ resolveProductLabel(product) }}
-                  </li>
-                </ul>
-              </div>
-
-              <div v-if="getStructureSubcomponents(selectedTypeStructure).length" class="space-y-2">
-                <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
-                <ul class="list-disc list-inside space-y-1">
-                  <li
-                    v-for="(subcomponent, index) in getStructureSubcomponents(selectedTypeStructure)"
-                    :key="subcomponent.alias || subcomponent.typeComposantId || subcomponent.familyCode || index"
-                  >
-                    {{ resolveSubcomponentLabel(subcomponent) }}
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </details>
-        </div>
+        <StructureSkeletonPreview
+          v-if="selectedType"
+          :structure="selectedTypeStructure"
+          :description="selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.'"
+          :preview-badge="formatStructurePreview(selectedTypeStructure)"
+          variant="component"
+          :resolve-piece-label="resolvePieceLabel"
+          :resolve-product-label="resolveProductLabel"
+          :resolve-subcomponent-label="resolveSubcomponentLabel"
+        />
 
         <div
           v-if="structureHasRequirements"
@@ -304,10 +236,20 @@ import { useCustomFields } from '~/composables/useCustomFields'
 import { useDocuments } from '~/composables/useDocuments'
 import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
 import {
-  toFieldString,
+  type CustomFieldInput,
+  normalizeCustomFieldInputs,
   requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
+  saveCustomFieldValues as _saveCustomFieldValues,
 } from '~/shared/utils/customFieldFormUtils'
 import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import {
+  getStructurePieces,
+  resolvePieceLabel as _resolvePieceLabel,
+  resolveProductLabel as _resolveProductLabel,
+  resolveSubcomponentLabel,
+  fetchModelTypeNames,
+  buildTypeLabelMap,
+} from '~/shared/utils/structureDisplayUtils'
 import type {
   ComponentModelPiece,
   ComponentModelProduct,
@@ -346,8 +288,7 @@ const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
 const { uploadDocuments } = useDocuments()
 const { canEdit } = usePermissions()
 
-const initialTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
-const selectedTypeId = ref<string>(initialTypeId.value)
+const selectedTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
 const submitting = ref(false)
 const creationForm = reactive({
   name: '' as string,
@@ -370,27 +311,14 @@ const structureDataLoading = computed(
 )
 
 const fetchedPieceTypeMap = ref<Record<string, string>>({})
-const pieceTypeLabelMap = computed(() => ({
-  ...Object.fromEntries(
-    (pieceTypes.value || [])
-      .filter((type: any) => type?.id)
-      .map((type: any) => [type.id, type.name || type.code || '']),
-  ),
-  ...fetchedPieceTypeMap.value,
-}))
+const pieceTypeLabelMap = computed(() =>
+  buildTypeLabelMap(pieceTypes.value, fetchedPieceTypeMap.value),
+)
 const productTypeLabelMap = computed(() =>
-  Object.fromEntries(
-    (productTypes.value || [])
-      .filter((type: any) => type?.id)
-      .map((type: any) => [type.id, type.name || type.code || '']),
-  ),
+  buildTypeLabelMap(productTypes.value),
 )
 const componentTypeLabelMap = computed(() =>
-  Object.fromEntries(
-    (componentTypes.value || [])
-      .filter((type: any) => type?.id)
-      .map((type: any) => [type.id, type.name || type.code || '']),
-  ),
+  buildTypeLabelMap(componentTypes.value),
 )
 
 watch(
@@ -707,69 +635,11 @@ const canSubmit = computed(() => Boolean(
   !submitting.value,
 ))
 
-const getStructureCustomFields = (structure: ComponentModelStructure | null) => {
-  return Array.isArray(structure?.customFields) ? structure.customFields : []
-}
+const resolvePieceLabel = (piece: Record<string, any>) =>
+  _resolvePieceLabel(piece, pieceTypeLabelMap.value)
 
-const getStructurePieces = (structure: ComponentModelStructure | null) => {
-  return Array.isArray(structure?.pieces) ? structure.pieces : []
-}
-
-const getStructureProducts = (structure: ComponentModelStructure | null) => {
-  return Array.isArray(structure?.products) ? structure.products : []
-}
-
-const getStructureSubcomponents = (structure: ComponentModelStructure | null) => {
-  if (Array.isArray(structure?.subcomponents)) {
-    return structure.subcomponents
-  }
-  const legacy = (structure as any)?.subComponents
-  return Array.isArray(legacy) ? legacy : []
-}
-
-const resolvePieceLabel = (piece: Record<string, any>) => {
-  const parts: string[] = []
-  if (piece.role) {
-    parts.push(piece.role)
-  }
-  if (piece.typePiece?.name) {
-    parts.push(piece.typePiece.name)
-  } else if (piece.typePieceLabel) {
-    parts.push(piece.typePieceLabel)
-  } else if (piece.typePieceId && pieceTypeLabelMap.value[piece.typePieceId]) {
-    parts.push(pieceTypeLabelMap.value[piece.typePieceId])
-  } else if (piece.typePiece?.code) {
-    parts.push(`Famille ${piece.typePiece.code}`)
-  } else if (piece.familyCode) {
-    parts.push(`Famille ${piece.familyCode}`)
-  } else if (piece.typePieceId) {
-    parts.push(`#${piece.typePieceId}`)
-  }
-  return parts.length ? parts.join(' • ') : 'Pièce'
-}
-
-const fetchPieceTypeNames = async (ids: string[]) => {
-  const missing = ids.filter((id) => id && !pieceTypeLabelMap.value[id])
-  if (!missing.length) {
-    return
-  }
-  const results = await Promise.allSettled(
-    missing.map((id) => get(`/model_types/${id}`)),
-  )
-  const next = { ...fetchedPieceTypeMap.value }
-  results.forEach((result, index) => {
-    const key = missing[index]
-    if (!key || result.status !== 'fulfilled') {
-      return
-    }
-    const data = result.value?.data
-    const name = data?.name || data?.code
-    if (name) {
-      next[key] = name
-    }
-  })
-  fetchedPieceTypeMap.value = next
-}
+const resolveProductLabel = (product: Record<string, any>) =>
+  _resolveProductLabel(product, productTypeLabelMap.value)
 
 watch(
   selectedTypeStructure,
@@ -780,56 +650,17 @@ watch(
     if (!ids.length) {
       return
     }
-    fetchPieceTypeNames(Array.from(new Set(ids))).catch(() => {})
+    fetchModelTypeNames(Array.from(new Set(ids)), pieceTypeLabelMap.value, get)
+      .then((additions) => {
+        if (Object.keys(additions).length) {
+          fetchedPieceTypeMap.value = { ...fetchedPieceTypeMap.value, ...additions }
+        }
+      })
+      .catch(() => {})
   },
   { immediate: true },
 )
 
-const resolveProductLabel = (product: Record<string, any>) => {
-  const parts: string[] = []
-  if (product.role) {
-    parts.push(product.role)
-  }
-  if (product.typeProduct?.name) {
-    parts.push(product.typeProduct.name)
-  } else if (product.typeProductLabel) {
-    parts.push(product.typeProductLabel)
-  } else if (product.typeProduct?.code) {
-    parts.push(`Catégorie ${product.typeProduct.code}`)
-  } else if (product.familyCode) {
-    parts.push(`Catégorie ${product.familyCode}`)
-  } else if (product.typeProductId) {
-    parts.push(`#${product.typeProductId}`)
-  }
-  return parts.length ? parts.join(' • ') : 'Produit'
-}
-
-const resolveSubcomponentLabel = (node: Record<string, any>) => {
-  const parts: string[] = []
-  if (node.alias) {
-    parts.push(node.alias)
-  }
-  if (node.typeComposant?.name) {
-    parts.push(node.typeComposant.name)
-  } else if (node.typeComposantLabel) {
-    parts.push(node.typeComposantLabel)
-  } else if (node.familyCode) {
-    parts.push(node.familyCode)
-  } else if (node.typeComposantId) {
-    parts.push(`#${node.typeComposantId}`)
-  }
-
-  const childCount = Array.isArray(node.subcomponents)
-    ? node.subcomponents.length
-    : Array.isArray(node.subComponents)
-      ? node.subComponents.length
-      : 0
-  if (childCount) {
-    parts.push(`${childCount} sous-composant(s)`)
-  }
-  return parts.length ? parts.join(' • ') : 'Sous-composant'
-}
-
 const clearCreationForm = () => {
   creationForm.name = ''
   creationForm.description = ''
@@ -903,7 +734,13 @@ const submitCreation = async () => {
   try {
     const result = await createComposant(payload)
     if (result.success) {
-      await saveCustomFieldValues(result.data)
+      const createdComponent = result.data as Record<string, any>
+      await _saveCustomFieldValues(
+        'composant',
+        createdComponent.id,
+        [createdComponent?.typeComposant?.customFields],
+        { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+      )
       if (selectedDocuments.value.length && result.data?.id) {
         uploadingDocuments.value = true
         const uploadResult = await uploadDocuments(
@@ -941,274 +778,4 @@ onMounted(async () => {
     loadProductTypes(),
   ])
 })
-
-interface CustomFieldInput {
-  id: string | null
-  name: string
-  type: string
-  required: boolean
-  options: string[]
-  value: string
-  customFieldId: string | null
-  customFieldValueId: string | null
-  orderIndex: number
-}
-
-
-const normalizeCustomFieldInputs = (structure: ComponentModelStructure | null): CustomFieldInput[] => {
-  if (!structure || typeof structure !== 'object') {
-    return []
-  }
-  const fields = Array.isArray(structure.customFields) ? structure.customFields : []
-  return fields
-    .map((field, index) => normalizeCustomField(field, index))
-    .filter((field): field is CustomFieldInput => field !== null)
-    .sort((a, b) => a.orderIndex - b.orderIndex)
-}
-
-const normalizeCustomField = (rawField: any, fallbackIndex = 0): CustomFieldInput | null => {
-  if (!rawField || typeof rawField !== 'object') {
-    return null
-  }
-  const name = resolveFieldName(rawField)
-  if (!name) {
-    return null
-  }
-  const type = resolveFieldType(rawField)
-  const required = resolveRequiredFlag(rawField)
-  const options = resolveOptions(rawField)
-  const defaultSource = resolveDefaultValue(rawField)
-  const value = formatDefaultValue(type, defaultSource)
-  const id = typeof rawField.id === 'string' ? rawField.id : null
-  const customFieldId = typeof rawField.customFieldId === 'string' ? rawField.customFieldId : id
-  const customFieldValueId = typeof rawField.customFieldValueId === 'string'
-    ? rawField.customFieldValueId
-    : null
-  const orderIndex = typeof rawField.orderIndex === 'number' ? rawField.orderIndex : fallbackIndex
-  return { id, name, type, required, options, value, customFieldId, customFieldValueId, orderIndex }
-}
-
-const resolveFieldName = (field: any): string => {
-  if (typeof field?.name === 'string' && field.name.trim()) {
-    return field.name.trim()
-  }
-  if (typeof field?.key === 'string' && field.key.trim()) {
-    return field.key.trim()
-  }
-  if (typeof field?.label === 'string' && field.label.trim()) {
-    return field.label.trim()
-  }
-  return ''
-}
-
-const resolveFieldType = (field: any): string => {
-  const allowed = ['text', 'number', 'select', 'boolean', 'date']
-  const rawType =
-    typeof field?.type === 'string'
-      ? field.type
-      : typeof field?.value?.type === 'string'
-        ? field.value.type
-        : ''
-  const value = rawType.toLowerCase()
-  return allowed.includes(value) ? value : 'text'
-}
-
-const resolveDefaultValue = (field: any): any => {
-  if (!field || typeof field !== 'object') {
-    return null
-  }
-  if (field.defaultValue !== undefined && field.defaultValue !== null) {
-    return field.defaultValue
-  }
-  if (field.value !== undefined && field.value !== null && typeof field.value !== 'object') {
-    return field.value
-  }
-  if (field.default !== undefined && field.default !== null) {
-    return field.default
-  }
-  if (field.value && typeof field.value === 'object') {
-    if ((field.value as any).defaultValue !== undefined && (field.value as any).defaultValue !== null) {
-      return (field.value as any).defaultValue
-    }
-    if ((field.value as any).value !== undefined && (field.value as any).value !== null && typeof (field.value as any).value !== 'object') {
-      return (field.value as any).value
-    }
-  }
-  return null
-}
-
-const formatDefaultValue = (type: string, defaultValue: any): string => {
-  if (defaultValue === null || defaultValue === undefined) {
-    return ''
-  }
-  if (typeof defaultValue === 'object') {
-    if (defaultValue === null) {
-      return ''
-    }
-    if ('defaultValue' in (defaultValue as Record<string, any>)) {
-      return formatDefaultValue(type, (defaultValue as Record<string, any>).defaultValue)
-    }
-    if ('value' in (defaultValue as Record<string, any>)) {
-      return formatDefaultValue(type, (defaultValue as Record<string, any>).value)
-    }
-    return ''
-  }
-  if (type === 'boolean') {
-    const normalized = String(defaultValue).toLowerCase()
-    if (normalized === 'true' || normalized === '1') {
-      return 'true'
-    }
-    if (normalized === 'false' || normalized === '0') {
-      return 'false'
-    }
-    return ''
-  }
-  return String(defaultValue)
-}
-
-const resolveRequiredFlag = (field: any): boolean => {
-  if (typeof field?.required === 'boolean') {
-    return field.required
-  }
-  const nestedRequired = field?.value?.required
-  if (typeof nestedRequired === 'boolean') {
-    return nestedRequired
-  }
-  if (typeof nestedRequired === 'string') {
-    const normalized = nestedRequired.toLowerCase()
-    return normalized === 'true' || normalized === '1'
-  }
-  return false
-}
-
-const resolveOptions = (field: any): string[] => {
-  const sources = [field?.options, field?.value?.options, field?.value?.choices]
-  for (const source of sources) {
-    if (Array.isArray(source)) {
-  const mapped = source
-    .map((option: unknown) => {
-      if (option === null || option === undefined) {
-        return ''
-      }
-      if (typeof option === 'string') {
-        return option.trim()
-      }
-      if (typeof option === 'object') {
-        const record = option as Record<string, unknown>
-        const keys = ['value', 'label', 'name']
-        for (const key of keys) {
-          const candidate = record[key]
-          if (typeof candidate === 'string' && candidate.trim().length > 0) {
-            return candidate.trim()
-              }
-            }
-          }
-          const fallback = String(option).trim()
-          return fallback === '[object Object]' ? '' : fallback
-        })
-        .filter((option) => option.length > 0)
-      if (mapped.length) {
-        return mapped
-      }
-    }
-  }
-  return []
-}
-
-const buildCustomFieldMetadata = (field: CustomFieldInput) => ({
-  customFieldName: field.name,
-  customFieldType: field.type,
-  customFieldRequired: field.required,
-  customFieldOptions: field.options,
-})
-
-const saveCustomFieldValues = async (createdComponent: any) => {
-  if (!createdComponent || !createdComponent.id) {
-    return
-  }
-
-  const definitionMap = new Map<string, string>()
-  const registerDefinitions = (fields: any[]) => {
-    if (!Array.isArray(fields)) {
-      return
-    }
-    fields.forEach((field) => {
-      if (!field || typeof field !== 'object') {
-        return
-      }
-      const name = typeof field.name === 'string' ? field.name : null
-      const id = typeof field.id === 'string' ? field.id : null
-      if (name && id && !definitionMap.has(name)) {
-        definitionMap.set(name, id)
-      }
-    })
-  }
-
-  registerDefinitions(createdComponent?.typeComposant?.customFields)
-
-  const resolveDefinitionId = (field: CustomFieldInput) => {
-    if (field.customFieldId) {
-      return field.customFieldId
-    }
-    if (field.id) {
-      return field.id
-    }
-    return definitionMap.get(field.name) ?? null
-  }
-
-  for (const field of customFieldInputs.value) {
-    if (!shouldPersistField(field)) {
-      continue
-    }
-
-    const definitionId = resolveDefinitionId(field)
-    const metadata = definitionId ? undefined : buildCustomFieldMetadata(field)
-    const value = formatValueForPersistence(field)
-
-    if (field.customFieldValueId) {
-      const result = await updateCustomFieldValue(field.customFieldValueId, { value })
-      if (!result.success) {
-        toast.showError(`Impossible de mettre à jour le champ personnalisé "${field.name}"`)
-      } else if (definitionId && !field.customFieldId) {
-        field.customFieldId = definitionId
-      }
-      continue
-    }
-
-    const result = await upsertCustomFieldValue(
-      definitionId,
-      'composant',
-      createdComponent.id,
-      value,
-      metadata,
-    )
-
-    if (!result.success) {
-      toast.showError(`Impossible d'enregistrer le champ personnalisé "${field.name}"`)
-    } else {
-      const createdValue = result.data
-      if (createdValue?.id) {
-        field.customFieldValueId = createdValue.id
-      }
-      const resolvedId = createdValue?.customField?.id || definitionId
-      if (resolvedId) {
-        field.customFieldId = resolvedId
-      }
-    }
-  }
-}
-
-const shouldPersistField = (field: CustomFieldInput) => {
-  if (field.type === 'boolean') {
-    return field.value === 'true' || field.value === 'false'
-  }
-  return toFieldString(field.value).trim() !== ''
-}
-
-const formatValueForPersistence = (field: CustomFieldInput) => {
-  if (field.type === 'boolean') {
-    return field.value === 'true' ? 'true' : 'false'
-  }
-  return toFieldString(field.value).trim()
-}
 </script>

app/pages/pieces/[id]/edit.vue

@@ -182,38 +182,13 @@
           </div>
         </div>
 
-        <div v-if="selectedType || resolvedStructure" class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
-          <div class="flex items-center justify-between gap-4">
-            <div>
-              <h2 class="font-semibold text-base-content">Squelette sélectionné</h2>
-              <p class="text-xs text-base-content/70">
-                {{ selectedType?.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.' }}
-              </p>
-            </div>
-            <span class="badge badge-outline">{{ formatPieceStructurePreview(resolvedStructure) }}</span>
-          </div>
-
-          <details v-if="resolvedStructure" class="collapse collapse-arrow bg-base-100">
-            <summary class="collapse-title text-sm font-medium">
-              Consulter le détail du squelette
-            </summary>
-            <div class="collapse-content space-y-2 text-sm text-base-content/80">
-              <div v-if="getStructureCustomFields(resolvedStructure).length" class="space-y-1">
-                <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
-                <ul class="list-disc list-inside space-y-1">
-                  <li v-for="field in getStructureCustomFields(resolvedStructure)" :key="field.name">
-                    <span class="font-medium">{{ field.name }}</span>
-                    <span v-if="field.value !== undefined && field.value !== null"> : {{ field.value }}</span>
-                  </li>
-                </ul>
-              </div>
-
-              <p v-else class="text-xs text-base-content/70">
-                Ce squelette ne définit pas encore de champs personnalisés.
-              </p>
-            </div>
-          </details>
-        </div>
+        <StructureSkeletonPreview
+          v-if="selectedType || resolvedStructure"
+          :structure="resolvedStructure"
+          :description="selectedType?.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.'"
+          :preview-badge="formatPieceStructurePreview(resolvedStructure)"
+          variant="piece"
+        />
 
         <div v-if="customFieldInputs.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
           <header class="space-y-1">
@@ -457,9 +432,6 @@ const selectedType = computed(() => {
 const getStructureProducts = (structure: PieceModelStructure | null) =>
   Array.isArray(structure?.products) ? structure.products : []
 
-const getStructureCustomFields = (structure: PieceModelStructure | null) =>
-  Array.isArray(structure?.customFields) ? structure.customFields : []
-
 const structureProducts = computed(() =>
   getStructureProducts(resolvedStructure.value),
 )

app/pages/pieces/create.vue

@@ -153,38 +153,13 @@
           </div>
         </div>
 
-        <div v-if="selectedType" class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
-          <div class="flex items-center justify-between gap-4">
-            <div>
-              <h2 class="font-semibold text-base-content">Squelette sélectionné</h2>
-              <p class="text-xs text-base-content/70">
-                {{ selectedType.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.' }}
-              </p>
-            </div>
-            <span class="badge badge-outline">{{ formatPieceStructurePreview(selectedType.structure) }}</span>
-          </div>
-
-          <details v-if="selectedType.structure" class="collapse collapse-arrow bg-base-100">
-            <summary class="collapse-title text-sm font-medium">
-              Consulter le détail du squelette
-            </summary>
-            <div class="collapse-content space-y-2 text-sm text-base-content/80">
-              <div v-if="getStructureCustomFields(selectedType.structure).length" class="space-y-1">
-                <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
-                <ul class="list-disc list-inside space-y-1">
-                  <li v-for="field in getStructureCustomFields(selectedType.structure)" :key="field.name">
-                    <span class="font-medium">{{ field.name }}</span>
-                    <span v-if="field.value !== undefined && field.value !== null"> : {{ field.value }}</span>
-                  </li>
-                </ul>
-              </div>
-
-              <p v-else class="text-xs text-base-content/70">
-                Ce squelette ne définit pas encore de champs personnalisés.
-              </p>
-            </div>
-          </details>
-        </div>
+        <StructureSkeletonPreview
+          v-if="selectedType"
+          :structure="selectedType.structure"
+          :description="selectedType.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.'"
+          :preview-badge="formatPieceStructurePreview(selectedType.structure)"
+          variant="piece"
+        />
 
         <div v-if="customFieldInputs.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
           <header class="space-y-1">
@@ -328,9 +303,6 @@ const selectedType = computed(() => {
   return pieceTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
 })
 
-const getStructureCustomFields = (structure: PieceModelStructure | null) =>
-  Array.isArray(structure?.customFields) ? structure.customFields : []
-
 const getStructureProducts = (structure: PieceModelStructure | null) =>
   Array.isArray(structure?.products) ? structure.products : []
 

app/shared/utils/structureDisplayUtils.ts

@@ -0,0 +1,157 @@
+/**
+ * Shared helpers for displaying component/machine structure skeleton details.
+ *
+ * Extracted from pages/component/create.vue and pages/component/[id]/edit.vue
+ * where these functions were duplicated verbatim.
+ */
+
+// ---------------------------------------------------------------------------
+// Structure accessors
+// ---------------------------------------------------------------------------
+
+type StructureLike = Record<string, any> | null
+
+export const getStructureCustomFields = (structure: StructureLike): any[] => {
+  return Array.isArray(structure?.customFields) ? structure.customFields : []
+}
+
+export const getStructurePieces = (structure: StructureLike): any[] => {
+  return Array.isArray(structure?.pieces) ? structure.pieces : []
+}
+
+export const getStructureProducts = (structure: StructureLike): any[] => {
+  return Array.isArray(structure?.products) ? structure.products : []
+}
+
+export const getStructureSubcomponents = (structure: StructureLike): any[] => {
+  if (Array.isArray(structure?.subcomponents)) {
+    return structure.subcomponents
+  }
+  const legacy = (structure as any)?.subComponents
+  return Array.isArray(legacy) ? legacy : []
+}
+
+// ---------------------------------------------------------------------------
+// Label resolvers
+// ---------------------------------------------------------------------------
+
+export const resolvePieceLabel = (
+  piece: Record<string, any>,
+  labelMap: Record<string, string> = {},
+): string => {
+  const parts: string[] = []
+  if (piece.role) {
+    parts.push(piece.role)
+  }
+  if (piece.typePiece?.name) {
+    parts.push(piece.typePiece.name)
+  } else if (piece.typePieceLabel) {
+    parts.push(piece.typePieceLabel)
+  } else if (piece.typePieceId && labelMap[piece.typePieceId]) {
+    parts.push(labelMap[piece.typePieceId]!)
+  } else if (piece.typePiece?.code) {
+    parts.push(`Famille ${piece.typePiece.code}`)
+  } else if (piece.familyCode) {
+    parts.push(`Famille ${piece.familyCode}`)
+  } else if (piece.typePieceId) {
+    parts.push(`#${piece.typePieceId}`)
+  }
+  return parts.length ? parts.join(' • ') : 'Pièce'
+}
+
+export const resolveProductLabel = (
+  product: Record<string, any>,
+  labelMap: Record<string, string> = {},
+): string => {
+  const parts: string[] = []
+  if (product.role) {
+    parts.push(product.role)
+  }
+  if (product.typeProduct?.name) {
+    parts.push(product.typeProduct.name)
+  } else if (product.typeProductLabel) {
+    parts.push(product.typeProductLabel)
+  } else if (product.typeProductId && labelMap[product.typeProductId]) {
+    parts.push(labelMap[product.typeProductId]!)
+  } else if (product.typeProduct?.code) {
+    parts.push(`Catégorie ${product.typeProduct.code}`)
+  } else if (product.familyCode) {
+    parts.push(`Catégorie ${product.familyCode}`)
+  } else if (product.typeProductId) {
+    parts.push(`#${product.typeProductId}`)
+  }
+  return parts.length ? parts.join(' • ') : 'Produit'
+}
+
+export const resolveSubcomponentLabel = (node: Record<string, any>): string => {
+  const parts: string[] = []
+  if (node.alias) {
+    parts.push(node.alias)
+  }
+  if (node.typeComposant?.name) {
+    parts.push(node.typeComposant.name)
+  } else if (node.typeComposantLabel) {
+    parts.push(node.typeComposantLabel)
+  } else if (node.familyCode) {
+    parts.push(node.familyCode)
+  } else if (node.typeComposantId) {
+    parts.push(`#${node.typeComposantId}`)
+  }
+
+  const childCount = Array.isArray(node.subcomponents)
+    ? node.subcomponents.length
+    : Array.isArray(node.subComponents)
+      ? node.subComponents.length
+      : 0
+  if (childCount) {
+    parts.push(`${childCount} sous-composant(s)`)
+  }
+  return parts.length ? parts.join(' • ') : 'Sous-composant'
+}
+
+// ---------------------------------------------------------------------------
+// Generic model type name fetcher (replaces fetchPieceTypeNames / fetchProductTypeNames)
+// ---------------------------------------------------------------------------
+
+export const fetchModelTypeNames = async (
+  ids: string[],
+  existingMap: Record<string, string>,
+  get: (url: string) => Promise<{ success?: boolean; data?: any }>,
+): Promise<Record<string, string>> => {
+  const missing = ids.filter((id) => id && !existingMap[id])
+  if (!missing.length) {
+    return {}
+  }
+  const results = await Promise.allSettled(
+    missing.map((id) => get(`/model_types/${id}`)),
+  )
+  const additions: Record<string, string> = {}
+  results.forEach((result, index) => {
+    const key = missing[index]
+    if (!key || result.status !== 'fulfilled') {
+      return
+    }
+    const data = result.value?.data
+    const name = data?.name || data?.code
+    if (name) {
+      additions[key] = name
+    }
+  })
+  return additions
+}
+
+// ---------------------------------------------------------------------------
+// Type label map builder
+// ---------------------------------------------------------------------------
+
+export const buildTypeLabelMap = (
+  types: any[],
+  fetchedOverrides: Record<string, string> = {},
+): Record<string, string> => ({
+  ...Object.fromEntries(
+    (types || [])
+      .filter((type: any) => type?.id)
+      .map((type: any) => [type.id, type.name || type.code || '']),
+  ),
+  ...fetchedOverrides,
+})