app/components/Ui/Input/TreeSelect.vue

<template>
  <v-select
    v-model="selectedItems"
    :items="flattenedItems"
    item-title="label"
    item-value="value"
    multiple
    chips
    closable-chips
    :menu-props="{ maxHeight: 400 }"
    @update:menu="onMenuUpdate"
    v-bind="$attrs"
  >
    <template #prepend-item>
      <v-text-field
        v-model="searchText"
        density="compact"
        hide-details
        placeholder="Rechercher..."
        prepend-inner-icon="fas fa-magnifying-glass"
        variant="outlined"
        clearable
        class="mx-2 my-2"
        @click.stop
        @input="onSearchInput"
      />
      <v-divider class="mt-2"/>
    </template>

    <template #selection="{ item, index }">
      <v-chip
        v-if="maxVisibleChips && index < maxVisibleChips"
        :key="item.raw.value"
        closable
        @click:close="removeItem(item.raw.value!)"
      >
        {{ item.raw.label }}
      </v-chip>
      <span
        v-if="maxVisibleChips && index === maxVisibleChips && selectedItems.length > maxVisibleChips"
        class="text-grey text-caption align-self-center"
      >
        (+{{ selectedItems.length - maxVisibleChips }} autres)
      </span>
    </template>

    <template #item="{ item }">
      <template v-if="item.raw.type === 'category'">
        <v-list-item
          @click.stop="toggleCategory(item.raw.id)"
          :ripple="false"
          :class="{ 'v-list-item--active': expandedCategories.has(item.raw.id) }"
        >
          <template #prepend>
            <v-icon
              :icon="'fas ' + (expandedCategories.has(item.raw.id) ? 'fa-angle-down' : 'fa-angle-right')"
              size="small"
            />
          </template>
          <v-list-item-title class="font-weight-medium">
            {{ item.raw.label }}
          </v-list-item-title>
        </v-list-item>
      </template>

      <template v-else-if="item.raw.type === 'subcategory'">
        <v-list-item
          @click.stop="toggleSubcategory(item.raw.id)"
          :ripple="false"
          :class="{
            'v-list-item--active': expandedSubcategories.has(item.raw.id),
            'pl-8': true
          }"
        >
          <template #prepend>
            <v-icon
              :icon="'fas ' + (expandedSubcategories.has(item.raw.id) ? 'fa-angle-down' : 'fa-angle-right')"
              size="small"
            />
          </template>
          <v-list-item-title>
            {{ item.raw.label }}
          </v-list-item-title>
        </v-list-item>
      </template>

      <template v-else>
        <v-list-item
          @click="toggleItem(item.raw.value!)"
          :active="selectedItems.includes(item.raw.value!)"
          :class="{ 'pl-12': item.raw.level === 2, 'pl-8': item.raw.level === 1 }"
        >
          <template #prepend>
            <v-checkbox
              :model-value="selectedItems.includes(item.raw.value!)"
              @click.stop="toggleItem(item.raw.value!)"
              color="primary"
              :hide-details="true"
            />
          </template>
          <v-list-item-title>
            {{ item.raw.label }}
          </v-list-item-title>
        </v-list-item>
      </template>
    </template>
  </v-select>
</template>

<script setup lang="ts">
import StringUtils from '~/services/utils/stringUtils'

interface SelectItem {
  id: string
  label: string
  value?: string
  type: 'category' | 'subcategory' | 'item'
  parentId?: string
  level: number
}

const props = defineProps({
  modelValue: {
    type: Array as PropType<string[]>,
    required: true
  },
  items: {
    type: Array as PropType<SelectItem[]>,
    required: true
  },
  maxVisibleChips: {
    type: Number,
    required: false,
    default: null
  }
})

const emit = defineEmits(['update:modelValue'])

// État réactif
const expandedCategories = ref<Set<string>>(new Set())
const expandedSubcategories = ref<Set<string>>(new Set())
const searchText = ref('')

// Fonction pour gérer l'entrée de recherche
const onSearchInput = () => {
  // Réinitialiser les états d'expansion dans tous les cas
  expandedCategories.value.clear()
  expandedSubcategories.value.clear()

  if (searchText.value.trim()) {
    // Trouver tous les éléments qui correspondent à la recherche
    const matchingItems = props.items.filter(item =>
      item.type === 'item' &&
      item.level === 2 &&
      itemMatchesSearch(item)
    )

    // Pour chaque élément correspondant, ajouter ses parents aux ensembles d'expansion
    for (const item of matchingItems) {
      // Trouver et ajouter la sous-catégorie parente
      const subcategory = props.items.find(i => i.id === item.parentId)
      if (subcategory) {
        expandedSubcategories.value.add(subcategory.id)

        // Trouver et ajouter la catégorie parente
        const category = props.items.find(i => i.id === subcategory.parentId)
        if (category) {
          expandedCategories.value.add(category.id)
        }
      }
    }
  }
  // Si la recherche est vide, toutes les catégories restent repliées (déjà réinitialisées)
}

// Fonction pour gérer l'ouverture/fermeture du menu
const onMenuUpdate = (isOpen: boolean) => {
  // Réinitialiser la recherche quand le menu se ferme
  if (!isOpen && searchText.value) {
    searchText.value = ''
  }
}

// Modèle v-model
const selectedItems = computed({
  get: () => props.modelValue,
  set: (value: string[]) => emit('update:modelValue', value)
})

