Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

implemented logic to show total row count on tables #441 #466

Merged
merged 33 commits into from
May 20, 2024
Merged

implemented logic to show total row count on tables #441 #466

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
8a1ed82
implemented logic to show total row count on tables #441
MatteoGuarnaccia5 Mar 28, 2024
b761fbd
abstracted logic for total row counts #441
MatteoGuarnaccia5 Apr 2, 2024
068743b
updated snapshots #441
MatteoGuarnaccia5 Apr 2, 2024
b6a2ff2
Merge branch 'develop' into show-total-rows-on-tables-#441
MatteoGuarnaccia5 Apr 2, 2024
f339b06
fix snapshot
MatteoGuarnaccia5 Apr 2, 2024
610f98f
fixed snapshot attempt 2 #441
MatteoGuarnaccia5 Apr 2, 2024
c778847
changed logic to just display total rows and total filtered rows, and…
MatteoGuarnaccia5 Apr 2, 2024
c326636
updated snapshots #441
MatteoGuarnaccia5 Apr 2, 2024
3ac3171
removed comment from utils file #441
MatteoGuarnaccia5 Apr 3, 2024
91ffd52
fixed snapshot #441
MatteoGuarnaccia5 Apr 3, 2024
b29dfed
fix snapshot attempt 2 #441
MatteoGuarnaccia5 Apr 3, 2024
ad02997
potential fix for e2e test #441
MatteoGuarnaccia5 Apr 3, 2024
68ef388
adjusted padding #441
MatteoGuarnaccia5 Apr 15, 2024
3f07e7c
added total rows to subsystem and cat categories #441
MatteoGuarnaccia5 Apr 15, 2024
bbcc5d2
Merge branch 'develop' into show-total-rows-on-tables-#441
MatteoGuarnaccia5 Apr 15, 2024
f445f26
fixed linting #441
MatteoGuarnaccia5 Apr 15, 2024
ea49af2
updated snapshots #441
MatteoGuarnaccia5 Apr 15, 2024
88f2419
changed system table view to have pagination under total rows #441
MatteoGuarnaccia5 Apr 18, 2024
db41b80
fixed css/styling in catalogue categories card view #441
MatteoGuarnaccia5 Apr 23, 2024
18b58cf
refactored heights to remove scroll bar #441
MatteoGuarnaccia5 Apr 23, 2024
afe6698
Merge branch 'develop' into show-total-rows-on-tables-#441
MatteoGuarnaccia5 Apr 23, 2024
e3b15f4
updated snapshots #441
MatteoGuarnaccia5 Apr 23, 2024
ccaf2f3
Merge branch 'develop' into show-total-rows-on-tables-#441
MatteoGuarnaccia5 Apr 30, 2024
6bc27c3
update snapshot anf fixed warnings
MatteoGuarnaccia5 Apr 30, 2024
13ca1c9
undo last commit (was on wrong branch)
MatteoGuarnaccia5 Apr 30, 2024
dade980
fixed tests
MatteoGuarnaccia5 Apr 30, 2024
d840f8b
fixed row totals moving when descreasing screen width
MatteoGuarnaccia5 May 15, 2024
e551455
Merge branch 'develop' into show-total-rows-on-tables-#441
MatteoGuarnaccia5 May 15, 2024
78dd7ff
update snapshots
MatteoGuarnaccia5 May 15, 2024
5b59b63
update snapshot
MatteoGuarnaccia5 May 15, 2024
300e47c
update snapshots #441
MatteoGuarnaccia5 May 16, 2024
eb85ef9
fixed bottom wrapping when decreasing screen size #441
MatteoGuarnaccia5 May 16, 2024
b934dcd
Improve small screen behaviour for categories and systems #441
joelvdavies May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -863,9 +863,15 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
<div
class="MuiBox-root css-1llu0od"
>
<span />
<p
class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
>
Showing rows 1
- 4
of 4
</p>
<div
class="MuiBox-root css-qpxlqp"
class="MuiBox-root css-nokk8"
>
<div
class="MuiTablePagination-root MuiBox-root css-8k4lth"
Expand Down
11 changes: 11 additions & 0 deletions src/catalogue/items/catalogueItemsTable.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import {
formatDateTimeStrings,
generateUniqueName,
getPageHeightCalc,
showTotalRowCounts,
} from '../../utils';
import CatalogueItemsDetailsPanel from './catalogueItemsDetailsPanel.component';
import CatalogueItemDirectoryDialog from './catalogueItemDirectoryDialog.component';
Expand Down Expand Up @@ -772,6 +773,16 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
</>
);
},
renderBottomToolbarCustomActions: ({ table }) => (
<Typography>
MatteoGuarnaccia5 marked this conversation as resolved.
Show resolved Hide resolved
{showTotalRowCounts(
table.getState().pagination.pageIndex,
table.getState().pagination.pageSize,
table.getRowCount()
)}
</Typography>
),

