implemented logic to show total row count on tables #441

cypress/e2e/with_mock_data/catalogueItems.cy.ts

@@ -661,6 +661,7 @@ describe('Catalogue Items', () => {
 
     cy.startSnoopingBrowserMockedRequest();
     cy.findByText('Finish').click();
+    cy.findByRole('dialog').should('not.exist');
 
     cy.findBrowserMockedRequests({
       method: 'PATCH',
@@ -692,6 +693,7 @@ describe('Catalogue Items', () => {
 
     cy.startSnoopingBrowserMockedRequest();
     cy.findByText('Finish').click();
+    cy.findByRole('dialog').should('not.exist');
 
     cy.findBrowserMockedRequests({
       method: 'PATCH',

src/catalogue/category/catalogueCardView.component.tsx

@@ -96,6 +96,12 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
         bottom={12}
         right={0}
       >
+        <Grid item position={'fixed'} left={8}>
+          <Typography sx={{ paddingLeft: '8px' }}>
+            {`Total Categories: ${catalogueCategoryData.length}`}
+          </Typography>
+        </Grid>
+
         <Grid item>
           <FormControl
             variant="standard"

src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap

@@ -840,7 +840,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
               class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-3fnbcm-MuiPaper-root-MuiAlert-root"
                 role="alert"
               >
                 <div
@@ -863,9 +863,13 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
         <div
           class="MuiBox-root css-1llu0od"
         >
-          <span />
+          <p
+            class="MuiTypography-root MuiTypography-body1 css-13zw5gk-MuiTypography-root"
+          >
+            Total Catalogue Items: 4
+          </p>
           <div
-            class="MuiBox-root css-qpxlqp"
+            class="MuiBox-root css-nokk8"
           >
             <div
               class="MuiTablePagination-root MuiBox-root css-8k4lth"

src/catalogue/items/catalogueItemsTable.component.tsx

@@ -775,6 +775,14 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
         </>
       );
     },
+    renderBottomToolbarCustomActions: ({ table }) => (
+      <Typography sx={{ paddingLeft: '8px' }}>
+        {table.getFilteredRowModel().rows.length == catalogueItemsData?.length
+          ? `Total Catalogue Items: ${catalogueItemsData.length}`
+          : `Returned ${table.getFilteredRowModel().rows.length} out of ${catalogueItemsData?.length} Catalogue Items`}
+      </Typography>
+    ),
+
     renderTopToolbarCustomActions: ({ table }) =>
       dense && requestOrigin === 'move to' ? undefined : (
         <Box sx={{ display: 'flex' }}>

src/items/__snapshots__/itemsTable.component.test.tsx.snap

@@ -1293,7 +1293,7 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
               class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-3fnbcm-MuiPaper-root-MuiAlert-root"
                 role="alert"
               >
                 <div
@@ -1316,9 +1316,13 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
         <div
           class="MuiBox-root css-1llu0od"
         >
-          <span />
+          <p
+            class="MuiTypography-root MuiTypography-body1 css-13zw5gk-MuiTypography-root"
+          >
+            Total Items: 4
+          </p>
           <div
-            class="MuiBox-root css-qpxlqp"
+            class="MuiBox-root css-nokk8"
           >
             <div
               class="MuiTablePagination-root MuiBox-root css-8k4lth"
@@ -2738,7 +2742,7 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
               class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-3fnbcm-MuiPaper-root-MuiAlert-root"
                 role="alert"
               >
                 <div
@@ -2761,9 +2765,13 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
         <div
           class="MuiBox-root css-1llu0od"
         >
-          <span />
+          <p
+            class="MuiTypography-root MuiTypography-body1 css-13zw5gk-MuiTypography-root"
+          >
+            Total Items: 4
+          </p>
           <div
-            class="MuiBox-root css-qpxlqp"
+            class="MuiBox-root css-nokk8"
           >
             <div
               class="MuiTablePagination-root MuiBox-root css-8k4lth"
@@ -4225,7 +4233,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
               class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-3fnbcm-MuiPaper-root-MuiAlert-root"
                 role="alert"
               >
                 <div
@@ -4248,9 +4256,13 @@ exports[`Items Table > renders the dense table correctly 1`] = `
         <div
           class="MuiBox-root css-1llu0od"
         >
-          <span />
+          <p
+            class="MuiTypography-root MuiTypography-body1 css-13zw5gk-MuiTypography-root"
+          >
+            Total Items: 4
+          </p>
           <div
-            class="MuiBox-root css-qpxlqp"
+            class="MuiBox-root css-nokk8"
           >
             <div
               class="MuiTablePagination-root MuiBox-root css-8k4lth"

src/items/itemsTable.component.tsx

@@ -454,6 +454,14 @@ export function ItemsTable(props: ItemTableProps) {
         </MenuItem>,
       ];
     },
+    renderBottomToolbarCustomActions: ({ table }) => (
+      <Typography sx={{ paddingLeft: '8px' }}>
+        {table.getFilteredRowModel().rows.length == data?.length
+          ? `Total Items: ${data.length}`
+          : `Returned ${table.getFilteredRowModel().rows.length} out of ${data?.length} Items`}
+      </Typography>
+    ),
+
     renderDetailPanel: dense
       ? ({ row }) => (
           <ItemsDetailsPanel

src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap

@@ -1854,7 +1854,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
               class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-3fnbcm-MuiPaper-root-MuiAlert-root"
                 role="alert"
               >
                 <div
@@ -1877,9 +1877,13 @@ exports[`Manufacturer > renders table data correctly 1`] = `
         <div
           class="MuiBox-root css-1llu0od"
         >
-          <span />
+          <p
+            class="MuiTypography-root MuiTypography-body1 css-13zw5gk-MuiTypography-root"
+          >
+            Total Manufacturers: 4
+          </p>
           <div
-            class="MuiBox-root css-qpxlqp"
+            class="MuiBox-root css-nokk8"
           >
             <div
               class="MuiTablePagination-root MuiBox-root css-8k4lth"

src/manufacturer/manufacturer.component.test.tsx

@@ -41,7 +41,7 @@ describe('Manufacturer', () => {
     await user.click(screen.getByRole('button', { name: 'Show/Hide columns' }));
     await user.click(screen.getByText('Created'));
     expect(view.asFragment()).toMatchSnapshot();
-  }, 10000);
+  });
 
   it('manufacturer url has a href so therefore links to new webpage', async () => {
     createView();

src/manufacturer/manufacturer.component.tsx

@@ -271,6 +271,13 @@ function ManufacturerComponent() {
         </MenuItem>,
       ];
     },
+    renderBottomToolbarCustomActions: ({ table }) => (
+      <Typography sx={{ paddingLeft: '8px' }}>
+        {table.getFilteredRowModel().rows.length == ManufacturerData?.length
+          ? `Total Manufacturers: ${ManufacturerData.length}`
+          : `Returned ${table.getFilteredRowModel().rows.length} out of ${ManufacturerData?.length} Manufacturers`}
+      </Typography>
+    ),
   });
 
   const navigate = useNavigate();

src/systems/__snapshots__/systemItemsTable.component.test.tsx.snap

@@ -2102,7 +2102,7 @@ exports[`SystemItemsTable > SystemItemsTable (normal) > renders correctly 1`] =
             class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-3fnbcm-MuiPaper-root-MuiAlert-root"
               role="alert"
             >
               <div
@@ -2150,9 +2150,13 @@ exports[`SystemItemsTable > SystemItemsTable (normal) > renders correctly 1`] =
       <div
         class="MuiBox-root css-1llu0od"
       >
-        <span />
+        <p
+          class="MuiTypography-root MuiTypography-body1 css-13zw5gk-MuiTypography-root"
+        >
+          Total Items: 3
+        </p>
         <div
-          class="MuiBox-root css-qpxlqp"
+          class="MuiBox-root css-nokk8"
         >
           <div
             class="MuiTablePagination-root MuiBox-root css-8k4lth"
@@ -3235,7 +3239,7 @@ exports[`SystemItemsTable > SystemItemsTable (usageStatus) > renders correctly 1
             class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-3fnbcm-MuiPaper-root-MuiAlert-root"
               role="alert"
             >
               <div
@@ -3283,9 +3287,13 @@ exports[`SystemItemsTable > SystemItemsTable (usageStatus) > renders correctly 1
       <div
         class="MuiBox-root css-1llu0od"
       >
-        <span />
+        <p
+          class="MuiTypography-root MuiTypography-body1 css-13zw5gk-MuiTypography-root"
+        >
+          Returned 4 out of undefined Items
+        </p>
         <div
-          class="MuiBox-root css-qpxlqp"
+          class="MuiBox-root css-nokk8"
         >
           <div
             class="MuiTablePagination-root MuiBox-root css-8k4lth"

src/systems/systemItemsTable.component.tsx

@@ -687,6 +687,14 @@ export function SystemItemsTable(props: SystemItemsTableProps) {
         )}
       </Box>
     ),
+    renderBottomToolbarCustomActions: ({ table }) => (
+      <Typography sx={{ paddingLeft: '8px' }}>
+        {table.getFilteredRowModel().rows.length == itemsData?.length
+          ? `Total Items: ${itemsData.length}`
+          : `Returned ${table.getFilteredRowModel().rows.length} out of ${itemsData?.length} Items`}
+      </Typography>
+    ),
+
     renderDetailPanel: ({ row }) =>
       row.original.catalogueItem !== undefined ? (
         <ItemsDetailsPanel

src/systems/systems.component.tsx

@@ -28,7 +28,7 @@ import {
   // To resolve react/jsx-pascal-case
   MRT_GlobalFilterTextField as MRTGlobalFilterTextField,
   MRT_TableBodyCellValue as MRTTableBodyCellValue,
-  MRT_TablePagination as MRTTablePagination,
+  MRT_BottomToolbar,
   MRT_ColumnDef,
   MRT_RowSelectionState,
   useMaterialReactTable,
@@ -164,7 +164,7 @@ const columns: MRT_ColumnDef<System>[] = [
   },
 ];
 
-const MIN_SUBSYSTEMS_WIDTH = '320px';
+const MIN_SUBSYSTEMS_WIDTH = '480px';
 
 function Systems() {
   // Navigation
@@ -297,6 +297,13 @@ function Systems() {
         </MenuItem>,
       ];
     },
+    renderBottomToolbarCustomActions: ({ table }) => (
+      <Typography sx={{ paddingLeft: '8px' }}>
+        {table.getFilteredRowModel().rows.length == subsystemsData?.length
+          ? `Total Systems: ${subsystemsData.length}`
+          : `Returned ${table.getFilteredRowModel().rows.length} out of ${subsystemsData?.length} Systems`}
+      </Typography>
+    ),
   });
 
   return (
@@ -454,7 +461,7 @@ function Systems() {
                       </TableBody>
                     </Table>
                   </TableContainer>
-                  <MRTTablePagination table={subsystemsTable} />
+                  <MRT_BottomToolbar table={subsystemsTable} />
                 </Stack>
               </>
             )}