// Fonction pour vérifier si un élément correspond à la recherche
const itemMatchesSearch = (item: SelectItem): boolean => {
  if (!searchText.value) return true

  const normalizedSearch = StringUtils.normalize(searchText.value)

  // Si c'est un élément de niveau 2, vérifier son label et les labels de ses parents
  if (item.type === 'item' && item.level === 2) {
    // Vérifier le label de l'élément
    if (StringUtils.normalize(item.label).includes(normalizedSearch)) return true

    // Trouver et vérifier le label de la sous-catégorie parente
    const subcategory = props.items.find(i => i.id === item.parentId)
    if (subcategory && StringUtils.normalize(subcategory.label).includes(normalizedSearch)) return true

    // Trouver et vérifier le label de la catégorie parente
    if (subcategory && subcategory.parentId) {
      const category = props.items.find(i => i.id === subcategory.parentId)
      if (category && StringUtils.normalize(category.label).includes(normalizedSearch)) return true
    }

    return false
  }

  // Pour les autres types d'éléments, vérifier simplement leur label
  return StringUtils.normalize(item.label).includes(normalizedSearch)
}

// Construction de la liste aplatie pour v-select
const flattenedItems = computed(() => {
  const result: SelectItem[] = []
  const hasSearch = !!searchText.value.trim()

  // Si une recherche est active, afficher uniquement les éléments de niveau 2 qui correspondent
  if (hasSearch) {
    // Trouver tous les éléments de niveau 2 qui correspondent à la recherche
    const matchingItems = props.items.filter(item =>
      item.type === 'item' &&
      item.level === 2 &&
      itemMatchesSearch(item)
    )

    // Ensemble pour suivre les catégories et sous-catégories déjà ajoutées
    const addedCategoryIds = new Set<string>()
    const addedSubcategoryIds = new Set<string>()

    // Pour chaque élément correspondant, ajouter sa hiérarchie complète
    for (const item of matchingItems) {
      // Trouver la sous-catégorie parente
      const subcategory = props.items.find(i => i.id === item.parentId)
      if (!subcategory) continue

      // Trouver la catégorie parente
      const category = props.items.find(i => i.id === subcategory.parentId)
      if (!category) continue

      // Ajouter la catégorie si elle n'est pas déjà présente
      if (!addedCategoryIds.has(category.id)) {
        result.push(category)
        addedCategoryIds.add(category.id)
        // S'assurer que la catégorie est considérée comme "expanded" pendant la recherche
        expandedCategories.value.add(category.id)
      }

      // Ajouter la sous-catégorie si elle n'est pas déjà présente
      if (!addedSubcategoryIds.has(subcategory.id)) {
        result.push(subcategory)
        addedSubcategoryIds.add(subcategory.id)
        // S'assurer que la sous-catégorie est considérée comme "expanded" pendant la recherche
        expandedSubcategories.value.add(subcategory.id)
      }

      // Ajouter l'élément
      result.push(item)
    }

    return result
  }

  // Comportement normal sans recherche
  const processItems = (items: SelectItem[], parentExpanded = true) => {
    for (const item of items) {
      if (item.type === 'category') {
        result.push(item)
        if (expandedCategories.value.has(item.id)) {
          const subcategories = props.items.filter(i =>
            i.parentId === item.id && i.type === 'subcategory'
          )
          processItems(subcategories, true)
        }
      } else if (item.type === 'subcategory') {
        if (parentExpanded) {
          result.push(item)
          if (expandedSubcategories.value.has(item.id)) {
            const subItems = props.items.filter(i =>
              i.parentId === item.id && i.type === 'item'
            )
            processItems(subItems, true)
          }
        }
      } else if (item.type === 'item' && parentExpanded) {
        result.push(item)
      }
    }
  }

  const topLevelItems = props.items.filter(item => !item.parentId)
  processItems(topLevelItems)

  return result
})

// Méthodes
const toggleCategory = (categoryId: string) => {
  if (expandedCategories.value.has(categoryId)) {
    expandedCategories.value.delete(categoryId)
    // Fermer aussi les sous-catégories
    const subcategories = props.items.filter(i =>
      i.parentId === categoryId && i.type === 'subcategory'
    )
    subcategories.forEach(sub => {
      expandedSubcategories.value.delete(sub.id)
    })
  } else {
    expandedCategories.value.add(categoryId)
  }
}

const toggleSubcategory = (subcategoryId: string) => {
  if (expandedSubcategories.value.has(subcategoryId)) {
    expandedSubcategories.value.delete(subcategoryId)
  } else {
    expandedSubcategories.value.add(subcategoryId)
  }
}

const toggleItem = (value: string) => {
  const currentSelection = [...selectedItems.value]
  const index = currentSelection.indexOf(value)

  if (index > -1) {
    currentSelection.splice(index, 1)
  } else {
    currentSelection.push(value)
  }

  selectedItems.value = currentSelection
}

const removeItem = (value: string) => {
  selectedItems.value = selectedItems.value.filter(item => item !== value)
}
</script>

<style scoped lang="scss">
.v-list-item--active {
  background-color: rgba(var(--v-theme-primary), 0.1);
}

.search-icon {
  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
}

:deep(.v-field__prepend-inner) {
  padding-top: 0;
}

:deep(.v-list) {
  padding-top: 0;
}
</style>