Merge pull request #466 from ral-facilities/show-total-rows-on-tables…

…-#441 implemented logic to show total row count on tables #441
ral-facilities · May 20, 2024 · 1262c7c · 1262c7c
2 parents 75b8597 + b934dcd
commit 1262c7c
Show file tree

Hide file tree

Showing 13 changed files with 149 additions and 64 deletions.
diff --git a/cypress/e2e/with_mock_data/catalogueItems.cy.ts b/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',

diff --git a/src/catalogue/category/catalogueCardView.component.tsx b/src/catalogue/category/catalogueCardView.component.tsx
@@ -5,6 +5,8 @@ import {
   Pagination,
   Select,
   Typography,
+  useMediaQuery,
+  useTheme,
 } from '@mui/material';
 import { CatalogueCategory } from '../../app.types';
 import { usePreservedTableState } from '../../common/preservedTableState.component';
@@ -55,25 +57,24 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
     endIndex
   );
 
+  // Display total and pagination on separate lines if on a small screen
+  const theme = useTheme();
+  const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const cardViewHeight = getPageHeightCalc('100px');
+  const cardViewCardsHeight = getPageHeightCalc(
+    `100px + ${smallScreen ? '128px' : '72px'}`
+  );
+
   return (
-    <Grid container flexDirection={'column'}>
-      <Grid
-        container
-        item
-        xs={12}
-        maxHeight={getPageHeightCalc('150px')}
-        overflow={'auto'}
-      >
+    <Grid
+      container
+      flexDirection={'column'}
+      height={cardViewHeight}
+      maxHeight={cardViewHeight}
+    >
+      <Grid container item maxHeight={cardViewCardsHeight} overflow={'auto'}>
         {displayedCatalogueCategories?.map((item, index) => (
-          <Grid
-            item
-            key={index}
-            xs={12}
-            sm={6}
-            md={4}
-            flexDirection={'column'}
-            alignContent={'center'}
-          >
+          <Grid item key={index} sm={6} md={4} width={'100%'}>
             <CatalogueCard
               {...item}
               onChangeOpenDeleteDialog={onChangeOpenDeleteCategoryDialog}
@@ -91,32 +92,40 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
           </Grid>
         ))}
       </Grid>
-      <Grid
-        container
-        item
-        alignItems="center"
-        justifyContent="right"
-        xs={12}
-        px={1}
-        py={1.5}
-        position={'fixed'}
-        bottom={12}
-        right={0}
-      >
-        <Grid item>
+
+      <Grid item container marginTop={'auto'} direction="row">
+        <Grid item xs={12} sm="auto">
+          <Typography
+            sx={{ paddingTop: '20px', paddingLeft: '8px', margin: '8px' }}
+          >
+            {`Total Categories: ${catalogueCategoryData.length}`}
+          </Typography>
+        </Grid>
+
+        <Grid
+          item
+          flexWrap="nowrap"
+          flexDirection="row"
+          display="flex"
+          alignItems="center"
+          justifyContent="flex-end"
+          sm
+        >
           <FormControl
             variant="standard"
             sx={{
+              paddingTop: '16px',
               margin: 1,
-              minWidth: '120px',
               display: 'flex',
               flexDirection: 'row',
             }}
           >
             <Typography
               sx={{
-                padding: 2,
+                paddingX: 1,
+                paddingTop: 0.5,
                 color: 'text.secondary',
+                whiteSpace: 'nowrap',
               }}
             >
               {'Categories per page'}
@@ -142,9 +151,6 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
               <MenuItem value={'60'}>60</MenuItem>
             </Select>
           </FormControl>
-        </Grid>
-
-        <Grid item>
           <Pagination
             variant="outlined"
             shape="rounded"
@@ -160,9 +166,14 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
             }
             size="medium"
             color="secondary"
-            sx={{ textAlign: 'center' }}
             aria-label="pagination"
             className="catalogue-categories-pagination"
+            sx={{
+              paddingTop: 2,
+              '& > .MuiPagination-ul': {
+                flexWrap: 'nowrap',
+              },
+            }}
           />
         </Grid>
       </Grid>

diff --git a/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap b/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-1a4m6ib-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-10y3752-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"

diff --git a/src/catalogue/items/catalogueItemsTable.component.tsx b/src/catalogue/items/catalogueItemsTable.component.tsx
@@ -160,7 +160,7 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
     requestOrigin,
   } = props;
   // Breadcrumbs + Mui table V2 + extra
-  const tableHeight = getPageHeightCalc('50px + 110px + 32px');
+  const tableHeight = getPageHeightCalc('50px + 110px + 48px');
 
   const { data: catalogueItemsData, isLoading: isLoadingCatalogueItems } =
     useCatalogueItems(parentInfo.id);
@@ -767,6 +767,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' }}>

diff --git a/src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx b/src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx
@@ -293,7 +293,7 @@ const ObsoleteCatalogueItemDialog = (
   return (
     <Dialog
       open={open}
-      PaperProps={{ sx: { height: '720px' } }}
+      PaperProps={{ sx: { height: '780px' } }}
       fullWidth
       maxWidth="xl"
     >

diff --git a/src/items/__snapshots__/itemsTable.component.test.tsx.snap b/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"

diff --git a/src/items/itemsTable.component.tsx b/src/items/itemsTable.component.tsx
@@ -503,6 +503,14 @@ export function ItemsTable(props: ItemTableProps) {
         </MenuItem>,
       ];
     },
+    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: dense
       ? ({ row }) => (
           <ItemsDetailsPanel

diff --git a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
@@ -253,7 +253,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
         </div>
       </div>
       <div
-        class="MuiTableContainer-root css-1ujn6lp-MuiTableContainer-root"
+        class="MuiTableContainer-root css-15zpm7g-MuiTableContainer-root"
       >
         <table
           class="MuiTable-root MuiTable-stickyHeader css-ts728e-MuiTable-root"
@@ -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"

diff --git a/src/manufacturer/manufacturer.component.test.tsx b/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();

diff --git a/src/manufacturer/manufacturer.component.tsx b/src/manufacturer/manufacturer.component.tsx
@@ -39,7 +39,7 @@ function ManufacturerComponent() {
     Manufacturer | undefined
   >(undefined);
 
-  const tableHeight = getPageHeightCalc('192px');
+  const tableHeight = getPageHeightCalc('50px + 110px + 48px');
 
   const [maufacturerDialogType, setMaufacturerDialogType] = React.useState<
     'edit' | 'create'
@@ -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();