renderTopToolbarCustomActions: ({ table }) =>
dense && requestOrigin === 'move to' ? undefined : (
<Box sx={{ display: 'flex' }}>
Expand Down
52 changes: 35 additions & 17 deletions src/items/__snapshots__/itemsTable.component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -571,7 +571,7 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
id=":re:"
inputmode="text"
placeholder="Min"
placeholder="DD/MM/YYYY hh:mm"
title="Min"
type="text"
value=""
Expand Down Expand Up @@ -616,7 +616,7 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
id=":rg:"
inputmode="text"
placeholder="Max"
placeholder="DD/MM/YYYY hh:mm"
title="Max"
type="text"
value=""
Expand Down Expand Up @@ -1051,7 +1051,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
Expand All @@ -1074,9 +1074,15 @@ 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-ahj2mt-MuiTypography-root"
>
Showing rows 0
- 0
of 0
</p>
<div
class="MuiBox-root css-qpxlqp"
class="MuiBox-root css-nokk8"
>
<div
class="MuiTablePagination-root MuiBox-root css-8k4lth"
Expand Down Expand Up @@ -2482,7 +2488,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
Expand All @@ -2505,9 +2511,15 @@ 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-ahj2mt-MuiTypography-root"
>
Showing rows 1
- 4
of 4
</p>
<div
class="MuiBox-root css-qpxlqp"
class="MuiBox-root css-nokk8"
>
<div
class="MuiTablePagination-root MuiBox-root css-8k4lth"
Expand Down Expand Up @@ -2944,7 +2956,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
id=":rjn:"
inputmode="text"
placeholder="Min"
placeholder="DD/MM/YYYY hh:mm"
title="Min"
type="text"
value=""
Expand Down Expand Up @@ -2989,7 +3001,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
id=":rjp:"
inputmode="text"
placeholder="Max"
placeholder="DD/MM/YYYY hh:mm"
title="Max"
type="text"
value=""
Expand Down Expand Up @@ -3266,7 +3278,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
id=":rk1:"
inputmode="text"
placeholder="Min"
placeholder="DD/MM/YYYY"
title="Min"
type="text"
value=""
Expand Down Expand Up @@ -3311,7 +3323,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
id=":rk3:"
inputmode="text"
placeholder="Max"
placeholder="DD/MM/YYYY"
title="Max"
type="text"
value=""
Expand Down Expand Up @@ -3450,7 +3462,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
id=":rk7:"
inputmode="text"
placeholder="Min"
placeholder="DD/MM/YYYY"
title="Min"
type="text"
value=""
Expand Down Expand Up @@ -3495,7 +3507,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
id=":rk9:"
inputmode="text"
placeholder="Max"
placeholder="DD/MM/YYYY"
title="Max"
type="text"
value=""
Expand Down Expand Up @@ -4131,7 +4143,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
Expand All @@ -4154,9 +4166,15 @@ exports[`Items Table > renders the dense table correctly 1`] = `
<div
class="MuiBox-root css-1llu0od"
>
<span />
<p
class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
>
Showing rows 1
- 4
of 4
</p>
<div
class="MuiBox-root css-qpxlqp"
class="MuiBox-root css-nokk8"
>
<div
class="MuiTablePagination-root MuiBox-root css-8k4lth"
Expand Down
16 changes: 15 additions & 1 deletion src/items/itemsTable.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,11 @@ import {
import { MRT_Localization_EN } from 'material-react-table/locales/en';
import { useItems } from '../api/items';
import ItemsDetailsPanel from './itemsDetailsPanel.component';
import { formatDateTimeStrings, getPageHeightCalc } from '../utils';
import {
formatDateTimeStrings,
getPageHeightCalc,
showTotalRowCounts,
} from '../utils';
import DeleteItemDialog from './deleteItemDialog.component';

export interface ItemTableProps {
Expand Down Expand Up @@ -457,6 +461,16 @@ export function ItemsTable(props: ItemTableProps) {
</MenuItem>,
];
},
renderBottomToolbarCustomActions: ({ table }) => (
<Typography>
{showTotalRowCounts(
table.getState().pagination.pageIndex,
table.getState().pagination.pageSize,
table.getRowCount()
)}
</Typography>
),

renderDetailPanel: dense
? ({ row }) => (
<ItemsDetailsPanel
Expand Down
31 changes: 23 additions & 8 deletions src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,16 @@ exports[`Manufacturer > renders table data correctly 1`] = `
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
>
<span
class="css-y4cjyz-MuiTouchRipple-ripple MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
style="width: 1px; height: 1px; top: -0.5px; left: -0.5px;"
>
<span
class="MuiTouchRipple-child MuiTouchRipple-childLeaving"
/>
</span>
</span>
</button>
</div>
</div>
Expand Down Expand Up @@ -582,7 +591,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
id=":r1d:"
inputmode="text"
placeholder="Min"
placeholder="DD/MM/YYYY hh:mm"
title="Min"
type="text"
value=""
Expand Down Expand Up @@ -627,7 +636,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
id=":r1f:"
inputmode="text"
placeholder="Max"
placeholder="DD/MM/YYYY hh:mm"
title="Max"
type="text"
value=""
Expand Down Expand Up @@ -793,7 +802,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
id=":r2m:"
inputmode="text"
placeholder="Min"
placeholder="DD/MM/YYYY hh:mm"
title="Min"
type="text"
value=""
Expand Down Expand Up @@ -838,7 +847,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
id=":r2o:"
inputmode="text"
placeholder="Max"
placeholder="DD/MM/YYYY hh:mm"
title="Max"
type="text"
value=""
Expand Down Expand Up @@ -1854,7 +1863,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
Expand All @@ -1877,9 +1886,15 @@ exports[`Manufacturer > renders table data correctly 1`] = `
<div
class="MuiBox-root css-1llu0od"
>
<span />
<p
class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
>
Showing rows 1
- 4
of 4
</p>
<div
class="MuiBox-root css-qpxlqp"
class="MuiBox-root css-nokk8"
>
<div
class="MuiTablePagination-root MuiBox-root css-8k4lth"
Expand Down
15 changes: 14 additions & 1 deletion src/manufacturer/manufacturer.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,11 @@ import { Manufacturer } from '../app.types';
import DeleteManufacturerDialog from './deleteManufacturerDialog.component';
import ManufacturerDialog from './manufacturerDialog.component';
import Breadcrumbs from '../view/breadcrumbs.component';
import { formatDateTimeStrings, getPageHeightCalc } from '../utils';
import {
formatDateTimeStrings,
getPageHeightCalc,
showTotalRowCounts,
} from '../utils';

function ManufacturerComponent() {
const { data: ManufacturerData, isLoading: ManufacturerDataLoading } =
Expand Down Expand Up @@ -268,6 +272,15 @@ function ManufacturerComponent() {
</MenuItem>,
];
},
renderBottomToolbarCustomActions: ({ table }) => (
<Typography>
{showTotalRowCounts(
table.getState().pagination.pageIndex,
table.getState().pagination.pageSize,
table.getRowCount()
)}
</Typography>
),
});

const navigate = useNavigate();
Expand Down
Loading
Loading