Merge pull request #7526 from nocodb/nc-fix/table-field-search

Nc fix: offset issue while searching table field value

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/Gallery.vue

@@ -174,12 +174,14 @@ reloadViewMetaHook?.on(async () => {
     reloadAttachments.value = false
   })
 })
-reloadViewDataHook?.on(async () => {
-  await loadData()
+reloadViewDataHook?.on(async (params) => {
+  await loadData({
+    ...(params?.offset !== undefined ? { offset: params.offset } : {}),
+  })
 })
 
 // provide view data reload hook as fallback to row data reload
-provide(ReloadRowDataHookInj, reloadViewDataHook)
+provide(ReloadRowDataHookInj, reloadViewDataHook!)
 
 watch(
   view,

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

@@ -175,7 +175,7 @@ reloadViewDataHook?.on(async () => {
   await loadMapData()
 })
 
-provide(ReloadRowDataHookInj, reloadViewDataHook)
+provide(ReloadRowDataHookInj, reloadViewDataHook!)
 
 watch([formattedData, mapMetaData, markersClusterGroupRef], () => {
   if (formattedData.value == null || mapMetaData.value?.fk_view_id == null || markersClusterGroupRef.value == null) {

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

@@ -26,11 +26,13 @@ const { isNew, state, syncLTARRefs, clearLTARCell, addLTARRef } = useProvideSmar
 const reloadViewDataTrigger = inject(ReloadViewDataHookInj)!
 
 // override reload trigger and use it to reload row
-const reloadHook = createEventHook<boolean | void>()
+const reloadHook = createEventHook()
 
-reloadHook.on((shouldShowLoading) => {
+reloadHook.on((params) => {
   if (isNew.value) return
-  reloadViewDataTrigger?.trigger(shouldShowLoading)
+  reloadViewDataTrigger?.trigger({
+    shouldShowLoading: (params?.shouldShowLoading as boolean) ?? false,
+  })
 })
 
 provide(ReloadRowDataHookInj, reloadHook)

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

@@ -48,7 +48,7 @@ onMounted(async () => {
   await loadData()
 })
 
-provide(ReloadRowDataHookInj, reloadViewDataHook)
+provide(ReloadRowDataHookInj, reloadViewDataHook!)
 
 const currentRow = toRef(props, 'row')
 

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -286,7 +286,7 @@ const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook())
 const reloadHook = createEventHook()
 
 reloadHook.on(() => {
-  reloadParentRowHook?.trigger(false)
+  reloadParentRowHook?.trigger({ shouldShowLoading: false })
   if (isNew.value) return
   _loadRow(null, true)
 })

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

@@ -12,7 +12,7 @@ const props = defineProps<{
   group: Group
 
   loadGroups: (params?: any, group?: Group) => Promise<void>
-  loadGroupData: (group: Group, force?: boolean) => Promise<void>
+  loadGroupData: (group: Group, force?: boolean, params?: any) => Promise<void>
   loadGroupPage: (group: Group, p: number) => Promise<void>
   groupWrapperChangePage: (page: number, groupWrapper?: Group) => Promise<void>
 
@@ -80,11 +80,13 @@ const findAndLoadSubGroup = (key: any) => {
   oldActiveGroups.value = key
 }
 
-const reloadViewDataHandler = () => {
+const reloadViewDataHandler = (params: void | { shouldShowLoading?: boolean | undefined; offset?: number | undefined }) => {
   if (vGroup.value.nested) {
-    props.loadGroups({}, vGroup.value)
+    props.loadGroups({ ...(params?.offset !== undefined ? { offset: params.offset } : {}) }, vGroup.value)
   } else {
-    props.loadGroupData(vGroup.value, true)
+    props.loadGroupData(vGroup.value, true, {
+      ...(params?.offset !== undefined ? { offset: params.offset } : {}),
+    })
   }
 }
 

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

@@ -8,7 +8,7 @@ const props = defineProps<{
   group: Group
 
   loadGroups: (params?: any, group?: Group) => Promise<void>
-  loadGroupData: (group: Group, force?: boolean) => Promise<void>
+  loadGroupData: (group: Group, force?: boolean, params?: any) => Promise<void>
   loadGroupPage: (group: Group, p: number) => Promise<void>
   groupWrapperChangePage: (page: number, groupWrapper?: Group) => Promise<void>
 
@@ -87,8 +87,10 @@ const { deleteRow, deleteSelectedRows, deleteRangeOfRows, updateOrSaveRow, bulkU
     },
   })
 
-const reloadTableData = async () => {
-  await props.loadGroupData(vGroup.value, true)
+const reloadTableData = async (params: void | { shouldShowLoading?: boolean | undefined; offset?: number | undefined }) => {
+  await props.loadGroupData(vGroup.value, true, {
+    ...(params?.offset !== undefined ? { offset: params.offset } : {}),
+  })
 }
 
 onBeforeUnmount(async () => {

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

@@ -25,8 +25,8 @@ import {
   NavigateDir,
   ReadonlyInj,
   computed,
-  enumColor,
   extractPkFromRow,
+  getEnumColorByIndex,
   iconMap,
   inject,
   isColumnRequiredAndNull,
@@ -56,7 +56,7 @@ import type { CellRange, Row } from '#imports'
 const props = defineProps<{
   data: Row[]
   paginationData?: PaginatedType
-  loadData?: () => Promise<void>
+  loadData?: (params?: any) => 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
 }
@@ -1566,7 +1566,7 @@ onKeyStroke('ArrowDown', onDown)
                             v-e="['c:expanded-form:open']"
                             class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
                             :style="{
-                              backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length],
+                              backgroundColor: getEnumColorByIndex(row.rowMeta.commentCount || 0),
                             }"
                             @click="expandAndLooseFocus(row, state)"
                           >

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/composables/useLTARStore.ts

@@ -45,7 +45,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     column: Ref<Required<ColumnType>>,
     row: Ref<Row>,
     isNewRow: ComputedRef<boolean> | Ref<boolean>,
-    reloadData = (_showProgress?: boolean) => {},
+    reloadData = (_params: { shouldShowLoading?: boolean }) => {},
   ) => {
     // state
     const { metas, getMeta } = useMetas()
@@ -351,7 +351,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
               return false
             }
 
-            reloadData?.(false)
+            reloadData?.({ shouldShowLoading: false })
 
             /** reload child list if not a new row */
             if (!isNewRow?.value) {
@@ -429,7 +429,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         }, 600)
       }
 
-      reloadData?.(false)
+      reloadData?.({ shouldShowLoading: false })
       $e('a:links:unlink')
     }
 
@@ -499,7 +499,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         }, 600)
       }
 
-      reloadData?.(false)
+      reloadData?.({ shouldShowLoading: false })
       $e('a:links:link')
     }
 

packages/nc-gui/composables/useViewGroupBy.ts

@@ -295,7 +295,7 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
     }
   }
 
