fix: Integrated pagination changes to grid

packages/nc-gui/components/nc/Pagination.vue

@@ -24,17 +24,59 @@ const changePage = ({ increase }: { increase: boolean }) => {
     current.value = current.value - 1
   }
 }
+
+const goToLastPage = () => {
+  current.value = totalPages.value
+}
+
+const goToFirstPage = () => {
+  current.value = 1
+}
 </script>
 
 <template>
   <div class="nc-pagination flex flex-row items-center gap-x-2">
-    <NcButton type="secondary" size="small" :disabled="current === 1" @click="changePage({ increase: false })">
+    <NcButton
+      v-if="!isMobileMode"
+      class="first-page"
+      type="secondary"
+      size="small"
+      :disabled="current === 1"
+      @click="goToFirstPage"
+    >
+      <GeneralIcon icon="doubleLeftArrow" />
+    </NcButton>
+
+    <NcButton class="prev-page" type="secondary" size="small" :disabled="current === 1" @click="changePage({ increase: false })">
       <GeneralIcon icon="arrowLeft" />
     </NcButton>
-    <div class="text-gray-600">{{ current }} {{ isMobileMode ? '/' : 'of' }} {{ totalPages }}</div>
+    <div class="text-gray-600">
+      <span class="active"> {{ current }} </span>
+      <span class="mx-1"> {{ isMobileMode ? '/' : 'of' }} </span>
+      <span class="total">
+        {{ totalPages }}
+      </span>
+    </div>
 
-    <NcButton type="secondary" size="small" :disabled="current === totalPages" @click="changePage({ increase: true })">
+    <NcButton
+      class="next-page"
+      type="secondary"
+      size="small"
+      :disabled="current === totalPages"
+      @click="changePage({ increase: true })"
+    >
       <GeneralIcon icon="arrowRight" />
     </NcButton>
+
+    <NcButton
+      v-if="!isMobileMode"
+      class="last-page"
+      type="secondary"
+      size="small"
+      :disabled="current === totalPages"
+      @click="goToLastPage"
+    >
+      <GeneralIcon icon="doubleRightArrow" />
+    </NcButton>
   </div>
 </template>

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

@@ -60,7 +60,7 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
 
 <template>
   <div
-    class="flex items-center bg-white border-gray-200 nc-pagination-wrapper"
+    class="flex items-center bg-white border-gray-200 nc-grid-pagination-wrapper"
     :class="{ 'border-t-1': !isGroupBy, 'h-13': isMobileMode, 'h-10': !isMobileMode }"
     :style="`${fixedSize ? `width: ${fixedSize}px;` : ''}${
       isGroupBy ? 'margin-top:1px; border-radius: 0 0 12px 12px !important;' : ''
@@ -120,7 +120,7 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
 </template>
 
 <style lang="scss">
