diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index ea08d77c20..2910a1ba0a 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -59,7 +59,7 @@ const { $e } = useNuxtApp()
const { appInfo } = useGlobal()
-const { betaFeatureToggleState } = useBetaFeatureToggle()
+const { isFeatureEnabled } = useBetaFeatureToggle()
const { openedViewsTab } = storeToRefs(useViewsStore())
@@ -122,7 +122,9 @@ const isColumnTypeOpen = ref(false)
const geoDataToggleCondition = (t: { name: UITypes }) => {
if (!appInfo.value.ee) return true
- return betaFeatureToggleState.show ? betaFeatureToggleState.show : !t.name.includes(UITypes.GeoData)
+ const isColEnabled = isFeatureEnabled(FEATURE_FLAG.GEODATA_COLUMN)
+
+ return isColEnabled || !t.name.includes(UITypes.GeoData)
}
const showDeprecated = ref(false)
diff --git a/packages/nc-gui/components/smartsheet/form/field-settings.vue b/packages/nc-gui/components/smartsheet/form/field-settings.vue
index de8441e703..285a36a583 100644
--- a/packages/nc-gui/components/smartsheet/form/field-settings.vue
+++ b/packages/nc-gui/components/smartsheet/form/field-settings.vue
@@ -3,7 +3,7 @@ import { UITypes, isSelectTypeCol } from 'nocodb-sdk'
const { formState, activeField, updateColMeta, isRequired } = useFormViewStoreOrThrow()
-const { betaFeatureToggleState } = useBetaFeatureToggle()
+const { isFeatureEnabled } = useBetaFeatureToggle()
const updateSelectFieldLayout = (value: boolean) => {
if (!activeField.value) return
@@ -13,7 +13,7 @@ const updateSelectFieldLayout = (value: boolean) => {
}
const columnSupportsScanning = (elementType: UITypes) =>
- betaFeatureToggleState.show &&
+ isFeatureEnabled(FEATURE_FLAG.FORM_SUPPORT_COLUMN_SCANNING) &&
[UITypes.SingleLineText, UITypes.Number, UITypes.Email, UITypes.URL, UITypes.LongText].includes(elementType)
diff --git a/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue b/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue
new file mode 100644
index 0000000000..a17fa04c20
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue
@@ -0,0 +1,2848 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Row filtered
+
+
+
+ This record will be hidden as it does not match the filters applied to this view.
+
+
+
+
+
+
+
+
+
+ {{ row.rowMeta.rowIndex + 1 }}
+
+
+
+
+
+
+
+
+ {{ row.rowMeta.commentCount }}
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+ |
+ |
+
+
+
+
+
+
+
+ {{ $t('title.updateSelectedRows') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ New Record
+
+
+
+
+
+
+ {{ $t('activity.newRecord') }}
+
+ {{ $t('activity.newRecord') }} - {{ $t('objects.viewType.form') }}
+
+
+
+
+
+
+
+ {{ $t('activity.newRecord') }} - {{ $t('objects.viewType.grid') }}
+
+
+
+
+
+
+
+ {{ $t('activity.newRecord') }} - {{ $t('objects.viewType.form') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/smartsheet/grid/PaginationV2.vue b/packages/nc-gui/components/smartsheet/grid/PaginationV2.vue
index f4cab5c0ac..0e5dc34685 100644
--- a/packages/nc-gui/components/smartsheet/grid/PaginationV2.vue
+++ b/packages/nc-gui/components/smartsheet/grid/PaginationV2.vue
@@ -4,11 +4,13 @@ import { type PaginatedType, UITypes } from 'nocodb-sdk'
const props = defineProps<{
scrollLeft?: number
- paginationData: PaginatedType
- changePage: (page: number) => void
+ paginationData?: PaginatedType
+ changePage?: (page: number) => void
showSizeChanger?: boolean
customLabel?: string
+ totalRows?: number
depth?: number
+ disablePagination?: boolean
}>()
const emits = defineEmits(['update:paginationData'])
@@ -23,6 +25,8 @@ const showSizeChanger = toRef(props, 'showSizeChanger')
const vPaginationData = useVModel(props, 'paginationData', emits)
+const disablePagination = toRef(props, 'disablePagination')
+
const { updateAggregate, getAggregations, visibleFieldsComputed, displayFieldComputed } = useViewAggregateOrThrow()
const scrollLeft = toRef(props, 'scrollLeft')
@@ -46,6 +50,9 @@ const count = computed(() => vPaginationData.value?.totalRows ?? Infinity)
const page = computed({
get: () => vPaginationData?.value?.page ?? 1,
set: async (p) => {
+ if (disablePagination.value) {
+ return
+ }
isPaginationLoading.value = true
try {
await changePage?.(p)
@@ -118,21 +125,36 @@ const renderAltOrOptlKey = () => {
}"
>
-
-
-
- {{ count }} {{ customLabel ? customLabel : count !== 1 ? $t('objects.records') : $t('objects.record') }}
-
-
- {{ Intl.NumberFormat('en', { notation: 'compact' }).format(count) }}
- {{ customLabel ? customLabel : count !== 1 ? $t('objects.records') : $t('objects.record') }}
-
-
+
+
+
+
+ {{ count }} {{ customLabel ? customLabel : count !== 1 ? $t('objects.records') : $t('objects.record') }}
+
+
+ {{ Intl.NumberFormat('en', { notation: 'compact' }).format(count) }}
+ {{ customLabel ? customLabel : count !== 1 ? $t('objects.records') : $t('objects.record') }}
+
+
+
+
+
+
+ {{ totalRows }} {{ totalRows !== 1 ? $t('objects.records') : $t('objects.record') }}
+
+ {{ Intl.NumberFormat('en', { notation: 'compact' }).format(totalRows) }}
+ {{ totalRows !== 1 ? $t('objects.records') : $t('objects.record') }}
+
+
+
{
overlay-class-name="max-h-96 relative scroll-container nc-scrollbar-md overflow-auto"
>
‎
-
+
scrollParent.value || gridWrapper.value)
const scrollLeft = ref()
-function scrollToCell(row?: number | null, col?: number | null) {
+function scrollToCell(row?: number | null, col?: number | null, scrollBehaviour: ScrollBehavior = 'instant') {
row = row ?? activeCell.row
col = col ?? activeCell.col
@@ -1020,32 +1021,38 @@ function scrollToCell(row?: number | null, col?: number | null) {
}
if (row === dataRef.value.length - 1) {
- scrollWrapper.value.scrollTo({
- top: isGroupBy.value ? scrollWrapper.value.scrollTop : scrollWrapper.value.scrollHeight,
- left:
- col === fields.value.length - 1 // if corner cell
- ? scrollWrapper.value.scrollWidth
- : tdScroll.left,
- behavior: 'smooth',
+ requestAnimationFrame(() => {
+ scrollWrapper.value.scrollTo({
+ top: isGroupBy.value ? scrollWrapper.value.scrollTop : scrollWrapper.value.scrollHeight,
+ left:
+ col === fields.value.length - 1 // if corner cell
+ ? scrollWrapper.value.scrollWidth
+ : tdScroll.left,
+ behavior: 'instant',
+ })
})
return
}
if (col === fields.value.length - 1) {
// if last column make 'Add New Column' visible
- scrollWrapper.value.scrollTo({
- top: tdScroll.top,
- left: scrollWrapper.value.scrollWidth,
- behavior: 'smooth',
+ requestAnimationFrame(() => {
+ scrollWrapper.value.scrollTo({
+ top: tdScroll.top,
+ left: scrollWrapper.value.scrollWidth,
+ behavior: 'instant',
+ })
})
return
}
// scroll into the active cell
- scrollWrapper.value.scrollTo({
- top: tdScroll.top,
- left: tdScroll.left,
- behavior: 'smooth',
+ requestAnimationFrame(() => {
+ scrollWrapper.value.scrollTo({
+ top: tdScroll.top,
+ left: tdScroll.left,
+ behavior: 'instant',
+ })
})
}
}
diff --git a/packages/nc-gui/components/smartsheet/grid/index.vue b/packages/nc-gui/components/smartsheet/grid/index.vue
index 3e4e9af7c6..433db3a6d5 100644
--- a/packages/nc-gui/components/smartsheet/grid/index.vue
+++ b/packages/nc-gui/components/smartsheet/grid/index.vue
@@ -1,5 +1,6 @@
@@ -249,22 +252,47 @@ onMounted(() => {
:style="`background-color: ${isGroupBy ? `${baseColor}` : 'var(--nc-grid-bg)'};`"
>
+
@@ -305,24 +333,20 @@ onMounted(() => {
:view="view"
show-next-prev-icons
:first-row="isFirstRow"
- :last-row="islastRow"
+ :last-row="isLastRow"
:expand-form="expandForm"
@next="goToNextRow()"
@prev="goToPreviousRow()"
@update-row-comment-count="updateRowCommentCount"
/>
-
diff --git a/packages/nc-gui/composables/useBetaFeatureToggle.ts b/packages/nc-gui/composables/useBetaFeatureToggle.ts
index f40cbd5c41..751f28f7ba 100644
--- a/packages/nc-gui/composables/useBetaFeatureToggle.ts
+++ b/packages/nc-gui/composables/useBetaFeatureToggle.ts
@@ -1,22 +1,121 @@
-import { reactive } from 'vue'
+import { onMounted, ref } from 'vue'
+import { createSharedComposable } from '@vueuse/core'
-const storedValue = localStorage.getItem('betaFeatureToggleState')
+const FEATURES = [
+ {
+ id: 'infinite_scrolling',
+ title: 'Infinite scrolling',
+ description: 'Effortlessly browse large datasets with infinite scrolling.',
+ enabled: true,
+ },
+ {
+ id: 'geodata_column',
+ title: 'Geodata column',
+ description: 'Enable the geodata column.',
+ enabled: false,
+ isEngineering: true,
+ },
+ {
+ id: 'form_support_column_scanning',
+ title: 'Scanner for filling data in forms',
+ description: 'Enable scanner to fill data in forms.',
+ enabled: false,
+ isEngineering: true,
+ },
+ {
+ id: 'extensions',
+ title: 'Extensions',
+ description: 'Extensions allows you to add new features or functionalities to the NocoDB platform.',
+ enabled: false,
+ isEngineering: true,
+ },
+]
-const initialToggleState = storedValue ? JSON.parse(storedValue) : false
+export const FEATURE_FLAG = Object.fromEntries(FEATURES.map((feature) => [feature.id.toUpperCase(), feature.id])) as Record<
+ Uppercase<(typeof FEATURES)[number]['id']>,
+ (typeof FEATURES)[number]['id']
+>
-const betaFeatureToggleState = reactive({ show: initialToggleState })
+type FeatureId = (typeof FEATURES)[number]['id']
+type Feature = (typeof FEATURES)[number]
-const toggleBetaFeature = () => {
- betaFeatureToggleState.show = !betaFeatureToggleState.show
- localStorage.setItem('betaFeatureToggleState', JSON.stringify(betaFeatureToggleState.show))
-}
+const STORAGE_KEY = 'featureToggleStates'
-const _useBetaFeatureToggle = () => {
- return {
- betaFeatureToggleState,
- toggleBetaFeature,
+export const useBetaFeatureToggle = createSharedComposable(() => {
+ const features = ref
(structuredClone(FEATURES))
+
+ const featureStates = computed(() => {
+ return features.value.reduce((acc, feature) => {
+ acc[feature.id] = feature.enabled
+ return acc
+ }, {} as Record)
+ })
+
+ const { $e } = useNuxtApp()
+
+ const isEngineeringModeOn = ref(false)
+
+ const saveFeatures = () => {
+ try {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(features.value))
+ window.dispatchEvent(new StorageEvent('storage', { key: STORAGE_KEY }))
+ } catch (error) {
+ console.error('Failed to save features:', error)
+ }
}
-}
-const useBetaFeatureToggle = createSharedComposable(_useBetaFeatureToggle)
-export { useBetaFeatureToggle }
+ const toggleFeature = (id: FeatureId) => {
+ const feature = features.value.find((f) => f.id === id)
+ if (feature) {
+ feature.enabled = !feature.enabled
+ $e(`a:feature-preview:${id}:${feature.enabled ? 'on' : 'off'}`)
+ saveFeatures()
+ } else {
+ console.error(`Feature ${id} not found`)
+ }
+ }
+
+ const isFeatureEnabled = (id: FeatureId) => featureStates.value[id] ?? false
+
+ const initializeFeatures = () => {
+ try {
+ const stored = localStorage.getItem(STORAGE_KEY)
+ if (stored) {
+ const parsedFeatures = JSON.parse(stored) as Partial[]
+ features.value = FEATURES.map((defaultFeature) => ({
+ ...defaultFeature,
+ enabled: parsedFeatures.find((f) => f.id === defaultFeature.id)?.enabled ?? defaultFeature.enabled,
+ }))
+ }
+ } catch (error) {
+ console.error('Failed to initialize features:', error)
+ }
+ saveFeatures()
+ }
+
+ const handleStorageEvent = (event: StorageEvent) => {
+ if (event.key === STORAGE_KEY && event.newValue !== null) {
+ if (JSON.parse(event.newValue) !== features.value) {
+ initializeFeatures()
+ }
+ }
+ }
+
+ onMounted(() => {
+ initializeFeatures()
+ window.addEventListener('storage', handleStorageEvent)
+ })
+
+ onUnmounted(() => {
+ window.removeEventListener('storage', handleStorageEvent)
+ })
+
+ onMounted(initializeFeatures)
+
+ return {
+ features,
+ toggleFeature,
+ isFeatureEnabled,
+ isEngineeringModeOn,
+ }
+})
diff --git a/packages/nc-gui/composables/useExtensions.ts b/packages/nc-gui/composables/useExtensions.ts
index 1cbaa77887..f0a29befec 100644
--- a/packages/nc-gui/composables/useExtensions.ts
+++ b/packages/nc-gui/composables/useExtensions.ts
@@ -3,12 +3,7 @@ import { ExtensionsEvents } from '#imports'
const extensionsState = createGlobalState(() => {
const baseExtensions = ref>({})
- // Egg
- const extensionsEgg = ref(false)
-
- const extensionsEggCounter = ref(0)
-
- return { baseExtensions, extensionsEgg, extensionsEggCounter }
+ return { baseExtensions }
})
export interface ExtensionManifest {
@@ -61,7 +56,7 @@ abstract class ExtensionType {
export { ExtensionType }
export const useExtensions = createSharedComposable(() => {
- const { baseExtensions, extensionsEgg, extensionsEggCounter } = extensionsState()
+ const { baseExtensions } = extensionsState()
const { $api } = useNuxtApp()
@@ -488,13 +483,6 @@ export const useExtensions = createSharedComposable(() => {
// Extension market modal
const isMarketVisible = ref(false)
- const onEggClick = () => {
- extensionsEggCounter.value++
- if (extensionsEggCounter.value >= 2) {
- extensionsEgg.value = true
- }
- }
-
return {
extensionsLoaded,
availableExtensions,
@@ -514,8 +502,6 @@ export const useExtensions = createSharedComposable(() => {
detailsFrom,
showExtensionDetails,
isMarketVisible,
- onEggClick,
- extensionsEgg,
extensionPanelSize,
eventBus,
}
diff --git a/packages/nc-gui/composables/useGridViewData.ts b/packages/nc-gui/composables/useGridViewData.ts
new file mode 100644
index 0000000000..6c9efcd74c
--- /dev/null
+++ b/packages/nc-gui/composables/useGridViewData.ts
@@ -0,0 +1,303 @@
+import type { Api, ColumnType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
+import type { ComputedRef, Ref } from 'vue'
+import type { EventHook } from '@vueuse/core'
+import { NavigateDir, type Row } from '#imports'
+
+const formatData = (list: Record[], pageInfo: PaginatedType) =>
+ list.map((row, index) => ({
+ row: { ...row },
+ oldRow: { ...row },
+ rowMeta: {
+ // Calculate the rowIndex based on the offset and the index of the row
+ rowIndex: (pageInfo.page - 1) * pageInfo.pageSize + index,
+ },
+ }))
+
+export function useGridViewData(
+ _meta: Ref | ComputedRef,
+ viewMeta: Ref | ComputedRef<(ViewType & { id: string }) | undefined>,
+ where?: ComputedRef,
+ reloadVisibleDataHook?: EventHook,
+) {
+ const tablesStore = useTablesStore()
+ const { activeTableId, activeTable } = storeToRefs(tablesStore)
+
+ const meta = computed(() => _meta.value || activeTable.value)
+
+ const metaId = computed(() => _meta.value?.id || activeTableId.value)
+
+ const { t } = useI18n()
+
+ const optimisedQuery = useState('optimisedQuery', () => true)
+
+ const router = useRouter()
+
+ const route = router.currentRoute
+
+ const { appInfo, gridViewPageSize } = useGlobal()
+
+ const appInfoDefaultLimit = gridViewPageSize.value || appInfo.value.defaultLimit || 25
+
+ const _paginationData = ref({ page: 1, pageSize: appInfoDefaultLimit })
+
+ const excludePageInfo = ref(false)
+
+ const isPublic = inject(IsPublicInj, ref(false))
+
+ const { base } = storeToRefs(useBase())
+
+ const { fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
+
+ const { $api } = useNuxtApp()
+
+ const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
+
+ const { isUIAllowed } = useRoles()
+
+ const routeQuery = computed(() => route.value.query as Record)
+
+ const paginationData = computed({
+ get: () => (isPublic.value ? sharedPaginationData.value : _paginationData.value),
+ set: (value) => {
+ if (isPublic.value) {
+ sharedPaginationData.value = value
+ } else {
+ _paginationData.value = value
+ }
+ },
+ })
+
+ const {
+ insertRow,
+ updateRowProperty,
+ addEmptyRow,
+ deleteRow,
+ deleteRowById,
+ deleteSelectedRows,
+ deleteRangeOfRows,
+ updateOrSaveRow,
+ cachedRows,
+ clearCache,
+ totalRows,
+ bulkUpdateRows,
+ bulkUpdateView,
+ removeRowIfNew,
+ syncCount,
+ selectedRows,
+ chunkStates,
+ isRowSortRequiredRows,
+ clearInvalidRows,
+ applySorting,
+ } = useInfiniteData({
+ meta,
+ viewMeta,
+ callbacks: {
+ loadData,
+ syncVisibleData,
+ },
+ where,
+ })
+
+ function syncVisibleData() {
+ reloadVisibleDataHook?.trigger()
+ }
+
+ function getExpandedRowIndex(): number {
+ const rowId = routeQuery.value.rowId
+ if (!rowId) return -1
+
+ for (const [_index, row] of cachedRows.value.entries()) {
+ if (extractPkFromRow(row.row, meta.value?.columns as ColumnType[]) === rowId) {
+ return row.rowMeta.rowIndex!
+ }
+ }
+ return -1
+ }
+
+ const isLastRow = computed(() => {
+ const expandedRowIndex = getExpandedRowIndex()
+ if (expandedRowIndex === -1) return false
+
+ return expandedRowIndex === totalRows.value - 1
+ })
+
+ const isFirstRow = computed(() => {
+ const expandedRowIndex = getExpandedRowIndex()
+ if (expandedRowIndex === -1) return false
+
+ return expandedRowIndex === 0
+ })
+
+ const queryParams = computed(() => ({
+ offset: ((paginationData.value.page ?? 0) - 1) * (paginationData.value.pageSize ?? appInfoDefaultLimit),
+ limit: paginationData.value.pageSize ?? appInfoDefaultLimit,
+ where: where?.value ?? '',
+ }))
+
+ async function loadAggCommentsCount(formattedData: Array) {
+ if (!isUIAllowed('commentCount') || isPublic.value) return
+
+ const ids = formattedData
+ .filter(({ rowMeta: { new: isNew } }) => !isNew)
+ .map(({ row }) => extractPkFromRow(row, meta?.value?.columns as ColumnType[]))
+ .filter(Boolean)
+
+ if (!ids.length) return
+
+ try {
+ const aggCommentCount = await $api.utils.commentCount({
+ ids,
+ fk_model_id: metaId.value as string,
+ })
+
+ formattedData.forEach((row) => {
+ const cachedRow = Array.from(cachedRows.value.values()).find(
+ (cachedRow) => cachedRow.rowMeta.rowIndex === row.rowMeta.rowIndex,
+ )
+ if (!cachedRow) return
+
+ const id = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
+ const count = aggCommentCount?.find((c: Record) => c.row_id === id)?.count || 0
+ cachedRow.rowMeta.commentCount = +count
+ })
+ } catch (e) {
+ console.error('Failed to load aggregate comment count:', e)
+ }
+ }
+
+ async function loadData(
+ params: Parameters['dbViewRow']['list']>[4] & {
+ limit?: number
+ offset?: number
+ } = {},
+ ): Promise {
+ if ((!base?.value?.id || !metaId.value || !viewMeta.value?.id) && !isPublic.value) return
+
+ try {
+ const response = !isPublic.value
+ ? await $api.dbViewRow.list('noco', base.value.id!, metaId.value!, viewMeta.value!.id!, {
+ ...queryParams.value,
+ ...params,
+ ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
+ ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
+ where: where?.value,
+ ...(excludePageInfo.value ? { excludeCount: 'true' } : {}),
+ } as any)
+ : await fetchSharedViewData(
+ {
+ sortsArr: sorts.value,
+ filtersArr: nestedFilters.value,
+ where: where?.value,
+ offset: params.offset,
+ limit: params.limit,
+ },
+ {
+ isInfiniteScroll: true,
+ },
+ )
+
+ const data = formatData(response.list, response.pageInfo)
+
+ if (response.pageInfo.totalRows) {
+ totalRows.value = response.pageInfo.totalRows
+ }
+
+ loadAggCommentsCount(data)
+
+ return data
+ } catch (error: any) {
+ if (error?.response?.data.error === 'INVALID_OFFSET_VALUE') {
+ return []
+ }
+ if (error?.response?.data?.error === 'FORMULA_ERROR') {
+ await tablesStore.reloadTableMeta(metaId.value as string)
+ return loadData(params)
+ }
+
+ console.error(error)
+ message.error(await extractSdkResponseErrorMsg(error))
+ }
+ }
+
+ const navigateToSiblingRow = async (dir: NavigateDir) => {
+ const expandedRowIndex = getExpandedRowIndex()
+ if (expandedRowIndex === -1) return
+
+ const sortedIndices = Array.from(cachedRows.value.keys()).sort((a, b) => a - b)
+ let siblingIndex = sortedIndices.findIndex((index) => index === expandedRowIndex) + (dir === NavigateDir.NEXT ? 1 : -1)
+
+ // Skip unsaved rows
+ while (
+ siblingIndex >= 0 &&
+ siblingIndex < sortedIndices.length &&
+ cachedRows.value.get(sortedIndices[siblingIndex])?.rowMeta?.new
+ ) {
+ siblingIndex += dir === NavigateDir.NEXT ? 1 : -1
+ }
+
+ // Check if we've gone out of bounds
+ if (siblingIndex < 0 || siblingIndex >= totalRows.value) {
+ return message.info(t('msg.info.noMoreRecords'))
+ }
+
+ // If the sibling row is not in cachedRows, load more data
+ if (siblingIndex >= sortedIndices.length) {
+ await loadData({
+ offset: sortedIndices[sortedIndices.length - 1] + 1,
+ limit: 10,
+ })
+ sortedIndices.push(
+ ...Array.from(cachedRows.value.keys())
+ .filter((key) => !sortedIndices.includes(key))
+ .sort((a, b) => a - b),
+ )
+ }
+
+ // Extract the row id of the sibling row
+ const siblingRow = cachedRows.value.get(sortedIndices[siblingIndex])
+ if (siblingRow) {
+ const rowId = extractPkFromRow(siblingRow.row, meta.value?.columns as ColumnType[])
+ if (rowId) {
+ await router.push({
+ query: {
+ ...routeQuery.value,
+ rowId,
+ },
+ })
+ }
+ }
+ }
+
+ return {
+ cachedRows,
+ loadData,
+ paginationData,
+ queryParams,
+ insertRow,
+ updateRowProperty,
+ addEmptyRow,
+ deleteRow,
+ deleteRowById,
+ deleteSelectedRows,
+ deleteRangeOfRows,
+ updateOrSaveRow,
+ bulkUpdateRows,
+ bulkUpdateView,
+ loadAggCommentsCount,
+ syncCount,
+ removeRowIfNew,
+ navigateToSiblingRow,
+ getExpandedRowIndex,
+ optimisedQuery,
+ isLastRow,
+ isFirstRow,
+ clearCache,
+ totalRows,
+ selectedRows,
+ syncVisibleData,
+ chunkStates,
+ clearInvalidRows,
+ applySorting,
+ isRowSortRequiredRows,
+ }
+}
diff --git a/packages/nc-gui/composables/useInfiniteData.ts b/packages/nc-gui/composables/useInfiniteData.ts
new file mode 100644
index 0000000000..d1ab66402d
--- /dev/null
+++ b/packages/nc-gui/composables/useInfiniteData.ts
@@ -0,0 +1,1371 @@
+import type { ComputedRef, Ref } from 'vue'
+import {
+ type Api,
+ type ColumnType,
+ type LinkToAnotherRecordType,
+ type RelationTypes,
+ type TableType,
+ UITypes,
+ type ViewType,
+ extractFilterFromXwhere,
+ isCreatedOrLastModifiedByCol,
+ isCreatedOrLastModifiedTimeCol,
+} from 'nocodb-sdk'
+import type { Row } from '../lib/types'
+import { validateRowFilters } from '../utils/dataUtils'
+import type { CellRange } from './useMultiSelect/cellRange'
+
+export function useInfiniteData(args: {
+ meta: Ref | ComputedRef
+ viewMeta: Ref | ComputedRef<(ViewType & { id: string }) | undefined>
+ callbacks: {
+ loadData?: (
+ params: Parameters['dbViewRow']['list']>[4] & {
+ limit?: number
+ offset?: number
+ },
+ ) => Promise
+ syncVisibleData?: () => void
+ }
+ where?: ComputedRef
+}) {
+ const { meta, viewMeta, callbacks, where } = args
+
+ const NOCO = 'noco'
+
+ const { $api } = useNuxtApp()
+
+ const { addUndo, clone, defineViewScope } = useUndoRedo()
+
+ const { t } = useI18n()
+
+ const { fetchCount } = useSharedView()
+
+ const { getBaseType } = useBase()
+
+ const { getMeta, metas } = useMetas()
+
+ const { base } = storeToRefs(useBase())
+
+ const isPublic = inject(IsPublicInj, ref(false))
+
+ const reloadAggregate = inject(ReloadAggregateHookInj)
+
+ const { nestedFilters, allFilters, xWhere, sorts } = useSmartsheetStoreOrThrow()
+
+ const columnsByAlias = computed(() => {
+ if (!meta.value?.columns?.length) return {}
+ return meta.value?.columns.reduce((acc, column) => {
+ acc[column.title!] = column
+ return acc
+ }, {} as Record)
+ })
+ const columnsById = computed(() => {
+ if (!meta.value?.columns?.length) return {}
+ return meta.value?.columns.reduce((acc, column) => {
+ acc[column.id!] = column
+ return acc
+ }, {} as Record)
+ })
+
+ const computedWhereFilter = computed(() => {
+ const filter = extractFilterFromXwhere(xWhere.value ?? '', columnsByAlias.value)
+
+ return filter.map((f) => {
+ return { ...f, value: f.value ? f.value?.toString().replace(/(^%)(.*?)(%$)/, '$2') : f.value }
+ })
+ })
+
+ const cachedRows = ref>(new Map())
+
+ const totalRows = ref(0)
+
+ const MAX_CACHE_SIZE = 200
+
+ const CHUNK_SIZE = 50
+
+ const chunkStates = ref>([])
+
+ const getChunkIndex = (rowIndex: number) => Math.floor(rowIndex / CHUNK_SIZE)
+
+ const fetchChunk = async (chunkId: number) => {
+ if (chunkStates.value[chunkId]) return
+
+ if (!callbacks?.loadData) return
+
+ chunkStates.value[chunkId] = 'loading'
+ const offset = chunkId * CHUNK_SIZE
+
+ try {
+ const newItems = await callbacks.loadData({ offset, limit: CHUNK_SIZE })
+ if (!newItems) {
+ chunkStates.value[chunkId] = undefined
+ return
+ }
+ newItems.forEach((item) => {
+ cachedRows.value.set(item.rowMeta.rowIndex!, item)
+ })
+ chunkStates.value[chunkId] = 'loaded'
+ } catch (error) {
+ console.error('Error fetching chunk:', error)
+ chunkStates.value[chunkId] = undefined
+ }
+ }
+
+ const clearCache = (visibleStartIndex: number, visibleEndIndex: number) => {
+ if (visibleEndIndex === Number.POSITIVE_INFINITY && visibleStartIndex === Number.NEGATIVE_INFINITY) {
+ cachedRows.value.clear()
+ chunkStates.value = []
+ return
+ }
+
+ if (cachedRows.value.size <= MAX_CACHE_SIZE) return
+
+ const safeStartIndex = Math.max(0, visibleStartIndex)
+ const safeEndIndex = Math.min(totalRows.value - 1, visibleEndIndex)
+ const safeStartChunk = getChunkIndex(safeStartIndex)
+ const safeEndChunk = getChunkIndex(safeEndIndex)
+
+ const newCachedRows = new Map()
+
+ for (let chunk = 0; chunk <= Math.max(...Array.from(cachedRows.value.keys()).map(getChunkIndex)); chunk++) {
+ const isVisibleChunk = chunk >= safeStartChunk && chunk <= safeEndChunk
+ const chunkStart = chunk * CHUNK_SIZE
+ const chunkEnd = chunkStart + CHUNK_SIZE
+
+ const hasImportantRows = Array.from(cachedRows.value)
+ .filter(([index]) => index >= chunkStart && index < chunkEnd)
+ .some(([_, row]) => row.rowMeta.selected || row.rowMeta.new)
+
+ if (isVisibleChunk || hasImportantRows) {
+ for (let i = chunkStart; i < chunkEnd; i++) {
+ const row = cachedRows.value.get(i)
+ if (row) newCachedRows.set(i, row)
+ }
+ }
+ }
+
+ cachedRows.value = newCachedRows
+ chunkStates.value = chunkStates.value.map((state, chunk) =>
+ chunk >= safeStartChunk && chunk <= safeEndChunk ? state : undefined,
+ )
+ }
+
+ const selectedRows = computed(() => {
+ return Array.from(cachedRows.value.values()).filter((row) => row.rowMeta?.selected)
+ })
+
+ const isRowSortRequiredRows = computed(() => {
+ return Array.from(cachedRows.value.values()).filter((row) => row.rowMeta?.isRowOrderUpdated)
+ })
+
+ function clearInvalidRows() {
+ const sortedEntries = Array.from(cachedRows.value.entries()).sort(([indexA], [indexB]) => indexA - indexB)
+
+ const invalidIndexes = sortedEntries.filter(([_, row]) => row.rowMeta.isValidationFailed).map(([index]) => index)
+
+ if (invalidIndexes.length === 0) return
+
+ for (const index of invalidIndexes) {
+ cachedRows.value.delete(index)
+ }
+
+ const newCachedRows = new Map()
+
+ for (const [oldIndex, row] of sortedEntries) {
+ if (!invalidIndexes.includes(oldIndex)) {
+ const newIndex = oldIndex - invalidIndexes.filter((i) => i < oldIndex).length
+ newCachedRows.set(newIndex, row)
+ }
+ }
+
+ chunkStates.value[getChunkIndex(Math.max(...invalidIndexes))] = undefined
+
+ cachedRows.value = newCachedRows
+
+ totalRows.value = Math.max(0, (totalRows.value || 0) - invalidIndexes.length)
+
+ callbacks?.syncVisibleData?.()
+ }
+
+ const willSortOrderChange = ({ row, newData }: { row: Row; newData: Record }): boolean => {
+ if (!sorts.value.length) return false
+
+ const currentIndex = row.rowMeta.rowIndex!
+ if (currentIndex === undefined) return true
+
+ const indices = Array.from(cachedRows.value.keys()).sort((a, b) => a - b)
+ const currentPos = indices.indexOf(currentIndex)
+ const prevRow = currentPos > 0 ? cachedRows.value.get(indices[currentPos - 1]) : null
+ const nextRow = currentPos < indices.length - 1 ? cachedRows.value.get(indices[currentPos + 1]) : null
+
+ const updatedRow = {
+ ...row,
+ row: {
+ ...row.row,
+ ...newData,
+ },
+ }
+
+ if (prevRow) {
+ let shouldBeBefore = false
+ let isDifferent = false
+
+ for (const sort of sorts.value) {
+ const column = columnsById.value[sort.fk_column_id!]
+ if (!column?.title) continue
+
+ const direction = sort.direction || 'asc'
+ const comparison = sortByUIType({
+ uidt: column.uidt as UITypes,
+ a: updatedRow.row[column.title],
+ b: prevRow.row[column.title],
+ options: { direction },
+ })
+
+ if (comparison !== 0) {
+ isDifferent = true
+ shouldBeBefore = comparison < 0
+ break
+ }
+ }
+
+ if (isDifferent && shouldBeBefore) return true
+ }
+
+ if (nextRow) {
+ let shouldBeAfter = false
+ let isDifferent = false
+
+ for (const sort of sorts.value) {
+ const column = columnsById.value[sort.fk_column_id!]
+ if (!column?.title) continue
+
+ const direction = sort.direction || 'asc'
+ const comparison = sortByUIType({
+ uidt: column.uidt as UITypes,
+ a: updatedRow.row[column.title],
+ b: nextRow.row[column.title],
+ options: { direction },
+ })
+
+ if (comparison !== 0) {
+ isDifferent = true
+ shouldBeAfter = comparison > 0
+ break
+ }
+ }
+
+ if (isDifferent && shouldBeAfter) return true
+ }
+
+ return false
+ }
+
+ const getContinuousRanges = (cachedRows: Map) => {
+ const indexes = Array.from(cachedRows.keys()).sort((a, b) => a - b)
+ const ranges: { start: number; end: number }[] = []
+
+ let rangeStart = indexes[0]
+ let prev = indexes[0]
+
+ for (let i = 1; i <= indexes.length; i++) {
+ const current = indexes[i]
+ if (current !== prev + 1) {
+ ranges.push({ start: rangeStart, end: prev })
+ rangeStart = current
+ }
+ prev = current
+ }
+
+ return ranges
+ }
+
+ const applySorting = (rows: Row | Row[]) => {
+ if (!sorts.value.length) return
+ const orderedSorts = sorts.value.sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+ const inputRows = Array.isArray(rows) ? rows : [rows]
+ const ranges = getContinuousRanges(cachedRows.value)
+
+ inputRows.forEach((inputRow) => {
+ const originalIndex = inputRow.rowMeta.rowIndex!
+ const sourceRange = ranges.find((r) => originalIndex >= r.start && originalIndex <= r.end)
+ if (!sourceRange) return
+
+ const rangeEntries = Array.from(cachedRows.value.entries())
+ .filter(([index]) => index >= sourceRange.start && index <= sourceRange.end)
+ .map(([index, row]) => ({
+ currentIndex: index,
+ row,
+ pk: extractPkFromRow(row.row, meta.value?.columns),
+ }))
+
+ const sortedRangeEntries = rangeEntries.sort((a, b) => {
+ for (const sort of orderedSorts) {
+ const column = columnsById.value[sort.fk_column_id!]?.title
+ if (!column) continue
+
+ const direction = sort.direction || 'asc'
+ const comparison = sortByUIType({
+ uidt: columnsById.value[sort.fk_column_id!].uidt as UITypes,
+ a: a.row.row[column],
+ b: b.row.row[column],
+ options: { direction },
+ })
+
+ if (comparison !== 0) return comparison
+ }
+ return a.currentIndex - b.currentIndex
+ })
+
+ const entry = sortedRangeEntries.find((e) => e.pk === extractPkFromRow(inputRow.row, meta.value?.columns))
+
+ if (!entry) return
+
+ const targetIndex = sourceRange.start + sortedRangeEntries.indexOf(entry)
+
+ const newCachedRows = new Map(cachedRows.value)
+
+ if (targetIndex !== originalIndex) {
+ if (targetIndex < originalIndex) {
+ for (let i = originalIndex - 1; i >= targetIndex; i--) {
+ const row = newCachedRows.get(i)
+ if (row) {
+ row.rowMeta.rowIndex = i + 1
+ row.rowMeta.isRowOrderUpdated = false
+ newCachedRows.set(i + 1, row)
+ }
+ }
+ } else {
+ for (let i = originalIndex + 1; i <= targetIndex; i++) {
+ const row = newCachedRows.get(i)
+ if (row) {
+ row.rowMeta.rowIndex = i - 1
+ row.rowMeta.isRowOrderUpdated = false
+ newCachedRows.set(i - 1, row)
+ }
+ }
+ }
+
+ // Place the input row at its new position
+ inputRow.rowMeta.rowIndex = targetIndex
+ inputRow.rowMeta.isRowOrderUpdated = false
+ newCachedRows.set(targetIndex, inputRow)
+
+ const targetChunkIndex = getChunkIndex(targetIndex)
+
+ if (targetIndex <= sourceRange.start || targetIndex >= sourceRange.end) {
+ if (targetIndex <= sourceRange.start) {
+ for (let i = 0; i <= targetChunkIndex; i++) {
+ chunkStates.value[i] = undefined
+ }
+ } else if (targetIndex >= sourceRange.end) {
+ for (let i = targetChunkIndex; i <= getChunkIndex(totalRows.value - 1); i++) {
+ chunkStates.value[i] = undefined
+ }
+ }
+ }
+ }
+
+ cachedRows.value = newCachedRows
+ })
+
+ callbacks?.syncVisibleData?.()
+ }
+
+ function addEmptyRow(newRowIndex = totalRows.value, metaValue = meta.value) {
+ if (cachedRows.value.has(newRowIndex)) {
+ const entriesToShift = Array.from(cachedRows.value.entries())
+ .filter(([index]) => index >= newRowIndex)
+ .sort((a, b) => b[0] - a[0])
+
+ for (const [index, rowData] of entriesToShift) {
+ const shiftedRowData = {
+ ...rowData,
+ rowMeta: {
+ ...rowData.rowMeta,
+ rowIndex: index + 1,
+ },
+ }
+ cachedRows.value.set(index + 1, shiftedRowData)
+ }
+ }
+
+ const newRow = {
+ row: { ...rowDefaultData(metaValue?.columns) },
+ oldRow: {},
+ rowMeta: { new: true, rowIndex: newRowIndex },
+ }
+ cachedRows.value.set(newRowIndex, newRow)
+
+ totalRows.value++
+ callbacks?.syncVisibleData?.()
+
+ return newRow
+ }
+
+ const linkRecord = async (
+ rowId: string,
+ relatedRowId: string,
+ column: ColumnType,
+ type: RelationTypes,
+ { metaValue = meta.value }: { metaValue?: TableType } = {},
+ ): Promise => {
+ try {
+ await $api.dbTableRow.nestedAdd(
+ NOCO,
+ base.value.id as string,
+ metaValue?.id as string,
+ encodeURIComponent(rowId),
+ type,
+ column.title as string,
+ encodeURIComponent(relatedRowId),
+ )
+ } catch (e: any) {
+ const errorMessage = await extractSdkResponseErrorMsg(e)
+ message.error(`Failed to link record: ${errorMessage}`)
+ throw e
+ }
+ callbacks?.syncVisibleData?.()
+ }
+
+ const recoverLTARRefs = async (row: Record, { metaValue = meta.value }: { metaValue?: TableType } = {}) => {
+ const id = extractPkFromRow(row, metaValue?.columns as ColumnType[])
+
+ if (!id) return
+
+ for (const column of metaValue?.columns ?? []) {
+ if (column.uidt !== UITypes.LinkToAnotherRecord) continue
+
+ const colOptions = column.colOptions as LinkToAnotherRecordType
+
+ const relatedTableMeta = metas.value?.[colOptions?.fk_related_model_id as string]
+
+ if (isHm(column) || isMm(column)) {
+ const relatedRows = (row[column.title!] ?? []) as Record[]
+
+ for (const relatedRow of relatedRows) {
+ const relatedId = extractPkFromRow(relatedRow, relatedTableMeta?.columns as ColumnType[])
+ if (relatedId) {
+ await linkRecord(id, relatedId, column, colOptions.type as RelationTypes, { metaValue: relatedTableMeta })
+ }
+ }
+ } else if (isBt(column) && row[column.title!]) {
+ const relatedId = extractPkFromRow(row[column.title!] as Record, relatedTableMeta.columns as ColumnType[])
+
+ if (relatedId) {
+ await linkRecord(id, relatedId, column, colOptions.type as RelationTypes, { metaValue: relatedTableMeta })
+ }
+ }
+ }
+ callbacks?.syncVisibleData?.()
+ }
+
+ async function deleteRow(rowIndex: number, undo = false) {
+ try {
+ const row = cachedRows.value.get(rowIndex)
+ if (!row) return
+
+ if (!row.rowMeta.new) {
+ const id = meta?.value?.columns
+ ?.filter((c) => c.pk)
+ .map((c) => row.row[c.title!])
+ .join('___')
+
+ const fullRecord = await $api.dbTableRow.read(
+ NOCO,
+ base?.value.id as string,
+ meta.value?.id as string,
+ encodeURIComponent(id as string),
+ {
+ getHiddenColumn: true,
+ },
+ )
+
+ const deleted = await deleteRowById(id as string)
+ if (!deleted) {
+ return
+ }
+
+ row.row = fullRecord
+
+ if (!undo) {
+ addUndo({
+ undo: {
+ fn: async (row: Row, ltarState: Record) => {
+ const pkData = rowPkData(row.row, meta?.value?.columns as ColumnType[])
+
+ row.row = { ...pkData, ...row.row }
+
+ await insertRow(row, ltarState, {}, true)
+
+ await recoverLTARRefs(row.row)
+ },
+ args: [clone(row), {}],
+ },
+ redo: {
+ fn: async (rowIndex: number) => {
+ await deleteRow(rowIndex)
+ },
+ args: [rowIndex],
+ },
+ scope: defineViewScope({ view: viewMeta.value }),
+ })
+ }
+ }
+
+ cachedRows.value.delete(rowIndex)
+
+ const rows = Array.from(cachedRows.value.entries())
+ const rowsToShift = rows.filter(([index]) => index > rowIndex)
+ rowsToShift.sort((a, b) => a[0] - b[0])
+
+ for (const [index, row] of rowsToShift) {
+ const newIndex = index - 1
+ row.rowMeta.rowIndex = newIndex
+ cachedRows.value.delete(index)
+ cachedRows.value.set(newIndex, row)
+ }
+
+ if (rowsToShift.length) {
+ chunkStates.value[getChunkIndex(rowsToShift[rowsToShift.length - 1][0])] = undefined
+ }
+
+ totalRows.value = (totalRows.value || 0) - 1
+
+ await syncCount()
+ callbacks?.syncVisibleData?.()
+ } catch (e: any) {
+ message.error(`${t('msg.error.deleteRowFailed')}: ${await extractSdkResponseErrorMsg(e)}`)
+ }
+ }
+
+ async function deleteSelectedRows(): Promise {
+ const removedRowsData: Record[] = []
+ let compositePrimaryKey = ''
+
+ for (const row of selectedRows.value) {
+ const { row: rowData, rowMeta } = row
+
+ if (!rowMeta.selected || rowMeta.new) {
+ continue
+ }
+
+ const extractedPk = extractPk(meta?.value?.columns as ColumnType[])
+ const compositePkValue = extractPkFromRow(rowData, meta?.value?.columns as ColumnType[]) as string
+ const pkData = rowPkData(rowData, meta?.value?.columns as ColumnType[])
+
+ if (extractedPk && compositePkValue) {
+ if (!compositePrimaryKey) compositePrimaryKey = extractedPk
+ removedRowsData.push({
+ [compositePrimaryKey]: compositePkValue as string,
+ pkData,
+ row: clone(row.row),
+ rowMeta,
+ })
+ }
+ }
+
+ if (!removedRowsData.length) return
+
+ try {
+ const { list } = await $api.dbTableRow.list(NOCO, base?.value.id as string, meta.value?.id as string, {
+ pks: removedRowsData.map((row) => row[compositePrimaryKey]).join(','),
+ })
+
+ for (const deleteRow of removedRowsData) {
+ const rowObj = deleteRow.row
+ const rowPk = rowPkData(rowObj.row, meta.value?.columns as ColumnType[])
+
+ const fullRecord = list.find((r: Record) => {
+ return Object.keys(rowPk).every((key) => r[key] === rowPk[key])
+ })
+
+ if (!fullRecord) continue
+ rowObj.row = clone(fullRecord)
+ }
+
+ await bulkDeleteRows(removedRowsData.map((row) => row.pkData))
+ } catch (e: any) {
+ const errorMessage = await extractSdkResponseErrorMsg(e)
+ return message.error(`${t('msg.error.deleteRowFailed')}: ${errorMessage}`)
+ }
+
+ await updateCacheAfterDelete(removedRowsData, false)
+
+ addUndo({
+ undo: {
+ fn: async (removedRowsData: Record[]) => {
+ const rowsToInsert = removedRowsData
+ .map((row) => {
+ const pkData = rowPkData(row.row, meta.value?.columns as ColumnType[])
+ row.row = { ...pkData, ...row.row }
+ return row
+ })
+ .reverse()
+
+ const insertedRowIds = await bulkInsertRows(rowsToInsert as Row[], undefined, true)
+
+ if (Array.isArray(insertedRowIds)) {
+ await Promise.all(rowsToInsert.map((row, _index) => recoverLTARRefs(row.row)))
+ }
+ },
+ args: [removedRowsData],
+ },
+ redo: {
+ fn: async (toBeRemovedData: Record[]) => {
+ await bulkDeleteRows(toBeRemovedData.map((row) => row.pkData))
+
+ await updateCacheAfterDelete(toBeRemovedData, false)
+
+ await syncCount()
+ },
+ args: [removedRowsData],
+ },
+ scope: defineViewScope({ view: viewMeta.value }),
+ })
+
+ await syncCount()
+ }
+
+ async function insertRow(
+ currentRow: Row,
+ ltarState: Record = {},
+ { metaValue = meta.value, viewMetaValue = viewMeta.value }: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
+ undo = false,
+ ignoreShifting = false,
+ ): Promise | undefined> {
+ if (!currentRow.rowMeta) {
+ throw new Error('Row metadata is missing')
+ }
+
+ currentRow.rowMeta.saving = true
+
+ try {
+ const { missingRequiredColumns, insertObj } = await populateInsertObject({
+ meta: metaValue!,
+ ltarState,
+ getMeta,
+ row: currentRow.row,
+ undo,
+ })
+
+ if (missingRequiredColumns.size) {
+ return
+ }
+
+ const insertedData = await $api.dbViewRow.create(
+ NOCO,
+ base?.value.id as string,
+ metaValue?.id as string,
+ viewMetaValue?.id as string,
+ { ...insertObj, ...(ltarState || {}) },
+ )
+
+ currentRow.rowMeta.new = false
+
+ Object.assign(currentRow.row, insertedData)
+
+ const insertIndex = currentRow.rowMeta.rowIndex!
+
+ if (!undo) {
+ Object.assign(currentRow.oldRow, insertedData)
+
+ const id = extractPkFromRow(insertedData, metaValue!.columns as ColumnType[])
+ const pkData = rowPkData(insertedData, metaValue?.columns as ColumnType[])
+
+ addUndo({
+ undo: {
+ fn: async (
+ id: string,
+ tempLocalCache: Map,
+ tempTotalRows: number,
+ tempChunkStates: Array<'loading' | 'loaded' | undefined>,
+ ) => {
+ cachedRows.value = new Map(tempLocalCache)
+ totalRows.value = tempTotalRows
+ chunkStates.value = tempChunkStates
+
+ await deleteRowById(id)
+ cachedRows.value.delete(insertIndex)
+
+ for (const [index, row] of cachedRows.value) {
+ if (index > insertIndex) {
+ row.rowMeta.rowIndex = index - 1
+ cachedRows.value.set(index - 1, row)
+ }
+ }
+ totalRows.value = totalRows.value! - 1
+ callbacks?.syncVisibleData?.()
+ },
+ args: [id, clone(new Map(cachedRows.value)), clone(totalRows.value), clone(chunkStates.value)],
+ },
+ redo: {
+ fn: async (
+ row: Row,
+ ltarState: Record,
+ tempLocalCache: Map,
+ tempTotalRows: number,
+ tempChunkStates: Array<'loading' | 'loaded' | undefined>,
+ ) => {
+ cachedRows.value = new Map(tempLocalCache)
+ totalRows.value = tempTotalRows
+ chunkStates.value = tempChunkStates
+
+ row.row = { ...pkData, ...row.row }
+ const newData = await insertRow(row, ltarState, undefined, true)
+
+ const needsResorting = willSortOrderChange({
+ row,
+ newData,
+ sorts: sorts.value,
+ columnsById: columnsById.value,
+ cachedRows: cachedRows.value,
+ })
+
+ if (needsResorting) {
+ const newRow = cachedRows.value.get(row.rowMeta.rowIndex!)
+ if (newRow) newRow.rowMeta.isRowOrderUpdated = needsResorting
+ }
+
+ callbacks?.syncVisibleData?.()
+ },
+ args: [
+ clone(currentRow),
+ clone(ltarState),
+ clone(new Map(cachedRows.value)),
+ clone(totalRows.value),
+ clone(chunkStates.value),
+ ],
+ },
+ scope: defineViewScope({ view: viewMeta.value }),
+ })
+ }
+
+ if (cachedRows.value.has(insertIndex) && !ignoreShifting) {
+ const rows = Array.from(cachedRows.value.entries())
+ const rowsToShift = rows.filter(([index]) => index >= insertIndex)
+ rowsToShift.sort((a, b) => b[0] - a[0]) // Sort in descending order
+
+ for (const [index, row] of rowsToShift) {
+ row.rowMeta.rowIndex = index + 1
+ cachedRows.value.set(index + 1, row)
+ }
+ }
+
+ cachedRows.value.set(insertIndex, currentRow)
+
+ if (!ignoreShifting) {
+ totalRows.value++
+ }
+
+ reloadAggregate?.trigger()
+ callbacks?.syncVisibleData?.()
+
+ return insertedData
+ } catch (error: any) {
+ const errorMessage = await extractSdkResponseErrorMsg(error)
+ message.error(`Failed to insert row: ${errorMessage}`)
+ throw error
+ } finally {
+ currentRow.rowMeta.saving = false
+ }
+ }
+
+ async function bulkInsertRows(
+ rows: Row[],
+ { metaValue = meta.value, viewMetaValue = viewMeta.value }: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
+ undo = false,
+ ): Promise {
+ if (!metaValue || !viewMetaValue) {
+ throw new Error('Meta value or view meta value is undefined')
+ }
+
+ const autoGeneratedKeys = new Set(
+ metaValue.columns
+ ?.filter((c) => !c.pk && (isCreatedOrLastModifiedTimeCol(c) || isCreatedOrLastModifiedByCol(c)))
+ .map((c) => c.title),
+ )
+
+ try {
+ const rowsToInsert = await Promise.all(
+ rows.map(async (currentRow) => {
+ const { missingRequiredColumns, insertObj } = await populateInsertObject({
+ meta: metaValue,
+ ltarState: {},
+ getMeta,
+ row: currentRow.row,
+ undo,
+ })
+
+ if (missingRequiredColumns.size === 0) {
+ for (const key of autoGeneratedKeys) {
+ delete insertObj[key!]
+ }
+ return { insertObj, rowIndex: currentRow.rowMeta.rowIndex }
+ }
+ return null
+ }),
+ )
+
+ const validRowsToInsert = rowsToInsert.filter(Boolean) as { insertObj: Record; rowIndex: number }[]
+
+ const bulkInsertedIds = await $api.dbDataTableRow.create(
+ metaValue.id!,
+ validRowsToInsert.map((row) => row!.insertObj),
+ {
+ viewId: viewMetaValue.id,
+ },
+ )
+
+ validRowsToInsert.sort((a, b) => (a!.rowIndex ?? 0) - (b!.rowIndex ?? 0))
+
+ const newCachedRows = new Map()
+
+ for (const [index, row] of cachedRows.value) {
+ newCachedRows.set(index, { ...row, rowMeta: { ...row.rowMeta, rowIndex: index } })
+ }
+
+ for (const { insertObj, rowIndex } of validRowsToInsert) {
+ // If there's already a row at this index, shift it and all subsequent rows
+ if (newCachedRows.has(rowIndex!)) {
+ const rowsToShift = Array.from(newCachedRows.entries())
+ .filter(([index]) => index >= rowIndex!)
+ .sort((a, b) => b[0] - a[0]) // Sort in descending order
+
+ for (const [index, row] of rowsToShift) {
+ const newIndex = index + 1
+ newCachedRows.set(newIndex, { ...row, rowMeta: { ...row.rowMeta, rowIndex: newIndex } })
+ }
+ }
+
+ const newRow = {
+ row: { ...insertObj, id: bulkInsertedIds[validRowsToInsert.indexOf({ insertObj, rowIndex })] },
+ oldRow: {},
+ rowMeta: { rowIndex: rowIndex!, new: false },
+ }
+ newCachedRows.set(rowIndex!, newRow)
+ }
+
+ cachedRows.value = newCachedRows
+
+ totalRows.value += validRowsToInsert.length
+
+ await syncCount()
+ callbacks?.syncVisibleData?.()
+
+ return bulkInsertedIds
+ } catch (error: any) {
+ const errorMessage = await extractSdkResponseErrorMsg(error)
+ message.error(`Failed to bulk insert rows: ${errorMessage}`)
+ throw error
+ }
+ }
+
+ async function updateRowProperty(
+ toUpdate: Row,
+ property: string,
+ { metaValue = meta.value, viewMetaValue = viewMeta.value }: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
+ undo = false,
+ ): Promise | undefined> {
+ if (!toUpdate.rowMeta) {
+ throw new Error('Row metadata is missing')
+ }
+
+ toUpdate.rowMeta.saving = true
+
+ try {
+ const id = extractPkFromRow(toUpdate.row, metaValue?.columns as ColumnType[])
+
+ const updatedRowData: Record = await $api.dbViewRow.update(
+ NOCO,
+ base?.value.id as string,
+ metaValue?.id as string,
+ viewMetaValue?.id as string,
+ id,
+ {
+ [property]: toUpdate.row[property] ?? null,
+ },
+ )
+
+ if (!undo) {
+ addUndo({
+ undo: {
+ fn: async (toUpdate: Row, property: string, previousCache: Map, tempTotalRows: number) => {
+ cachedRows.value = new Map(previousCache)
+ totalRows.value = tempTotalRows
+
+ await updateRowProperty(
+ { row: toUpdate.oldRow, oldRow: toUpdate.row, rowMeta: toUpdate.rowMeta },
+ property,
+ undefined,
+ true,
+ )
+ },
+ args: [clone(toUpdate), property, clone(new Map(cachedRows.value)), clone(totalRows.value)],
+ },
+ redo: {
+ fn: async (toUpdate: Row, property: string) => {
+ await updateRowProperty(toUpdate, property, undefined, true)
+ },
+ args: [clone(toUpdate), property],
+ },
+ scope: defineViewScope({ view: viewMeta.value }),
+ })
+ }
+
+ // Update specific columns based on their types
+ const columnsToUpdate = new Set([
+ UITypes.Formula,
+ UITypes.QrCode,
+ UITypes.Barcode,
+ UITypes.Rollup,
+ UITypes.Checkbox,
+ UITypes.User,
+ UITypes.LastModifiedTime,
+ UITypes.LastModifiedBy,
+ UITypes.Lookup,
+ UITypes.Button,
+ UITypes.Attachment,
+ ])
+
+ metaValue?.columns?.forEach((col: ColumnType) => {
+ if (
+ col.title &&
+ col.title in updatedRowData &&
+ (columnsToUpdate.has(col.uidt as UITypes) ||
+ col.au ||
+ (isValidValue(col?.cdf) && / on update /i.test(col.cdf as string)))
+ ) {
+ toUpdate.row[col.title] = updatedRowData[col.title]
+ }
+ })
+
+ Object.assign(toUpdate.oldRow, updatedRowData)
+
+ // Update the row in cachedRows
+ if (toUpdate.rowMeta.rowIndex !== undefined) {
+ cachedRows.value.set(toUpdate.rowMeta.rowIndex, toUpdate)
+ }
+
+ reloadAggregate?.trigger({ fields: [{ title: property }] })
+
+ callbacks?.syncVisibleData?.()
+
+ if (undo) {
+ applySorting(toUpdate)
+ }
+
+ return updatedRowData
+ } catch (e: any) {
+ toUpdate.row[property] = toUpdate.oldRow[property]
+ const errorMessage = await extractSdkResponseErrorMsg(e)
+ message.error(`${t('msg.error.rowUpdateFailed')}: ${errorMessage}`)
+ throw e
+ } finally {
+ toUpdate.rowMeta.saving = false
+ }
+ }
+
+ async function updateOrSaveRow(
+ row: Row,
+ property?: string,
+ ltarState?: Record,
+ args: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
+ ): Promise {
+ if (!row.rowMeta) {
+ throw new Error('Row metadata is missing')
+ }
+
+ row.rowMeta.changed = false
+
+ await until(() => !(row.rowMeta?.new && row.rowMeta?.saving)).toMatch((v) => v)
+ let data
+
+ if (row.rowMeta.new) {
+ data = await insertRow(row, ltarState, args, false, true)
+ } else if (property) {
+ data = await updateRowProperty(row, property, args)
+ }
+ row.rowMeta.isValidationFailed = !validateRowFilters(
+ [...allFilters.value, ...computedWhereFilter.value],
+ data,
+ meta.value?.columns as ColumnType[],
+ getBaseType(viewMeta.value?.view.source_id),
+ )
+
+ const changedFields = property ? [property] : Object.keys(row.row)
+
+ changedFields.push(
+ ...(meta.value
+ ?.columns!.filter((c) =>
+ [
+ UITypes.LastModifiedBy,
+ UITypes.LastModifiedTime,
+ UITypes.Formula,
+ UITypes.Lookup,
+ UITypes.Rollup,
+ UITypes.LinkToAnotherRecord,
+ ].includes(c.uidt as UITypes),
+ )
+ .map((c) => c.title!) || []),
+ )
+
+ if (isSortRelevantChange(changedFields, sorts.value, columnsById.value)) {
+ const needsResorting = willSortOrderChange({
+ row,
+ newData: data,
+ sorts: sorts.value,
+ columnsById: columnsById.value,
+ cachedRows: cachedRows.value,
+ })
+
+ const newRow = cachedRows.value.get(row.rowMeta.rowIndex!)
+ if (newRow) newRow.rowMeta.isRowOrderUpdated = needsResorting
+ }
+ }
+
+ async function bulkUpdateRows(
+ rows: Row[],
+ props: string[],
+ { metaValue = meta.value }: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
+ undo = false,
+ ): Promise {
+ await Promise.all(
+ rows.map(async (row) => {
+ if (row.rowMeta) {
+ row.rowMeta.changed = false
+ await until(() => !(row.rowMeta?.new && row.rowMeta?.saving)).toMatch((v) => v)
+ row.rowMeta.saving = true
+ }
+ }),
+ )
+
+ const updateArray = rows.map((row) => {
+ const pk = rowPkData(row.row, metaValue?.columns as ColumnType[])
+ const updateData = props.reduce((acc, prop) => ({ ...acc, [prop]: row.row[prop] }), {})
+ return { ...updateData, ...pk }
+ })
+
+ try {
+ await $api.dbTableRow.bulkUpdate(NOCO, metaValue?.base_id as string, metaValue?.id as string, updateArray)
+ reloadAggregate?.trigger({ fields: props.map((p) => ({ title: p })) })
+
+ // Update cachedRows with the updated data
+ rows.forEach((row) => {
+ if (row.rowMeta.rowIndex !== undefined) {
+ cachedRows.value.set(row.rowMeta.rowIndex, row)
+ }
+ })
+ } finally {
+ rows.forEach((row) => {
+ if (row.rowMeta) row.rowMeta.saving = false
+ })
+ }
+
+ callbacks?.syncVisibleData?.()
+
+ if (!undo) {
+ addUndo({
+ undo: {
+ fn: async (undoRows: Row[], props: string[]) => {
+ await bulkUpdateRows(undoRows, props, undefined, true)
+ },
+ args: [clone(rows.map((row) => ({ row: row.oldRow, oldRow: row.row, rowMeta: row.rowMeta }))), props],
+ },
+ redo: {
+ fn: async (redoRows: Row[], props: string[]) => {
+ await bulkUpdateRows(redoRows, props, undefined, true)
+ },
+ args: [clone(rows), props],
+ },
+ scope: defineViewScope({ view: viewMeta.value }),
+ })
+ }
+
+ applySorting(rows)
+ }
+
+ async function bulkUpdateView(
+ data: Record[],
+ { metaValue = meta.value, viewMetaValue = viewMeta.value }: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
+ ): Promise {
+ if (!viewMetaValue) {
+ throw new Error('View meta value is missing')
+ }
+
+ await $api.dbTableRow.bulkUpdateAll(NOCO, metaValue?.base_id as string, metaValue?.id as string, data, {
+ viewId: viewMetaValue.id,
+ })
+
+ reloadAggregate?.trigger()
+ callbacks?.syncVisibleData?.()
+ }
+
+ async function deleteRowById(
+ id: string,
+ { metaValue = meta.value, viewMetaValue = viewMeta.value }: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
+ ): Promise {
+ if (!id) {
+ throw new Error("Delete not allowed for table which doesn't have primary Key")
+ }
+
+ try {
+ const res: any = await $api.dbViewRow.delete(
+ 'noco',
+ base.value.id as string,
+ metaValue?.id as string,
+ viewMetaValue?.id as string,
+ encodeURIComponent(id),
+ )
+
+ reloadAggregate?.trigger()
+
+ if (res.message) {
+ const errorMessage = `Unable to delete record with ID ${id} because of the following:\n${res.message.join(
+ '\n',
+ )}.\nClear the data first & try again`
+ message.info(`Record delete failed: ${errorMessage}`)
+ return false
+ }
+
+ return true
+ } catch (error: any) {
+ const errorMessage = await extractSdkResponseErrorMsg(error)
+ message.error(`${t('msg.error.deleteRowFailed')}: ${errorMessage}`)
+ return false
+ }
+ }
+
+ const fetchMissingChunks = async (startIndex: number, endIndex: number) => {
+ const firstChunkId = getChunkIndex(startIndex)
+ const lastChunkId = getChunkIndex(endIndex)
+
+ const chunksToFetch = Array.from({ length: lastChunkId - firstChunkId + 1 }, (_, i) => firstChunkId + i).filter(
+ (chunkId) => !chunkStates.value[chunkId],
+ )
+
+ await Promise.all(chunksToFetch.map(fetchChunk))
+ }
+
+ async function updateCacheAfterDelete(rowsToDelete: Record[], nested = true): Promise {
+ const maxCachedIndex = Math.max(...cachedRows.value.keys())
+ const newCachedRows = new Map()
+
+ const deleteSet = new Set(rowsToDelete.map((row) => (nested ? row.row : row).rowMeta.rowIndex))
+
+ let deletionCount = 0
+ let lastIndex = -1
+
+ for (let i = 0; i <= maxCachedIndex + 1; i++) {
+ if (deleteSet.has(i)) {
+ deletionCount++
+ continue
+ }
+
+ if (cachedRows.value.has(i)) {
+ const row = cachedRows.value.get(i)
+ if (row) {
+ const newIndex = i - deletionCount
+ if (lastIndex !== -1 && newIndex - lastIndex > 1) {
+ chunkStates.value[getChunkIndex(lastIndex)] = undefined
+ }
+
+ row.rowMeta.rowIndex = newIndex
+ newCachedRows.set(newIndex, row)
+ lastIndex = newIndex
+ }
+ }
+ }
+
+ if (lastIndex !== -1) {
+ chunkStates.value[getChunkIndex(lastIndex)] = undefined
+ }
+
+ cachedRows.value = newCachedRows
+ totalRows.value = Math.max(0, totalRows.value - rowsToDelete.length)
+
+ await syncCount()
+ callbacks?.syncVisibleData?.()
+ }
+
+ async function deleteRangeOfRows(cellRange: CellRange): Promise {
+ if (!cellRange._start || !cellRange._end) return
+
+ const start = Math.min(cellRange._start.row, cellRange._end.row)
+ const end = Math.max(cellRange._start.row, cellRange._end.row)
+
+ const rowsToDelete: Record[] = []
+ let compositePrimaryKey = ''
+
+ const uncachedRows = Array.from({ length: end - start + 1 }, (_, i) => start + i).filter(
+ (index) => !cachedRows.value.has(index),
+ )
+
+ if (uncachedRows.length > 0) {
+ await fetchMissingChunks(uncachedRows[0], uncachedRows[uncachedRows.length - 1])
+ }
+
+ for (let i = start; i <= end; i++) {
+ const cachedRow = cachedRows.value.get(i)
+ if (!cachedRow) {
+ console.warn(`Record at index ${i} not found in local cache`)
+ continue
+ }
+
+ const { row: rowData, rowMeta } = cachedRow
+
+ if (!rowMeta.new) {
+ const extractedPk = extractPk(meta?.value?.columns as ColumnType[])
+ const compositePkValue = extractPkFromRow(rowData, meta?.value?.columns as ColumnType[])
+ const pkData = rowPkData(rowData, meta?.value?.columns as ColumnType[])
+
+ if (extractedPk && compositePkValue) {
+ if (!compositePrimaryKey) compositePrimaryKey = extractedPk
+
+ rowsToDelete.push({
+ [compositePrimaryKey]: compositePkValue,
+ pkData,
+ row: { ...cachedRow },
+ rowIndex: i,
+ })
+ }
+ }
+ }
+
+ if (!rowsToDelete.length) return
+
+ const { list } = await $api.dbTableRow.list(NOCO, base?.value.id as string, meta.value?.id as string, {
+ pks: rowsToDelete.map((row) => row[compositePrimaryKey]).join(','),
+ })
+
+ try {
+ for (const deleteRow of rowsToDelete) {
+ const rowObj = deleteRow.row
+ const rowPk = rowPkData(rowObj.row, meta.value?.columns as ColumnType[])
+
+ const fullRecord = list.find((r: Record) => {
+ return Object.keys(rowPk).every((key) => r[key] === rowPk[key])
+ })
+
+ if (!fullRecord) {
+ console.warn(`Full record not found for row with index ${deleteRow.rowIndex}`)
+ continue
+ }
+ rowObj.row = fullRecord
+ }
+
+ await bulkDeleteRows(rowsToDelete.map((row) => row.pkData))
+ } catch (e: any) {
+ const errorMessage = await extractSdkResponseErrorMsg(e)
+ message.error(`${t('msg.error.deleteRowFailed')}: ${errorMessage}`)
+ throw e
+ }
+
+ addUndo({
+ undo: {
+ fn: async (deletedRows: Record[]) => {
+ const rowsToInsert = deletedRows
+ .map((row) => {
+ const pkData = rowPkData(row.row, meta.value?.columns as ColumnType[])
+ row.row = { ...pkData, ...row.row }
+ return row
+ })
+ .reverse()
+
+ const insertedRowIds = await bulkInsertRows(
+ rowsToInsert.map((row) => row.row),
+ undefined,
+ true,
+ )
+
+ if (Array.isArray(insertedRowIds)) {
+ await Promise.all(rowsToInsert.map((row, _index) => recoverLTARRefs(row.row)))
+ }
+ },
+ args: [rowsToDelete],
+ },
+ redo: {
+ fn: async (rowsToDelete: Record[]) => {
+ await bulkDeleteRows(rowsToDelete.map((row) => row.pkData))
+ await updateCacheAfterDelete(rowsToDelete)
+ },
+ args: [rowsToDelete],
+ },
+ scope: defineViewScope({ view: viewMeta.value }),
+ })
+ await updateCacheAfterDelete(rowsToDelete)
+ }
+
+ async function bulkDeleteRows(
+ rows: Record[],
+ { metaValue = meta.value, viewMetaValue = viewMeta.value }: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
+ ): Promise {
+ try {
+ const bulkDeletedRowsData = await $api.dbDataTableRow.delete(metaValue?.id as string, rows.length === 1 ? rows[0] : rows, {
+ viewId: viewMetaValue?.id as string,
+ })
+ reloadAggregate?.trigger()
+
+ return rows.length === 1 && bulkDeletedRowsData ? [bulkDeletedRowsData] : bulkDeletedRowsData
+ } catch (error: any) {
+ const errorMessage = await extractSdkResponseErrorMsg(error)
+ message.error(`Bulk delete failed: ${errorMessage}`)
+ }
+ }
+
+ const removeRowIfNew = (row: Row): boolean => {
+ const index = Array.from(cachedRows.value.entries()).find(([_, r]) => r.rowMeta.rowIndex === row.rowMeta.rowIndex)?.[0]
+
+ if (index !== undefined && row.rowMeta.new) {
+ cachedRows.value.delete(index)
+ return true
+ }
+ return false
+ }
+
+ async function syncCount(): Promise {
+ try {
+ const { count } = isPublic.value
+ ? await fetchCount({
+ filtersArr: nestedFilters.value,
+ where: where?.value,
+ })
+ : await $api.dbViewRow.count(NOCO, base?.value?.id as string, meta.value!.id as string, viewMeta?.value?.id as string, {
+ where: where?.value,
+ })
+
+ totalRows.value = count as number
+ callbacks?.syncVisibleData?.()
+ } catch (error: any) {
+ const errorMessage = await extractSdkResponseErrorMsg(error)
+ message.error(`Failed to sync count: ${errorMessage}`)
+ throw error
+ }
+ }
+
+ return {
+ insertRow,
+ updateRowProperty,
+ addEmptyRow,
+ deleteRow,
+ deleteRowById,
+ deleteSelectedRows,
+ deleteRangeOfRows,
+ updateOrSaveRow,
+ bulkUpdateRows,
+ bulkUpdateView,
+ removeRowIfNew,
+ bulkDeleteRows,
+ bulkInsertRows,
+ cachedRows,
+ totalRows,
+ clearCache,
+ syncCount,
+ selectedRows,
+ chunkStates,
+ isRowSortRequiredRows,
+ clearInvalidRows,
+ applySorting,
+ }
+}
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 0b83c63aa3..bacc0954ae 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -30,17 +30,19 @@ const MAIN_MOUSE_PRESSED = 0
/**
* Utility to help with multi-selecting rows/cells in the smartsheet
*/
+
export function useMultiSelect(
_meta: MaybeRef,
fields: MaybeRef,
- data: MaybeRef,
+ data: MaybeRef | MaybeRef>,
+ _totalRows?: MaybeRef,
_editEnabled: MaybeRef,
isPkAvail: MaybeRef,
contextMenu: Ref,
clearCell: Function,
clearSelectedRangeOfCells: Function,
makeEditable: Function,
- scrollToCell?: (row?: number | null, col?: number | null) => void,
+ scrollToCell?: (row?: number | null, col?: number | null, scrollBehaviour?: ScrollBehavior) => void,
keyEventHandler?: Function,
syncCellData?: Function,
bulkUpdateRows?: Function,
@@ -48,9 +50,15 @@ export function useMultiSelect(
view?: MaybeRef,
paginationData?: MaybeRef,
changePage?: (page: number) => void,
+ fetchChunk?: (chunkId: number) => Promise,
+ onActiveCellChanged?: () => void,
) {
const meta = ref(_meta)
+ const MAX_ROW_SELECTION = 100
+
+ const CHUNK_SIZE = 50
+
const { t } = useI18n()
const { copy } = useCopy()
@@ -69,6 +77,10 @@ export function useMultiSelect(
const { isDataReadOnly } = useRoles()
+ const isArrayStructure = typeof unref(data) === 'object' && Array.isArray(unref(data))
+
+ const paginationDataRef = ref(paginationData)
+
const editEnabled = ref(_editEnabled)
const isMouseDown = ref(false)
@@ -77,8 +89,6 @@ export function useMultiSelect(
const activeView = ref(view)
- const paginationDataRef = ref(paginationData)
-
const selectedRange = reactive(new CellRange())
const fillRange = reactive(new CellRange())
@@ -91,6 +101,16 @@ export function useMultiSelect(
() => !(activeCell.row === null || activeCell.col === null || isNaN(activeCell.row) || isNaN(activeCell.col)),
)
+ function limitSelection(anchor: Cell, end: Cell): Cell {
+ const limitedEnd = { ...end }
+ const totalRows = Math.abs(end.row - anchor.row) + 1
+ if (totalRows > MAX_ROW_SELECTION) {
+ const direction = end.row > anchor.row ? 1 : -1
+ limitedEnd.row = anchor.row + (MAX_ROW_SELECTION - 1) * direction
+ }
+ return limitedEnd
+ }
+
function makeActive(row: number, col: number) {
if (activeCell.row === row && activeCell.col === col) {
return
@@ -286,7 +306,24 @@ export function useMultiSelect(
async function copyValue(ctx?: Cell) {
try {
if (selectedRange.start !== null && selectedRange.end !== null && !selectedRange.isSingleCell()) {
- const cprows = unref(data).slice(selectedRange.start.row, selectedRange.end.row + 1) // slice the selected rows for copy
+ let cprows
+ if (isArrayStructure) {
+ cprows = unref(data as Row[]).slice(selectedRange.start.row, selectedRange.end.row + 1) // slice the selected rows for copy
+ } else {
+ const startChunkId = Math.floor(selectedRange.start.row / CHUNK_SIZE)
+ const endChunkId = Math.floor(selectedRange.end.row / CHUNK_SIZE)
+
+ const chunksToFetch = new Set()
+ for (let chunkId = startChunkId; chunkId <= endChunkId; chunkId++) {
+ chunksToFetch.add(chunkId)
+ }
+
+ // Fetch all required chunks
+ await Promise.all([...chunksToFetch].map(fetchChunk))
+
+ // Make sure all data is loaded before copying
+ cprows = Array.from(unref(data as Map).values()).slice(selectedRange.start.row, selectedRange.end.row + 1) // slice the selected rows for copy
+ }
const cpcols = unref(fields).slice(selectedRange.start.col, selectedRange.end.col + 1) // slice the selected cols for copy
await copyTable(cprows, cpcols)
@@ -298,7 +335,8 @@ export function useMultiSelect(
const cpCol = ctx?.col ?? activeCell.col
if (cpRow != null && cpCol != null) {
- const rowObj = unref(data)[cpRow]
+ const rowObj = isArrayStructure ? unref(data as Row[])[cpRow] : unref(data as Map).get(cpRow)
+ if (!rowObj) return
const columnObj = unref(fields)[cpCol]
const textToCopy = valueToCopy(rowObj, columnObj)
@@ -391,15 +429,23 @@ export function useMultiSelect(
function handleMouseOver(event: MouseEvent, row: number, col: number) {
if (isFillMode.value) {
- const rw = unref(data)[row]
+ const rw = isArrayStructure ? (unref(data) as Row[])[row] : (unref(data) as Map).get(row)
+
+ if (!rw) return
if (!selectedRange._start || !selectedRange._end) return
// fill is not supported for new rows yet
if (rw.rowMeta.new) return
- fillRange.endRange({ row, col: selectedRange._end.col })
- scrollToCell?.(row, col)
+ const endRow = Math.min(selectedRange._start.row + 100, row)
+
+ fillRange.endRange({
+ row: endRow,
+ col: selectedRange._end.col,
+ })
+
+ scrollToCell?.(endRow, col)
return
}
@@ -407,9 +453,9 @@ export function useMultiSelect(
return
}
- // extend the selection and scroll to the cell
- selectedRange.endRange({ row, col })
- scrollToCell?.(row, col)
+ const limitedEnd = limitSelection(selectedRange.start, { row, col })
+ selectedRange.endRange(limitedEnd)
+ scrollToCell?.(limitedEnd.row, limitedEnd.col)
// avoid selecting text
event.preventDefault()
@@ -448,7 +494,7 @@ export function useMultiSelect(
if (activeCell.row !== row || activeCell.col !== col) {
// clear active cell on selection start
- activeCell.row = null
+ // activeCell.row = null
activeCell.col = null
}
}
@@ -471,7 +517,16 @@ export function useMultiSelect(
if (selectedRange._start !== null && selectedRange._end !== null) {
const tempActiveCell = { row: selectedRange._start.row, col: selectedRange._start.col }
- const cprows = unref(data).slice(selectedRange.start.row, selectedRange.end.row + 1) // slice the selected rows for copy
+ let cprows
+
+ if (isArrayStructure) {
+ cprows = (unref(data) as Row[]).slice(selectedRange.start.row, selectedRange.end.row + 1)
+ } else {
+ cprows = Array.from(unref(data) as Map)
+ .filter(([index]) => index >= selectedRange.start.row && index <= selectedRange.end.row)
+ .map(([, row]) => row)
+ }
+
const cpcols = unref(fields).slice(selectedRange.start.col, selectedRange.end.col + 1) // slice the selected cols for copy
const rawMatrix = serializeRange(cprows, cpcols).json
@@ -492,7 +547,11 @@ export function useMultiSelect(
continue
}
- const rowObj = unref(data)[row]
+ const rowObj = isArrayStructure ? (unref(data) as Row[])[row] : (unref(data) as Map).get(row)
+
+ if (!rowObj) {
+ continue
+ }
let pasteIndex = 0
@@ -559,26 +618,12 @@ export function useMultiSelect(
}
}
- const handleKeyDown = async (e: KeyboardEvent) => {
- // invoke the keyEventHandler if provided and return if it returns true
- if (await keyEventHandler?.(e)) {
- return true
- }
-
- if (isExpandedCellInputExist()) {
- return
- }
-
- if (!isCellActive.value || activeCell.row === null || activeCell.col === null) {
- return
- }
-
+ const handleKeyDownAction = async (e: KeyboardEvent) => {
const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
- /** on tab key press navigate through cells */
+ if (activeCell.row === null || activeCell.col === null) return
switch (e.key) {
case 'Tab':
- e.preventDefault()
selectedRange.clear()
if (e.shiftKey) {
@@ -594,7 +639,7 @@ export function useMultiSelect(
if (activeCell.col < unref(columnLength.value) - 1) {
activeCell.col++
editEnabled.value = false
- } else if (activeCell.row < unref(data).length - 1) {
+ } else if (activeCell.row < (isArrayStructure ? (unref(data) as Row[]).length : unref(_totalRows!)) - 1) {
activeCell.row++
activeCell.col = 0
editEnabled.value = false
@@ -602,32 +647,7 @@ export function useMultiSelect(
}
scrollToCell?.()
break
- /** on enter key press make cell editable */
- case 'Enter':
- e.preventDefault()
- selectedRange.clear()
-
- makeEditable(unref(data)[activeCell.row], unref(fields)[activeCell.col])
- break
- /** on delete key press clear cell */
- case 'Delete':
- case 'Backspace':
- e.preventDefault()
- if (isDataReadOnly.value) {
- return
- }
- if (selectedRange.isSingleCell()) {
- selectedRange.clear()
-
- await clearCell(activeCell as { row: number; col: number })
- } else {
- await clearSelectedRangeOfCells()
- }
- break
- /** on arrow key press navigate through cells */
case 'ArrowRight':
- e.preventDefault()
-
if (e.shiftKey) {
if (cmdOrCtrl) {
editEnabled.value = false
@@ -656,8 +676,6 @@ export function useMultiSelect(
}
break
case 'ArrowLeft':
- e.preventDefault()
-
if (e.shiftKey) {
if (cmdOrCtrl) {
editEnabled.value = false
@@ -686,24 +704,23 @@ export function useMultiSelect(
}
break
case 'ArrowUp':
- e.preventDefault()
-
if (e.shiftKey) {
+ const anchor = selectedRange._start ?? activeCell
+ let newEnd: Cell
+
if (cmdOrCtrl) {
- editEnabled.value = false
- selectedRange.endRange({
- row: 0,
- col: selectedRange._end?.col ?? activeCell.col,
- })
- scrollToCell?.(selectedRange._end?.row, selectedRange._end?.col)
- } else if ((selectedRange._end?.row ?? activeCell.row) > 0) {
- editEnabled.value = false
- selectedRange.endRange({
+ newEnd = { row: 0, col: selectedRange._end?.col ?? activeCell.col }
+ } else {
+ newEnd = {
row: (selectedRange._end?.row ?? activeCell.row) - 1,
col: selectedRange._end?.col ?? activeCell.col,
- })
- scrollToCell?.(selectedRange._end?.row, selectedRange._end?.col)
+ }
}
+
+ const limitedEnd = limitSelection(anchor, newEnd)
+ editEnabled.value = false
+ selectedRange.endRange(limitedEnd)
+ scrollToCell?.(limitedEnd.row, limitedEnd.col, 'instant')
} else {
selectedRange.clear()
@@ -714,40 +731,104 @@ export function useMultiSelect(
editEnabled.value = false
}
}
+ onActiveCellChanged?.()
break
case 'ArrowDown':
- e.preventDefault()
-
if (e.shiftKey) {
+ const anchor = selectedRange._start ?? activeCell
+ let newEnd: Cell
+
if (cmdOrCtrl) {
- editEnabled.value = false
- selectedRange.endRange({
- row: unref(data).length - 1,
+ newEnd = {
+ row: (isArrayStructure ? (unref(data) as Row[]).length : unref(_totalRows!)) - 1,
col: selectedRange._end?.col ?? activeCell.col,
- })
- scrollToCell?.(selectedRange._end?.row, selectedRange._end?.col)
- } else if ((selectedRange._end?.row ?? activeCell.row) < unref(data).length - 1) {
- editEnabled.value = false
- selectedRange.endRange({
+ }
+ } else {
+ newEnd = {
row: (selectedRange._end?.row ?? activeCell.row) + 1,
col: selectedRange._end?.col ?? activeCell.col,
- })
- scrollToCell?.(selectedRange._end?.row, selectedRange._end?.col)
+ }
}
+
+ const limitedEnd = limitSelection(anchor, newEnd)
+ editEnabled.value = false
+ selectedRange.endRange(limitedEnd)
+ scrollToCell?.(limitedEnd.row, limitedEnd.col, 'instant')
} else {
selectedRange.clear()
-
- if (activeCell.row < unref(data).length - 1) {
+ if (activeCell.row < (isArrayStructure ? (unref(data) as Row[]).length : unref(_totalRows!))) {
activeCell.row++
selectedRange.startRange({ row: activeCell.row, col: activeCell.col })
scrollToCell?.()
editEnabled.value = false
}
}
+ onActiveCellChanged?.()
+ break
+ case 'Enter':
+ selectedRange.clear()
+
+ let row
+
+ if (isArrayStructure) {
+ row = (unref(data) as Row[])[activeCell.row]
+ } else {
+ row = (unref(data) as Map).get(activeCell.row)
+ }
+
+ makeEditable(row, unref(fields)[activeCell.col])
+ break
+ case 'Delete':
+ case 'Backspace':
+ if (isDataReadOnly.value) {
+ return
+ }
+ if (selectedRange.isSingleCell()) {
+ selectedRange.clear()
+
+ await clearCell(activeCell as { row: number; col: number })
+ } else {
+ await clearSelectedRangeOfCells()
+ }
+ break
+ }
+ }
+
+ const handleThrottledKeyDownAction = useThrottleFn(handleKeyDownAction, 60)
+
+ const handleKeyDown = async (e: KeyboardEvent) => {
+ // invoke the keyEventHandler if provided and return if it returns true
+
+ if (isArrayStructure ? await keyEventHandler?.(e) : keyEventHandler?.(e)) {
+ return true
+ }
+
+ if (isExpandedCellInputExist()) {
+ return
+ }
+
+ if (!isCellActive.value || activeCell.row === null || activeCell.col === null) {
+ return
+ }
+ /** on tab key press navigate through cells */
+ switch (e.key) {
+ case 'Tab':
+ case 'Enter':
+ case 'Delete':
+ case 'Backspace':
+ case 'ArrowRight':
+ case 'ArrowLeft':
+ case 'ArrowUp':
+ case 'ArrowDown':
+ e.preventDefault()
+ handleThrottledKeyDownAction(e)
break
default:
{
- const rowObj = unref(data)[activeCell.row]
+ const rowObj = isArrayStructure
+ ? (unref(data) as Row[])[activeCell.row]
+ : (unref(data) as Map).get(activeCell.row)
+ if (!rowObj) return
const columnObj = unref(fields)[activeCell.col]
if (
@@ -760,11 +841,6 @@ export function useMultiSelect(
case 67:
await copyValue()
break
- // select all - ctrl/cmd +a
- case 65:
- selectedRange.startRange({ row: 0, col: 0 })
- selectedRange.endRange({ row: unref(data).length - 1, col: unref(columnLength.value) - 1 })
- break
}
}
@@ -850,7 +926,17 @@ export function useMultiSelect(
const pasteMatrixCols = clipboardMatrix[0].length
const colsToPaste = unref(fields).slice(activeCell.col, activeCell.col + pasteMatrixCols)
- const rowsToPaste = unref(data).slice(activeCell.row, activeCell.row + selectionRowCount)
+
+ let rowsToPaste
+
+ if (isArrayStructure) {
+ rowsToPaste = (unref(data) as Row[]).slice(activeCell.row, activeCell.row + selectionRowCount)
+ } else {
+ rowsToPaste = Array.from(unref(data) as Map)
+ .filter(([index]) => index >= activeCell.row! && index < activeCell.row! + selectionRowCount)
+ .map(([, row]) => row)
+ }
+
const propsToPaste: string[] = []
let pastedRows = 0
@@ -904,7 +990,10 @@ export function useMultiSelect(
}
} else {
if (selectedRange.isSingleCell()) {
- const rowObj = unref(data)[activeCell.row]
+ const rowObj = isArrayStructure
+ ? (unref(data) as Row[])[activeCell.row]
+ : (unref(data) as Map).get(activeCell.row)
+ if (!rowObj) return
const columnObj = unref(fields)[activeCell.col]
// handle belongs to column, skip custom links
@@ -997,22 +1086,142 @@ export function useMultiSelect(
rowObj.row[columnObj.title!] = oldCellValue
return
}
- addUndo({
- redo: {
- fn: async (
- activeCell: Cell,
- col: ColumnType,
- row: Row,
- pg: PaginatedType,
- value: number,
- result: { link: any[]; unlink: any[] },
- ) => {
- if (paginationDataRef.value?.pageSize === pg?.pageSize) {
- if (paginationDataRef.value?.page !== pg?.page) {
- await changePage?.(pg?.page)
+
+ if (isArrayStructure) {
+ addUndo({
+ redo: {
+ fn: async (
+ activeCell: Cell,
+ col: ColumnType,
+ row: Row,
+ pg: PaginatedType,
+ value: number,
+ result: { link: any[]; unlink: any[] },
+ ) => {
+ if (paginationDataRef.value?.pageSize === pg?.pageSize) {
+ if (paginationDataRef.value?.page !== pg?.page) {
+ await changePage?.(pg?.page)
+ }
+ const pasteRowPk = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
+ const rowObj = (unref(data) as Row[])[activeCell.row]
+ const columnObj = unref(fields)[activeCell.col]
+ if (
+ pasteRowPk === extractPkFromRow(rowObj.row, meta.value?.columns as ColumnType[]) &&
+ columnObj.id === col.id
+ ) {
+ await Promise.all([
+ result.link.length &&
+ api.dbDataTableRow.nestedLink(
+ meta.value?.id as string,
+ columnObj.id as string,
+ encodeURIComponent(pasteRowPk),
+ result.link,
+ {
+ viewId: activeView?.value?.id,
+ },
+ ),
+ result.unlink.length &&
+ api.dbDataTableRow.nestedUnlink(
+ meta.value?.id as string,
+ columnObj.id as string,
+ encodeURIComponent(pasteRowPk),
+ result.unlink,
+ { viewId: activeView?.value?.id },
+ ),
+ ])
+
+ rowObj.row[columnObj.title!] = value
+
+ await syncCellData?.(activeCell)
+ } else {
+ throw new Error(t('msg.recordCouldNotBeFound'))
+ }
+ } else {
+ throw new Error(t('msg.pageSizeChanged'))
}
+ },
+ args: [
+ clone(activeCell),
+ clone(columnObj),
+ clone(rowObj),
+ clone(paginationDataRef.value),
+ clone(pasteVal.value),
+ result,
+ ],
+ },
+ undo: {
+ fn: async (
+ activeCell: Cell,
+ col: ColumnType,
+ row: Row,
+ pg: PaginatedType,
+ value: number,
+ result: { link: any[]; unlink: any[] },
+ ) => {
+ if (paginationDataRef.value?.pageSize === pg.pageSize) {
+ if (paginationDataRef.value?.page !== pg.page) {
+ await changePage?.(pg.page!)
+ }
+
+ const pasteRowPk = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
+ const rowObj = (unref(data) as Row[])[activeCell.row]
+ const columnObj = unref(fields)[activeCell.col]
+
+ if (
+ pasteRowPk === extractPkFromRow(rowObj.row, meta.value?.columns as ColumnType[]) &&
+ columnObj.id === col.id
+ ) {
+ await Promise.all([
+ result.unlink.length &&
+ api.dbDataTableRow.nestedLink(
+ meta.value?.id as string,
+ columnObj.id as string,
+ encodeURIComponent(pasteRowPk),
+ result.unlink,
+ ),
+ result.link.length &&
+ api.dbDataTableRow.nestedUnlink(
+ meta.value?.id as string,
+ columnObj.id as string,
+ encodeURIComponent(pasteRowPk),
+ result.link,
+ ),
+ ])
+
+ rowObj.row[columnObj.title!] = value
+
+ await syncCellData?.(activeCell)
+ } else {
+ throw new Error(t('msg.recordCouldNotBeFound'))
+ }
+ } else {
+ throw new Error(t('msg.pageSizeChanged'))
+ }
+ },
+ args: [
+ clone(activeCell),
+ clone(columnObj),
+ clone(rowObj),
+ clone(paginationDataRef.value),
+ clone(oldCellValue),
+ result,
+ ],
+ },
+ scope: defineViewScope({ view: activeView?.value }),
+ })
+ } else {
+ addUndo({
+ redo: {
+ fn: async (
+ activeCell: Cell,
+ col: ColumnType,
+ row: Row,
+ value: number,
+ result: { link: any[]; unlink: any[] },
+ ) => {
const pasteRowPk = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
- const rowObj = unref(data)[activeCell.row]
+ const rowObj = (unref(data) as Map).get(activeCell.row)
+ if (!rowObj) return
const columnObj = unref(fields)[activeCell.col]
if (
pasteRowPk === extractPkFromRow(rowObj.row, meta.value?.columns as ColumnType[]) &&
@@ -1042,38 +1251,21 @@ export function useMultiSelect(
rowObj.row[columnObj.title!] = value
await syncCellData?.(activeCell)
- } else {
- throw new Error(t('msg.recordCouldNotBeFound'))
}
- } else {
- throw new Error(t('msg.pageSizeChanged'))
- }
+ },
+ args: [clone(activeCell), clone(columnObj), clone(rowObj), clone(pasteVal.value), result],
},
- args: [
- clone(activeCell),
- clone(columnObj),
- clone(rowObj),
- clone(paginationDataRef.value),
- clone(pasteVal.value),
- result,
- ],
- },
- undo: {
- fn: async (
- activeCell: Cell,
- col: ColumnType,
- row: Row,
- pg: PaginatedType,
- value: number,
- result: { link: any[]; unlink: any[] },
- ) => {
- if (paginationDataRef.value?.pageSize === pg.pageSize) {
- if (paginationDataRef.value?.page !== pg.page) {
- await changePage?.(pg.page!)
- }
-
+ undo: {
+ fn: async (
+ activeCell: Cell,
+ col: ColumnType,
+ row: Row,
+ value: number,
+ result: { link: any[]; unlink: any[] },
+ ) => {
const pasteRowPk = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
- const rowObj = unref(data)[activeCell.row]
+ const rowObj = (unref(data) as Map).get(activeCell.row)
+ if (!rowObj) return
const columnObj = unref(fields)[activeCell.col]
if (
@@ -1100,24 +1292,13 @@ export function useMultiSelect(
rowObj.row[columnObj.title!] = value
await syncCellData?.(activeCell)
- } else {
- throw new Error(t('msg.recordCouldNotBeFound'))
}
- } else {
- throw new Error(t('msg.pageSizeChanged'))
- }
+ },
+ args: [clone(activeCell), clone(columnObj), clone(rowObj), clone(oldCellValue), result],
},
- args: [
- clone(activeCell),
- clone(columnObj),
- clone(rowObj),
- clone(paginationDataRef.value),
- clone(oldCellValue),
- result,
- ],
- },
- scope: defineViewScope({ view: activeView?.value }),
- })
+ scope: defineViewScope({ view: activeView?.value }),
+ })
+ }
}
return await syncCellData?.(activeCell)
@@ -1158,7 +1339,15 @@ export function useMultiSelect(
const endCol = Math.max(start.col, end.col)
const cols = unref(fields).slice(startCol, endCol + 1)
- const rows = unref(data).slice(startRow, endRow + 1)
+ let rows
+
+ if (isArrayStructure) {
+ rows = (unref(data) as Row[]).slice(startRow, endRow + 1)
+ } else {
+ rows = Array.from(unref(data) as Map)
+ .filter(([index]) => index >= startRow && index <= endRow)
+ .map(([, row]) => row)
+ }
const props = []
let pasteValue
diff --git a/packages/nc-gui/composables/useSharedView.ts b/packages/nc-gui/composables/useSharedView.ts
index 8883f502f1..54bccf5774 100644
--- a/packages/nc-gui/composables/useSharedView.ts
+++ b/packages/nc-gui/composables/useSharedView.ts
@@ -15,7 +15,7 @@ import { UITypes, ViewTypes } from 'nocodb-sdk'
export function useSharedView() {
const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
- const { appInfo, gridViewPageSize } = useGlobal()
+ const { appInfo } = useGlobal()
const baseStore = useBase()
@@ -25,7 +25,7 @@ export function useSharedView() {
const { base } = storeToRefs(baseStore)
- const appInfoDefaultLimit = gridViewPageSize.value || appInfo.value.defaultLimit || 25
+ const appInfoDefaultLimit = appInfo.value.defaultLimit || 50
const paginationData = useState('paginationData', () => ({
page: 1,
@@ -134,9 +134,11 @@ export function useSharedView() {
/** Query params for nested data */
nested?: any
offset?: number
+ limit?: number
},
opts?: {
isGroupBy?: boolean
+ isInfiniteScroll?: boolean
},
) => {
if (!sharedView.value)
@@ -147,7 +149,9 @@ export function useSharedView() {
if (!param.offset) {
const page = paginationData.value.page || 1
- const pageSize = opts?.isGroupBy
+ const pageSize = opts?.isInfiniteScroll
+ ? param.limit
+ : opts?.isGroupBy
? appInfo.value.defaultGroupByLimit?.limitRecord || 10
: paginationData.value.pageSize || appInfoDefaultLimit
param.offset = (page - 1) * pageSize
@@ -336,6 +340,23 @@ export function useSharedView() {
)
}
+ const fetchCount = async (param: { filtersArr: FilterType[], where?: string }) => {
+ const data = await $api.public.dbViewRowCount(
+ sharedView.value.uuid!,
+ {
+ filterArrJson: JSON.stringify(param.filtersArr ?? nestedFilters.value),
+ where: param.where,
+ },
+ {
+ headers: {
+ 'xc-password': password.value,
+ },
+ },
+ )
+
+ return data
+ }
+
const fetchSharedViewGroupedData = async (
columnId: string,
{ sortsArr, filtersArr }: { sortsArr: SortType[]; filtersArr: FilterType[] },
@@ -419,5 +440,6 @@ export function useSharedView() {
exportFile,
formColumns,
allowCSVDownload,
+ fetchCount,
}
}
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index 5260d41e1b..e606918f2f 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -20,6 +20,7 @@ export function useViewData(
const { activeTableId, activeTable } = storeToRefs(tablesStore)
const meta = computed(() => _meta.value || activeTable.value)
+
const metaId = computed(() => _meta.value?.id || activeTableId.value)
const { t } = useI18n()
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index 4049b87c44..de9af47c44 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -30,6 +30,7 @@ export const ReloadViewDataHookInj: InjectionKey<
EventHook<{ shouldShowLoading?: boolean; offset?: number; isFormFieldFilters?: boolean } | void>
> = Symbol('reload-view-data-injection')
export const ReloadViewMetaHookInj: InjectionKey> = Symbol('reload-view-meta-injection')
+export const ReloadVisibleDataHookInj: InjectionKey> = Symbol('reload-visible-data-injection')
export const ReloadRowDataHookInj: InjectionKey> =
Symbol('reload-row-data-injection')
export const ReloadAggregateHookInj: InjectionKey<
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index fd5c54505a..e56fd34551 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -93,6 +93,7 @@
"none": "None"
},
"general": {
+ "featurePreview": "Feature Preview",
"scripts": "Scripts",
"configure": "Configure",
"switch": "Switch",
@@ -626,6 +627,7 @@
"noConditionsAdded": "No conditions added"
},
"labels": {
+ "toggleExperimentalFeature": "Enable or disable experimental features with ease, allowing you to explore and evaluate upcoming functionalities.",
"modifiedOn": "Modified on",
"configuration": "Configuration",
"setup": "Setup",
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 147dcf5d2a..f33861ec8f 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -74,6 +74,12 @@ interface Row {
row: Record
oldRow: Record
rowMeta: {
+ // Used in InfiniteScroll Grid View
+ rowIndex?: number
+ isLoading?: boolean
+ isValidationFailed?: boolean
+ isRowOrderUpdated?: boolean
+
new?: boolean
selected?: boolean
commentCount?: number
@@ -93,7 +99,6 @@ interface Row {
id?: string
position?: string
dayIndex?: number
-
overLapIteration?: number
numberOfOverlaps?: number
minutes?: number
diff --git a/packages/nc-gui/utils/dataUtils.ts b/packages/nc-gui/utils/dataUtils.ts
index 85291b7542..a365d13cfe 100644
--- a/packages/nc-gui/utils/dataUtils.ts
+++ b/packages/nc-gui/utils/dataUtils.ts
@@ -1,5 +1,6 @@
-import { RelationTypes, UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
-import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import { RelationTypes, UITypes, buildFilterTree, isDateMonthFormat, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
+import type { ColumnType, FilterType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import dayjs from 'dayjs'
import { isColumnRequiredAndNull } from './columnUtils'
import type { Row } from '~/lib/types'
@@ -148,3 +149,284 @@ export const isRowEmpty = (record: any, col: any) => {
return Array.isArray(val) && val.length === 0
}
+
+export function validateRowFilters(_filters: FilterType[], data: any, columns: ColumnType[], client: any) {
+ if (!_filters.length) {
+ return true
+ }
+
+ const filters = buildFilterTree(_filters)
+
+ let isValid = null
+ for (const filter of filters) {
+ let res
+ if (filter.is_group && filter.children?.length) {
+ res = validateRowFilters(filter.children, data, columns, client)
+ } else {
+ const column = columns.find((c) => c.id === filter.fk_column_id)
+ if (!column) {
+ continue
+ }
+ const field = column.title!
+ let val = data[field]
+ if (
+ [UITypes.Date, UITypes.DateTime, UITypes.CreatedTime, UITypes.LastModifiedTime].includes(column.uidt!) &&
+ !['empty', 'blank', 'notempty', 'notblank'].includes(filter.comparison_op!)
+ ) {
+ const dateFormat = client === 'mysql2' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
+
+ let now = dayjs(new Date())
+ const dateFormatFromMeta = column?.meta?.date_format
+ const dataVal: any = val
+ let filterVal: any = filter.value
+ if (dateFormatFromMeta && isDateMonthFormat(dateFormatFromMeta)) {
+ // reset to 1st
+ now = dayjs(now).date(1)
+ if (val) val = dayjs(val).date(1)
+ }
+ if (filterVal) res = dayjs(filterVal).isSame(dataVal, 'day')
+
+ // handle sub operation
+ switch (filter.comparison_sub_op) {
+ case 'today':
+ filterVal = now
+ break
+ case 'tomorrow':
+ filterVal = now.add(1, 'day')
+ break
+ case 'yesterday':
+ filterVal = now.add(-1, 'day')
+ break
+ case 'oneWeekAgo':
+ filterVal = now.add(-1, 'week')
+ break
+ case 'oneWeekFromNow':
+ filterVal = now.add(1, 'week')
+ break
+ case 'oneMonthAgo':
+ filterVal = now.add(-1, 'month')
+ break
+ case 'oneMonthFromNow':
+ filterVal = now.add(1, 'month')
+ break
+ case 'daysAgo':
+ if (!filterVal) return
+ filterVal = now.add(-filterVal, 'day')
+ break
+ case 'daysFromNow':
+ if (!filterVal) return
+ filterVal = now.add(filterVal, 'day')
+ break
+ case 'exactDate':
+ if (!filterVal) return
+ break
+ // sub-ops for `isWithin` comparison
+ case 'pastWeek':
+ filterVal = now.add(-1, 'week')
+ break
+ case 'pastMonth':
+ filterVal = now.add(-1, 'month')
+ break
+ case 'pastYear':
+ filterVal = now.add(-1, 'year')
+ break
+ case 'nextWeek':
+ filterVal = now.add(1, 'week')
+ break
+ case 'nextMonth':
+ filterVal = now.add(1, 'month')
+ break
+ case 'nextYear':
+ filterVal = now.add(1, 'year')
+ break
+ case 'pastNumberOfDays':
+ if (!filterVal) return
+ filterVal = now.add(-filterVal, 'day')
+ break
+ case 'nextNumberOfDays':
+ if (!filterVal) return
+ filterVal = now.add(filterVal, 'day')
+ break
+ }
+
+ if (dataVal) {
+ switch (filter.comparison_op) {
+ case 'eq':
+ res = dayjs(dataVal).isSame(filterVal, 'day')
+ break
+ case 'neq':
+ res = !dayjs(dataVal).isSame(filterVal, 'day')
+ break
+ case 'gt':
+ res = dayjs(dataVal).isAfter(filterVal, 'day')
+ break
+ case 'lt':
+ res = dayjs(dataVal).isBefore(filterVal, 'day')
+ break
+ case 'lte':
+ case 'le':
+ res = dayjs(dataVal).isSameOrBefore(filterVal, 'day')
+ break
+ case 'gte':
+ case 'ge':
+ res = dayjs(dataVal).isSameOrAfter(filterVal, 'day')
+ break
+ case 'empty':
+ case 'blank':
+ res = dataVal === '' || dataVal === null || dataVal === undefined
+ break
+ case 'notempty':
+ case 'notblank':
+ res = !(dataVal === '' || dataVal === null || dataVal === undefined)
+ break
+ case 'isWithin': {
+ let now = dayjs(new Date()).format(dateFormat).toString()
+ now = column.uidt === UITypes.Date ? now.substring(0, 10) : now
+ switch (filter.comparison_sub_op) {
+ case 'pastWeek':
+ case 'pastMonth':
+ case 'pastYear':
+ case 'pastNumberOfDays':
+ res = dayjs(dataVal).isBetween(filterVal, now, 'day')
+ break
+ case 'nextWeek':
+ case 'nextMonth':
+ case 'nextYear':
+ case 'nextNumberOfDays':
+ res = dayjs(dataVal).isBetween(now, filterVal, 'day')
+ break
+ }
+ }
+ }
+ }
+ } else {
+ switch (typeof filter.value) {
+ case 'boolean':
+ val = !!data[field]
+ break
+ case 'number':
+ val = +data[field]
+ break
+ }
+
+ if ([UITypes.User, UITypes.CreatedBy, UITypes.LastModifiedBy].includes(column.uidt!)) {
+ const userIds: string[] = Array.isArray(data[field])
+ ? data[field].map((user) => user.id)
+ : data[field]?.id
+ ? [data[field].id]
+ : []
+
+ const filterValues = filter.value.split(',').map((v) => v.trim())
+
+ switch (filter.comparison_op) {
+ case 'anyof':
+ res = userIds.some((id) => filterValues.includes(id))
+ break
+ case 'nanyof':
+ res = !userIds.some((id) => filterValues.includes(id))
+ break
+ case 'allof':
+ res = filterValues.every((id) => userIds.includes(id))
+ break
+ case 'nallof':
+ res = !filterValues.every((id) => userIds.includes(id))
+ break
+ case 'empty':
+ case 'blank':
+ res = userIds.length === 0
+ break
+ case 'notempty':
+ case 'notblank':
+ res = userIds.length > 0
+ break
+ default:
+ res = false // Unsupported operation for User fields
+ }
+ } else {
+ switch (filter.comparison_op) {
+ case 'eq':
+ res = val == filter.value
+ break
+ case 'neq':
+ res = val != filter.value
+ break
+ case 'like':
+ res = data[field]?.toString?.()?.toLowerCase()?.indexOf(filter.value?.toLowerCase()) > -1
+ break
+ case 'nlike':
+ res = data[field]?.toString?.()?.toLowerCase()?.indexOf(filter.value?.toLowerCase()) === -1
+ break
+ case 'empty':
+ case 'blank':
+ res = data[field] === '' || data[field] === null || data[field] === undefined
+ break
+ case 'notempty':
+ case 'notblank':
+ res = !(data[field] === '' || data[field] === null || data[field] === undefined)
+ break
+ case 'checked':
+ res = !!data[field]
+ break
+ case 'notchecked':
+ res = !data[field]
+ break
+ case 'null':
+ res = res = data[field] === null
+ break
+ case 'notnull':
+ res = data[field] !== null
+ break
+ case 'allof':
+ res = (filter.value?.split(',').map((item) => item.trim()) ?? []).every((item) =>
+ (data[field]?.split(',') ?? []).includes(item),
+ )
+ break
+ case 'anyof':
+ res = (filter.value?.split(',').map((item) => item.trim()) ?? []).some((item) =>
+ (data[field]?.split(',') ?? []).includes(item),
+ )
+ break
+ case 'nallof':
+ res = !(filter.value?.split(',').map((item) => item.trim()) ?? []).every((item) =>
+ (data[field]?.split(',') ?? []).includes(item),
+ )
+ break
+ case 'nanyof':
+ res = !(filter.value?.split(',').map((item) => item.trim()) ?? []).some((item) =>
+ (data[field]?.split(',') ?? []).includes(item),
+ )
+ break
+ case 'lt':
+ res = +data[field] < +filter.value
+ break
+ case 'lte':
+ case 'le':
+ res = +data[field] <= +filter.value
+ break
+ case 'gt':
+ res = +data[field] > +filter.value
+ break
+ case 'gte':
+ case 'ge':
+ res = +data[field] >= +filter.value
+ break
+ }
+ }
+ }
+ }
+
+ switch (filter.logical_op) {
+ case 'or':
+ isValid = isValid || !!res
+ break
+ case 'not':
+ isValid = isValid && !res
+ break
+ case 'and':
+ default:
+ isValid = (isValid ?? true) && res
+ break
+ }
+ }
+ return isValid
+}
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 9d12ce599f..de93570574 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -139,6 +139,7 @@ import NcCheckFill from '~icons/nc-icons/checkFill'
import NcExternalLink from '~icons/nc-icons/external-link'
import NcCamera from '~icons/nc-icons/camera'
import NcRefreshCW from '~icons/nc-icons/refresh-cw'
+import NcBulb from '~icons/nc-icons/bulb'
// import NcProjectGray from '~icons/nc-icons/project-gray'
import NcPhoneCall from '~icons/nc-icons/phone-call'
import NcItalic from '~icons/nc-icons/italic'
@@ -768,6 +769,7 @@ export const iconMap = {
camera: NcCamera,
megaPhone: NcMegaPhone,
nocodb: NcNocoDB,
+ bulb: NcBulb,
office: NcOffice,
sort: Sort,
diff --git a/packages/nc-gui/utils/sortUtils.ts b/packages/nc-gui/utils/sortUtils.ts
index 6896a367ed..ed3fae63f5 100644
--- a/packages/nc-gui/utils/sortUtils.ts
+++ b/packages/nc-gui/utils/sortUtils.ts
@@ -1,4 +1,5 @@
-import { UITypes } from 'nocodb-sdk'
+import { type ColumnType, type SortType, UITypes } from 'nocodb-sdk'
+import dayjs from 'dayjs'
export const getSortDirectionOptions = (uidt: UITypes | string, isGroupBy?: boolean) => {
const groupByOptions = isGroupBy
@@ -40,3 +41,185 @@ export const getSortDirectionOptions = (uidt: UITypes | string, isGroupBy?: bool
].concat(groupByOptions)
}
}
+
+export const sortByUIType = ({
+ uidt,
+ a,
+ b,
+ options: { caseSensitive = true, direction },
+}: {
+ uidt: UITypes
+ a: any
+ b: any
+ options: {
+ caseSensitive?: boolean
+ direction?: 'asc' | 'desc' | 'count-asc' | 'count-desc'
+ }
+}) => {
+ let nullsLast = direction !== 'asc'
+
+ if ([UITypes.Formula, UITypes.User].includes(uidt)) {
+ nullsLast = !nullsLast
+ }
+
+ if (a === null || a === undefined) {
+ return nullsLast ? 1 : -1
+ }
+ if (b === null || b === undefined) {
+ return nullsLast ? -1 : 1
+ }
+
+ if (a === '' && b !== '') return nullsLast ? 1 : -1
+ if (b === '' && a !== '') return nullsLast ? -1 : 1
+
+ let result = 0
+
+ switch (uidt) {
+ case UITypes.Number:
+ case UITypes.Decimal:
+ case UITypes.Currency:
+ case UITypes.Percent:
+ case UITypes.Rating:
+ case UITypes.Duration:
+ case UITypes.ID:
+ case UITypes.Rollup:
+ result = Number(a) - Number(b)
+ break
+
+ case UITypes.Links: {
+ const getLinksValue = (links: any) => {
+ if (links === null) return null
+
+ if (typeof links === 'number') return links
+
+ if (links && typeof links === 'object') {
+ return Object.values(links)[0]
+ }
+ return links
+ }
+
+ const valA = getLinksValue(a)
+ const valB = getLinksValue(b)
+
+ if (typeof valA === 'number' && typeof valB === 'number') {
+ result = valA - valB
+ } else {
+ result = String(valA).localeCompare(String(valB))
+ }
+ break
+ }
+
+ case UITypes.DateTime:
+ case UITypes.CreatedTime:
+ case UITypes.LastModifiedTime:
+ result = dayjs(a).valueOf() - dayjs(b).valueOf()
+ break
+ case UITypes.Time: {
+ const normalizeTimeValue = (value: any): dayjs.Dayjs => {
+ // If it's already a dayjs object
+ if (dayjs.isDayjs(value)) {
+ return dayjs(`1999-01-01 ${value.format('HH:mm:ss')}`)
+ }
+
+ // If it's a string in HH:mm:ss format (from server)
+ if (typeof value === 'string' && /^\d{2}:\d{2}:\d{2}$/.test(value)) {
+ return dayjs(`1999-01-01 ${value}`)
+ }
+
+ // If it's a string in HH:mm format (from local state)
+ if (typeof value === 'string' && /^\d{2}:\d{2}$/.test(value)) {
+ return dayjs(`1999-01-01 ${value}:00`)
+ }
+
+ // For any other format, try parsing with dayjs
+ let parsed = dayjs(value)
+
+ // If not valid, try parsing as time only
+ if (!parsed.isValid()) {
+ parsed = dayjs(value, 'HH:mm:ss')
+ }
+
+ // If still not valid, try with dummy date
+ if (!parsed.isValid()) {
+ parsed = dayjs(`1999-01-01 ${value}`)
+ }
+
+ return parsed
+ }
+
+ const timeA = normalizeTimeValue(a)
+ const timeB = normalizeTimeValue(b)
+ result = timeA.valueOf() - timeB.valueOf()
+ break
+ }
+
+ case UITypes.Year:
+ result = Number(a) - Number(b)
+ break
+
+ case UITypes.Checkbox:
+ result = a === b ? 0 : a ? -1 : 1
+ break
+ case UITypes.SingleSelect:
+ case UITypes.MultiSelect:
+ result = String(a).localeCompare(String(b))
+ break
+ case UITypes.Attachment: {
+ const getAttachmentValue = (att) => {
+ if (Array.isArray(att) && att.length > 0) {
+ return att[0].title || att[0].path || ''
+ }
+ return ''
+ }
+ result = getAttachmentValue(a).localeCompare(getAttachmentValue(b))
+ break
+ }
+ case UITypes.User:
+ case UITypes.CreatedBy:
+ case UITypes.LastModifiedBy: {
+ const getUserValue = (user) => {
+ if (Array.isArray(user) && user.length > 0) {
+ return user[0].display_name || user[0].email || ''
+ }
+ if (user && typeof user === 'object') {
+ return user.display_name || user.email || ''
+ }
+ return String(user)
+ }
+ result = getUserValue(a).localeCompare(getUserValue(b))
+ break
+ }
+
+ case UITypes.SingleLineText:
+ case UITypes.LongText:
+ case UITypes.Email:
+ case UITypes.URL:
+ case UITypes.PhoneNumber:
+ case UITypes.Formula:
+ if (caseSensitive) {
+ result = String(a).localeCompare(String(b))
+ } else {
+ result = String(a).toLowerCase().localeCompare(String(b).toLowerCase())
+ }
+ break
+
+ case UITypes.JSON:
+ result = JSON.stringify(a).localeCompare(JSON.stringify(b))
+ break
+
+ default:
+ result = String(a).localeCompare(String(b))
+ }
+
+ return direction === 'desc' ? -result : result
+}
+
+export const isSortRelevantChange = (
+ changedFields: string[],
+ sorts: SortType[],
+ columnsById: Record,
+): boolean => {
+ const sortColumnTitles = new Set(sorts.map((sort) => columnsById[sort.fk_column_id!]?.title).filter(Boolean))
+
+ return changedFields.some((field) => sortColumnTitles.has(field))
+}
diff --git a/packages/nocodb-sdk/src/lib/errorUtils.ts b/packages/nocodb-sdk/src/lib/errorUtils.ts
new file mode 100644
index 0000000000..2477086771
--- /dev/null
+++ b/packages/nocodb-sdk/src/lib/errorUtils.ts
@@ -0,0 +1,7 @@
+export class NcSDKError extends Error {
+ constructor(message: string) {
+ super(message);
+ }
+}
+
+export class BadRequest extends NcSDKError {}
diff --git a/packages/nocodb-sdk/src/lib/filterHelpers.ts b/packages/nocodb-sdk/src/lib/filterHelpers.ts
new file mode 100644
index 0000000000..42e820b191
--- /dev/null
+++ b/packages/nocodb-sdk/src/lib/filterHelpers.ts
@@ -0,0 +1,320 @@
+import { ColumnType, FilterType } from '~/lib/Api';
+import { UITypes } from '~/lib/index';
+import { BadRequest, NcSDKError } from '~/lib/errorUtils';
+
+/**
+ * Converts a flat array of filter objects into a nested tree structure
+ * @param {FilterType[]} items - Array of filter objects
+ * @returns {FilterType[]} - Nested tree structure
+ */
+export function buildFilterTree(items: FilterType[]) {
+ const itemMap = new Map();
+ const rootItems: FilterType[] = [];
+
+ // Map items with IDs and handle items without IDs
+ items.forEach((item) => {
+ if (item.id) {
+ itemMap.set(item.id, { ...item, children: [] });
+ } else {
+ // Items without IDs go straight to root level
+ rootItems.push({ ...item, children: [] });
+ }
+ });
+
+ // Build parent-child relationships for items with IDs
+ items.forEach((item) => {
+ // Skip items without IDs as they're already in rootItems
+ if (!item.id) return;
+
+ const mappedItem = itemMap.get(item.id);
+
+ if (item.fk_parent_id === null) {
+ rootItems.push(mappedItem);
+ } else {
+ const parent = itemMap.get(item.fk_parent_id);
+ if (parent) {
+ parent.children.push(mappedItem);
+ } else {
+ // If parent is not found, treat as root item
+ rootItems.push(mappedItem);
+ }
+ }
+ });
+
+ return rootItems;
+}
+
+export const GROUPBY_COMPARISON_OPS = [
+ // these are used for groupby
+ 'gb_eq',
+ 'gb_null',
+];
+export const COMPARISON_OPS = [
+ 'eq',
+ 'neq',
+ 'not',
+ 'like',
+ 'nlike',
+ 'empty',
+ 'notempty',
+ 'null',
+ 'notnull',
+ 'checked',
+ 'notchecked',
+ 'blank',
+ 'notblank',
+ 'allof',
+ 'anyof',
+ 'nallof',
+ 'nanyof',
+ 'gt',
+ 'lt',
+ 'gte',
+ 'lte',
+ 'ge',
+ 'le',
+ 'in',
+ 'isnot',
+ 'is',
+ 'isWithin',
+ 'btw',
+ 'nbtw',
+];
+
+export const IS_WITHIN_COMPARISON_SUB_OPS = [
+ 'pastWeek',
+ 'pastMonth',
+ 'pastYear',
+ 'nextWeek',
+ 'nextMonth',
+ 'nextYear',
+ 'pastNumberOfDays',
+ 'nextNumberOfDays',
+];
+
+export const COMPARISON_SUB_OPS = [
+ 'today',
+ 'tomorrow',
+ 'yesterday',
+ 'oneWeekAgo',
+ 'oneWeekFromNow',
+ 'oneMonthAgo',
+ 'oneMonthFromNow',
+ 'daysAgo',
+ 'daysFromNow',
+ 'exactDate',
+ ...IS_WITHIN_COMPARISON_SUB_OPS,
+];
+
+export function extractFilterFromXwhere(
+ str: string | string[],
+ aliasColObjMap: { [columnAlias: string]: ColumnType },
+ throwErrorIfInvalid = false
+): FilterType[] {
+ if (!str) {
+ return [];
+ }
+
+ // if array treat it as `and` group
+ if (Array.isArray(str)) {
+ // calling recursively for nested query
+ const nestedFilters = [].concat(
+ ...str.map((s) =>
+ extractFilterFromXwhere(s, aliasColObjMap, throwErrorIfInvalid)
+ )
+ );
+
+ // If there's only one filter, return it directly
+ if (nestedFilters.length === 1) {
+ return nestedFilters;
+ }
+
+ // Otherwise, wrap it in an AND group
+ return [
+ {
+ is_group: true,
+ logical_op: 'and',
+ children: nestedFilters,
+ },
+ ];
+ } else if (typeof str !== 'string' && throwErrorIfInvalid) {
+ throw new Error(
+ 'Invalid filter format. Expected string or array of strings.'
+ );
+ }
+
+ let nestedArrayConditions = [];
+
+ let openIndex = str.indexOf('((');
+
+ if (openIndex === -1) openIndex = str.indexOf('(~');
+
+ let nextOpenIndex = openIndex;
+
+ let closingIndex = str.indexOf('))');
+
+ // if it's a simple query simply return array of conditions
+ if (openIndex === -1) {
+ if (str && str != '~not')
+ nestedArrayConditions = str.split(
+ /(?=~(?:or(?:not)?|and(?:not)?|not)\()/
+ );
+ return extractCondition(
+ nestedArrayConditions || [],
+ aliasColObjMap,
+ throwErrorIfInvalid
+ );
+ }
+
+ // iterate until finding right closing
+ while (
+ (nextOpenIndex = str
+ .substring(0, closingIndex)
+ .indexOf('((', nextOpenIndex + 1)) != -1
+ ) {
+ closingIndex = str.indexOf('))', closingIndex + 1);
+ }
+
+ if (closingIndex === -1)
+ throw new Error(
+ `${str
+ .substring(0, openIndex + 1)
+ .slice(-10)} : Closing bracket not found`
+ );
+
+ // getting operand starting index
+ const operandStartIndex = str.lastIndexOf('~', openIndex);
+ const operator =
+ operandStartIndex != -1
+ ? str.substring(operandStartIndex + 1, openIndex)
+ : '';
+ const lhsOfNestedQuery = str.substring(0, openIndex);
+
+ nestedArrayConditions.push(
+ ...extractFilterFromXwhere(
+ lhsOfNestedQuery,
+ aliasColObjMap,
+ throwErrorIfInvalid
+ ),
+ // calling recursively for nested query
+ {
+ is_group: true,
+ logical_op: operator,
+ children: extractFilterFromXwhere(
+ str.substring(openIndex + 1, closingIndex + 1),
+ aliasColObjMap
+ ),
+ },
+ // RHS of nested query(recursion)
+ ...extractFilterFromXwhere(
+ str.substring(closingIndex + 2),
+ aliasColObjMap,
+ throwErrorIfInvalid
+ )
+ );
+ return nestedArrayConditions;
+}
+
+// mark `op` and `sub_op` any for being assignable to parameter of type
+export function validateFilterComparison(uidt: UITypes, op: any, sub_op?: any) {
+ if (!COMPARISON_OPS.includes(op) && !GROUPBY_COMPARISON_OPS.includes(op)) {
+ throw new BadRequest(`${op} is not supported.`);
+ }
+
+ if (sub_op) {
+ if (
+ ![
+ UITypes.Date,
+ UITypes.DateTime,
+ UITypes.CreatedTime,
+ UITypes.LastModifiedTime,
+ ].includes(uidt)
+ ) {
+ throw new BadRequest(
+ `'${sub_op}' is not supported for UI Type'${uidt}'.`
+ );
+ }
+ if (!COMPARISON_SUB_OPS.includes(sub_op)) {
+ throw new BadRequest(`'${sub_op}' is not supported.`);
+ }
+ if (
+ (op === 'isWithin' && !IS_WITHIN_COMPARISON_SUB_OPS.includes(sub_op)) ||
+ (op !== 'isWithin' && IS_WITHIN_COMPARISON_SUB_OPS.includes(sub_op))
+ ) {
+ throw new BadRequest(`'${sub_op}' is not supported for '${op}'`);
+ }
+ }
+}
+
+export function extractCondition(
+ nestedArrayConditions,
+ aliasColObjMap,
+ throwErrorIfInvalid
+) {
+ return nestedArrayConditions?.map((str) => {
+ let [logicOp, alias, op, value] =
+ str.match(/(?:~(and|or|not))?\((.*?),(\w+),(.*)\)/)?.slice(1) || [];
+
+ if (!alias && !op && !value) {
+ // try match with blank filter format
+ [logicOp, alias, op, value] =
+ str.match(/(?:~(and|or|not))?\((.*?),(\w+)\)/)?.slice(1) || [];
+ }
+
+ // handle isblank and isnotblank filter format
+ switch (op) {
+ case 'is':
+ if (value === 'blank') {
+ op = 'blank';
+ value = undefined;
+ } else if (value === 'notblank') {
+ op = 'notblank';
+ value = undefined;
+ }
+ break;
+ case 'isblank':
+ case 'is_blank':
+ op = 'blank';
+ break;
+ case 'isnotblank':
+ case 'is_not_blank':
+ case 'is_notblank':
+ op = 'notblank';
+ break;
+ }
+
+ let sub_op = null;
+
+ if (aliasColObjMap[alias]) {
+ if (
+ [
+ UITypes.Date,
+ UITypes.DateTime,
+ UITypes.LastModifiedTime,
+ UITypes.CreatedTime,
+ ].includes(aliasColObjMap[alias].uidt)
+ ) {
+ value = value?.split(',');
+ // the first element would be sub_op
+ sub_op = value?.[0];
+ // remove the first element which is sub_op
+ value?.shift();
+ value = value?.[0];
+ } else if (op === 'in') {
+ value = value.split(',');
+ }
+
+ validateFilterComparison(aliasColObjMap[alias].uidt, op, sub_op);
+ } else if (throwErrorIfInvalid) {
+ throw new NcSDKError('INVALID_FILTER');
+ }
+
+ return {
+ comparison_op: op,
+ ...(sub_op && { comparison_sub_op: sub_op }),
+ fk_column_id: aliasColObjMap[alias]?.id,
+ logical_op: logicOp,
+ value,
+ };
+ });
+}
diff --git a/packages/nocodb-sdk/src/lib/index.ts b/packages/nocodb-sdk/src/lib/index.ts
index 772566fc52..369abfc16e 100644
--- a/packages/nocodb-sdk/src/lib/index.ts
+++ b/packages/nocodb-sdk/src/lib/index.ts
@@ -32,3 +32,5 @@ export * from '~/lib/dateTimeHelper';
export * from '~/lib/form';
export * from '~/lib/aggregationHelper';
export * from '~/lib/connectionConfigUtils';
+export * from '~/lib/filterHelpers';
+export * from '~/lib/errorUtils';
diff --git a/packages/nocodb/src/controllers/public-datas.controller.ts b/packages/nocodb/src/controllers/public-datas.controller.ts
index 402617d01f..19116e660d 100644
--- a/packages/nocodb/src/controllers/public-datas.controller.ts
+++ b/packages/nocodb/src/controllers/public-datas.controller.ts
@@ -43,6 +43,20 @@ export class PublicDatasController {
return pagedResponse;
}
+ @Get(['/api/v2/public/shared-view/:sharedViewUuid/count'])
+ async dataCount(
+ @TenantContext() context: NcContext,
+ @Req() req: NcRequest,
+ @Param('sharedViewUuid') sharedViewUuid: string,
+ ) {
+ const pagedResponse = await this.publicDatasService.dataCount(context, {
+ query: req.query,
+ password: req.headers?.['xc-password'] as string,
+ sharedViewUuid,
+ });
+ return pagedResponse;
+ }
+
@Get([
'/api/v1/db/public/shared-view/:sharedViewUuid/aggregate',
'/api/v2/public/shared-view/:sharedViewUuid/aggregate',
diff --git a/packages/nocodb/src/db/BaseModelSqlv2.ts b/packages/nocodb/src/db/BaseModelSqlv2.ts
index 55fa1c5223..ecb9bd61c5 100644
--- a/packages/nocodb/src/db/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/db/BaseModelSqlv2.ts
@@ -8,6 +8,7 @@ import equal from 'fast-deep-equal';
import {
AuditOperationSubTypes,
AuditOperationTypes,
+ extractFilterFromXwhere,
isCreatedOrLastModifiedByCol,
isCreatedOrLastModifiedTimeCol,
isLinksOrLTAR,
@@ -66,12 +67,6 @@ import getAst from '~/helpers/getAst';
import { sanitize, unsanitize } from '~/helpers/sqlSanitize';
import Noco from '~/Noco';
import { HANDLE_WEBHOOK } from '~/services/hook-handler.service';
-import {
- COMPARISON_OPS,
- COMPARISON_SUB_OPS,
- GROUPBY_COMPARISON_OPS,
- IS_WITHIN_COMPARISON_SUB_OPS,
-} from '~/utils/globals';
import { extractProps } from '~/helpers/extractProps';
import { defaultLimitConfig } from '~/helpers/extractLimitAndOffset';
import generateLookupSelectQuery from '~/db/generateLookupSelectQuery';
@@ -9932,201 +9927,6 @@ export function extractSortsObject(
});
}
-export function extractFilterFromXwhere(
- str,
- aliasColObjMap: { [columnAlias: string]: Column },
- throwErrorIfInvalid = false,
-) {
- if (!str) {
- return [];
- }
-
- // if array treat it as `and` group
- if (Array.isArray(str)) {
- // calling recursively for nested query
- return str.map((s) =>
- extractFilterFromXwhere(s, aliasColObjMap, throwErrorIfInvalid),
- );
- } else if (typeof str !== 'string' && throwErrorIfInvalid) {
- throw new Error(
- 'Invalid filter format. Expected string or array of strings.',
- );
- }
-
- let nestedArrayConditions = [];
-
- let openIndex = str.indexOf('((');
-
- if (openIndex === -1) openIndex = str.indexOf('(~');
-
- let nextOpenIndex = openIndex;
-
- let closingIndex = str.indexOf('))');
-
- // if it's a simple query simply return array of conditions
- if (openIndex === -1) {
- if (str && str != '~not')
- nestedArrayConditions = str.split(
- /(?=~(?:or(?:not)?|and(?:not)?|not)\()/,
- );
- return extractCondition(
- nestedArrayConditions || [],
- aliasColObjMap,
- throwErrorIfInvalid,
- );
- }
-
- // iterate until finding right closing
- while (
- (nextOpenIndex = str
- .substring(0, closingIndex)
- .indexOf('((', nextOpenIndex + 1)) != -1
- ) {
- closingIndex = str.indexOf('))', closingIndex + 1);
- }
-
- if (closingIndex === -1)
- throw new Error(
- `${str
- .substring(0, openIndex + 1)
- .slice(-10)} : Closing bracket not found`,
- );
-
- // getting operand starting index
- const operandStartIndex = str.lastIndexOf('~', openIndex);
- const operator =
- operandStartIndex != -1
- ? str.substring(operandStartIndex + 1, openIndex)
- : '';
- const lhsOfNestedQuery = str.substring(0, openIndex);
-
- nestedArrayConditions.push(
- ...extractFilterFromXwhere(
- lhsOfNestedQuery,
- aliasColObjMap,
- throwErrorIfInvalid,
- ),
- // calling recursively for nested query
- new Filter({
- is_group: true,
- logical_op: operator,
- children: extractFilterFromXwhere(
- str.substring(openIndex + 1, closingIndex + 1),
- aliasColObjMap,
- ),
- }),
- // RHS of nested query(recursion)
- ...extractFilterFromXwhere(
- str.substring(closingIndex + 2),
- aliasColObjMap,
- throwErrorIfInvalid,
- ),
- );
- return nestedArrayConditions;
-}
-
-// mark `op` and `sub_op` any for being assignable to parameter of type
-function validateFilterComparison(uidt: UITypes, op: any, sub_op?: any) {
- if (!COMPARISON_OPS.includes(op) && !GROUPBY_COMPARISON_OPS.includes(op)) {
- NcError.badRequest(`${op} is not supported.`);
- }
-
- if (sub_op) {
- if (
- ![
- UITypes.Date,
- UITypes.DateTime,
- UITypes.CreatedTime,
- UITypes.LastModifiedTime,
- ].includes(uidt)
- ) {
- NcError.badRequest(`'${sub_op}' is not supported for UI Type'${uidt}'.`);
- }
- if (!COMPARISON_SUB_OPS.includes(sub_op)) {
- NcError.badRequest(`'${sub_op}' is not supported.`);
- }
- if (
- (op === 'isWithin' && !IS_WITHIN_COMPARISON_SUB_OPS.includes(sub_op)) ||
- (op !== 'isWithin' && IS_WITHIN_COMPARISON_SUB_OPS.includes(sub_op))
- ) {
- NcError.badRequest(`'${sub_op}' is not supported for '${op}'`);
- }
- }
-}
-
-export function extractCondition(
- nestedArrayConditions,
- aliasColObjMap,
- throwErrorIfInvalid,
-) {
- return nestedArrayConditions?.map((str) => {
- let [logicOp, alias, op, value] =
- str.match(/(?:~(and|or|not))?\((.*?),(\w+),(.*)\)/)?.slice(1) || [];
-
- if (!alias && !op && !value) {
- // try match with blank filter format
- [logicOp, alias, op, value] =
- str.match(/(?:~(and|or|not))?\((.*?),(\w+)\)/)?.slice(1) || [];
- }
-
- // handle isblank and isnotblank filter format
- switch (op) {
- case 'is':
- if (value === 'blank') {
- op = 'blank';
- value = undefined;
- } else if (value === 'notblank') {
- op = 'notblank';
- value = undefined;
- }
- break;
- case 'isblank':
- case 'is_blank':
- op = 'blank';
- break;
- case 'isnotblank':
- case 'is_not_blank':
- case 'is_notblank':
- op = 'notblank';
- break;
- }
-
- let sub_op = null;
-
- if (aliasColObjMap[alias]) {
- if (
- [
- UITypes.Date,
- UITypes.DateTime,
- UITypes.LastModifiedTime,
- UITypes.CreatedTime,
- ].includes(aliasColObjMap[alias].uidt)
- ) {
- value = value?.split(',');
- // the first element would be sub_op
- sub_op = value?.[0];
- // remove the first element which is sub_op
- value?.shift();
- value = value?.[0];
- } else if (op === 'in') {
- value = value.split(',');
- }
-
- validateFilterComparison(aliasColObjMap[alias].uidt, op, sub_op);
- } else if (throwErrorIfInvalid) {
- NcError.invalidFilter(str);
- }
-
- return new Filter({
- comparison_op: op,
- ...(sub_op && { comparison_sub_op: sub_op }),
- fk_column_id: aliasColObjMap[alias]?.id,
- logical_op: logicOp,
- value,
- });
- });
-}
-
function applyPaginate(
query,
{
diff --git a/packages/nocodb/src/db/conditionV2.ts b/packages/nocodb/src/db/conditionV2.ts
index 611fb94f8a..dce45a2b56 100644
--- a/packages/nocodb/src/db/conditionV2.ts
+++ b/packages/nocodb/src/db/conditionV2.ts
@@ -7,6 +7,7 @@ import {
UITypes,
} from 'nocodb-sdk';
import dayjs from 'dayjs';
+import type { FilterType } from 'nocodb-sdk';
// import customParseFormat from 'dayjs/plugin/customParseFormat.js';
import type { BaseModelSqlv2 } from '~/db/BaseModelSqlv2';
import type LinkToAnotherRecordColumn from '~/models/LinkToAnotherRecordColumn';
@@ -31,7 +32,7 @@ import { type BarcodeColumn, BaseUser, type QrCodeColumn } from '~/models';
export default async function conditionV2(
baseModelSqlv2: BaseModelSqlv2,
- conditionObj: Filter | Filter[],
+ conditionObj: Filter | FilterType | FilterType[] | Filter[],
qb: Knex.QueryBuilder,
alias?: string,
throwErrorIfInvalid = false,
@@ -66,7 +67,7 @@ function getLogicalOpMethod(filter: Filter) {
const parseConditionV2 = async (
baseModelSqlv2: BaseModelSqlv2,
- _filter: Filter | Filter[],
+ _filter: Filter | FilterType | FilterType[] | Filter[],
aliasCount = { count: 0 },
alias?,
customWhereClause?,
diff --git a/packages/nocodb/src/filters/global-exception/global-exception.filter.ts b/packages/nocodb/src/filters/global-exception/global-exception.filter.ts
index bb9700707f..82247f2303 100644
--- a/packages/nocodb/src/filters/global-exception/global-exception.filter.ts
+++ b/packages/nocodb/src/filters/global-exception/global-exception.filter.ts
@@ -2,7 +2,11 @@ import { Catch, Logger, NotFoundException, Optional } from '@nestjs/common';
import { InjectSentry, SentryService } from '@ntegral/nestjs-sentry';
import { ThrottlerException } from '@nestjs/throttler';
import hash from 'object-hash';
-import { NcErrorType } from 'nocodb-sdk';
+import {
+ NcErrorType,
+ NcSDKError,
+ BadRequest as SdkBadRequest,
+} from 'nocodb-sdk';
import type { ArgumentsHost, ExceptionFilter } from '@nestjs/common';
import type { Request, Response } from 'express';
import NocoCache from '~/cache/NocoCache';
@@ -64,6 +68,8 @@ export class GlobalExceptionFilter implements ExceptionFilter {
exception instanceof NotFoundException ||
exception instanceof ThrottlerException ||
exception instanceof ExternalError ||
+ exception instanceof SdkBadRequest ||
+ exception instanceof NcSDKError ||
(exception instanceof NcBaseErrorv2 &&
![
NcErrorType.INTERNAL_SERVER_ERROR,
@@ -185,7 +191,11 @@ export class GlobalExceptionFilter implements ExceptionFilter {
return response
.status(400)
.json({ msg: exception.message, errors: exception.errors });
- } else if (exception instanceof UnprocessableEntity) {
+ } else if (
+ exception instanceof UnprocessableEntity ||
+ exception instanceof SdkBadRequest ||
+ exception instanceof NcSDKError
+ ) {
return response.status(422).json({ msg: exception.message });
} else if (exception instanceof TestConnectionError) {
return response
diff --git a/packages/nocodb/src/models/Filter.ts b/packages/nocodb/src/models/Filter.ts
index 3902d775a3..78a6620a83 100644
--- a/packages/nocodb/src/models/Filter.ts
+++ b/packages/nocodb/src/models/Filter.ts
@@ -1,6 +1,10 @@
import { UITypes } from 'nocodb-sdk';
-import type { BoolType, FilterType } from 'nocodb-sdk';
-import type { COMPARISON_OPS, COMPARISON_SUB_OPS } from '~/utils/globals';
+import type {
+ BoolType,
+ COMPARISON_OPS,
+ COMPARISON_SUB_OPS,
+ FilterType,
+} from 'nocodb-sdk';
import type { NcContext } from '~/interface/config';
import Model from '~/models/Model';
import Column from '~/models/Column';
diff --git a/packages/nocodb/src/schema/swagger.json b/packages/nocodb/src/schema/swagger.json
index 3842037747..a6798ba6c1 100644
--- a/packages/nocodb/src/schema/swagger.json
+++ b/packages/nocodb/src/schema/swagger.json
@@ -12568,6 +12568,81 @@
"description": "Get the table rows but exculding the current record's children and parent"
}
},
+ "/api/v2/public/shared-view/{sharedViewUuid}/count": {
+ "parameters": [
+ {
+ "schema": {
+ "type": "string",
+ "example": "24a6d0bb-e45d-4b1a-bfef-f492d870de9f"
+ },
+ "name": "sharedViewUuid",
+ "in": "path",
+ "required": true,
+ "description": "Shared View UUID"
+ },
+ {
+ "schema": {
+ "type": "string"
+ },
+ "in": "header",
+ "name": "xc-password",
+ "description": "Shared view password"
+ }
+ ],
+ "get": {
+ "summary": "Count Table View Rows",
+ "operationId": "public-db-view-row-count",
+ "description": "Count how many rows in the given Table View",
+ "tags": [
+ "Public"
+ ],
+ "parameters": [
+ {
+ "schema": {
+ "type": "string"
+ },
+ "in": "query",
+ "name": "where"
+ },
+ {
+ "schema": {},
+ "in": "query",
+ "name": "nested",
+ "description": "Query params for nested data"
+ },
+ {
+ "$ref": "#/components/parameters/xc-auth"
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "OK",
+ "content": {
+ "application/json": {
+ "schema": {
+ "type": "object",
+ "properties": {
+ "count": {
+ "type": "number",
+ "x-stoplight": {
+ "id": "hwq29x70rcipi"
+ }
+ }
+ }
+ },
+ "examples": {
+ "Example 1": {
+ "value": {
+ "count": 25
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
"/api/v2/public/shared-view/{sharedViewUuid}/bulk/dataList": {
"parameters": [
{
diff --git a/packages/nocodb/src/services/public-datas.service.ts b/packages/nocodb/src/services/public-datas.service.ts
index d74d00ffe4..78c0e562b0 100644
--- a/packages/nocodb/src/services/public-datas.service.ts
+++ b/packages/nocodb/src/services/public-datas.service.ts
@@ -100,6 +100,55 @@ export class PublicDatasService {
return new PagedResponseImpl(data, { ...param.query, count });
}
+ async dataCount(
+ context: NcContext,
+ param: {
+ sharedViewUuid: string;
+ password?: string;
+ query: any;
+ },
+ ) {
+ const { sharedViewUuid, password, query = {} } = param;
+ const view = await View.getByUUID(context, sharedViewUuid);
+
+ if (!view) NcError.viewNotFound(sharedViewUuid);
+ if (
+ view.type !== ViewTypes.GRID &&
+ view.type !== ViewTypes.KANBAN &&
+ view.type !== ViewTypes.GALLERY &&
+ view.type !== ViewTypes.MAP &&
+ view.type !== ViewTypes.CALENDAR
+ ) {
+ NcError.notFound('Not found');
+ }
+
+ if (view.password && view.password !== password) {
+ return NcError.invalidSharedViewPassword();
+ }
+
+ const model = await Model.getByIdOrName(context, {
+ id: view?.fk_model_id,
+ });
+
+ const source = await Source.get(context, model.source_id);
+
+ const baseModel = await Model.getBaseModelSQL(context, {
+ id: model.id,
+ viewId: view?.id,
+ dbDriver: await NcConnectionMgrv2.get(source),
+ source,
+ });
+
+ const countArgs: any = { ...param.query, throwErrorIfInvalidParams: true };
+ try {
+ countArgs.filterArr = JSON.parse(countArgs.filterArrJson);
+ } catch (e) {}
+
+ const count: number = await baseModel.count(countArgs);
+
+ return { count };
+ }
+
async dataAggregate(
context: NcContext,
param: {
diff --git a/packages/nocodb/src/utils/globals.ts b/packages/nocodb/src/utils/globals.ts
index 7e912d79b0..9ebca8d3d3 100644
--- a/packages/nocodb/src/utils/globals.ts
+++ b/packages/nocodb/src/utils/globals.ts
@@ -201,68 +201,6 @@ export enum CacheDelDirection {
CHILD_TO_PARENT = 'CHILD_TO_PARENT',
}
-export const GROUPBY_COMPARISON_OPS = [
- // these are used for groupby
- 'gb_eq',
- 'gb_null',
-];
-export const COMPARISON_OPS = [
- 'eq',
- 'neq',
- 'not',
- 'like',
- 'nlike',
- 'empty',
- 'notempty',
- 'null',
- 'notnull',
- 'checked',
- 'notchecked',
- 'blank',
- 'notblank',
- 'allof',
- 'anyof',
- 'nallof',
- 'nanyof',
- 'gt',
- 'lt',
- 'gte',
- 'lte',
- 'ge',
- 'le',
- 'in',
- 'isnot',
- 'is',
- 'isWithin',
- 'btw',
- 'nbtw',
-];
-
-export const IS_WITHIN_COMPARISON_SUB_OPS = [
- 'pastWeek',
- 'pastMonth',
- 'pastYear',
- 'nextWeek',
- 'nextMonth',
- 'nextYear',
- 'pastNumberOfDays',
- 'nextNumberOfDays',
-];
-
-export const COMPARISON_SUB_OPS = [
- 'today',
- 'tomorrow',
- 'yesterday',
- 'oneWeekAgo',
- 'oneWeekFromNow',
- 'oneMonthAgo',
- 'oneMonthFromNow',
- 'daysAgo',
- 'daysFromNow',
- 'exactDate',
- ...IS_WITHIN_COMPARISON_SUB_OPS,
-];
-
export const DB_TYPES = [
'mysql2',
'sqlite3',
diff --git a/tests/playwright/pages/Dashboard/Grid/Column/index.ts b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
index e70ec9bbb0..0074319591 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
@@ -547,13 +547,9 @@ export class ColumnPageObject extends BasePage {
await columnHdr.locator('.nc-ui-dt-dropdown:visible').click();
}
- // select all menu access
- await expect(
- await this.grid.get().locator('[data-testid="nc-check-all"]').locator('input[type="checkbox"]')
- ).toHaveCount(role === 'creator' || role === 'owner' || role === 'editor' ? 1 : 0);
-
if (role === 'creator' || role === 'owner' || role === 'editor') {
- await this.grid.selectAll();
+ await this.grid.selectRow(0);
+ await this.grid.selectRow(1);
await this.grid.openAllRowContextMenu();
await this.rootPage.locator('.nc-dropdown-grid-context-menu').waitFor({ state: 'visible' });
await expect(this.rootPage.locator('.nc-dropdown-grid-context-menu')).toHaveCount(1);
diff --git a/tests/playwright/pages/Dashboard/Grid/index.ts b/tests/playwright/pages/Dashboard/Grid/index.ts
index 638a9898af..902520ec48 100644
--- a/tests/playwright/pages/Dashboard/Grid/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/index.ts
@@ -375,37 +375,13 @@ export class GridPage extends BasePage {
await expect(this.get().locator(`.nc-pagination .total`)).toHaveText(count);
}
- async clickPagination({
- type,
- skipWait = false,
- }: {
- type: 'first-page' | 'last-page' | 'next-page' | 'prev-page';
- skipWait?: boolean;
- }) {
- if (await this.get().locator('.nc-pagination').isHidden()) return;
-
- if (!skipWait) {
- await this.get().locator(`.nc-pagination .${type}`).click();
- await this.waitLoading();
- } else {
- await this.waitForResponse({
- uiAction: async () => (await this.get().locator(`.nc-pagination .${type}`)).click(),
- httpMethodsToMatch: ['GET'],
- requestUrlPathToMatch: '/views/',
- responseJsonMatcher: resJson => resJson?.pageInfo,
- });
-
- await this.waitLoading();
- }
+ async clickPagination(_params: { type: 'first-page' | 'last-page' | 'next-page' | 'prev-page'; skipWait?: boolean }) {
+ // No longer required due to implementation of InfiniteScroll
+ return;
}
- async verifyActivePage({ pageNumber }: { pageNumber: string }) {
- if (await this.get().locator('.nc-pagination').isHidden()) {
- expect(1).toBe(+pageNumber);
- return;
- }
-
- await expect(this.get().locator(`.nc-pagination .nc-current-page`).first()).toHaveText(pageNumber);
+ async verifyActivePage(_params: { pageNumber: string }) {
+ return;
}
async waitLoading() {
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/SearchData.ts b/tests/playwright/pages/Dashboard/common/Toolbar/SearchData.ts
index daf0dcfeff..de9cb19fc5 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/SearchData.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/SearchData.ts
@@ -16,7 +16,7 @@ export class ToolbarSearchDataPage extends BasePage {
async verify(query: string) {
const searchEnableBtn = await this.rootPage
- .waitForSelector('[data-testid="nc-global-search-show-input"]', { timeout: 100 })
+ .waitForSelector('[data-testid="nc-global-search-show-input"]', { timeout: 1000 })
.catch(() => null);
if (searchEnableBtn) {
diff --git a/tests/playwright/quickTests/commonTest.ts b/tests/playwright/quickTests/commonTest.ts
index 186d3cf66c..78d82c4a9b 100644
--- a/tests/playwright/quickTests/commonTest.ts
+++ b/tests/playwright/quickTests/commonTest.ts
@@ -193,13 +193,6 @@ const quickVerify = async ({
await dashboard.webhookForm.close();
}
- // Verify pagination
- await dashboard.grid.verifyActivePage({ pageNumber: '1' });
- await dashboard.grid.clickPagination({ type: 'next-page', skipWait: true });
- await dashboard.grid.verifyActivePage({ pageNumber: '2' });
- await dashboard.grid.clickPagination({ type: 'prev-page', skipWait: true });
- await dashboard.grid.verifyActivePage({ pageNumber: '1' });
-
await dashboard.viewSidebar.openView({ title: 'Filter&Sort' });
// Verify Fields, Filter & Sort
diff --git a/tests/playwright/tests/db/columns/columnMenuOperations.spec.ts b/tests/playwright/tests/db/columns/columnMenuOperations.spec.ts
index 0cc0fc66db..5be4e4d442 100644
--- a/tests/playwright/tests/db/columns/columnMenuOperations.spec.ts
+++ b/tests/playwright/tests/db/columns/columnMenuOperations.spec.ts
@@ -85,11 +85,10 @@ test.describe('Column menu operations', () => {
insertAfterColumnTitle: 'Title',
});
- await dashboard.grid.toolbar.fields.toggle({ title: 'Actors', isLocallySaved: false, checked: true });
await dashboard.grid.column.create({
title: 'InsertAfterColumn1',
type: 'SingleLineText',
- insertAfterColumnTitle: 'Actors',
+ insertAfterColumnTitle: 'Title',
});
await dashboard.closeTab({ title: 'Film' });
@@ -109,7 +108,7 @@ test.describe('Column menu operations', () => {
await dashboard.grid.column.create({
title: 'InsertBeforeColumn1',
type: 'SingleLineText',
- insertBeforeColumnTitle: 'Actors',
+ insertBeforeColumnTitle: 'ReleaseYear',
});
await dashboard.closeTab({ title: 'Film' });
@@ -125,7 +124,7 @@ test.describe('Column menu operations', () => {
await dashboard.grid.toolbar.fields.toggle({ title: 'Actors', isLocallySaved: false, checked: true });
await dashboard.grid.column.hideColumn({
- title: 'Actors',
+ title: 'RentalDuration',
});
await dashboard.closeTab({ title: 'Film' });
diff --git a/tests/playwright/tests/db/features/keyboardShortcuts.spec.ts b/tests/playwright/tests/db/features/keyboardShortcuts.spec.ts
index 83f1c0e3a5..2f9593231f 100644
--- a/tests/playwright/tests/db/features/keyboardShortcuts.spec.ts
+++ b/tests/playwright/tests/db/features/keyboardShortcuts.spec.ts
@@ -113,13 +113,16 @@ test.describe('Verify shortcuts', () => {
await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' });
// Cmd + up arrow
- await grid.cell.click({ index: 24, columnHeader: 'Country' });
+ await grid.cell.click({ index: 10, columnHeader: 'Country' });
await page.keyboard.press((await grid.isMacOs()) ? 'Meta+ArrowUp' : 'Control+ArrowUp');
await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' });
// Cmd + down arrow
await page.keyboard.press((await grid.isMacOs()) ? 'Meta+ArrowDown' : 'Control+ArrowDown');
- await grid.cell.verifyCellActiveSelected({ index: 24, columnHeader: 'Country' });
+
+ await grid.cell.verifyCellActiveSelected({ index: 108, columnHeader: 'Country' });
+
+ await page.keyboard.press((await grid.isMacOs()) ? 'Meta+ArrowUp' : 'Control+ArrowUp');
// Enter to edit and Esc to cancel
await grid.cell.click({ index: 0, columnHeader: 'Country' });
@@ -139,60 +142,20 @@ test.describe('Verify shortcuts', () => {
await page.reload();
await grid.cell.verify({ index: 1, columnHeader: 'Country', value: 'NewAlgeria' });
- // Tab:
- // If current page is not last page and and current cell is last column of last row and user press `Tab` then current page will be incremented by 1
- await grid.cell.click({ index: 24, columnHeader: 'Cities' });
+ await grid.cell.click({ index: 14, columnHeader: 'Cities' });
await page.keyboard.press('Tab');
- await grid.verifyActivePage({ pageNumber: '2' });
- await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' });
- // If current page is last page and and current cell is last column of last row and user press `Tab` then new empty row will be added
- await grid.clickPagination({ type: 'last-page' });
- await grid.cell.click({ index: 8, columnHeader: 'Cities' });
+ await grid.cell.click({ index: 15, columnHeader: 'Cities' });
await page.keyboard.press('Tab');
- await grid.verifyRowCount({ count: 10 });
- await grid.cell.verifyCellActiveSelected({ index: 9, columnHeader: 'Country' });
+ await grid.cell.verifyCellActiveSelected({ index: 16, columnHeader: 'Country' });
- // If current page is not first page and and current cell is first column of first row and user press `Shift+Tab` then current page will be decremented by 1
- await grid.cell.click({ index: 0, columnHeader: 'Country' });
+ await grid.cell.click({ index: 15, columnHeader: 'Country' });
await page.keyboard.press('Shift+Tab');
- await grid.verifyActivePage({ pageNumber: '4' });
- await grid.cell.verifyCellActiveSelected({ index: 24, columnHeader: 'Cities' });
+ await grid.cell.verifyCellActiveSelected({ index: 14, columnHeader: 'Cities' });
- // If current page is first page and and current cell is first column of first row and user press `Shift+Tab` then current page will not change
- await grid.clickPagination({ type: 'first-page' });
await grid.cell.click({ index: 0, columnHeader: 'Country' });
await page.keyboard.press('Shift+Tab');
- await grid.verifyActivePage({ pageNumber: '1' });
await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' });
-
- // ArrowDown:
- // If current page is not last page and and current cell is in last row and user press `ArrowDown` then current page will be incremented by 1
- await grid.cell.click({ index: 24, columnHeader: 'Cities' });
- await page.keyboard.press('ArrowDown');
- await grid.verifyActivePage({ pageNumber: '2' });
- await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Cities' });
-
- // If current page is last page and and current cell is in last row and user press `ArrowDown` then new empty row will be added
- await grid.clickPagination({ type: 'last-page' });
- await grid.cell.click({ index: 8, columnHeader: 'Cities' });
- await page.keyboard.press('ArrowDown');
- await grid.verifyRowCount({ count: 10 });
- await grid.cell.verifyCellActiveSelected({ index: 9, columnHeader: 'Country' });
-
- // ArrowUp:
- // If current page is not first page and and current cell is in first row and user press `ArrwoUp` then current page will be decremented by 1
- await grid.cell.click({ index: 0, columnHeader: 'Cities' });
- await page.keyboard.press('ArrowUp');
- await grid.verifyActivePage({ pageNumber: '4' });
- await grid.cell.verifyCellActiveSelected({ index: 24, columnHeader: 'Cities' });
-
- // If current page is first page and and current cell is in first row and user press `ArrwoUp` then current page will not change
- await grid.clickPagination({ type: 'first-page' });
- await grid.cell.click({ index: 0, columnHeader: 'Cities' });
- await page.keyboard.press('ArrowUp');
- await grid.verifyActivePage({ pageNumber: '1' });
- await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Cities' });
});
});
@@ -386,6 +349,8 @@ test.describe('Clipboard support', () => {
test('multiple cells - horizontal, all data types', async ({ page }) => {
// skip for local run (clipboard access issue in headless mode)
+ // Cmd A or Control A support is removed
+ test.skip();
if (!process.env.CI && config.use.headless) {
test.skip();
}
@@ -423,18 +388,30 @@ test.describe('Clipboard support', () => {
}
await grid.cell.click({ index: 1, columnHeader: 'SingleLineText' });
+ await page.waitForTimeout(500);
+
await page.keyboard.press('Shift+ArrowDown');
+ await page.waitForTimeout(500);
+
await page.keyboard.press('Shift+ArrowDown');
+ await page.waitForTimeout(500);
+
await page.keyboard.press('Shift+ArrowDown');
+ await page.waitForTimeout(500);
+
await page.keyboard.press('Shift+ArrowDown');
+ await page.waitForTimeout(500);
+
await page.keyboard.press('Shift+ArrowDown');
+ await page.waitForTimeout(500);
await page.keyboard.press((await grid.isMacOs()) ? 'Meta+c' : 'Control+c');
+ await page.waitForTimeout(500);
+
await grid.cell.click({ index: 1, columnHeader: 'LongText' });
- await page.keyboard.press((await grid.isMacOs()) ? 'Meta+v' : 'Control+v');
+ await page.waitForTimeout(500);
- // reload page
- await dashboard.rootPage.reload();
+ await page.keyboard.press((await grid.isMacOs()) ? 'Meta+v' : 'Control+v');
// verify copied data
for (let i = 1; i <= 5; i++) {
@@ -443,11 +420,23 @@ test.describe('Clipboard support', () => {
// Block selection
await grid.cell.click({ index: 1, columnHeader: 'SingleLineText' });
+ await page.waitForTimeout(500);
+
await page.keyboard.press('Shift+ArrowDown');
+ await page.waitForTimeout(500);
+
await page.keyboard.press('Shift+ArrowDown');
+ await page.waitForTimeout(500);
+
await page.keyboard.press('Shift+ArrowRight');
+ await page.waitForTimeout(500);
+
await page.keyboard.press((await grid.isMacOs()) ? 'Meta+c' : 'Control+c');
+ await page.waitForTimeout(500);
+
await grid.cell.click({ index: 4, columnHeader: 'SingleLineText' });
+ await page.waitForTimeout(500);
+
await page.keyboard.press((await grid.isMacOs()) ? 'Meta+v' : 'Control+v');
// reload page
diff --git a/tests/playwright/tests/db/features/undo-redo.spec.ts b/tests/playwright/tests/db/features/undo-redo.spec.ts
index ad5d8ffba9..f79654a96b 100644
--- a/tests/playwright/tests/db/features/undo-redo.spec.ts
+++ b/tests/playwright/tests/db/features/undo-redo.spec.ts
@@ -299,7 +299,10 @@ test.describe('Undo Redo', () => {
test('Row height', async ({ page }) => {
async function verifyRowHeight({ height }: { height: string }) {
- await expect(dashboard.grid.rowPage.getRecord(0)).toHaveAttribute('style', `height: ${height};`);
+ await expect(dashboard.grid.rowPage.getRecord(0)).toHaveAttribute(
+ 'style',
+ expect.stringMatching(new RegExp(`height:\\s*${height}px;`))
+ );
}
// close 'Team & Auth' tab
diff --git a/tests/playwright/tests/db/general/tableColumnOperation.spec.ts b/tests/playwright/tests/db/general/tableColumnOperation.spec.ts
index 13b10b5623..abba6b9d24 100644
--- a/tests/playwright/tests/db/general/tableColumnOperation.spec.ts
+++ b/tests/playwright/tests/db/general/tableColumnOperation.spec.ts
@@ -51,7 +51,13 @@ test.describe('Table Column Operations', () => {
await grid.addNewRow({ index: 2, value: `Row 2` });
await grid.addNewRow({ index: 3, value: `Row 3` });
await grid.addNewRow({ index: 4, value: `Row 4` });
- await grid.deleteAll();
+
+ // Delete all rows is not supported in Infinite Scroll
+ await grid.deleteRow(4);
+ await grid.deleteRow(3);
+ await grid.deleteRow(2);
+ await grid.deleteRow(1);
+ await grid.deleteRow(0);
await grid.verifyRowDoesNotExist({ index: 0 });
diff --git a/tests/playwright/tests/db/views/viewGridShare.spec.ts b/tests/playwright/tests/db/views/viewGridShare.spec.ts
index 85e0f7efb5..dfdcb9ea70 100644
--- a/tests/playwright/tests/db/views/viewGridShare.spec.ts
+++ b/tests/playwright/tests/db/views/viewGridShare.spec.ts
@@ -281,11 +281,6 @@ test.describe('Shared view', () => {
await dashboard.grid.column.create({
title: 'New Column',
});
- await dashboard.grid.addNewRow({
- index: 25,
- columnHeader: 'Country',
- value: 'New Country',
- });
await dashboard.signOut();
@@ -313,7 +308,7 @@ test.describe('Shared view', () => {
await sharedPage2.grid.toolbar.clickFilter();
await sharedPage2.grid.toolbar.filter.add({
title: 'Country',
- value: 'New Country',
+ value: 'China',
operation: 'is like',
locallySaved: true,
});
@@ -322,7 +317,7 @@ test.describe('Shared view', () => {
await sharedPage2.grid.cell.verify({
index: 0,
columnHeader: 'Country',
- value: 'New Country',
+ value: 'China',
});
});
});