Merge pull request #49 from david-roper/client-table-pages

Add Client table first and last page buttons

Author: joshunrau

src/components/ClientTable/ClientTable.spec.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { ClientTable } from './ClientTable';
+
+const TEST_ID = 'ClientTable';
+const FIRST_BUTTON_ID = 'first-page-button';
+const PREVIOUS_BUTTON_ID = 'previous-page-button';
+const NEXT_BUTTON_ID = 'next-page-button';
+const LAST_BUTTON_ID = 'last-page-button';
+
+describe('ClientTable', () => {
+  it('should render', () => {
+    render(<ClientTable columns={[]} data={[]} minRows={10} />);
+    expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+    expect(screen.getByTestId(FIRST_BUTTON_ID)).toBeInTheDocument();
+    expect(screen.getByTestId(PREVIOUS_BUTTON_ID)).toBeInTheDocument();
+    expect(screen.getByTestId(NEXT_BUTTON_ID)).toBeInTheDocument();
+    expect(screen.getByTestId(LAST_BUTTON_ID)).toBeInTheDocument();
+  });
+  it('should contain a custom class name', () => {
+    render(<ClientTable className="foo" columns={[]} data={[]} minRows={10} />);
+    expect(screen.getByTestId(TEST_ID)).toHaveClass('foo');
+  });
+});

src/components/ClientTable/ClientTable.tsx

@@ -85,7 +85,7 @@ export const ClientTable = <T extends ClientTableEntry>({
   const nRows = Math.max(currentEntries.length, minRows ?? -1);
 
   return (
-    <div className={className} {...props}>
+    <div className={className} {...props} data-testid="ClientTable">
       <div className="rounded-md border bg-card tracking-tight text-muted-foreground shadow-sm">
         <Table>
           <Table.Header>

src/components/ClientTable/ClientTablePagination.tsx

@@ -27,6 +27,18 @@ export const ClientTablePagination = ({
       </div>
       <div className="flex flex-1 justify-between gap-3 sm:justify-end">
         <Button
+          data-testid="first-page-button"
+          disabled={currentPage === 1}
+          type="button"
+          variant="outline"
+          onClick={() => {
+            setCurrentPage(1);
+          }}
+        >
+          {t('pagination.firstPage')}
+        </Button>
+        <Button
+          data-testid="previous-page-button"
           disabled={currentPage === 1}
           type="button"
           variant="outline"
@@ -37,6 +49,7 @@ export const ClientTablePagination = ({
           {t('pagination.previous')}
         </Button>
         <Button
+          data-testid="next-page-button"
           disabled={currentPage === pageCount}
           type="button"
           variant="outline"
@@ -46,6 +59,17 @@ export const ClientTablePagination = ({
         >
           {t('pagination.next')}
         </Button>
+        <Button
+          data-testid="last-page-button"
+          disabled={currentPage === pageCount}
+          type="button"
+          variant="outline"
+          onClick={() => {
+            setCurrentPage(pageCount);
+          }}
+        >
+          {t('pagination.lastPage')}
+        </Button>
       </div>
     </div>
   );

src/i18n/translations/libui.json

@@ -143,6 +143,14 @@
     "previous": {
       "en": "Previous",
       "fr": "Précédent"
+    },
+    "firstPage": {
+      "en": "<< First",
+      "fr": "<< Première"
+    },
+    "lastPage": {
+      "en": "Last >>",
+      "fr": "Dernière >>"
     }
   },
   "searchBar": {