-.nc-pagination-wrapper {
+.nc-grid-pagination-wrapper {
   .ant-pagination-item-active {
     a {
       @apply text-sm !text-gray-700 !hover:text-gray-800;

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

@@ -1622,7 +1622,7 @@ const handleCellClick = (event: MouseEvent, row: number, col: number) => {
             placement="top"
             @click="isAddNewRecordGridMode ? addEmptyRow() : onNewRecordToFormClick()"
           >
-            <div class="flex items-center px-2 text-gray-600 hover:text-black">
+            <div data-testid="nc-pagination-add-record" class="flex items-center px-2 text-gray-600 hover:text-black">
               <span>
                 <template v-if="isAddNewRecordGridMode"> {{ $t('activity.newRecord') }} </template>
                 <template v-else> {{ $t('activity.newRecord') }} - {{ $t('objects.viewType.form') }} </template>
@@ -1687,7 +1687,7 @@ const handleCellClick = (event: MouseEvent, row: number, col: number) => {
 </template>
 
 <style lang="scss">
-.nc-pagination-wrapper .ant-dropdown-button {
+.nc-grid-pagination-wrapper .ant-dropdown-button {
   > .ant-btn {
     @apply !p-0 !rounded-l-lg hover:border-gray-400;
   }

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

@@ -272,7 +272,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss">
-.nc-pagination-wrapper .ant-dropdown-button {
+.nc-grid-pagination-wrapper .ant-dropdown-button {
   > .ant-btn {
     @apply !p-0 !rounded-l-lg hover:border-gray-300;
   }

tests/playwright/pages/Dashboard/Grid/index.ts

@@ -299,40 +299,23 @@ export class GridPage extends BasePage {
     expect(parseInt(recordCnt)).toEqual(count);
   }
 
-  async verifyPaginationCount({ count }: { count: number }) {
-    let i = 0;
-    await this.get().locator(`.nc-pagination`).first().waitFor();
-    let records = await this.get().locator(`[data-testid="grid-pagination"]`).allInnerTexts();
-    let recordCnt = records[0].split(' ')[0];
-
-    while (parseInt(recordCnt) !== count && i < 5) {
-      await this.get().locator(`.nc-pagination`).first().waitFor();
-      records = await this.get().locator(`[data-testid="grid-pagination"]`).allInnerTexts();
-      recordCnt = records[0].split(' ')[0];
-
-      // to ensure page loading is complete
-      i++;
-      await this.rootPage.waitForTimeout(300 * i);
+  async verifyPaginationCount({ count }: { count: string }) {
+    await expect(this.get().locator(`.nc-pagination .total`)).toHaveText(count);
   }
-    expect(parseInt(recordCnt)).toEqual(count);
-  }
-
-  private async pagination({ page }: { page: string }) {
-    await this.get().locator(`.nc-pagination`).waitFor();
-
-    if (page === '<') return this.get().locator('.nc-pagination > .ant-pagination-prev');
-    if (page === '>') return this.get().locator('.nc-pagination > .ant-pagination-next');
 
-    return this.get().locator(`.nc-pagination > .ant-pagination-item.ant-pagination-item-${page}`);
-  }
-
-  async clickPagination({ page, skipWait = false }: { page: string; skipWait?: boolean }) {
+  async clickPagination({
+    type,
+    skipWait = false,
+  }: {
+    type: 'first-page' | 'last-page' | 'next-page' | 'prev-page';
+    skipWait?: boolean;
+  }) {
     if (!skipWait) {
-      await (await this.pagination({ page })).click();
+      await this.get().locator(`.nc-pagination .${type}`).click();
       await this.waitLoading();
     } else {
       await this.waitForResponse({
-        uiAction: async () => (await this.pagination({ page })).click(),
+        uiAction: async () => (await this.get().locator(`.nc-pagination .${type}`)).click(),
         httpMethodsToMatch: ['GET'],
         requestUrlPathToMatch: '/views/',
         responseJsonMatcher: resJson => resJson?.pageInfo,
@@ -342,8 +325,8 @@ export class GridPage extends BasePage {
     }
   }
 
-  async verifyActivePage({ page }: { page: string }) {
-    await expect(await this.pagination({ page })).toHaveClass(/ant-pagination-item-active/);
+  async verifyActivePage({ pageNumber }: { pageNumber: string }) {
+    await expect(this.get().locator(`.nc-pagination .active`)).toHaveText(pageNumber);
   }
 
   async waitLoading() {

tests/playwright/pages/Dashboard/common/Footbar/index.ts

@@ -17,11 +17,11 @@ export class FootbarPage extends BasePage {
     this.parent = parent;
     this.leftSidebarToggle = this.get().locator(`div.nc-sidebar-left-toggle-icon`);
     this.rightSidebarToggle = this.get().locator(`div.nc-sidebar-right-toggle-icon`);
-    this.btn_addNewRow = this.get().locator('button.ant-btn').nth(0);
+    this.btn_addNewRow = this.get().getByTestId('nc-pagination-add-record');
   }
 
   get() {
-    return this.rootPage.locator(`div.nc-pagination-wrapper`);
+    return this.rootPage.locator(`div.nc-grid-pagination-wrapper`);
   }
 
   async clickAddRecord() {

tests/playwright/quickTests/commonTest.ts

@@ -190,11 +190,11 @@ const quickVerify = async ({
   }
 
   // Verify pagination
-  await dashboard.grid.verifyActivePage({ page: '1' });
-  await dashboard.grid.clickPagination({ page: '>', skipWait: true });
-  await dashboard.grid.verifyActivePage({ page: '2' });
-  await dashboard.grid.clickPagination({ page: '<', skipWait: true });
-  await dashboard.grid.verifyActivePage({ page: '1' });
+  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' });
 

tests/playwright/tests/db/features/pagination.spec.ts

@@ -22,10 +22,10 @@ test.describe('Grid pagination', () => {
 
     await dashboard.treeView.openTable({ title: 'Country' });
     // click ">" to go to next page
-    await dashboard.grid.clickPagination({ page: '>' });
-    await dashboard.grid.verifyActivePage({ page: '2' });
+    await dashboard.grid.clickPagination({ type: 'next-page' });
+    await dashboard.grid.verifyActivePage({ pageNumber: '2' });
     // click "<" to go to prev page
-    await dashboard.grid.clickPagination({ page: '<' });
-    await dashboard.grid.verifyActivePage({ page: '1' });
+    await dashboard.grid.clickPagination({ type: 'prev-page' });
+    await dashboard.grid.verifyActivePage({ pageNumber: '1' });
   });
 });