fix(nc-gui): search in table by fields nocodb/nocodb#7501

packages/nc-gui/components/smartsheet/Form.vue

@@ -71,7 +71,7 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const { loadFormView, insertRow, formColumnData, formViewData, updateFormView } = useViewData(meta, view)
 
-const reloadEventHook = inject(ReloadViewDataHookInj, createEventHook<boolean | void>())
+const reloadEventHook = inject(ReloadViewDataHookInj, createEventHook())
 
 reloadEventHook.on(async () => {
   await loadFormView()
@@ -137,7 +137,11 @@ async function submitForm() {
     if (e.errorFields.length) return
   }
 
-  await insertRow({ row: { ...formState, ...state.value }, oldRow: {}, rowMeta: { new: true } })
+  await insertRow({
+    row: { ...formState, ...state.value },
+    oldRow: {},
+    rowMeta: { new: true },
+  })
 
   submitted.value = true
 }
@@ -407,7 +411,9 @@ const onFormItemClick = (element: any) => {
       <div class="text-gray-500 text-5xl font-semibold leading-16">
         {{ $t('general.available') }}<br />{{ $t('title.inDesktop') }}
       </div>
-      <div class="text-gray-500 text-base font-medium leading-normal">{{ $t('msg.formViewNotSupportedOnMobile') }}</div>
+      <div class="text-gray-500 text-base font-medium leading-normal">
+        {{ $t('msg.formViewNotSupportedOnMobile') }}
+      </div>
     </div>
   </template>
   <template v-else>
@@ -416,7 +422,9 @@ const onFormItemClick = (element: any) => {
         <div v-if="formViewData" class="items-center justify-center text-center mt-2">
           <a-alert type="success">
             <template #message>
-              <div class="text-center">{{ formViewData.success_msg || $t('msg.successfullySubmittedFormData') }}</div>
+              <div class="text-center">
+                {{ formViewData.success_msg || $t('msg.successfullySubmittedFormData') }}
+              </div>
             </template>
           </a-alert>
 
@@ -589,7 +597,9 @@ const onFormItemClick = (element: any) => {
                   />
                 </a-form-item>
               </div>
-              <div v-else class="px-4 ml-3 w-full text-bold text-4xl">{{ formViewData.heading }}</div>
+              <div v-else class="px-4 ml-3 w-full text-bold text-4xl">
+                {{ formViewData.heading }}
+              </div>
 
               <!-- Sub Header -->
               <div v-if="isEditable" class="px-4 lg:px-12">
@@ -616,7 +626,9 @@ const onFormItemClick = (element: any) => {
                 </a-form-item>
               </div>
 
-              <div v-else class="px-4 ml-3 w-full text-bold text-md">{{ formViewData.subheading || '---' }}</div>
+              <div v-else class="px-4 ml-3 w-full text-bold text-md">
+                {{ formViewData.subheading || '---' }}
+              </div>
 
               <Draggable
                 ref="draggableRef"
@@ -887,7 +899,8 @@ const onFormItemClick = (element: any) => {
 
                 <!-- Email me at <email> -->
                 <span class="ml-4">
-                  {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ user?.email }}</span>
+                  {{ $t('msg.info.emailForm') }}
+                  <span class="text-bold text-gray-600">{{ user?.email }}</span>
                 </span>
               </div>
             </div>

packages/nc-gui/components/smartsheet/Row.vue

@@ -30,7 +30,7 @@ const reloadHook = createEventHook<boolean | void>()
 
 reloadHook.on((shouldShowLoading) => {
   if (isNew.value) return
-  reloadViewDataTrigger?.trigger(shouldShowLoading)
+  reloadViewDataTrigger?.trigger({ shouldShowLoading: shouldShowLoading as boolean })
 })
 
 provide(ReloadRowDataHookInj, reloadHook)

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -56,7 +56,7 @@ import type { CellRange, Row } from '#imports'
 const props = defineProps<{
   data: Row[]
   paginationData?: PaginatedType
-  loadData?: () => Promise<void>
+  loadData?: (params?: unknown) => Promise<void>
   changePage?: (page: number) => void
   callAddEmptyRow?: (addAfter?: number) => Row | undefined
   deleteRow?: (rowIndex: number, undo?: boolean) => Promise<void>
@@ -1061,7 +1061,7 @@ eventBus.on(async (event, payload) => {
   }
 })
 
-async function reloadViewDataHandler(_shouldShowLoading: boolean | void) {
+async function reloadViewDataHandler(params: void | { shouldShowLoading?: boolean | undefined; offset?: number | undefined }) {
   isViewDataLoading.value = true
 
   if (predictedNextColumn.value?.length) {
@@ -1071,7 +1071,7 @@ async function reloadViewDataHandler(_shouldShowLoading: boolean | void) {
   // save any unsaved data before reload
   await saveOrUpdateRecords()
 
-  await loadData?.()
+  await loadData?.({ ...(params?.offset !== undefined ? { offset: params.offset } : {}) })
 
   isViewDataLoading.value = false
 }

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

@@ -80,7 +80,7 @@ const {
   activeView,
   parentId?.value,
   computed(() => autoSave.value),
-  () => reloadDataHook.trigger(showLoading.value),
+  () => reloadDataHook.trigger({ shouldShowLoading: showLoading.value }),
   modelValue.value || nestedFilters.value,
   !modelValue.value,
   webHook.value,
@@ -486,7 +486,10 @@ function isDateType(uidt: UITypes) {
               v-e="['c:filter:sub-comparison-op:select']"
               :dropdown-match-select-width="false"
               class="caption nc-filter-sub_operation-select min-w-28"
-              :class="{ 'flex-grow w-full': !showFilterInput(filter), 'max-w-28': showFilterInput(filter) }"
+              :class="{
+                'flex-grow w-full': !showFilterInput(filter),
+                'max-w-28': showFilterInput(filter),
+              }"
               :placeholder="$t('labels.operationSub')"
               density="compact"
               variant="solo"

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

@@ -53,7 +53,7 @@ watch(
 )
 
 function onPressEnter() {
-  reloadData.trigger()
+  reloadData.trigger({ shouldShowLoading: false, offset: 0 })
 }
 
 const displayColumnLabel = computed(() => {

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -55,7 +55,7 @@ const { isGallery, isGrid, isForm, isKanban, isLocked, isMap } = useProvideSmart
 
 useSqlEditor()
 
-const reloadEventHook = createEventHook<void | boolean>()
+const reloadEventHook = createEventHook()
 
 const reloadViewMetaEventHook = createEventHook<void | boolean>()
 

packages/nc-gui/context/index.ts

@@ -24,7 +24,8 @@ export const ReadonlyInj: InjectionKey<Ref<boolean>> = Symbol('readonly-injectio
 export const RowHeightInj: InjectionKey<Ref<1 | 2 | 4 | 6 | undefined>> = Symbol('row-height-injection')
 export const ScrollParentInj: InjectionKey<Ref<HTMLElement | undefined>> = Symbol('scroll-parent-injection')
 /** when bool is passed, it indicates if a loading spinner should be visible while reloading */
-export const ReloadViewDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-data-injection')
+export const ReloadViewDataHookInj: InjectionKey<EventHook<{ shouldShowLoading?: boolean; offset?: number } | void>> =
+  Symbol('reload-view-data-injection')
 export const ReloadViewMetaHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-meta-injection')
 export const ReloadRowDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-row-data-injection')
 export const OpenNewRecordFormHookInj: InjectionKey<EventHook<void>> = Symbol('open-new-record-form-injection')