set up new view for skeleton hiearchi

app/components/PieceItem.vue

@@ -24,6 +24,23 @@
           {{ pieceData.name }}
         </div>
       </div>
+      <div class="flex flex-wrap items-center gap-2 text-xs">
+        <span
+          v-if="piece.typeMachinePieceRequirement"
+          class="badge badge-outline badge-sm"
+        >
+          Groupe : {{ piece.typeMachinePieceRequirement.label || piece.typeMachinePieceRequirement.typePiece?.name || 'Non défini' }}
+        </span>
+        <span
+          v-if="piece.pieceModel"
+          class="badge badge-outline badge-primary badge-sm"
+        >
+          Modèle : {{ piece.pieceModel.name }}
+        </span>
+        <span v-if="piece.parentComponentName" class="badge badge-ghost badge-sm">
+          Rattachée à {{ piece.parentComponentName }}
+        </span>
+      </div>
     </div>
 
     <div class="space-y-2 text-sm">
@@ -81,6 +98,32 @@
       </div>
     </div>
 
+    <div
+      v-if="isEditMode && piece.typeMachinePieceRequirement"
+      class="mt-3"
+    >
+     <label class="label">
+        <span class="label-text text-sm font-medium">Modèle de pièce</span>
+        <span class="label-text-alt text-xs">
+          {{ piece.typeMachinePieceRequirement.label || piece.typeMachinePieceRequirement.typePiece?.name || 'Groupe' }}
+        </span>
+      </label>
+      <select
+        :value="selectedPieceModelId"
+        class="select select-bordered select-sm w-full"
+        @change="assignPieceModel($event.target.value)"
+      >
+        <option value="">Définir manuellement</option>
+        <option
+          v-for="model in pieceModelOptions"
+          :key="model.id"
+          :value="model.id"
+        >
+          {{ model.name }}
+        </option>
+      </select>
+    </div>
+
     <!-- Champs personnalisés de la pièce -->
     <div v-if="piece.customFieldValues && piece.customFieldValues.length > 0" class="mt-4 pt-4 border-t border-gray-200">
       <h5 class="text-sm font-medium text-gray-700 mb-3">Champs personnalisés</h5>
@@ -260,15 +303,19 @@ import IconLucidePackage from '~icons/lucide/package'
 const props = defineProps({
   piece: {
     type: Object,
-    required: true
+    required: true,
   },
   isEditMode: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
+  pieceModelOptions: {
+    type: Array,
+    default: () => [],
+  },
 })
 
-const emit = defineEmits(['update', 'edit', 'custom-field-update'])
+const emit = defineEmits(['update', 'edit', 'custom-field-update', 'assign-model'])
 
 // Données locales isolées pour cette pièce
 const pieceData = reactive({
@@ -286,6 +333,8 @@ const pieceDocuments = computed(() => props.piece.documents || [])
 const documentIcon = (doc) => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
 const previewDocument = ref(null)
 const previewVisible = ref(false)
+const selectedPieceModelId = computed(() => props.piece.pieceModelId || props.piece.pieceModel?.id || '')
+const pieceModelOptions = computed(() => props.pieceModelOptions || [])
 
 const handleConstructeurChange = (value) => {
   props.piece.constructeurId = value
@@ -399,6 +448,21 @@ const updatePiece = () => {
   })
 }
 
+const assignPieceModel = (value) => {
+  const previousModelId = props.piece.pieceModelId || props.piece.pieceModel?.id || null
+  const previousModel = props.piece.pieceModel || null
+  props.piece.pieceModelId = value || null
+  if (!value) {
+    props.piece.pieceModel = null
+  }
+  emit('assign-model', {
+    pieceId: props.piece.id,
+    pieceModelId: value || null,
+    previousModelId,
+    previousModel,
+  })
+}
+
 const updateCustomFieldValue = async (fieldValueId) => {
   const fieldValue = props.piece.customFieldValues?.find(fv => fv.id === fieldValueId)
   if (fieldValue) {
@@ -419,6 +483,16 @@ watch(() => props.piece.customFieldValues, () => {
   console.log('PieceItem - customFieldValues updated:', props.piece.customFieldValues)
 }, { deep: true })
 
+watch(
+  () => [props.piece.name, props.piece.reference, props.piece.emplacement, props.piece.prix],
+  () => {
+    pieceData.name = props.piece.name || ''
+    pieceData.reference = props.piece.reference || ''
+    pieceData.emplacement = props.piece.emplacement || ''
+    pieceData.prix = props.piece.prix || ''
+  },
+)
+
 onMounted(() => {
   // Initialiser les données avec les props
   pieceData.name = props.piece.name || ''