Resolve "Wizzard to create db filters"

Closes #323 (closed)

components/ServerDbTable.vue

@@ -68,44 +68,30 @@ const msSortBy = computed(() => {
 })
 
 const msFilter = computed(() => {
-    if (Array.isArray(filterOrSearch.value)) {
+    if (isFilter.value) {
         return filterOrSearch.value.map((it, index) => {
             console.log(index, '  ', it)
             if (index >= 1 && (index + 1) % 3 === 1) {
                 console.log("should add AND")
                 return ` AND ${it.value}`
-            } else { return it.value }
+            } else if ((index + 1) % 3 === 0) {
+                return `"${it.value}"`
+            } else {
+                return `${it.value}`
+            }
 
         }).join("")
     }
     else { return "" }
 })
+
+
+const isFilter = computed(() => {
+    return Array.isArray(filterOrSearch.value)
+})
 onMounted(async () => {
+    console.log("on mounted")
     searchOrFilter()
-    // const {
-    //     hits,
-    //     pending: p,
-    //     totalHits,
-    //     filterError: fe,
-    //     facetDistribution: fd }
-    //     = await useFetchMsDocument(
-    //         "refseq",
-    //         search,
-    //         filter,
-    //         limit,
-    //         hitsPerPage,
-    //         page,
-    //         facetsRef,
-    //         msSortBy
-    //     )
-    // console.log("get the hits")
-    // console.log(hits)
-    // // console.log([...toValue(hits)])
-    // items.value = toValue(hits)
-    // itemsLength.value = toValue(totalHits)
-    // facetDistribution.value = toValue(fd)
-    // filterError.value = toValue(fe)
-    // pending.value = toValue(p)
 
 })
 // Fetch results
@@ -141,14 +127,24 @@ async function searchOrFilter() {
     }
 }
 
-watch(filterOrSearch, (fos) => {
 
+function clearFilterOrSearch() {
+    filterOrSearch.value = null
+    console.log("clear")
+
+    searchOrFilter()
+}
+
+watch(filterOrSearch, (fos) => {
+    console.log(fos)
     if (Array.isArray(fos) && fos?.length % 3 === 0) {
         searchOrFilter()
+        search.value = ''
     }
     else { console.log("do not search") }
 })
 watch(page, () => {
+    console.log("page")
     searchOrFilter()
 })
 
@@ -199,6 +195,17 @@ const computedItems = computed(() => {
 function selectItem(item) {
     filterOrSearch.value = Array.isArray(filterOrSearch.value) ? [...filterOrSearch.value, item] : [item]
 }
+
+function deleteOneFilter(index) {
+    if (isFilter.value) {
+        filterOrSearch.value?.splice(index - 2, 2)
+    }
+
+}
+function clearSearch() {
+    console.log("clear search")
+    search.value = ""
+}
 const autocompleteElem = ref()
 </script>
 <template>
@@ -207,12 +214,17 @@ const autocompleteElem = ref()
             <!-- <v-toolbar-title>
                 {{ title }} ({{ itemsLength }})
             </v-toolbar-title> -->
-            <v-autocomplete v-model:search="search" v-model:model-value="filterOrSearch" chips clearable
+            <v-autocomplete v-model:search="search" v-model:model-value="filterOrSearch" auto-select-first chips clearable
                 label="Search or filter results..." :items="computedItems" item-value="value" item-title="title" multiple
                 return-object append-inner-icon="md:search" @click:appendInner="searchOrFilter"
-                @click:clear="filterOrSearch = []">
-                <template #chip="{ props, item }">
-                    <v-chip v-bind="props" :text="item.raw.title"></v-chip>
+                @click:clear="clearFilterOrSearch" @update:modelValue="() => clearSearch()">
+                <template #chip="{ props, item, index }">
+
+
+
+                    <v-chip v-if="(index + 1) % 3 === 0" v-bind="props" :text="item.raw.title" closable
+                        @click:close="deleteOneFilter(index)"></v-chip>
+                    <v-chip v-else v-bind="props" :text="item.raw.title"></v-chip>
                 </template>
                 <template #item="{ props, item }">
                     <!-- <pre>{{ props["v-on"] }}</pre> -->