Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

[Feat]: Add pagination size dropdown #3593

Merged
merged 3 commits into from
Feb 6, 2025
Merged

[Feat]: Add pagination size dropdown #3593

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3a164b5
feat: add pagination size control to team stats table
Innocent-Akim Feb 6, 2025
4057ac9
feat: make pagination options dynamic based on data size
Innocent-Akim Feb 6, 2025
d1d2a7b
fix: dropdown
Innocent-Akim Feb 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 20 additions & 9 deletions apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { PaginationDropdown } from '@/lib/settings/page-dropdown';
import { format } from 'date-fns';
import { ITimerLogGrouped } from '@/app/interfaces';
import { Spinner } from '@/components/ui/loaders/spinner';
Expand Down Expand Up @@ -34,7 +35,7 @@ const formatPercentage = (value: number) => {
return `${Math.round(value)}%`;
};

const ITEMS_PER_PAGE = 10;


export function TeamStatsTable({
rapportDailyActivity,
Expand All @@ -44,9 +45,10 @@ export function TeamStatsTable({
isLoading?: boolean;
}) {
const [currentPage, setCurrentPage] = useState(1);
const totalPages = rapportDailyActivity ? Math.ceil(rapportDailyActivity.length / ITEMS_PER_PAGE) : 0;
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
const endIndex = startIndex + ITEMS_PER_PAGE;
const [pageSize, setPageSize] = useState(10);
const totalPages = rapportDailyActivity ? Math.ceil(rapportDailyActivity.length / pageSize) : 0;
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
const { openModal, closeModal, isOpen } = useModal();
const paginatedData = rapportDailyActivity?.slice(startIndex, endIndex);

Expand Down Expand Up @@ -188,11 +190,7 @@ export function TeamStatsTable({
</div>
</div>
</div>
<div className="flex flex-col gap-4 justify-between items-center px-2 sm:flex-row">
<div className="text-sm text-center text-gray-500 sm:text-left">
Showing {startIndex + 1} to {Math.min(endIndex, rapportDailyActivity.length)} of{' '}
{rapportDailyActivity.length} entries
</div>
<div className="flex flex-col gap-4 justify-between items-center p-3 px-2 sm:flex-row">
<div className="flex items-center space-x-2">
<Button variant="outline" size="icon" onClick={goToFirstPage} disabled={currentPage === 1}>
<ChevronsLeft className="w-4 h-4" />
Expand Down Expand Up @@ -220,6 +218,19 @@ export function TeamStatsTable({
<ChevronsRight className="w-4 h-4" />
</Button>
</div>
<div className="flex gap-4 items-center">
<PaginationDropdown
setValue={(value) => {
setPageSize(value);
setCurrentPage(1);
}}
total={rapportDailyActivity?.length}
/>
<div className="text-sm text-center text-[#111827] sm:text-left">
Showing {startIndex + 1} to {Math.min(endIndex, rapportDailyActivity.length)} of{' '}
{rapportDailyActivity.length} entries
</div>
</div>
</div>
</div>
);
Expand Down
30 changes: 27 additions & 3 deletions apps/web/lib/settings/page-dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,29 @@ import { ChevronDownIcon } from 'lucide-react';

export const PaginationDropdown = ({
setValue,
active
active,
total
}: {
setValue: Dispatch<SetStateAction<number>>;
active?: IPagination | null;
total?: number;
}) => {
const calculatePaginationOptions = useCallback((total = 0) => {
const baseOptions = [10, 20, 30,40, 50];

if (total > 50) {
const nextOption = Math.ceil(total / 10) * 10;
if (!baseOptions.includes(nextOption)) {
baseOptions.push(nextOption);
}
}
baseOptions.sort((a, b) => a - b);

return baseOptions.map(size => ({
title: size.toString()
}));
}, []);

const [paginationList, setPagination] = useState<IPagination[]>([
{
title: '10'
Expand All @@ -33,6 +51,12 @@ export const PaginationDropdown = ({
}
]);

useEffect(() => {
if (total) {
setPagination(calculatePaginationOptions(total));
}
}, [total, calculatePaginationOptions]);

const items: PaginationItems[] = useMemo(() => mappaginationItems(paginationList), [paginationList]);
const [open, setOpen] = useState(false);
const [paginationItem, setPaginationItem] = useState<PaginationItems | null>();
Expand Down Expand Up @@ -72,9 +96,9 @@ export const PaginationDropdown = ({
onClick={() => setOpen(!open)}
className={clsxm(
'input-border',
'w-full flex justify-between rounded-xl px-3 py-2 text-sm items-center',
'flex justify-between items-center px-3 py-2 w-full text-sm rounded-xl',
'font-normal outline-none',
'py-0 font-medium h-[45px] w-[145px] z-10 outline-none dark:bg-dark--theme-light'
'z-10 py-0 font-medium outline-none h-[45px] w-[145px] dark:bg-dark--theme-light'
)}
>
<span>{paginationItem?.selectedLabel || (paginationItem?.Label && <paginationItem.Label />)}</span>{' '}
Expand Down