Resolve "Wizzard to create db filters"

Closes #323 (closed)

components/ServerDbTable.vue

@@ -43,6 +43,7 @@ const filterOrSearch: Ref<FilterItem[] | string | null> = ref(null)
 const hitsPerPage: Ref<number> = ref(25)
 const limit = ref(1000)
 const filterError: Ref<string | null> = ref(null)
+const msFilter = ref(undefined)
 const page = ref(1)
 let loading = ref(false)
 
@@ -54,7 +55,7 @@ const computedTableHeight = computed(() => {
 })
 
 const isFilter = computed(() => {
-    return Array.isArray(filterOrSearch.value) && filterOrSearch.value.length % 3 === 0
+    return Array.isArray(filterOrSearch.value)
 })
 
 const msSortBy = computed(() => {
@@ -68,21 +69,23 @@ const msSortBy = computed(() => {
     } else { return undefined }
 })
 
-const msFilter = computed(() => {
-    if (isFilter.value) {
-        return filterOrSearch.value.map((it, index) => {
-            if (index >= 1 && (index + 1) % 3 === 1) {
-                return ` AND ${it.value}`
-            } else if ((index + 1) % 3 === 0) {
-                return `"${it.value}"`
-            } else {
-                return `${it.value}`
-            }
 
-        }).join("")
-    }
-    else { return undefined }
-})
+
+// const msFilter = computed(() => {
+//     if (isFilter.value) {
+//         return filterOrSearch.value.map((it, index) => {
+//             if (index >= 1 && (index + 1) % 3 === 1) {
+//                 return ` AND ${it.value}`
+//             } else if ((index + 1) % 3 === 0) {
+//                 return `"${it.value}"`
+//             } else {
+//                 return `${it.value}`
+//             }
+
+//         }).join("")
+//     }
+//     // else { return undefined }
+// })
 
 const reactiveParams = reactive({
     hitsPerPage: 25,
@@ -132,16 +135,35 @@ function clearFilterOrSearch() {
 }
 
 watch(msFilter, async (fos) => {
-    await searchOrFilter()
+    console.log("the filter change")
+    console.log(msFilter)
+    console.log(fos)
+    searchOrFilter()
     search.value = ''
 
 })
 
 watch(msResult, (newRes) => {
+    console.log("facets disti changed !!!!!!!!!!!!!")
+    console.log(msResult)
+    console.log(newRes)
     facetStore.setFacets({ facetDistribution: newRes.facetDistribution, facetStat: newRes.facetStat })
 }, { deep: true })
 
+watch(filterOrSearch, (newSoF) => {
+    if (isFilter.value && newSoF.length % 3 === 0) {
+        msFilter.value = newSoF.map((it, index) => {
+            if (index >= 1 && (index + 1) % 3 === 1) {
+                return ` AND ${it.value}`
+            } else if ((index + 1) % 3 === 0) {
+                return `"${it.value}"`
+            } else {
+                return `${it.value}`
+            }
 
+        }).join("")
+    }
+})
 const filterStep = computed(() => {
     return (Array.isArray(filterOrSearch.value) && filterOrSearch.value.length > 0) ? filterOrSearch.value?.length % 3 : null
 })
@@ -149,7 +171,6 @@ const operatorItems = ref([
     { type: "operator", value: '=', title: "is" }, { type: "operator", value: '!=', title: "is not" }
 ])
 
-
 const autocompleteItems = computed(() => {
     if (filterStep.value === null || filterStep.value === 0) {
         return props.facets.map(value => {
@@ -167,20 +188,24 @@ const autocompleteItems = computed(() => {
         // get the facet value
         if (Array.isArray(filterOrSearch.value)) {
             const { type, value } = filterOrSearch.value?.slice(-2, -1)[0]
-            return facetStore.facets?.facetDistribution?.[value] ? Object.entries(facetStore.facets.facetDistribution[value]).map(([key, val]) => {
+            console.log("compute new facets")
+            const facetDistri = facetStore.facets?.facetDistribution
+            console.log(facetDistri)
+            return facetDistri?.[value] ? Object.entries(facetDistri[value]).map(([key, val]) => {
                 return { type: "value", value: key, title: key, count: val }
             }) : []
         }
     }
 })
 
-
-
 function selectItem(item) {
     filterOrSearch.value = Array.isArray(filterOrSearch.value) ? [...filterOrSearch.value, item] : [item]
 }
 
 function deleteOneFilter(index) {
+    console.log("deleteOnefilter")
+    console.log(isFilter.value)
+    console.log(filterOrSearch)
     if (isFilter.value) {
         filterOrSearch.value?.splice(index - 2, 2)
     }
@@ -193,9 +218,6 @@ function clearSearch() {
 <template>
     <v-card flat>
         <v-toolbar>
-            <!-- <v-toolbar-title>
-                {{ title }} ({{ itemsLength }})
-            </v-toolbar-title> -->
             <v-autocomplete v-model:search="search" v-model:model-value="filterOrSearch" auto-select-first chips clearable
                 label="Search or filter results..." :items="autocompleteItems" item-value="value" item-title="title"
                 multiple return-object append-inner-icon="md:search" @click:appendInner="searchOrFilter"
@@ -206,11 +228,6 @@ function clearSearch() {
                     <v-chip v-else v-bind="props" :text="item.raw.title"></v-chip>
                 </template>
                 <template #item="{ props, item }">
-                    <!-- <pre>{{ props["v-on"] }}</pre> -->
-
-                    <!-- <pre v-for="(value, key) in props" :key="key">
-                        <span v-if="key != 'ref'">{{ key }} - {{ value }}</span>
-                    </pre> -->
                     <v-list-item v-bind="{ ...props, active: false, onClick: () => selectItem(item) }" :title="item.title"
                         :subtitle="item.raw?.count ? item.raw.count : ''" :value="props.value">