Merge pull request #390 from zhang-accounting/389-journal-pagination-…

…optimization fix: page click event in pagination
zhang-accounting · Nov 19, 2024 · f513f80 · f513f80
2 parents ff22a87 + 1a6fdfa
commit f513f80
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 42 deletions.
diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
@@ -54,5 +54,8 @@
   "LEDGER_IS_HEALTHY": "Ledger is healthy",
   "accounts": {
     "hide_closed_accounts": "Hide closed accounts"
-  }
+  },
+  "PAGE": "page",
+  "PAGINATION_PREVIOUS": "Previous",
+  "PAGINATION_NEXT": "Next"
 }
diff --git a/frontend/public/locales/zh/translation.json b/frontend/public/locales/zh/translation.json
@@ -51,5 +51,8 @@
   "TRANSACTION_EDIT_MODAL_SAVE": "保存",
   "TRANSACTION_PREVIEW_MODAL_CLOSE": "关闭",
   "TRANSACTION_EDIT_MODAL_DESCRIPTION": "编辑流水项",
-  "TRANSACTION_EDIT_MODAL_TITLE": "编辑流水项"
+  "TRANSACTION_EDIT_MODAL_TITLE": "编辑流水项",
+  "PAGE": "页",
+  "PAGINATION_PREVIOUS": "上一页",
+  "PAGINATION_NEXT": "下一页"
 }
diff --git a/frontend/src/components/ui/pagination.tsx b/frontend/src/components/ui/pagination.tsx
@@ -3,9 +3,10 @@ import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui
 
 import { cn } from '@/lib/utils';
 import { ButtonProps, buttonVariants } from '@/components/ui/button';
+import { useTranslation } from 'react-i18next';
 
 const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
-  <nav role="navigation" aria-label="pagination" className={cn('mx-auto flex w-full justify-center', className)} {...props} />
+  <nav role="navigation" aria-label="pagination" className={cn('mx-auto flex justify-center', className)} {...props} />
 );
 Pagination.displayName = 'Pagination';
 
@@ -39,20 +40,26 @@ const PaginationLink = ({ className, isActive, size = 'icon', ...props }: Pagina
 );
 PaginationLink.displayName = 'PaginationLink';
 
-const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink aria-label="Go to previous page" size="default" className={cn('gap-1 pl-2.5', className)} {...props}>
-    <ChevronLeftIcon className="h-4 w-4" />
-    <span>Previous</span>
-  </PaginationLink>
-);
+const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => {
+  const { t } = useTranslation();
+  return (
+    <PaginationLink aria-label="Go to previous page" size="default" className={cn('gap-1 pl-2.5', className)} {...props}>
+      <ChevronLeftIcon className="h-4 w-4" />
+      <span>{t('PAGINATION_PREVIOUS')}</span>
+    </PaginationLink>
+  );
+};
 PaginationPrevious.displayName = 'PaginationPrevious';
 
-const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink aria-label="Go to next page" size="default" className={cn('gap-1 pr-2.5', className)} {...props}>
-    <span>Next</span>
-    <ChevronRightIcon className="h-4 w-4" />
-  </PaginationLink>
-);
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => {
+  const { t } = useTranslation();
+  return (
+    <PaginationLink aria-label="Go to next page" size="default" className={cn('gap-1 pr-2.5', className)} {...props}>
+      <span>{t('PAGINATION_NEXT')}</span>
+      <ChevronRightIcon className="h-4 w-4" />
+    </PaginationLink>
+  );
+};
 PaginationNext.displayName = 'PaginationNext';
 
 const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (

diff --git a/frontend/src/pages/Journals.tsx b/frontend/src/pages/Journals.tsx
@@ -17,6 +17,7 @@ import { X } from 'lucide-react';
 import { JOURNALS_LINK } from '@/layout/Sidebar';
 import { TransactionPreviewModal } from '@/components/modals/TransactionPreviewModal';
 import { TransactionEditModal } from '@/components/modals/TransactionEditModal';
+
 function Journals() {
   const setBreadcrumb = useSetAtom(breadcrumbAtom);
   const { t } = useTranslation();
@@ -122,35 +123,57 @@ function Journals() {
           </TableBody>
         </Table>
       </div>
-      <Pagination className="my-4">
-        <PaginationContent>
-          {journalPage > 1 && (
-            <PaginationItem>
-              <PaginationPrevious href="#" onClick={() => onPage(journalPage - 1)} />
-            </PaginationItem>
-          )}
-          {journalPage > 1 && (
-            <PaginationItem>
-              <PaginationLink href="#">{journalPage - 1}</PaginationLink>
-            </PaginationItem>
-          )}
-          <PaginationItem>
-            <PaginationLink href="#" isActive>
-              {journalPage}
-            </PaginationLink>
-          </PaginationItem>
-          {journalPage < total_page && (
-            <PaginationItem>
-              <PaginationLink href="#">{journalPage + 1}</PaginationLink>
-            </PaginationItem>
-          )}
-          {journalPage < total_page && (
+      <div className="flex items-center gap-4 my-4">
+        <div className={'inline-block'}>
+          {journalItems.state === 'hasData' ? journalItems.data?.total_page : 0} {t('PAGE')}
+        </div>
+        <Pagination>
+          <PaginationContent>
+            {journalPage > 1 && (
+              <PaginationItem>
+                <PaginationPrevious className="cursor-pointer" onClick={() => onPage(journalPage - 1)} />
+              </PaginationItem>
+            )}
+            {journalPage > 2 && (
+              <PaginationItem>
+                <PaginationLink className="cursor-pointer" onClick={() => onPage(journalPage - 2)}>
+                  {journalPage - 2}
+                </PaginationLink>
+              </PaginationItem>
+            )}
+            {journalPage > 1 && (
+              <PaginationItem>
+                <PaginationLink className="cursor-pointer" onClick={() => onPage(journalPage - 1)}>
+                  {journalPage - 1}
+                </PaginationLink>
+              </PaginationItem>
+            )}
             <PaginationItem>
-              <PaginationNext href="#" onClick={() => onPage(journalPage + 1)} />
+              <PaginationLink isActive>{journalPage}</PaginationLink>
             </PaginationItem>
-          )}
-        </PaginationContent>
-      </Pagination>
+            {journalPage < total_page && (
+              <PaginationItem>
+                <PaginationLink className="cursor-pointer" onClick={() => onPage(journalPage + 1)}>
+                  {journalPage + 1}
+                </PaginationLink>
+              </PaginationItem>
+            )}
+            {journalPage + 1 < total_page && (
+              <PaginationItem>
+                <PaginationLink className="cursor-pointer" onClick={() => onPage(journalPage + 2)}>
+                  {journalPage + 2}
+                </PaginationLink>
+              </PaginationItem>
+            )}
+            {journalPage < total_page && (
+              <PaginationItem>
+                <PaginationNext className="cursor-pointer" onClick={() => onPage(journalPage + 1)} />
+              </PaginationItem>
+            )}
+          </PaginationContent>
+        </Pagination>
+        <div></div>
+      </div>
     </div>
   );
 }