From b3e75fc19367057e69d91a8445d7f8d24911707e Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Tue, 30 Aug 2022 13:41:34 +0800 Subject: [PATCH 1/5] wip(gui-v2): pagination logic --- .../components/smartsheet/Pagination.vue | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue index f219f8dbbb..1dfe4dc850 100644 --- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue +++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue @@ -11,7 +11,25 @@ const count = computed(() => paginatedData.value?.totalRows ?? Infinity) const size = computed(() => paginatedData.value?.pageSize ?? 25) const page = computed({ - get: () => paginatedData?.value?.page ?? 1, + get: () => { + // if current page is undefined, then show page 1 by default + if (!paginatedData?.value?.page) return 1 + console.log("count=" + count.value) + console.log("size=" + size.value) + console.log("paginatedData.value.page=" + paginatedData.value.page) + + // the maximum possible page given the current count and the size + const mxPage = Math.ceil(count.value / size.value) + // calculate targetPage where 1 <= targetPage <= mxPage + const targetPage = Math.max(1, Math.min(mxPage, paginatedData.value.page)) + // if the current page is greater than targetPage, + // then the page should be changed instead of showing an empty page + // e.g. deleting all records in the last page N should return N - 1 page + if (paginatedData.value.page > targetPage) { + changePage?.(targetPage) + } + return targetPage + }, set: (p) => changePage?.(p), }) @@ -24,6 +42,10 @@ const page = computed({
+ count : {{ count }} + page: {{ page }} + size: {{ size }} + Date: Tue, 30 Aug 2022 19:20:36 +0800 Subject: [PATCH 2/5] fix(gui-v2): move the logic to useViewData --- .../components/smartsheet/Pagination.vue | 24 +------------------ 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue index 1dfe4dc850..f219f8dbbb 100644 --- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue +++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue @@ -11,25 +11,7 @@ const count = computed(() => paginatedData.value?.totalRows ?? Infinity) const size = computed(() => paginatedData.value?.pageSize ?? 25) const page = computed({ - get: () => { - // if current page is undefined, then show page 1 by default - if (!paginatedData?.value?.page) return 1 - console.log("count=" + count.value) - console.log("size=" + size.value) - console.log("paginatedData.value.page=" + paginatedData.value.page) - - // the maximum possible page given the current count and the size - const mxPage = Math.ceil(count.value / size.value) - // calculate targetPage where 1 <= targetPage <= mxPage - const targetPage = Math.max(1, Math.min(mxPage, paginatedData.value.page)) - // if the current page is greater than targetPage, - // then the page should be changed instead of showing an empty page - // e.g. deleting all records in the last page N should return N - 1 page - if (paginatedData.value.page > targetPage) { - changePage?.(targetPage) - } - return targetPage - }, + get: () => paginatedData?.value?.page ?? 1, set: (p) => changePage?.(p), }) @@ -42,10 +24,6 @@ const page = computed({
- count : {{ count }} - page: {{ page }} - size: {{ size }} - Date: Tue, 30 Aug 2022 19:20:49 +0800 Subject: [PATCH 3/5] fix(gui-v2): add syncPagination --- packages/nc-gui-v2/composables/useViewData.ts | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts index 042c2952d3..e5064a0806 100644 --- a/packages/nc-gui-v2/composables/useViewData.ts +++ b/packages/nc-gui-v2/composables/useViewData.ts @@ -126,7 +126,6 @@ export function useViewData( : await fetchSharedViewData() formattedData.value = formatData(response.list) paginationData.value = response.pageInfo - await loadAggCommentsCount() } @@ -308,6 +307,34 @@ export function useViewData( } await syncCount() + await syncPagination() + } + + const syncPagination = async () => { + // total records in the current table + const count = paginationData.value?.totalRows ?? Infinity + // the number of rows in a page + const size = paginationData.value?.pageSize ?? 25 + // the current page number + const currentPage = paginationData.value?.page ?? 1 + // the maximum possible page given the current count and the size + const mxPage = Math.ceil(count / size) + // calculate targetPage where 1 <= targetPage <= mxPage + const targetPage = Math.max(1, Math.min(mxPage, currentPage)) + // if the current page is greater than targetPage, + // then the page should be changed instead of showing an empty page + // e.g. deleting all records in the last page N should return N - 1 page + if (currentPage > targetPage) { + // change to target page and load data of that page + changePage?.(targetPage) + } else { + // the current page is same as target page + // reload it to avoid empty row in this page + await loadData({ + offset: (targetPage - 1) * size, + where: where?.value, + } as any) + } } const loadFormView = async () => { From 9eeabdf4dc3b9fe1b08950a21188abccf11490de Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Tue, 30 Aug 2022 19:22:24 +0800 Subject: [PATCH 4/5] chore(gui-v2): expose syncPagination --- packages/nc-gui-v2/composables/useViewData.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts index e5064a0806..a8e585e2ec 100644 --- a/packages/nc-gui-v2/composables/useViewData.ts +++ b/packages/nc-gui-v2/composables/useViewData.ts @@ -394,6 +394,7 @@ export function useViewData( updateOrSaveRow, selectedAllRecords, syncCount, + syncPagination, galleryData, loadGalleryData, loadFormView, From e26132a450dfd2184179df60676e91be949f922c Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Tue, 30 Aug 2022 19:30:16 +0800 Subject: [PATCH 5/5] refactor(gui-v2): use function declaration instead of const declaration --- packages/nc-gui-v2/composables/useViewData.ts | 133 +++++++++--------- 1 file changed, 67 insertions(+), 66 deletions(-) diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts index a8e585e2ec..09005a623d 100644 --- a/packages/nc-gui-v2/composables/useViewData.ts +++ b/packages/nc-gui-v2/composables/useViewData.ts @@ -75,7 +75,31 @@ export function useViewData( }, }) - const syncCount = async () => { + const queryParams = computed(() => ({ + offset: (paginationData.value?.page ?? 0) - 1, + limit: paginationData.value?.pageSize ?? 25, + where: where?.value ?? '', + })) + + function addEmptyRow(addAfter = formattedData.value.length) { + formattedData.value.splice(addAfter, 0, { + row: {}, + oldRow: {}, + rowMeta: { new: true }, + }) + + return formattedData.value[addAfter] + } + + function removeLastEmptyRow() { + const lastRow = formattedData.value[formattedData.value.length - 1] + + if (lastRow.rowMeta.new) { + formattedData.value.pop() + } + } + + async function syncCount() { const { count } = await $api.dbViewRow.count( NOCO, project?.value?.title as string, @@ -85,14 +109,35 @@ export function useViewData( paginationData.value.totalRows = count } - const queryParams = computed(() => ({ - offset: (paginationData.value?.page ?? 0) - 1, - limit: paginationData.value?.pageSize ?? 25, - where: where?.value ?? '', - })) + async function syncPagination() { + // total records in the current table + const count = paginationData.value?.totalRows ?? Infinity + // the number of rows in a page + const size = paginationData.value?.pageSize ?? 25 + // the current page number + const currentPage = paginationData.value?.page ?? 1 + // the maximum possible page given the current count and the size + const mxPage = Math.ceil(count / size) + // calculate targetPage where 1 <= targetPage <= mxPage + const targetPage = Math.max(1, Math.min(mxPage, currentPage)) + // if the current page is greater than targetPage, + // then the page should be changed instead of showing an empty page + // e.g. deleting all records in the last page N should return N - 1 page + if (currentPage > targetPage) { + // change to target page and load data of that page + changePage?.(targetPage) + } else { + // the current page is same as target page + // reload it to avoid empty row in this page + await loadData({ + offset: (targetPage - 1) * size, + where: where?.value, + } as any) + } + } /** load row comments count */ - const loadAggCommentsCount = async () => { + async function loadAggCommentsCount() { if (isPublic.value || isSharedBase.value) return const ids = formattedData.value @@ -105,7 +150,7 @@ export function useViewData( aggCommentCount.value = await $api.utils.commentCount({ ids, - fk_model_id: meta.value.id as string, + fk_model_id: meta?.value.id as string, }) for (const row of formattedData.value) { @@ -114,10 +159,10 @@ export function useViewData( } } - const loadData = async (params: Parameters['dbViewRow']['list']>[4] = {}) => { + async function loadData(params: Parameters['dbViewRow']['list']>[4] = {}) { if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return const response = !isPublic.value - ? await api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, { + ? await api.dbViewRow.list('noco', project.value.id!, meta?.value.id!, viewMeta!.value.id, { ...params, ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }), ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }), @@ -129,13 +174,13 @@ export function useViewData( await loadAggCommentsCount() } - const loadGalleryData = async () => { + async function loadGalleryData() { if (!viewMeta?.value?.id) return galleryData.value = await $api.dbView.galleryRead(viewMeta.value.id) } - const insertRow = async (row: Record, rowIndex = formattedData.value?.length) => { + async function insertRow(row: Record, rowIndex = formattedData.value?.length) { try { const insertObj = meta?.value?.columns?.reduce((o: any, col) => { if (!col.ai && row?.[col.title as string] !== null) { @@ -165,9 +210,9 @@ export function useViewData( } } - const updateRowProperty = async (toUpdate: Row, property: string) => { + async function updateRowProperty(toUpdate: Row, property: string) { try { - const id = extractPkFromRow(toUpdate.row, meta.value.columns as ColumnType[]) + const id = extractPkFromRow(toUpdate.row, meta?.value.columns as ColumnType[]) const updatedRowData = await $api.dbViewRow.update( NOCO, @@ -202,37 +247,20 @@ export function useViewData( } } - const updateOrSaveRow = async (row: Row, property: string) => { + async function updateOrSaveRow(row: Row, property: string) { if (row.rowMeta.new) { await insertRow(row.row, formattedData.value.indexOf(row)) } else { await updateRowProperty(row, property) } } - const changePage = async (page: number) => { + + async function changePage(page: number) { paginationData.value.page = page await loadData({ offset: (page - 1) * (paginationData.value.pageSize || 25), where: where?.value } as any) } - const addEmptyRow = (addAfter = formattedData.value.length) => { - formattedData.value.splice(addAfter, 0, { - row: {}, - oldRow: {}, - rowMeta: { new: true }, - }) - - return formattedData.value[addAfter] - } - - const removeLastEmptyRow = () => { - const lastRow = formattedData.value[formattedData.value.length - 1] - - if (lastRow.rowMeta.new) { - formattedData.value.pop() - } - } - - const deleteRowById = async (id: string) => { + async function deleteRowById(id: string) { if (!id) { throw new Error("Delete not allowed for table which doesn't have primary Key") } @@ -258,7 +286,7 @@ export function useViewData( return true } - const deleteRow = async (rowIndex: number) => { + async function deleteRow(rowIndex: number) { try { const row = formattedData.value[rowIndex] if (!row.rowMeta.new) { @@ -281,7 +309,7 @@ export function useViewData( } } - const deleteSelectedRows = async () => { + async function deleteSelectedRows() { let row = formattedData.value.length while (row--) { try { @@ -310,34 +338,7 @@ export function useViewData( await syncPagination() } - const syncPagination = async () => { - // total records in the current table - const count = paginationData.value?.totalRows ?? Infinity - // the number of rows in a page - const size = paginationData.value?.pageSize ?? 25 - // the current page number - const currentPage = paginationData.value?.page ?? 1 - // the maximum possible page given the current count and the size - const mxPage = Math.ceil(count / size) - // calculate targetPage where 1 <= targetPage <= mxPage - const targetPage = Math.max(1, Math.min(mxPage, currentPage)) - // if the current page is greater than targetPage, - // then the page should be changed instead of showing an empty page - // e.g. deleting all records in the last page N should return N - 1 page - if (currentPage > targetPage) { - // change to target page and load data of that page - changePage?.(targetPage) - } else { - // the current page is same as target page - // reload it to avoid empty row in this page - await loadData({ - offset: (targetPage - 1) * size, - where: where?.value, - } as any) - } - } - - const loadFormView = async () => { + async function loadFormView() { if (!viewMeta?.value?.id) return try { const { columns, ...view } = (await $api.dbView.formRead(viewMeta.value.id)) as Record @@ -369,7 +370,7 @@ export function useViewData( } } - const updateFormView = async (view: FormType | undefined) => { + async function updateFormView(view: FormType | undefined) { try { if (!viewMeta?.value?.id || !view) return await $api.dbView.formUpdate(viewMeta.value.id, view)