Merge pull request #89 from icefoganalytics/issue-85/search-box-popul…

…ate-with-dashboard-keyword

Search Box Populate With Dashboard Keyword

web/src/components/datasets/DatasetsTable.vue

@@ -15,15 +15,13 @@
           cols="12"
           md="4"
         >
-          <v-text-field
-            model-value="click clear to remove search query ..."
-            prepend-inner-icon="mdi-magnify"
-            label="TODO: Search"
+          <TagsAutocomplete
+            :model-value="tagNames"
+            label="Search"
             variant="outlined"
             clearable
-            hide-details
             persistent-clear
-            readonly
+            @update:model-value="updateWithTagNamesFilterQuery"
             @click:clear="clearSearchQuery"
           />
         </v-col>
@@ -88,8 +86,8 @@
 
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { compact, isNil } from "lodash"
+import { useRoute, useRouter, type LocationQueryValue } from "vue-router"
+import { cloneDeep, compact, isNil } from "lodash"
 import { useI18n } from "vue-i18n"
 
 import acronymize from "@/utils/acronymize"
@@ -99,6 +97,8 @@ import useDatasets from "@/use/use-datasets"
 import ColumnRouterLink from "@/components/datasets/datasets-table/ColumnRouterLink.vue"
 import RequestAccessButton from "@/components/datasets/datasets-table/RequestAccessButton.vue"
 import SubscribeToDatasetButton from "@/components/datasets/datasets-table/SubscribeToDatasetButton.vue"
+import TagsAutocomplete from "@/components/tags/TagsAutocomplete.vue"
+import { DatasetsFilters } from "@/api/datasets-api"
 
 type Tag = {
   id: number
@@ -132,6 +132,7 @@ const router = useRouter()
 
 const itemsPerPage = ref(parseInt(route.query.perPage as string) || 10)
 const page = ref(parseInt(route.query.page as string) || 1)
+const tagNames = computed(() => (route.query.filters as unknown as DatasetsFilters)?.withTagNames)
 
 function updatePage(newPage: number) {
   if (isLoading.value) return
@@ -163,6 +164,22 @@ const datasetsQuery = computed(() => ({
 }))
 const { datasets, isLoading, totalCount, fetch: refresh } = useDatasets(datasetsQuery)
 
+function updateWithTagNamesFilterQuery(newTagNames: string[]) {
+  const query = cloneDeep(route.query)
+
+  if (isNil(query.filters)) {
+    query.filters = {
+      withTagNames: newTagNames,
+    } as unknown as LocationQueryValue
+  } else {
+    ;(query.filters as DatasetsFilters).withTagNames = newTagNames
+  }
+
+  router.push({
+    query,
+  })
+}
+
 function clearSearchQuery() {
   router.push({ query: { ...route.query, filters: undefined } })
 }

web/src/components/tags/TagsAutocomplete.vue

@@ -49,7 +49,9 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(["update:modelValue"])
+const emit = defineEmits<{
+  "update:modelValue": [tagNames: string[]]
+}>()
 
 const selectedTagNames = ref<string[]>(props.modelValue)
 

web/src/use/use-datasets.ts

@@ -1,8 +1,8 @@
 import { type Ref, reactive, toRefs, ref, unref, watch } from "vue"
 
-import datasetsApi, { type Dataset } from "@/api/datasets-api"
+import datasetsApi, { type Dataset, type DatasetsFilters } from "@/api/datasets-api"
 
-export { type Dataset }
+export { type Dataset, type DatasetsFilters }
 
 export function useDatasets(
   options: Ref<{