LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
# 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
This commit is contained in:
Sivin Varghese
2025-03-19 16:45:59 +05:30
committed by GitHub
parent c89a2cd672
commit ff9545d03c
4 changed files with 177 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
app/javascript/dashboard/components/table/Pagination.vue
View File

@@ -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>