Merge pull request #187 from CBIIT/dev-1.2.0

Add First Page and Last Page buttons to table navigation
CBIIT · Apr 26, 2023 · 801cdaf · 801cdaf
2 parents 51e92df + 3d26b13
commit 801cdaf
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 2 deletions.
diff --git a/src/bento-components/components/datatables/components/TablePagination.js b/src/bento-components/components/datatables/components/TablePagination.js
@@ -69,6 +69,11 @@ class TablePagination extends React.Component {
             page={getPageValue(count, rowsPerPage, page)}
             labelRowsPerPage={textLabels.rowsPerPage}
             labelDisplayedRows={({ from, to, count }) => `${from}-${to} ${textLabels.displayRows} ${count}`}
+            firstIconButtonProps={{
+              id: 'pagination-first',
+              'data-testid': 'pagination-first',
+              'aria-label': textLabels.first,
+            }}
             backIconButtonProps={{
               id: 'pagination-back',
               'data-testid': 'pagination-back',
@@ -79,6 +84,11 @@ class TablePagination extends React.Component {
               'data-testid': 'pagination-next',
               'aria-label': textLabels.next,
             }}
+            lastIconButtonProps={{
+              id: 'pagination-last',
+              'data-testid': 'pagination-last',
+              'aria-label': textLabels.last,
+            }}
             SelectProps={{
               id: 'pagination-input',
               SelectDisplayProps: { id: 'pagination-rows', 'data-testid': 'pagination-rows' },

diff --git a/src/bento-components/components/datatables/textLabels.js b/src/bento-components/components/datatables/textLabels.js
@@ -7,8 +7,10 @@ const getTextLabels = () => ({
     toolTip: 'Sort',
   },
   pagination: {
+    first: 'First Page',
     next: 'Next Page',
     previous: 'Previous Page',
+    last: 'Last Page',
     rowsPerPage: 'Rows per page:',
     displayRows: 'of',
   },

diff --git a/src/components/serverPaginatedTable/serverPaginatedTable.js b/src/components/serverPaginatedTable/serverPaginatedTable.js
@@ -7,10 +7,76 @@ import TableRow from '@material-ui/core/TableRow';
 import TablePagination from '@material-ui/core/TablePagination';
 import cloneDeep from 'lodash/cloneDeep';
 import { CircularProgress, Backdrop, withStyles } from '@material-ui/core';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import FirstPageIcon from '@material-ui/icons/FirstPage';
+import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
+import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
+import LastPageIcon from '@material-ui/icons/LastPage';
 import { CustomDataTable } from '../../bento-components';
 import client from '../../utils/graphqlClient';
 import CSVDownloadToolbar from './components/CSVDownloadCustomToolbar';
 
+const useStyles1 = makeStyles((theme) => ({
+  root: {
+    flexShrink: 0,
+    marginLeft: theme.spacing(2.5),
+  },
+}));
+
+function TablePaginationActions(props) {
+  const classes = useStyles1();
+  const theme = useTheme();
+  const {
+    count, page, rowsPerPage, onPageChange,
+  } = props;
+
+  const handleFirstPageButtonClick = (event) => {
+    onPageChange(event, 0);
+  };
+
+  const handleBackButtonClick = (event) => {
+    onPageChange(event, page - 1);
+  };
+
+  const handleNextButtonClick = (event) => {
+    onPageChange(event, page + 1);
+  };
+
+  const handleLastPageButtonClick = (event) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+
+  return (
+    <div className={classes.root}>
+      <IconButton
+        onClick={handleFirstPageButtonClick}
+        disabled={page === 0}
+        aria-label="first page"
+      >
+        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
+      </IconButton>
+      <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
+        {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
+      </IconButton>
+      <IconButton
+        onClick={handleNextButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="next page"
+      >
+        {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
+      </IconButton>
+      <IconButton
+        onClick={handleLastPageButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="last page"
+      >
+        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
+      </IconButton>
+    </div>
+  );
+}
+
 class ServerPaginatedTableView extends React.Component {
   state = {
     count: 1,
@@ -337,6 +403,7 @@ class ServerPaginatedTableView extends React.Component {
               onChangeRowsPerPage={(event) => { this.setState({ rowsPerPage: event.target.value }); changePage(page); changeRowsPerPage(event.target.value); }}
               // eslint-disable-next-line no-shadow
               onChangePage={(_, page) => changePage(page)}
+              ActionsComponent={TablePaginationActions}
             />
           </TableRow>
         </TableFooter>

diff --git a/src/pages/caseDetail/caseDetailTabThemeConfig.js b/src/pages/caseDetail/caseDetailTabThemeConfig.js
@@ -22,7 +22,7 @@ export default ({
       root: {
         minHeight: '15px',
         top: '-40px',
-        right: '375px',
+        right: '400px',
         marginBottom: '-35px',
       },
     };

diff --git a/src/pages/dashboardTab/components/tabThemeConfig.js b/src/pages/dashboardTab/components/tabThemeConfig.js
@@ -22,7 +22,7 @@ export default ({
       root: {
         minHeight: '15px',
         top: '-40px',
-        right: '375px',
+        right: '400px',
         marginBottom: '-35px',
       },
     };