add sub componet in catego ske

app/components/StructureNodeEditor.vue

@@ -175,18 +175,23 @@
           </div>
         </section>
 
-        <section v-if="allowSubcomponents" class="space-y-3">
+        <section v-if="canManageSubcomponents || hasSubcomponents" class="space-y-3">
           <div class="flex items-center justify-between gap-2">
             <h4 :class="headingClass">Sous-composants</h4>
-            <button type="button" class="btn btn-outline btn-xs" @click="addSubComponent">
+            <button
+              v-if="canManageSubcomponents"
+              type="button"
+              class="btn btn-outline btn-xs"
+              @click="addSubComponent"
+            >
               <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
               Ajouter
             </button>
           </div>
-          <p v-if="!isRoot" class="text-[11px] text-gray-500">
+          <p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-gray-500">
             Sélectionnez uniquement la famille de ce sous-composant ; il sera configuré via son propre modèle.
           </p>
-          <p v-if="!(node.subcomponents?.length)" class="text-xs text-gray-500">
+          <p v-if="!hasSubcomponents" class="text-xs text-gray-500">
             Aucun sous-composant défini.
           </p>
           <div v-else class="space-y-3">
@@ -197,7 +202,8 @@
               :depth="depth + 1"
               :component-types="componentTypes"
               :piece-types="pieceTypes"
-              :allow-subcomponents="allowSubcomponents"
+              :allow-subcomponents="childAllowSubcomponents"
+              :max-subcomponent-depth="maxSubcomponentDepth"
               @remove="removeSubComponent(index)"
             />
           </div>
@@ -235,6 +241,7 @@ const props = withDefaults(defineProps<{
   lockType?: boolean
   lockedTypeLabel?: string
   allowSubcomponents?: boolean
+  maxSubcomponentDepth?: number
 }>(), {
   depth: 0,
   componentTypes: () => [],
@@ -243,6 +250,7 @@ const props = withDefaults(defineProps<{
   lockType: false,
   lockedTypeLabel: '',
   allowSubcomponents: true,
+  maxSubcomponentDepth: Infinity,
 })
 
 const emit = defineEmits(['remove'])
@@ -250,10 +258,23 @@ const emit = defineEmits(['remove'])
 const componentTypes = computed(() => props.componentTypes ?? [])
 const pieceTypes = computed(() => props.pieceTypes ?? [])
 const allowSubcomponents = computed(() => props.allowSubcomponents !== false)
+const maxSubcomponentDepth = computed(() =>
+  typeof props.maxSubcomponentDepth === 'number' ? props.maxSubcomponentDepth : Infinity,
+)
+const currentDepth = computed(() => Math.max(0, props.depth ?? 0))
+const canManageSubcomponents = computed(
+  () => allowSubcomponents.value && currentDepth.value < maxSubcomponentDepth.value,
+)
+const childAllowSubcomponents = computed(
+  () => allowSubcomponents.value && currentDepth.value + 1 < maxSubcomponentDepth.value,
+)
+const hasSubcomponents = computed(
+  () => Array.isArray(props.node?.subcomponents) && props.node.subcomponents.length > 0,
+)
 
 const depthClasses = ['', 'ml-4', 'ml-8', 'ml-12', 'ml-16', 'ml-20']
 const containerClass = computed(() => {
-  const level = Math.max(0, props.depth ?? 0)
+  const level = currentDepth.value
   const index = Math.min(level, depthClasses.length - 1)
   return level === 0 ? 'space-y-4' : `${depthClasses[index]} space-y-4`
 })
@@ -279,6 +300,17 @@ const componentTypeMap = computed(() => {
   return map
 })
 
+const componentTypeCodeMap = computed(() => {
+  const map = new Map<string, ModelTypeOption>()
+  componentTypes.value.forEach((type) => {
+    const code = typeof type?.code === 'string' ? type.code.trim() : ''
+    if (code) {
+      map.set(code, type)
+    }
+  })
+  return map
+})
+
 const pieceTypeMap = computed(() => {
   const map = new Map<string, ModelTypeOption>()
   pieceTypes.value.forEach((type) => {
@@ -346,6 +378,22 @@ const syncComponentType = (component: EditableStructureNode) => {
     : ''
 
   if (!id) {
+    const code =
+      typeof component.familyCode === 'string' && component.familyCode
+        ? component.familyCode
+        : ''
+    if (code) {
+      const codeMatch = componentTypeCodeMap.value.get(code)
+      if (codeMatch?.id) {
+        component.typeComposantId = codeMatch.id
+        component.typeComposantLabel = formatModelTypeOption(codeMatch)
+        component.familyCode = codeMatch.code ?? component.familyCode
+        if (!component.alias || component.alias === '' || component.alias === lockedTypeDisplay.value) {
+          component.alias = codeMatch.name || component.typeComposantLabel
+        }
+        return
+      }
+    }
     component.typeComposantLabel = ''
     component.familyCode = ''
     return
@@ -456,7 +504,7 @@ const removePiece = (index: number) => {
 }
 
 const addSubComponent = () => {
-  if (!allowSubcomponents.value) {
+  if (!canManageSubcomponents.value) {
     return
   }
   ensureArray('subcomponents')
@@ -476,7 +524,7 @@ const removeSubComponent = (index: number) => {
 }
 
 watch(
-  allowSubcomponents,
+  canManageSubcomponents,
   (allowed) => {
     if (!allowed && Array.isArray(props.node.subcomponents) && props.node.subcomponents.length) {
       props.node.subcomponents.splice(0, props.node.subcomponents.length)