WIP: not working

components/Nav/Navbar.vue

@@ -32,7 +32,7 @@ watchEffect(() => {
 const sections = ref([
   {
     id: "webservice",
-    label: "Web service",
+    label: "Webservice",
     href: runtimeConfig.public.defenseFinderWebservice,
   },
   { id: "wiki", label: "Wiki", to: '/', },

components/ServerDbTable.vue

@@ -37,7 +37,7 @@ export interface AutocompleteMeiliFacetProps {
 export interface Props {
     title?: string
     sortBy?: SortItem[]
-    numericalFilters?: MaybeRef<string | undefined>
+    numericalFilters?: MaybeRef<string[] | undefined>
     dataTableServerProps: Record<string, any>
     columnsToDownload?: MaybeRef<string[] | undefined>
     autocompleteMeiliFacetsProps: AutocompleteMeiliFacetProps
@@ -170,7 +170,7 @@ const computedFilterStr = computed(() => {
 })
 
 
-const { arrayFilters: computedFilter } = useMeiliFilters(msFilterCompo)
+const { arrayFilters: computedFilter } = useMeiliFilters(msFilterCompo, toRef(props.numericalFilters))
 // const computedFilter = computed(() => {
 //     const toValFilters = toValue(msFilterCompo)
 //     if (toValFilters !== undefined && toValFilters.length > 0) {
@@ -180,6 +180,7 @@ const { arrayFilters: computedFilter } = useMeiliFilters(msFilterCompo)
 
 
 watch(computedFilter, () => {
+    console.log(toValue(computedFilter))
     if (toValue(isValidFilters) && (toValue(computedFilter) !== undefined || toValue(filterInputValues) === null)) {
         searchOrFilter()
         emitRefreshRes()
@@ -299,7 +300,7 @@ function focusedOrBlur(isFocused: boolean) {
 </script>
 <template>
     <v-card flat color="transparent">
-            <slot name="numerical-filters" :search="throttleSearch"></slot>
+        <slot name="numerical-filters" :search="throttleSearch"></slot>
         <v-data-table-server v-if="!msError" v-model:page="page" color="primary" v-bind="dataTableServerProps"
             v-model:items-per-page="hitsPerPage" v-model:sortBy="sortByRef" v-model:expanded="expanded" fixed-header
             :loading="loading" :items="msResult?.hits ?? []" :items-length="totalHits" density="compact"

components/content/StructureDb.vue

@@ -93,9 +93,15 @@ const { range: plddtsRange, stringifyFilter: plddtsFilter, reset: plddtsReset }
 const { range: iptmRange, stringifyFilter: iptmFilter, reset: iptmReset } = useNumericalFilter("iptm+ptm", 0, 1)
 const { range: pdockqRange, stringifyFilter: pdockqFilter, reset: pdockqReset } = useNumericalFilter("pDockQ", 0, 1)
 
+
+function isString(item: Ref<string | undefined>): item is Ref<string> {
+    return toValue(item) !== undefined
+
+}
+
 const numericalFilters = computed(() => {
-    const listFilters = [plddtsFilter, iptmFilter, pdockqFilter].map(f => toValue(f)).filter(f => f !== undefined)
-    return listFilters.length > 0 ? listFilters.join(" AND ") : undefined
+    const listFilters = [plddtsFilter, iptmFilter, pdockqFilter].filter(isString).map(f => toValue(f))
+    return listFilters.length > 0 ? listFilters : undefined
 })
 
 const defaultDataTableServerProps = ref({

composables/useMeiliFilters.ts

 import type { FilterItem } from '@/components/AutocompleteMeiliFacets.vue'
+import { filter } from '@observablehq/plot'
+import type { Filter } from "meilisearch"
 
-export function useMeiliFilters(filters: MaybeRef<FilterItem[] | undefined>) {
+export function useMeiliFilters(filters: MaybeRef<FilterItem[] | undefined>, numericalFilters: MaybeRef<string[] | undefined>) {
 
 
-  const arrayFilters = computed(() => {
+  const arrayFilters: ComputedRef<Filter | undefined> = computed(() => {
+    console.log("dans le computed de useMeilisFilter")
     const toValFilters = toValue(filters)
+    const toValNumericalFilter = toValue(numericalFilters)
+    console.log(toValNumericalFilter)
+    let categoricalFilters: FilterItem[] | undefined = undefined
     if (toValFilters !== undefined && toValFilters.length >= 3) {
       const cachedFilters = [...toValFilters]
 
@@ -55,11 +61,31 @@ export function useMeiliFilters(filters: MaybeRef<FilterItem[] | undefined>) {
         }
         return acc
       }, [])
-      return arrayFilters
+      categoricalFilters = arrayFilters
+    }
+
+    function isFilterItem(item: FilterItem[] | undefined): item is FilterItem[] {
+      return item !== undefined
 
-    } else {
-      return undefined
     }
+    console.log(categoricalFilters)
+    const filterItemArray = [categoricalFilters, toValNumericalFilter].filter(isFilterItem).reduce((acc, curr) => [...acc, ...curr], [])
+    console.log(filterItemArray)
+    const returnArr = filterItemArray.reduce<FilterItem[] | undefined>((acc, curr) => {
+      const toValCurr = toValue(curr)
+      if (toValCurr === undefined) {
+        return acc
+      }
+      else {
+        if (acc !== undefined) {
+          return [...acc, ...toValCurr]
+        }
+        else { return [...toValCurr] }
+      }
+    }, undefined)
+    console.log(returnArr)
+    
+    return returnArr
   })
 
   return { arrayFilters }

composables/useNumericalfilter.ts

@@ -6,17 +6,11 @@ export function useNumericalFilter(
 
 
     const range: Ref<[number, number]> = ref([toValue(min), toValue(max)])
-
-
-
-
-    const stringifyFilter: Ref<string | undefined> = ref(`${toValue(id)} ${toValue(min)} TO ${toValue(max)}`)
+    const stringifyFilter: Ref<string | undefined> = ref(undefined)
 
 
 
     watchEffect(() => {
-        console.log("watch reange")
-        console.log(range.value)
         if (range.value[0] === toValue(min) && range.value[1] === toValue(max)) {
             stringifyFilter.value = undefined
         } else {