make some request client side

components/ServerDbTable.vue

@@ -7,7 +7,6 @@ import { useDisplay } from "vuetify";
 import { useThrottleFn } from '@vueuse/core'
 import type { FacetInputItem, FilterItem } from '@/components/AutocompleteMeiliFacets.vue'
 import { useMeiliSearch } from "#imports"
-import type { Filter } from "meilisearch";
 // import { saveAs } from "file-saver";
 export interface SortItem {
     key: string,
@@ -25,9 +24,6 @@ export interface NumericalFilterModel extends NumericalFilter {
 }
 
 
-
-
-
 export interface AutocompleteMeiliFacetProps {
     db: string
     facets: FacetInputItem[] | undefined
@@ -58,12 +54,6 @@ const props = withDefaults(defineProps<Props>(), {
         }
     }
 });
-
-
-
-// const facetDistribution: Ref<Record<string, Record<string, number>> | undefined> = useState(`refseqFacetDistribution`)
-
-
 const slots = useSlots()
 const sortByRef = toRef(props.sortBy)
 const emit = defineEmits(["refresh:search"])
@@ -73,7 +63,6 @@ const filterOrSearch: Ref<FilterItem[] | null> = ref(null)
 const hitsPerPage: Ref<number> = ref(25)
 const itemsPerPage: Ref<number[]> = ref([25, 50, 100])
 const filterError: Ref<string | null> = ref(null)
-// const msFilter: Ref<string | undefined> = ref(undefined)
 const page = ref(1)
 let loading = ref(false)
 const expanded = ref([])
@@ -85,7 +74,6 @@ const computedTableHeight = computed(() => {
 })
 
 const pendingDownloadData = ref(false)
-
 const toRefNumericalFilters = toRef(props.numericalFilters)
 // const meiliFilters = ref<string | undefined>(undefined)
 
@@ -130,13 +118,9 @@ watch([paginationParams, msSortBy, page], ([newParams, newSort, newPage]) => {
     }
 })
 
-
-
 onBeforeMount(async () => {
     searchOrFilter()
     emitRefreshRes()
-
-
 })
 
 const msFilterCompo = ref<FilterItem[] | undefined>(undefined)
@@ -181,7 +165,6 @@ const { arrayFilters: computedFilter } = useMeiliFilters(msFilterCompo, computed
 
 
 watch(computedFilter, () => {
-    console.log(toValue(computedFilter))
     if (toValue(isValidFilters) && (toValue(computedFilter) !== undefined || toValue(filterInputValues) === null)) {
         searchOrFilter()
         emitRefreshRes()
@@ -311,25 +294,23 @@ function focusedOrBlur(isFocused: boolean) {
                 <v-card variant="flat" color="transparent">
                     <v-card-text class="d-flex flex-row">
                         <v-badge :content="totalHits" color="primary" class="me-auto">
-                            <v-btn prepend-icon="md:download" :loading="pendingDownloadData" variant="text" color="primary"
-                                @click="downloadData()">{{
-                                    props.title }}
+                            <v-btn prepend-icon="md:download" :loading="pendingDownloadData" variant="text"
+                                color="primary" @click="downloadData()">{{
+            props.title }}
                             </v-btn>
                         </v-badge>
                         <slot name="toolbar-items"></slot>
 
                     </v-card-text>
                     <v-card-text>
-                        <v-text-field v-model="search" label="Search..." hide-details="auto" :disabled="pendingDownloadData"
-                            prepend-inner-icon="mdi-magnify" single-line clearable
+                        <v-text-field v-model="search" label="Search..." hide-details="auto"
+                            :disabled="pendingDownloadData" prepend-inner-icon="mdi-magnify" single-line clearable
                             @update:focused="focusedOrBlur"></v-text-field>
                     </v-card-text>
                     <v-card-text>
                         <AutocompleteMeiliFacets v-model="msFilterCompo" v-bind="props.autocompleteMeiliFacetsProps"
                             :is-valid-filters="isValidFilters">
                         </AutocompleteMeiliFacets>
-
-
                     </v-card-text>
 
 

components/content/StructureDb.vue

@@ -31,6 +31,19 @@ onBeforeMount(async () => {
 })
 
 
+onMounted(async () => {
+    const { data } = await useAsyncMeiliSearch({
+        index: toValue(dbName), query: "", params: {
+            facets: ["*"],
+            filter: [],
+            page: 1,
+            hitsPerPage: 25,
+        }
+    })
+    autocompleteMeiliFacetsProps.value.facetDistribution = toValue(data)?.facetDistribution
+
+})
+
 const autocompleteMeiliFacetsProps = ref<AutocompleteMeiliFacetProps>({
     db: toValue(dbName),
     facets: [

components/content/SystemDb.vue

@@ -18,6 +18,20 @@ onBeforeMount(async () => {
     autocompleteMeiliFacetsProps.value.facetDistribution = toValue(data)?.facetDistribution
 
 })
+onMounted(async () => {
+    const { data } = await useAsyncMeiliSearch({
+        index: toValue(dbName), query: "", params: {
+            facets: ["*"],
+            filter: [],
+            page: 1,
+            hitsPerPage: 25,
+        }
+    })
+
+    autocompleteMeiliFacetsProps.value.facetDistribution = toValue(data)?.facetDistribution
+
+})
+
 
 const autocompleteMeiliFacetsProps = ref<AutocompleteMeiliFacetProps>({
     db: toValue(dbName),