app_vue2/components/Layout/SubHeader/PersonnalizedList.vue

<template>
  <main>
    <v-menu
      bottom
      left
      transition="slide-y-transition"
      :close-on-content-click="false"
      min-width="500"
    >
      <template #activator="{ on, attrs }">
        <span
          v-bind="attrs"
          class="ot_green--text"
          v-on="on"
        >
          {{ $t('my_list') }}
        </span>
      </template>
      <v-card scrollable>
        <v-card-title class="text-body-2 header-personnalized">
          <v-text-field
            dense
            clear-icon="header-personnalized"
            :loading="fetchState.pending"
            v-model="search"
            :label="$t('searchList')"
          />
        </v-card-title>
        <v-card-text class="ma-0 pa-0 mt-n3 header_menu">
          <v-list dense :subheader="true">
            <template v-for="(item, index) in filteredItems">
              <v-list-item
                :id="item.id"
                :key="index"
                :href="goOn(item)"
                router
                exact
              >
                <v-list-item-title>
                  {{item.label}} - <strong>{{item.menuKey}}</strong>
                </v-list-item-title>
              </v-list-item>
            </template>

          </v-list>
        </v-card-text>
      </v-card>

    </v-menu>
  </main>
</template>

<script lang="ts">
import {
  computed, defineComponent, useContext, useFetch, ref, Ref, ComputedRef
} from '@nuxtjs/composition-api'
import { Collection } from '@vuex-orm/core'
import { QUERY_TYPE } from '~/types/enums'
import { PersonalizedList } from '~/models/Access/PersonalizedList'
import { repositoryHelper } from '~/services/store/repository'
import { AnyJson } from '~/types/interfaces'
import {queryHelper} from "~/services/store/query";

export default defineComponent({
  fetchOnServer: false,
  setup () {
    const { $dataProvider, $config, app:{i18n} } = useContext()
    const homeUrl:string = $config.baseURL_adminLegacy

    const {fetchState} = useFetch(async () => {
      await $dataProvider.invoke({
        type: QUERY_TYPE.MODEL,
        model: PersonalizedList
      })
    })

    const items:ComputedRef<Array<AnyJson>> = computed(() => {
      const query = repositoryHelper.getRepository(PersonalizedList).query()
      const lists = queryHelper.getCollection(query, {'label':'asc'}) as Collection<PersonalizedList>
      lists.map(item => {
        const menu: string = i18n.t(item.menuKey) as string
        item.menuKey = menu
      })
      return lists
    })

    const search = ref('');
    const filteredItems = computed(() => {
      return items.value.filter( item => {
          return item.label.toLowerCase().indexOf(search.value.toLowerCase()) >= 0
            ||item.menuKey.toLowerCase().indexOf(search.value.toLowerCase()) >= 0
        }
      )
    })

    const goOn = (list:PersonalizedList) => {
      return `${homeUrl}/${list.entity}/list/${list.id}`
    }

    return {
      items,
      fetchState,
      goOn,
      filteredItems,
      search,
      homeUrl
    }
  }
})
</script>

<style type="text/css" lang="scss">
  .header-personnalized{
    margin-bottom: 0px;
    padding-bottom: 0px;
  }
</style>