-  async function loadGroupData(group: Group, force = false) {
+  async function loadGroupData(group: Group, force = false, params: any = {}) {
     if (!base?.value?.id || !view.value?.id || !view.value?.fk_model_id) return
 
     if (group.children && !force) return
@@ -315,6 +315,7 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
     const response = !isPublic.value
       ? await api.dbViewRow.list('noco', base.value.id, view.value.fk_model_id, view.value.id, {
           ...query,
+          ...params,
           ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
           ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
         } as any)

packages/nc-gui/context/index.ts

@@ -23,10 +23,12 @@ export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-in
 export const ReadonlyInj: InjectionKey<Ref<boolean>> = Symbol('readonly-injection')
 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')
+/** when shouldShowLoading bool is passed, it indicates if a loading spinner should be visible while reloading */
+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 ReloadRowDataHookInj: InjectionKey<EventHook<{ shouldShowLoading?: boolean; offset?: number } | void>> =
+  Symbol('reload-row-data-injection')
 export const OpenNewRecordFormHookInj: InjectionKey<EventHook<void>> = Symbol('open-new-record-form-injection')
 export const FieldsInj: InjectionKey<Ref<ColumnType[]>> = Symbol('fields-injection')
 export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')

packages/nc-gui/utils/colorsUtils.ts

@@ -235,3 +235,7 @@ export function isColorDark(hexColor: string) {
   // Choose a luminance threshold (e.g., 0.5) to determine darkness/lightness
   return luminance < 128
 }
+
+export function getEnumColorByIndex(i: number, mode: 'light' | 'dark' = 'light') {
+  return enumColor[mode][i % enumColor[mode].length]
+}