fix tree select

components/Ui/Form.vue

@@ -162,8 +162,8 @@ const props = defineProps({
   },
 })
 
-// ### Définitions
 
+// ### Définitions
 const i18n = useI18n()
 const router = useRouter()
 const { em } = useEntityManager()

components/Ui/Input/TreeSelect.vue

@@ -21,8 +21,6 @@ et sélectionner des éléments organisés en catégories et sous-catégories.
     item-title="label"
     item-value="value"
     multiple
-    chips
-    closable-chips
     :menu-props="{ maxHeight: 400 }"
     @update:menu="onMenuUpdate"
     @update:model-value="$emit('update:modelValue', $event)"
@@ -57,8 +55,7 @@ et sélectionner des éléments organisés en catégories et sous-catégories.
       >
         <!-- Always prioritize the mapping for consistent labels, fall back to item label if available -->
         {{
-          selectedItemsMap[item.raw.value] ||
-          (item.raw.label && item.raw.label !== item.raw.value ? item.raw.label : item.raw.value)
+          selectedItemsMap[item.raw] || selectedItemsMap[item.raw.value]
         }}
       </v-chip>
       <span
@@ -160,7 +157,7 @@ interface SelectItem {
   id: string
   label: string
   normalizedLabel?: string
-  value?: string
+  value?: number
   type: 'category' | 'subcategory' | 'item'
   parentId?: string
   level: number
@@ -247,12 +244,42 @@ const expandedCategories: Ref<Set<string>> = ref(new Set())
 const expandedSubcategories: Ref<Set<string>> = ref(new Set())
 const searchText: Ref<string> = ref('')
 
+/**
+ * Expands all parent categories and subcategories of selected items.
+ */
+const expandParentsOfSelectedItems = () => {
+  expandedCategories.value.clear()
+  expandedSubcategories.value.clear()
+
+  for (const selectedId of props.modelValue) {
+    const item = normalizedItems.value.find(i => i.value === selectedId)
+    if (!item) continue
+
+    // Trouver la sous-catégorie
+    const subcategory = normalizedItems.value.find(i => i.id === item.parentId)
+    if (subcategory) {
+      expandedSubcategories.value.add(subcategory.id)
+
+      // Trouver la catégorie
+      if (subcategory.parentId) {
+        const category = normalizedItems.value.find(i => i.id === subcategory.parentId)
+        if (category) {
+          expandedCategories.value.add(category.id)
+        }
+      }
+    }
+  }
+}
+
 /**
  * A callback function that is triggered when the menu's open state is updated.
  */
 const onMenuUpdate = (isOpen: boolean) => {
+  if (isOpen) {
+    expandParentsOfSelectedItems()
+  }
   // Réinitialiser la recherche quand le menu se ferme
-  if (!isOpen && searchText.value) {
+  else if (!isOpen && searchText.value) {
     searchText.value = ''
     onSearchInput()
   }

components/Ui/Input/TreeSelect/EventCategories.vue

@@ -6,6 +6,7 @@
     v-bind="$attrs"
     :loading="status === FETCHING_STATUS.PENDING"
     @update:model-value="$emit('update:modelValue', $event)"
+    :max-visible-chips="6"
   />
 </template>
 
@@ -14,7 +15,7 @@ import { useEntityFetch } from '~/composables/data/useEntityFetch'
 import EventCategory from '~/models/Core/EventCategory'
 import {FETCHING_STATUS} from "~/types/enum/data";
 
-defineProps({
+const props = defineProps({
   modelValue: {
     type: Array as PropType<string[]>,
     required: true,
@@ -30,6 +31,7 @@ defineProps({
   },
 })
 
+
 const i18n = useI18n()
 
 const emit = defineEmits(['update:modelValue'])
@@ -113,13 +115,12 @@ const hierarchicalItems = computed(() => {
     )
       return
 
-    const familyKey = category.famillyLabel
     const subfamilyKey = `${category.famillyLabel}-${category.subfamillyLabel}`
 
     genders.push({
       id: `gender-${category.id}`,
       label: i18n.t(category.genderLabel),
-      value: category.id.toString(),
+      value: category.id,
       type: 'item',
       parentId: `subfamily-${subfamilyKey}`,
       level: 2,
@@ -136,6 +137,7 @@ const hierarchicalItems = computed(() => {
   return result
 })
 
+
 // Nettoyer les données lors du démontage du composant
 onBeforeUnmount(() => {
   // Nettoyer les références du store si nécessaire