feat: refactor type management screens

app/pages/generator.vue

@@ -24,6 +24,36 @@
           </h2>
 
           <form @submit.prevent="generateType" class="space-y-6">
+            <div class="flex justify-end">
+              <button 
+                type="button"
+                class="btn btn-outline btn-sm"
+                @click="toggleAllSections"
+              >
+                <svg 
+                  class="w-4 h-4 mr-2"
+                  fill="none" 
+                  stroke="currentColor" 
+                  viewBox="0 0 24 24"
+                >
+                  <path 
+                    v-if="allSectionsExpanded" 
+                    stroke-linecap="round" 
+                    stroke-linejoin="round" 
+                    stroke-width="2" 
+                    d="M18 12H6"
+                  ></path>
+                  <path 
+                    v-else 
+                    stroke-linecap="round" 
+                    stroke-linejoin="round" 
+                    stroke-width="2" 
+                    d="M12 6v12m6-6H6"
+                  ></path>
+                </svg>
+                {{ allSectionsExpanded ? 'Tout plier' : 'Tout déplier' }}
+              </button>
+            </div>
             <!-- Basic Information -->
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
               <div class="form-control">
@@ -81,11 +111,31 @@
 
             <!-- Machine Pieces (Root Level) -->
             <div class="form-control">
-              <label class="label">
-                <span class="label-text">Pièces de la machine</span>
-                <span class="label-text-alt">Pièces directement attachées à la machine (optionnel)</span>
-              </label>
-              <div class="space-y-4">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                  <button 
+                    type="button"
+                    class="btn btn-ghost btn-sm p-1"
+                    @click="toggleSection('machinePieces')"
+                    title="Plier / déplier les pièces"
+                  >
+                    <svg 
+                      class="w-4 h-4 transition-transform duration-200" 
+                      :class="{ 'rotate-90': sections.machinePieces }"
+                      fill="none" 
+                      stroke="currentColor" 
+                      viewBox="0 0 24 24"
+                    >
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                    </svg>
+                  </button>
+                  <label class="label m-0 flex flex-col items-start">
+                    <span class="label-text">Pièces de la machine</span>
+                    <span class="label-text-alt">Pièces directement attachées à la machine (optionnel)</span>
+                  </label>
+                </div>
+              </div>
+              <div v-if="sections.machinePieces" class="space-y-4">
                 <div v-for="(piece, index) in newType.machinePieces" :key="index" class="border border-gray-200 rounded-lg p-4 bg-gray-50">
                   <div class="flex items-center justify-between mb-3">
                     <h5 class="text-sm font-medium">Pièce {{ index + 1 }}</h5>
@@ -221,12 +271,32 @@
 
             <!-- Hierarchical Components -->
             <div class="form-control">
-              <label class="label">
-                <span class="label-text">Structure hiérarchique</span>
-                <span class="label-text-alt">Définissez les composants, sous-composants et leurs pièces (optionnel)</span>
-              </label>
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                  <button 
+                    type="button"
+                    class="btn btn-ghost btn-sm p-1"
+                    @click="toggleSection('components')"
+                    title="Plier / déplier la structure"
+                  >
+                    <svg 
+                      class="w-4 h-4 transition-transform duration-200" 
+                      :class="{ 'rotate-90': sections.components }"
+                      fill="none" 
+                      stroke="currentColor" 
+                      viewBox="0 0 24 24"
+                    >
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                    </svg>
+                  </button>
+                  <label class="label m-0 flex flex-col items-start">
+                    <span class="label-text">Structure hiérarchique</span>
+                    <span class="label-text-alt">Définissez les composants, sous-composants et leurs pièces (optionnel)</span>
+                  </label>
+                </div>
+              </div>
               
-              <div class="space-y-4">
+              <div v-if="sections.components" class="space-y-4">
                 <!-- Root Components -->
                 <div class="space-y-3">
                   <h4 class="text-sm font-semibold text-gray-700">Composants principaux :</h4>
@@ -236,6 +306,22 @@
                     class="border border-gray-200 rounded-lg p-4 bg-gray-50"
                   >
                     <div class="flex items-center gap-2 mb-3">
