Merge pull request #4473 from nocodb/feat/useFieldQuery

feat: useFieldQuery

packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

@@ -1,9 +1,22 @@
 <script lang="ts" setup>
-import { ReloadViewDataHookInj, computed, inject, onClickOutside, ref, useSmartsheetStoreOrThrow } from '#imports'
+import {
+  ActiveViewInj,
+  ReloadViewDataHookInj,
+  computed,
+  inject,
+  onClickOutside,
+  ref,
+  useFieldQuery,
+  useSmartsheetStoreOrThrow,
+} from '#imports'
 
 const reloadData = inject(ReloadViewDataHookInj)!
 
-const { search, meta } = useSmartsheetStoreOrThrow()
+const { meta } = useSmartsheetStoreOrThrow()
+
+const activeView = inject(ActiveViewInj, ref())
+
+const { search, loadFieldQuery } = useFieldQuery(activeView)
 
 const isDropdownOpen = ref(false)
 
@@ -18,6 +31,16 @@ const columns = computed(() =>
   })),
 )
 
+watch(
+  () => activeView.value?.id,
+  (n, o) => {
+    if (n !== o) {
+      loadFieldQuery(activeView)
+    }
+  },
+  { immediate: true },
+)
+
 function onPressEnter() {
   reloadData.trigger()
 }

packages/nc-gui/composables/useFieldQuery.ts

@@ -0,0 +1,34 @@
+import type { Ref } from 'vue'
+import type { ViewType } from 'nocodb-sdk'
+import { useState } from '#imports'
+
+export function useFieldQuery(view: Ref<ViewType | undefined>) {
+  // initial search object
+  const emptyFieldQueryObj = {
+    field: '',
+    query: '',
+  }
+
+  // mapping view id (key) to corresponding emptyFieldQueryObj (value)
+  const searchMap = useState<Record<string, { field: string; query: string }>>('field-query-search-map', () => ({}))
+
+  // the fieldQueryObj under the current view
+  const search = useState<{ field: string; query: string }>('field-query-search', () => emptyFieldQueryObj)
+
+  // map current view id to emptyFieldQueryObj
+  if (view?.value?.id) {
+    searchMap.value[view!.value!.id] = search.value
+  }
+
+  // retrieve the fieldQueryObj of the given view id
+  // if it is not found in `searchMap`, init with emptyFieldQueryObj
+  const loadFieldQuery = (view: Ref<ViewType | undefined>) => {
+    if (!view.value?.id) return
+    if (!(view!.value!.id in searchMap.value)) {
+      searchMap.value[view!.value!.id!] = emptyFieldQueryObj
+    }
+    search.value = searchMap.value[view!.value!.id!]
+  }
+
+  return { search, loadFieldQuery }
+}

packages/nc-gui/composables/useSmartsheetStore.ts

@@ -1,7 +1,7 @@
 import { ViewTypes } from 'nocodb-sdk'
 import type { FilterType, KanbanType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { computed, reactive, ref, unref, useInjectionState, useNuxtApp, useProject } from '#imports'
+import { computed, ref, unref, useFieldQuery, useInjectionState, useNuxtApp, useProject } from '#imports'
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
   (
@@ -17,12 +17,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
 
     const cellRefs = ref<HTMLTableDataCellElement[]>([])
 
-    // state
-    // todo: move to grid view store
-    const search = reactive({
-      field: '',
-      query: '',
-    })
+    const { search } = useFieldQuery(view)
 
     // getters
     const isLocked = computed(() => view.value?.lock_type === 'locked')
@@ -35,21 +30,20 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     const xWhere = computed(() => {
       let where
       const col =
-        (meta.value as TableType)?.columns?.find(({ id }) => id === search.field) ||
+        (meta.value as TableType)?.columns?.find(({ id }) => id === search.value.field) ||
         (meta.value as TableType)?.columns?.find((v) => v.pv)
       if (!col) return
 
-      if (!search.query.trim()) return
+      if (!search.value.query.trim()) return
       if (['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
-        where = `(${col.title},like,%${search.query.trim()}%)`
+        where = `(${col.title},like,%${search.value.query.trim()}%)`
       } else {
-        where = `(${col.title},eq,${search.query.trim()})`
+        where = `(${col.title},eq,${search.value.query.trim()})`
       }
       return where
     })
 
     const isSqlView = computed(() => (meta.value as TableType)?.type === 'view')
-
     const sorts = ref<SortType[]>(unref(initialSorts) ?? [])
     const nestedFilters = ref<FilterType[]>(unref(initialFilters) ?? [])
 
@@ -58,7 +52,6 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       meta,
       isLocked,
       $api,
-      search,
       xWhere,
       isPkAvail,
       isForm,