Checkpoint at end of sprint-7

src/qqq/pages/entity-list/index.tsx

@@ -20,7 +20,7 @@ import Icon from "@mui/material/Icon";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Link from "@mui/material/Link";
-import {Alert, tableFooterClasses} from "@mui/material";
+import {Alert, TablePagination} from "@mui/material";
 import {
    DataGridPro,
    GridCallbackDetails,
@@ -498,6 +498,25 @@ function EntityList({table}: Props): JSX.Element
       document.location.href = `/processes/${tableName}.bulkDelete${getRecordsQueryString()}`;
    };
 
+   // @ts-ignore
+   const defaultLabelDisplayedRows = ({from, to, count}) => `${from.toLocaleString()}–${to.toLocaleString()} of ${count !== -1 ? count.toLocaleString() : `more than ${to.toLocaleString()}`}`;
+
+   function CustomPagination()
+   {
+      return (
+         <TablePagination
+            component="div"
+            count={totalRecords}
+            page={pageNumber}
+            rowsPerPageOptions={[10, 25, 50]}
+            rowsPerPage={rowsPerPage}
+            onPageChange={(event, value) => handlePageChange(value)}
+            onRowsPerPageChange={(event) => handleRowsPerPageChange(Number(event.target.value))}
+            labelDisplayedRows={defaultLabelDisplayedRows}
+         />
+      );
+   }
+
    function CustomToolbar()
    {
       const [bulkActionsMenuAnchor, setBulkActionsMenuAnchor] = useState(null as HTMLElement);
@@ -519,8 +538,8 @@ function EntityList({table}: Props): JSX.Element
                <Button
                   id="refresh-button"
                   onClick={updateTable}
+                  startIcon={<Icon>refresh</Icon>}
                >
-                  <Icon>refresh</Icon>
                   Refresh
                </Button>
             </div>
@@ -538,8 +557,8 @@ function EntityList({table}: Props): JSX.Element
                   aria-controls={bulkActionsMenuOpen ? "basic-menu" : undefined}
                   aria-haspopup="true"
                   aria-expanded={bulkActionsMenuOpen ? "true" : undefined}
+                  startIcon={<Icon>table_rows</Icon>}
                >
-                  <Icon>fact_check</Icon>
                   Bulk Actions
                </Button>
                <Menu
@@ -680,7 +699,7 @@ function EntityList({table}: Props): JSX.Element
             <Card>
                <MDBox height="100%">
                   <DataGridPro
-                     components={{Toolbar: CustomToolbar}}
+                     components={{Toolbar: CustomToolbar, Pagination: CustomPagination}}
                      pagination
                      paginationMode="server"
                      sortingMode="server"
@@ -693,10 +712,7 @@ function EntityList({table}: Props): JSX.Element
                      columns={columns}
                      rowBuffer={10}
                      rowCount={totalRecords}
-                     pageSize={rowsPerPage}
-                     rowsPerPageOptions={[10, 25, 50]}
                      onPageSizeChange={handleRowsPerPageChange}
-                     onPageChange={handlePageChange}
                      onRowClick={handleRowClick}
                      density="compact"
                      loading={loading}

src/qqq/pages/process-run/index.tsx

@@ -48,16 +48,11 @@ import {QFrontendComponent} from "@kingsrook/qqq-frontend-core/lib/model/metaDat
 import {QComponentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QComponentType";
 import FormData from "form-data";
 import QClient from "qqq/utils/QClient";
-import {CircularProgress} from "@mui/material";
+import {CircularProgress, TablePagination} from "@mui/material";
 import QDynamicForm from "../../components/QDynamicForm";
 import MDTypography from "../../../components/MDTypography";
 import Footer from "examples/Footer";
 
-function logFormValidations(prefix: string, formValidations: any)
-{
-   console.log(`${prefix}: ${JSON.stringify(formValidations)} `);
-}
-
 function ProcessRun(): JSX.Element
 {
    const {processName} = useParams();
@@ -122,6 +117,27 @@ function ProcessRun(): JSX.Element
       return (false);
    };
 
+   // @ts-ignore
+   const defaultLabelDisplayedRows = ({from, to, count}) => `${from.toLocaleString()}–${to.toLocaleString()} of ${count !== -1 ? count.toLocaleString() : `more than ${to.toLocaleString()}`}`;
+
+   // @ts-ignore
+   // eslint-disable-next-line react/no-unstable-nested-components
+   function CustomPagination()
+   {
+      return (
+         <TablePagination
+            component="div"
+            count={recordConfig.totalRecords}
+            page={pageNumber}
+            rowsPerPageOptions={[10, 25, 50]}
+            rowsPerPage={rowsPerPage}
+            onPageChange={(event, value) => recordConfig.handlePageChange(value)}
+            onRowsPerPageChange={(event) => recordConfig.handleRowsPerPageChange(Number(event.target.value))}
+            labelDisplayedRows={defaultLabelDisplayedRows}
+         />
+      );
+   }
+
    //////////////////////////////////////////////////////////////
    // event handler for the bulk-edit field-enabled checkboxes //
    //////////////////////////////////////////////////////////////
@@ -136,7 +152,7 @@ function ProcessRun(): JSX.Element
    {
       if (value === null || value === undefined)
       {
-         return <span>--</span>;
+         return <span>∅</span>;
       }
 
       if (typeof value === "string")
@@ -234,7 +250,7 @@ function ProcessRun(): JSX.Element
                      }
                   </div>
                )))}
-            {(step.formFields) && (
+            {step.formFields && (
                <QDynamicForm
                   formData={formData}
                   bulkEditMode={doesStepHaveComponent(activeStep, QComponentType.BULK_EDIT_FORM)}
@@ -263,6 +279,7 @@ function ProcessRun(): JSX.Element
                   <br />
                   <MDBox height="100%">
                      <DataGridPro
+                        components={{Pagination: CustomPagination}}
                         page={recordConfig.pageNo}
                         disableSelectionOnClick
                         autoHeight
@@ -389,8 +406,6 @@ function ProcessRun(): JSX.Element
             setInitialValues(initialValues);
             setValidationScheme(Yup.object().shape(formValidations));
             setValidationFunction(null);
-
-            logFormValidations("Post-disable thingie", formValidations);
          }
          else
          {
@@ -402,7 +417,7 @@ function ProcessRun(): JSX.Element
             setValidationFunction(() => true);
          }
       }
-   }, [newStep, rowsPerPage, pageNumber]);
+   }, [newStep]);
 
    /////////////////////////////////////////////////////////////////////////////////////////////
    // if there are records to load: build a record config, and set the needRecords state flag //
@@ -448,12 +463,10 @@ function ProcessRun(): JSX.Element
                newDynamicFormFields[field.name].isRequired = false;
                newFormValidations[field.name] = null;
             }
-
-            logFormValidations("Upon update", newFormValidations);
-
-            setFormFields(newDynamicFormFields);
-            setValidationScheme(Yup.object().shape(newFormValidations));
          });
+
+         setFormFields(newDynamicFormFields);
+         setValidationScheme(Yup.object().shape(newFormValidations));
       }
    }, [disabledBulkEditFields]);