+                      <button 
+                        type="button"
+                        class="btn btn-ghost btn-xs p-1"
+                        @click="toggleComponentDetails(index)"
+                        title="Plier / déplier le composant"
+                      >
+                        <svg 
+                          class="w-4 h-4 transition-transform duration-200" 
+                          :class="{ 'rotate-90': isComponentExpanded(index) }"
+                          fill="none" 
+                          stroke="currentColor" 
+                          viewBox="0 0 24 24"
+                        >
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                      </button>
                       <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
                       </svg>
@@ -257,6 +343,8 @@
                       </button>
                     </div>
 
+                    <div v-if="isComponentExpanded(index)">
+
                     <!-- Champs personnalisés du composant -->
                     <div class="mb-3">
                       <div class="flex items-center gap-2 mb-2">
@@ -882,7 +970,8 @@
                       </div>
                     </div>
                   </div>
-                  
+                </div>
+                
                   <button 
                     type="button" 
                     @click="addComponent" 
@@ -899,11 +988,31 @@
 
             <!-- Custom Fields -->
             <div class="form-control">
-              <label class="label">
-                <span class="label-text">Champs personnalisés</span>
-                <span class="label-text-alt">Définissez des champs personnalisés pour ce type de machine (optionnel)</span>
-              </label>
-              <div class="space-y-4">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                  <button 
+                    type="button"
+                    class="btn btn-ghost btn-sm p-1"
+                    @click="toggleSection('customFields')"
+                    title="Plier / déplier les champs personnalisés"
+                  >
+                    <svg 
+                      class="w-4 h-4 transition-transform duration-200" 
+                      :class="{ 'rotate-90': sections.customFields }"
+                      fill="none" 
+                      stroke="currentColor" 
+                      viewBox="0 0 24 24"
+                    >
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                    </svg>
+                  </button>
+                  <label class="label m-0 flex flex-col items-start">
+                    <span class="label-text">Champs personnalisés</span>
+                    <span class="label-text-alt">Définissez des champs personnalisés pour ce type de machine (optionnel)</span>
+                  </label>
+                </div>
+              </div>
+              <div v-if="sections.customFields" class="space-y-4">
                 <div v-for="(field, index) in newType.customFields" :key="index" class="border border-gray-200 rounded-lg p-4 bg-gray-50">
                   <div class="flex items-center justify-between mb-3">
                     <h5 class="text-sm font-medium">Champ personnalisé {{ index + 1 }}</h5>
@@ -1043,7 +1152,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
 import { useToast } from '~/composables/useToast'
 
@@ -1071,6 +1180,33 @@ const newType = reactive({
   customFields: [] // Changed to empty array to make it optional
 })
 
