set up new view for skeleton hiearchi

app/composables/useComponentModels.js

@@ -0,0 +1,131 @@
+import { ref, computed } from 'vue'
+import { useApi } from './useApi'
+import { useToast } from './useToast'
+
+const componentModelsBuckets = ref({})
+const loadingComponentModels = ref(false)
+
+export function useComponentModels() {
+  const { get, post, patch, delete: del } = useApi()
+  const { showSuccess, showError } = useToast()
+
+  const loadComponentModels = async (typeComposantId) => {
+    loadingComponentModels.value = true
+    try {
+      const query = typeComposantId ? `?typeComposantId=${encodeURIComponent(typeComposantId)}` : ''
+      const result = await get(`/types/composants/models${query}`)
+      if (result.success) {
+        const key = typeComposantId || '__all__'
+        componentModelsBuckets.value = {
+          ...componentModelsBuckets.value,
+          [key]: result.data,
+        }
+      }
+      return result
+    } catch (error) {
+      showError(`Impossible de charger les modèles de composant: ${error.message}`)
+      return { success: false, error: error.message }
+    } finally {
+      loadingComponentModels.value = false
+    }
+  }
+
+  const createComponentModel = async (payload) => {
+    loadingComponentModels.value = true
+    try {
+      const result = await post('/types/composants/models', payload)
+      if (result.success) {
+        const key = result.data?.typeComposantId || '__all__'
+        const bucket = componentModelsBuckets.value[key] || []
+        componentModelsBuckets.value = {
+          ...componentModelsBuckets.value,
+          [key]: [...bucket, result.data],
+        }
+        showSuccess(`Modèle de composant "${result.data.name}" créé`)
+      }
+      return result
+    } catch (error) {
+      showError(`Erreur lors de la création du modèle de composant: ${error.message}`)
+      return { success: false, error: error.message }
+    } finally {
+      loadingComponentModels.value = false
+    }
+  }
+
+  const updateComponentModel = async (id, payload) => {
+    loadingComponentModels.value = true
+    try {
+      const result = await patch(`/types/composants/models/${id}`, payload)
+      if (result.success) {
+        const key = result.data?.typeComposantId || '__all__'
+        const bucket = componentModelsBuckets.value[key] || []
+        const updatedBucket = bucket.map((model) =>
+          model.id === id ? result.data : model
+        )
+        componentModelsBuckets.value = {
+          ...componentModelsBuckets.value,
+          [key]: updatedBucket,
+        }
+        showSuccess(`Modèle de composant "${result.data.name}" mis à jour`)
+      }
+      return result
+    } catch (error) {
+      showError(`Erreur lors de la mise à jour du modèle de composant: ${error.message}`)
+      return { success: false, error: error.message }
+    } finally {
+      loadingComponentModels.value = false
+    }
+  }
+
+  const deleteComponentModel = async (id) => {
+    loadingComponentModels.value = true
+    try {
+      const result = await del(`/types/composants/models/${id}`)
+      if (result.success) {
+        const updatedBuckets = {}
+        for (const [key, bucket] of Object.entries(componentModelsBuckets.value)) {
+          updatedBuckets[key] = bucket.filter((model) => model.id !== id)
+        }
+        componentModelsBuckets.value = updatedBuckets
+        showSuccess('Modèle de composant supprimé')
+      }
+      return result
+    } catch (error) {
+      showError(`Erreur lors de la suppression du modèle de composant: ${error.message}`)
+      return { success: false, error: error.message }
+    } finally {
+      loadingComponentModels.value = false
+    }
+  }
+
+  const allComponentModels = computed(() => {
+    return Object.values(componentModelsBuckets.value).reduce((acc, bucket) => {
+      bucket.forEach((model) => {
+        if (!acc.find((existing) => existing.id === model.id)) {
+          acc.push(model)
+        }
+      })
+      return acc
+    }, [])
+  })
+
+  const getComponentModelsForType = (typeComposantId) => {
+    return componentModelsBuckets.value[typeComposantId] || []
+  }
+
+  const getComponentModels = () => allComponentModels.value
+  const isComponentModelLoading = () => loadingComponentModels.value
+
+  return {
+    componentModels: allComponentModels,
+    componentModelsBuckets,
+    loadingComponentModels,
+    loadComponentModels,
+    createComponentModel,
+    updateComponentModel,
+    deleteComponentModel,
+    getComponentModels,
+    getComponentModelsForType,
+    isComponentModelLoading,
+  }
+}