feat: Add per-page support for agent and team overview report pagination (#11110)

# Pull Request Template ## Description This PR includes per-page support for table pagination in agent and team overview reports. ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? ### Loom video https://www.loom.com/share/8c9668fe129c452986d8813a156dd3b8?sid=d637f4fe-ad0c-4f18-ad90-65e50247b3c6 ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
2025-03-19 16:45:59 +05:30
parent c89a2cd672
commit ff9545d03c
4 changed files with 177 additions and 63 deletions
--- a/app/javascript/dashboard/components/table/Pagination.vue
+++ b/app/javascript/dashboard/components/table/Pagination.vue
@@ -1,12 +1,47 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import FilterSelect from 'dashboard/components-next/filter/inputs/FilterSelect.vue';
+
 const props = defineProps({
  table: {
    type: Object,
    required: true,
  },
+  defaultPageSize: {
+    type: Number,
+    default: 10,
+  },
+  showPageSizeSelector: {
+    type: Boolean,
+    default: false,
+  },
 });

+const emit = defineEmits(['pageSizeChange']);
+const { t } = useI18n();
+
+const pageSizeOptions = [
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 10 })}`,
+    value: 10,
+  },
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 20 })}`,
+    value: 20,
+  },
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 50 })}`,
+    value: 50,
+  },
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 100 })}`,
+    value: 100,
+  },
+];
+
 const getFormattedPages = (start, end) => {
  const formatter = new Intl.NumberFormat(navigator.language);
  return Array.from({ length: end - start + 1 }, (_, i) =>
@@ -48,70 +83,98 @@ const end = computed(() => {
    total.value
  );
 });
+
+const currentPageSize = computed({
+  get() {
+    return props.table.getState().pagination.pageSize;
+  },
+  set(newValue) {
+    props.table.setPageSize(Number(newValue));
+    emit('pageSizeChange', Number(newValue));
+  },
+});
+
+onMounted(() => {
+  if (
+    props.showPageSizeSelector &&
+    props.defaultPageSize &&
+    props.defaultPageSize !== 10
+  ) {
+    props.table.setPageSize(props.defaultPageSize);
+  }
+});
 </script>

 <template>
  <div class="flex items-center justify-between">
-    <div class="flex flex-1 items-center justify-between">
-      <div>
-        <p class="text-sm text-n-slate-11 mb-0">
-          {{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
-        </p>
-      </div>
-      <nav class="isolate inline-flex gap-1">
-        <woot-button
-          :disabled="!table.getCanPreviousPage()"
-          variant="clear"
-          class="h-8 border-0 flex items-center"
-          color-scheme="secondary"
-          @click="table.setPageIndex(0)"
-        >
-          <span class="i-lucide-chevrons-left size-3" aria-hidden="true" />
-        </woot-button>
-        <woot-button
-          variant="clear"
-          class="h-8 border-0 flex items-center"
-          color-scheme="secondary"
-          :disabled="!table.getCanPreviousPage()"
-          @click="table.previousPage()"
-        >
-          <span class="i-lucide-chevron-left size-3" aria-hidden="true" />
-        </woot-button>
-        <woot-button
-          v-for="page in visiblePages"
-          :key="page"
-          variant="clear"
-          class="h-8 flex items-center justify-center text-xs leading-none text-center"
-          :class="page == currentPage ? 'border-n-brand' : 'border-slate-50'"
-          color-scheme="secondary"
-          @click="table.setPageIndex(page - 1)"
-        >
-          <span
-            class="text-center"
-            :class="{ 'text-n-brand': page == currentPage }"
+    <div class="flex flex-1 items-center gap-2 justify-between">
+      <p class="text-sm truncate text-n-slate-11 mb-0">
+        {{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
+      </p>
+      <div class="flex items-center gap-2">
+        <FilterSelect
+          v-if="showPageSizeSelector"
+          v-model="currentPageSize"
+          variant="outline"
+          hide-icon
+          class="[&>button]:text-n-slate-11 [&>button]:hover:text-n-slate-12 [&>button]:h-6"
+          :options="pageSizeOptions"
+        />
+        <nav class="isolate inline-flex items-center gap-1.5">
+          <Button
+            icon="i-lucide-chevrons-left"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanPreviousPage()"
+            @click="table.setPageIndex(0)"
+          />
+          <Button
+            icon="i-lucide-chevron-left"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanPreviousPage()"
+            @click="table.previousPage()"
+          />
+          <Button
+            v-for="page in visiblePages"
+            :key="page"
+            xs
+            outline
+            :color="page == currentPage ? 'blue' : 'slate'"
+            class="!h-6 min-w-6"
+            @click="table.setPageIndex(page - 1)"
          >
-            {{ page }}
-          </span>
-        </woot-button>
-        <woot-button
-          :disabled="!table.getCanNextPage()"
-          variant="clear"
-          class="h-8 border-0 flex items-center"
-          color-scheme="secondary"
-          @click="table.nextPage()"
-        >
-          <span class="i-lucide-chevron-right size-3" aria-hidden="true" />
-        </woot-button>
-        <woot-button
-          :disabled="!table.getCanNextPage()"
-          variant="clear"
-          class="h-8 border-0 flex items-center"
-          color-scheme="secondary"
-          @click="table.setPageIndex(table.getPageCount() - 1)"
-        >
-          <span class="i-lucide-chevrons-right size-3" aria-hidden="true" />
-        </woot-button>
-      </nav>
+            <span
+              class="text-center"
+              :class="{ 'text-n-brand': page == currentPage }"
+            >
+              {{ page }}
+            </span>
+          </Button>
+          <Button
+            icon="i-lucide-chevron-right"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanNextPage()"
+            @click="table.nextPage()"
+          />
+          <Button
+            icon="i-lucide-chevrons-right"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanNextPage()"
+            @click="table.setPageIndex(table.getPageCount() - 1)"
+          />
+        </nav>
+      </div>
    </div>
  </div>
 </template>
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -119,7 +119,8 @@
      "EMPTY_LIST": "No results found"
    },
    "PAGINATION": {
-      "RESULTS": "Showing {start} to {end} of {total} results"
+      "RESULTS": "Showing {start} to {end} of {total} results",
+      "PER_PAGE_TEMPLATE": "{size} / page"
    }
  },
  "AGENT_REPORTS": {
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
@@ -7,6 +7,7 @@ import {
  getPaginationRowModel,
 } from '@tanstack/vue-table';
 import { useI18n } from 'vue-i18n';
+import { useUISettings } from 'dashboard/composables/useUISettings';

 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
@@ -30,6 +31,19 @@ const { agents, agentMetrics } = defineProps({
 });

 const { t } = useI18n();
+const { uiSettings, updateUISettings } = useUISettings();
+
+// UI Settings key for agent table page size
+const AGENT_TABLE_PAGE_SIZE_KEY = 'report_overview_agent_table_page_size';
+
+// Get the saved page size from UI settings or default to 10
+const getPageSize = () => {
+  return uiSettings.value[AGENT_TABLE_PAGE_SIZE_KEY] || 10;
+};
+
+const handlePageSizeChange = pageSize => {
+  updateUISettings({ [AGENT_TABLE_PAGE_SIZE_KEY]: pageSize });
+};

 const getAgentMetrics = id =>
  agentMetrics.find(metrics => metrics.assignee_id === Number(id)) || {};
@@ -98,13 +112,24 @@ const table = useVueTable({
  enableSorting: false,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
+  initialState: {
+    pagination: {
+      pageSize: getPageSize(),
+    },
+  },
 });
 </script>

 <template>
  <div class="flex flex-col flex-1">
    <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
-    <Pagination class="mt-2" :table="table" />
+    <Pagination
+      class="mt-2"
+      :table="table"
+      show-page-size-selector
+      :default-page-size="getPageSize()"
+      @page-size-change="handlePageSizeChange"
+    />
    <div
      v-if="isLoading"
      class="items-center flex text-base justify-center p-8"
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue
@@ -7,6 +7,7 @@ import {
  getPaginationRowModel,
 } from '@tanstack/vue-table';
 import { useI18n } from 'vue-i18n';
+import { useUISettings } from 'dashboard/composables/useUISettings';

 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
@@ -29,6 +30,19 @@ const { teams, teamMetrics } = defineProps({
 });

 const { t } = useI18n();
+const { uiSettings, updateUISettings } = useUISettings();
+
+// UI Settings key for team table page size
+const TEAM_TABLE_PAGE_SIZE_KEY = 'report_overview_team_table_page_size';
+
+// Get the saved page size from UI settings or default to 10
+const getPageSize = () => {
+  return uiSettings.value[TEAM_TABLE_PAGE_SIZE_KEY] || 10;
+};
+
+const handlePageSizeChange = pageSize => {
+  updateUISettings({ [TEAM_TABLE_PAGE_SIZE_KEY]: pageSize });
+};

 const getTeamMetrics = id =>
  teamMetrics.find(metrics => metrics.team_id === Number(id)) || {};
@@ -92,13 +106,24 @@ const table = useVueTable({
  enableSorting: false,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
+  initialState: {
+    pagination: {
+      pageSize: getPageSize(),
+    },
+  },
 });
 </script>

 <template>
  <div class="flex flex-col flex-1">
    <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
-    <Pagination class="mt-2" :table="table" />
+    <Pagination
+      class="mt-2"
+      :table="table"
+      show-page-size-selector
+      :default-page-size="getPageSize()"
+      @page-size-change="handlePageSizeChange"
+    />
    <div
      v-if="isLoading"
      class="items-center flex text-base justify-center p-8"