From f389aaf0869897ff27b1d809328ec7ab2ba515e4 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Wed, 10 Jan 2024 11:31:42 +0100
Subject: [PATCH] WIP: use array to generate meilifilter and wrap or with
parenthesis
---
components/AutocompleteMeiliFacets.vue | 2 +-
components/ServerDbTable.vue | 12 +++-
composables/useMeiliFilters.ts | 88 ++++++++++++++++++++++++++
3 files changed, 100 insertions(+), 2 deletions(-)
create mode 100644 composables/useMeiliFilters.ts
diff --git a/components/AutocompleteMeiliFacets.vue b/components/AutocompleteMeiliFacets.vue
index 943ae735..2ef7c384 100644
--- a/components/AutocompleteMeiliFacets.vue
+++ b/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
diff --git a/components/ServerDbTable.vue b/components/ServerDbTable.vue
index 1b2b1a61..e1e90ea3 100644
--- a/components/ServerDbTable.vue
+++ b/components/ServerDbTable.vue
@@ -1,6 +1,7 @@
<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()
diff --git a/composables/useMeiliFilters.ts b/composables/useMeiliFilters.ts
new file mode 100644
index 00000000..d4574037
--- /dev/null
+++ b/composables/useMeiliFilters.ts
@@ -0,0 +1,88 @@
+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 }
+}
--
GitLab