Skip to content

Commit b1d9505

Browse files
KilerdKilerd
committed
fix: page click event in pagination
Signed-off-by: Kilerd Chan <[email protected]>
1 parent ff22a87 commit b1d9505

File tree

4 files changed

+83
-34
lines changed

4 files changed

+83
-34
lines changed

‎frontend/public/locales/en/translation.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -54,5 +54,6 @@
5454
"LEDGER_IS_HEALTHY": "Ledger is healthy",
5555
"accounts": {
5656
"hide_closed_accounts": "Hide closed accounts"
57-
}
57+
},
58+
"PAGE": "page"
5859
}

‎frontend/public/locales/zh/translation.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -51,5 +51,6 @@
5151
"TRANSACTION_EDIT_MODAL_SAVE": "保存",
5252
"TRANSACTION_PREVIEW_MODAL_CLOSE": "关闭",
5353
"TRANSACTION_EDIT_MODAL_DESCRIPTION": "编辑流水项",
54-
"TRANSACTION_EDIT_MODAL_TITLE": "编辑流水项"
54+
"TRANSACTION_EDIT_MODAL_TITLE": "编辑流水项",
55+
"PAGE": "页"
5556
}

‎frontend/src/components/ui/pagination.tsx

+14-3
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,14 @@ import { cn } from '@/lib/utils';
55
import { ButtonProps, buttonVariants } from '@/components/ui/button';
66

77
const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
8-
<nav role="navigation" aria-label="pagination" className={cn('mx-auto flex w-full justify-center', className)} {...props} />
8+
<nav role="navigation" aria-label="pagination" className={cn('mx-auto flex justify-center', className)} {...props} />
99
);
1010
Pagination.displayName = 'Pagination';
1111

12-
const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(({ className, ...props }, ref) => (
12+
const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(({
13+
className,
14+
...props
15+
}, ref) => (
1316
<ul ref={ref} className={cn('flex flex-row items-center gap-1', className)} {...props} />
1417
));
1518
PaginationContent.displayName = 'PaginationContent';
@@ -63,4 +66,12 @@ const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'
6366
);
6467
PaginationEllipsis.displayName = 'PaginationEllipsis';
6568

66-
export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis };
69+
export {
70+
Pagination,
71+
PaginationContent,
72+
PaginationLink,
73+
PaginationItem,
74+
PaginationPrevious,
75+
PaginationNext,
76+
PaginationEllipsis,
77+
};

‎frontend/src/pages/Journals.tsx

+65-29
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,34 @@ import { useDebouncedValue, useDocumentTitle } from '@mantine/hooks';
55
import { JournalListSkeleton } from '../components/skeletons/journalListSkeleton';
66
import { useAtomValue } from 'jotai/index';
77
import { breadcrumbAtom, titleAtom } from '../states/basic';
8-
import { groupedJournalsAtom, journalAtom, journalFetcher, journalKeywordAtom, journalLinksAtom, journalPageAtom, journalTagsAtom } from '../states/journals';
8+
import {
9+
groupedJournalsAtom,
10+
journalAtom,
11+
journalFetcher,
12+
journalKeywordAtom,
13+
journalLinksAtom,
14+
journalPageAtom,
15+
journalTagsAtom,
16+
} from '../states/journals';
917
import { useAtom, useSetAtom } from 'jotai';
1018
import { loadable_unwrap } from '../states';
1119
import { selectAtom } from 'jotai/utils';
1220
import { Input } from '@/components/ui/input';
1321
import { Button } from '@/components/ui/button';
1422
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
15-
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@/components/ui/pagination';
23+
import {
24+
Pagination,
25+
PaginationContent,
26+
PaginationItem,
27+
PaginationLink,
28+
PaginationNext,
29+
PaginationPrevious,
30+
} from '@/components/ui/pagination';
1631
import { X } from 'lucide-react';
1732
import { JOURNALS_LINK } from '@/layout/Sidebar';
1833
import { TransactionPreviewModal } from '@/components/modals/TransactionPreviewModal';
1934
import { TransactionEditModal } from '@/components/modals/TransactionEditModal';
35+
2036
function Journals() {
2137
const setBreadcrumb = useSetAtom(breadcrumbAtom);
2238
const { t } = useTranslation();
@@ -122,35 +138,55 @@ function Journals() {
122138
</TableBody>
123139
</Table>
124140
</div>
125-
<Pagination className="my-4">
126-
<PaginationContent>
127-
{journalPage > 1 && (
128-
<PaginationItem>
129-
<PaginationPrevious href="#" onClick={() => onPage(journalPage - 1)} />
130-
</PaginationItem>
131-
)}
132-
{journalPage > 1 && (
133-
<PaginationItem>
134-
<PaginationLink href="#">{journalPage - 1}</PaginationLink>
135-
</PaginationItem>
136-
)}
137-
<PaginationItem>
138-
<PaginationLink href="#" isActive>
139-
{journalPage}
140-
</PaginationLink>
141-
</PaginationItem>
142-
{journalPage < total_page && (
141+
<div className="flex items-center gap-4 my-4">
142+
<div
143+
className={'inline-block'}>{journalItems.state === 'hasData' ? journalItems.data?.total_page : 0} {t('PAGE')}</div>
144+
<Pagination>
145+
<PaginationContent>
146+
{journalPage > 1 && (
147+
<PaginationItem>
148+
<PaginationPrevious className="cursor-pointer" onClick={() => onPage(journalPage - 1)} />
149+
</PaginationItem>
150+
)}
151+
{journalPage > 2 && (
152+
<PaginationItem>
153+
<PaginationLink className="cursor-pointer"
154+
onClick={() => onPage(journalPage - 2)}>{journalPage - 2}</PaginationLink>
155+
</PaginationItem>
156+
)}
157+
{journalPage > 1 && (
158+
<PaginationItem>
159+
<PaginationLink className="cursor-pointer"
160+
onClick={() => onPage(journalPage - 1)}>{journalPage - 1}</PaginationLink>
161+
</PaginationItem>
162+
)}
143163
<PaginationItem>
144-
<PaginationLink href="#">{journalPage + 1}</PaginationLink>
164+
<PaginationLink isActive>
165+
{journalPage}
166+
</PaginationLink>
145167
</PaginationItem>
146-
)}
147-
{journalPage < total_page && (
148-
<PaginationItem>
149-
<PaginationNext href="#" onClick={() => onPage(journalPage + 1)} />
150-
</PaginationItem>
151-
)}
152-
</PaginationContent>
153-
</Pagination>
168+
{journalPage < total_page && (
169+
<PaginationItem>
170+
<PaginationLink className="cursor-pointer"
171+
onClick={() => onPage(journalPage + 1)}>{journalPage + 1}</PaginationLink>
172+
</PaginationItem>
173+
)}
174+
{journalPage + 1 < total_page && (
175+
<PaginationItem>
176+
<PaginationLink className="cursor-pointer"
177+
onClick={() => onPage(journalPage + 2)}>{journalPage + 2}</PaginationLink>
178+
</PaginationItem>
179+
)}
180+
{journalPage < total_page && (
181+
<PaginationItem>
182+
<PaginationNext className="cursor-pointer" onClick={() => onPage(journalPage + 1)} />
183+
</PaginationItem>
184+
)}
185+
</PaginationContent>
186+
</Pagination>
187+
<div></div>
188+
</div>
189+
154190
</div>
155191
);
156192
}

0 commit comments

Comments
 (0)