WIP: use array to generate meilifilter and wrap or with parenthesis

components/AutocompleteMeiliFacets.vue

@@ -2,7 +2,7 @@
 import { filter } from '@observablehq/plot'
 
 export interface FilterItem {
-    type: 'facet' | 'innerOperator' | 'outerOperator' | 'value' | 'text'
+    type: 'facet' | 'innerOperator' | 'outerOperator' | 'value'
     value: string
     title: string
     count?: number

components/ServerDbTable.vue

 <script setup lang="ts">
 // import type { FacetDistribution } from "meilisearch";
 import { useCsvDownload } from "@/composables/useCsvDownload"
+import { useMeiliFilters } from "@/composables/useMeiliFilters"
 import { useSlots } from 'vue'
 import { useDisplay } from "vuetify";
 import { useThrottleFn } from '@vueuse/core'
@@ -141,7 +142,7 @@ onBeforeMount(async () => {
 const msFilterCompo = ref<FilterItem[] | undefined>(undefined)
 
 
-const computedFilter = computed(() => {
+const computedFilterStr = computed(() => {
     const toValFilters = toValue(msFilterCompo)
     let filtersStr: string | undefined = undefined
     if (toValFilters !== undefined && toValFilters.length > 0) {
@@ -169,6 +170,15 @@ const computedFilter = computed(() => {
 })
 
 
+const { arrayFilters: computedFilter } = useMeiliFilters(msFilterCompo)
+// const computedFilter = computed(() => {
+//     const toValFilters = toValue(msFilterCompo)
+//     if (toValFilters !== undefined && toValFilters.length > 0) {
+//         meiliFilterAsArray
+//     }
+// })
+
+
 watch(computedFilter, () => {
     if (toValue(isValidFilters) && (toValue(computedFilter) !== undefined || toValue(filterInputValues) === null)) {
         searchOrFilter()

composables/useMeiliFilters.ts

+import type { FilterItem } from '@/components/AutocompleteMeiliFacets.vue'
+
+export function useMeiliFilters(filters: MaybeRef<FilterItem[] | undefined>) {
+
+
+  const arrayFilters = computed(() => {
+    const toValFilters = toValue(filters)
+    if (toValFilters !== undefined && toValFilters.length >= 3) {
+      const cachedFilters = [...toValFilters]
+
+      // Remove last element if it is an outerOperator
+      if (cachedFilters.length % 4 === 0 && cachedFilters.slice(-1)[0].type === 'outerOperator') {
+        cachedFilters.splice(-1)
+      }
+
+
+      let previousOperator: 'AND' | 'OR' | undefined = undefined
+      const arrayFilters = cachedFilters.reduce((acc, curr, index) => {
+        const sanitizedValue = curr.value.split("-").slice(0, -1).join("-")
+        const position = index + 1
+        switch (position % 4) {
+          case 0:
+
+            if (previousOperator === undefined) {
+              const newFilter = acc.splice(-3).join("")
+              if (sanitizedValue === 'AND') {
+                acc.push(newFilter)
+              }
+              else {
+                acc.push([newFilter])
+              }
+            }
+
+            previousOperator = sanitizedValue
+            break;
+          case 3:
+            // if last element
+            acc.push(`'${sanitizedValue}'`)
+
+            if (previousOperator === undefined) {
+              const newFilter = acc.splice(-3).join("")
+              acc.push(newFilter)
+            }
+            else {
+              const newFilter = acc.splice(-3).join("")
+              console.log("new filter:", newFilter)
+              if (previousOperator === 'AND') {
+                acc.push(newFilter)
+              }
+              else {
+                console.log("previous operator is OR")
+                const previousElem = acc.slice(-1)[0]
+                console.log(previousElem)
+                if (Array.isArray(previousElem)) {
+                  acc.slice(-1)[0].push(newFilter)
+                }
+                else {
+
+                  const previousElem = acc.splice(-1)[0]
+                  console.log(previousElem)
+                  console.log([...acc])
+                  acc.push([previousElem, newFilter])
+                }
+
+              }
+
+            }
+
+
+            break
+          default:
+            acc.push(sanitizedValue)
+            break;
+        }
+        console.log(position)
+        console.log([...acc])
+        return acc
+      }, [])
+      console.log(arrayFilters)
+      return arrayFilters
+
+    } else {
+      return undefined
+    }
+  })
+
+  return { arrayFilters }
+}