+const sections = reactive({
+  machinePieces: true,
+  components: true,
+  customFields: true
+})
+const expandedComponents = reactive([])
+
+const allSectionsExpanded = computed(() => sections.machinePieces && sections.components && sections.customFields)
+
+const toggleSection = (section) => {
+  sections[section] = !sections[section]
+}
+
+const toggleAllSections = () => {
+  const next = !allSectionsExpanded.value
+  sections.machinePieces = next
+  sections.components = next
+  sections.customFields = next
+  expandedComponents.splice(0, expandedComponents.length, ...newType.components.map(() => next))
+}
+
+const isComponentExpanded = (index) => expandedComponents[index] ?? true
+
+const toggleComponentDetails = (index) => {
+  expandedComponents[index] = !isComponentExpanded(index)
+}
+
 // Methods for hierarchical components
 const addComponent = () => {
   newType.components.push({
@@ -1086,10 +1222,12 @@ const addComponent = () => {
     pieces: [{ name: '', customFields: [] }],
     customFields: []
   })
+  expandedComponents.push(true)
 }
 
 const removeComponent = (index) => {
   newType.components.splice(index, 1)
+  expandedComponents.splice(index, 1)
 }
 
 const addSubComponent = (component) => {
@@ -1339,6 +1477,7 @@ const resetForm = () => {
   newType.components = [] // Reset to empty array
   newType.machinePieces = [] // Reset to empty array
   newType.customFields = [] // Reset to empty array
+  expandedComponents.splice(0, expandedComponents.length)
 }
 
 const generateType = async () => {
@@ -1413,4 +1552,4 @@ onMounted(async () => {
   await loadMachineTypes()
   recentTypes.value = machineTypes.value.slice(-3).reverse()
 })
-</script> 
+</script> 

app/pages/type/[id].vue

@@ -18,7 +18,7 @@
       <p class="mt-4 text-gray-600">Chargement du type...</p>
     </div>
 
-    <!-- Edit Form -->
+    <!-- Type Details -->
     <div v-else-if="type" class="my-8">
       <div class="card bg-base-100 shadow-xl">
         <div class="card-body">
@@ -42,6 +42,37 @@
           <!-- Current Type Info -->
           <TypeInfoDisplay :type="type" />
 
+          <div v-if="hasExpandableContent" class="flex justify-end mb-6">
+            <button 
+              type="button"
+              class="btn btn-outline btn-sm"
+              @click="toggleGlobalExpand"
+            >
+              <svg 
+                class="w-4 h-4 mr-2"
+                fill="none" 
+                stroke="currentColor" 
+                viewBox="0 0 24 24"
+              >
+                <path 
+                  v-if="globalExpandState.expanded" 
+                  stroke-linecap="round" 
+                  stroke-linejoin="round" 
+                  stroke-width="2" 
+                  d="M18 12H6"
+                ></path>
+                <path 
+                  v-else 
+                  stroke-linecap="round" 
+                  stroke-linejoin="round" 
+                  stroke-width="2" 
+                  d="M12 6v12m6-6H6"
+                ></path>
+              </svg>
+              {{ globalExpandState.expanded ? 'Tout plier' : 'Tout déplier' }}
+            </button>
+          </div>
+
           <!-- Affichage des composants existants -->
           <div v-if="type.components && type.components.length > 0" class="mb-8">
             <h3 class="text-lg font-semibold mb-4">Composants existants</h3>
@@ -50,6 +81,7 @@
                 v-for="(component, componentIndex) in type.components" 
                 :key="componentIndex"
                 :component="component"
+                :global-expand-state="globalExpandState"
               />
             </div>
           </div>
@@ -62,45 +94,10 @@
                 v-for="(piece, pieceIndex) in type.machinePieces" 
                 :key="pieceIndex"
                 :piece="piece"
+                :global-expand-state="globalExpandState"
               />
             </div>
           </div>
-
-          <form @submit.prevent="saveChanges" class="space-y-6">
-            <!-- Add Machine Pieces -->
-            <div class="form-control">
-              <label class="label">
-                <span class="label-text">Ajouter des pièces de machine</span>
-                <span class="label-text-alt">Nouvelles pièces directement attachées à la machine</span>
-              </label>
-              <TypeMachinePieceForm v-model="newMachinePieces" />
-            </div>
-
-            <!-- Add Components -->
-            <div class="form-control">
-              <label class="label">
-                <span class="label-text">Ajouter des composants</span>
-                <span class="label-text-alt">Nouveaux composants principaux avec sous-composants</span>
-              </label>
-              <TypeComponentForm v-model="newComponents" />
-            </div>
-
-            <!-- Actions -->
-            <div class="card-actions justify-end">
-              <button type="button" @click="resetForm" class="btn btn-outline">
-                Réinitialiser
-              </button>
-              <button type="submit" class="btn btn-primary" :disabled="saving">
-                <svg v-if="saving" class="w-5 h-5 mr-2 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-                </svg>
-                <svg v-else class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                </svg>
-                {{ saving ? 'Sauvegarde...' : 'Sauvegarder les modifications' }}
-              </button>
-            </div>
-          </form>
         </div>
       </div>
     </div>
@@ -121,127 +118,46 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
 import { useToast } from '~/composables/useToast'
 
 const route = useRoute()
-const router = useRouter()
-const { getMachineTypeById, updateMachineType } = useMachineTypesApi()
-const { showSuccess, showError } = useToast()
+const { getMachineTypeById } = useMachineTypesApi()
+const { showError } = useToast()
 
 const type = ref(null)
 const loading = ref(true)
-const saving = ref(false)
 
-// Nouvelles données à ajouter
-const newMachinePieces = ref([])
-const newComponents = ref([])
+const globalExpandState = reactive({
+  expanded: true,
+  id: 0
+})
 
-const resetForm = () => {
-  newMachinePieces.value = []
-  newComponents.value = []
+const hasExpandableContent = computed(() => {
+  const componentCount = type.value?.components?.length || 0
+  const pieceCount = type.value?.machinePieces?.length || 0
+  return componentCount + pieceCount > 0
+})
+
+const toggleGlobalExpand = () => {
+  globalExpandState.expanded = !globalExpandState.expanded
+  globalExpandState.id += 1
 }
 
-const saveChanges = async () => {
-  try {
-    saving.value = true
-
-    // Préparer les données mises à jour
-    const updatedType = {
-      ...type.value,
-      machinePieces: [
-        ...(type.value.machinePieces || []),
-        ...newMachinePieces.value
-          .filter(piece => piece.name.trim() !== '')
-          .map(piece => ({
-            name: piece.name,
-            reference: piece.reference,
-            prestataire: piece.prestataire,
-            emplacement: piece.emplacement,
-            prix: piece.prix,
-            customFields: piece.customFields || []
-          }))
-      ],
-      components: [
-        ...(type.value.components || []),
-        ...newComponents.value
-          .filter(comp => comp.name.trim() !== '')
-          .map(comp => ({
-            name: comp.name,
-            reference: comp.reference,
-            prestataire: comp.prestataire,
-            emplacement: comp.emplacement,
-            prix: comp.prix,
-            customFields: comp.customFields || [],
-            pieces: comp.pieces
-              .filter(piece => piece.name.trim() !== '')
-              .map(piece => ({
-                name: piece.name,
-                reference: piece.reference,
-                prestataire: piece.prestataire,
-                emplacement: piece.emplacement,
-                prix: piece.prix,
-                customFields: piece.customFields || []
-              })),
-            subComponents: comp.subComponents
-              .filter(subComp => subComp.name.trim() !== '')
-              .map(subComp => ({
-                name: subComp.name,
-                reference: subComp.reference,
-                prestataire: subComp.prestataire,
-                emplacement: subComp.emplacement,
-                prix: subComp.prix,
-                customFields: subComp.customFields || [],
-                pieces: subComp.pieces
-                  .filter(piece => piece.name.trim() !== '')
-                  .map(piece => ({
-                    name: piece.name,
-                    reference: piece.reference,
-                    prestataire: piece.prestataire,
-                    emplacement: piece.emplacement,
-                    prix: piece.prix,
-                    customFields: piece.customFields || []
-                  }))
-              }))
-          }))
-      ]
-    }
-
-    const result = await updateMachineType(type.value.id, updatedType)
-    
-    if (result.success) {
-      showSuccess('Type mis à jour avec succès !')
-      router.push('/types')
-    } else {
-      showError('Erreur lors de la mise à jour du type')
-    }
-  } catch (error) {
-    console.error('Erreur lors de la sauvegarde:', error)
-    showError('Erreur lors de la sauvegarde')
-  } finally {
-    saving.value = false
-  }
-}
-
-// Charger le type au montage
 onMounted(async () => {
   try {
     const typeId = route.params.id
-    console.log('=== EDIT PAGE LOADING ===')
+    console.log('=== TYPE DETAIL PAGE LOADING ===')
     console.log('Loading type with ID:', typeId)
-    console.log('Route params:', route.params)
-    console.log('Current route:', route.path)
-    
+
     const result = await getMachineTypeById(typeId)
     console.log('API Result:', result)
-    
+
     if (result.success) {
       type.value = result.data
       console.log('Type loaded successfully:', type.value)
-      console.log('Type ID:', type.value.id)
-      console.log('Type name:', type.value.name)
     } else {
       console.error('Failed to load type:', result.error)
       showError('Type non trouvé')
@@ -254,4 +170,4 @@ onMounted(async () => {
     console.log('Loading finished, loading.value:', loading.value)
   }
 })
-</script> 
+</script>