Skip to content

Commit ca31695

Browse files
joshdimantetojoshdimanteto
committed
test
1 parent c1613c9 commit ca31695

File tree

6 files changed

+165
-103
lines changed

6 files changed

+165
-103
lines changed

‎src/catalogue/category/catalogueCard.component.tsx‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ import CriticalityTooltipIcon from '../../common/criticalityTooltipIcon.componen
1818
import { useAppSelector } from '../../state/hook';
1919
import { selectCriticality } from '../../state/slices/criticalitySlice';
2020
import {
21+
criticalityCardStyle,
2122
formatDateTimeStrings,
22-
getCriticalityColor,
2323
OverflowTip,
2424
} from '../../utils';
2525
export interface CatalogueCardProps {
@@ -66,24 +66,16 @@ function CatalogueCard(props: CatalogueCardProps) {
6666
}}
6767
>
6868
<Card
69-
sx={(theme) => {
70-
const color = isCriticalMode
71-
? getCriticalityColor({ theme, showFlagged })
72-
: undefined;
73-
return {
74-
width: '100%',
75-
display: 'flex',
76-
flexDirection: 'row',
77-
height: '100px',
78-
backgroundColor: isSelected
79-
? table.options.mrtTheme.selectedRowBackgroundColor
80-
: undefined,
81-
82-
border: isCriticalMode ? `2px solid ${color}` : undefined,
83-
84-
boxShadow: isCriticalMode ? `0 0 10px 3px ${color}` : undefined, // 53% opacity for fuzzy glow
85-
};
86-
}}
69+
sx={(theme) => ({
70+
width: '100%',
71+
display: 'flex',
72+
flexDirection: 'row',
73+
height: '100px',
74+
backgroundColor: isSelected
75+
? table.options.mrtTheme.selectedRowBackgroundColor
76+
: undefined,
77+
...(isCriticalMode && criticalityCardStyle({ theme, showFlagged })),
78+
})}
8779
>
8880
<CardActions>
8981
<MRT_SelectCheckbox

‎src/catalogue/category/catalogueCategoryTableView.component.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -261,11 +261,15 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
261261
});
262262

263263
React.useEffect(() => {
264-
if (isCriticalMode !== table.getState().columnVisibility['is_flagged'])
265-
table.setColumnVisibility((prev) => ({
264+
table.setColumnVisibility((prev) => {
265+
const nextOn = isCriticalMode;
266+
if (prev.is_flagged === nextOn) return prev;
267+
268+
return {
266269
...prev,
267-
is_flagged: isCriticalMode,
268-
}));
270+
is_flagged: nextOn,
271+
};
272+
});
269273
}, [isCriticalMode, table]);
270274

271275
return <MaterialReactTable table={table} />;

‎src/catalogue/items/catalogueItemLayout.component.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { useGetCatalogueItem } from '../../api/catalogueItems';
55
import CriticalityTooltipIcon from '../../common/criticalityTooltipIcon.component';
66
import { useAppSelector } from '../../state/hook';
77
import { selectCriticality } from '../../state/slices/criticalitySlice';
8+
import { criticalityHeaderStyle } from '../../utils';
9+
import { getCICriticalityLabel } from './catalogueItemsTable.component';
810

911
function CatalogueItemLayout() {
1012
const { catalogue_item_id: catalogueItemId, item_id: itemId } = useParams();
@@ -13,7 +15,7 @@ function CatalogueItemLayout() {
1315
const location = useLocation();
1416
const { isCriticalMode } = useAppSelector(selectCriticality);
1517

16-
const showFlagged = catalogueItem?.is_flagged;
18+
const showFlagged = catalogueItem?.is_flagged ?? null;
1719

1820
const getPageSubtitle = () => {
1921
// Check for individual item detail page (has item_id param)
@@ -41,10 +43,22 @@ function CatalogueItemLayout() {
4143
gap: 0.5,
4244
}}
4345
>
44-
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
46+
<Box
47+
sx={(theme) => ({
48+
display: 'flex',
49+
justifyContent: 'center',
50+
alignItems: 'center',
51+
52+
width: '100%',
53+
gap: 1,
54+
padding: 1,
55+
...(isCriticalMode &&
56+
criticalityHeaderStyle({ theme, showFlagged })),
57+
})}
58+
>
4559
{isCriticalMode && (
4660
<CriticalityTooltipIcon
47-
label={'Items are running low in this catalogue item'}
61+
label={getCICriticalityLabel(showFlagged)}
4862
showFlagged={showFlagged}
4963
/>
5064
)}

‎src/catalogue/items/catalogueItemsTable.component.tsx‎

Lines changed: 60 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,19 @@ import CatalogueItemsDialog from './catalogueItemsDialog.component';
7474
import CatalogueLink from './catalogueLink.component';
7575
import DeleteCatalogueItemsDialog from './deleteCatalogueItemDialog.component';
7676
import ObsoleteCatalogueItemDialog from './obsoleteCatalogueItemDialog.component';
77+
78+
export const getCICriticalityLabel = (showFlagged: boolean | null) => {
79+
if (showFlagged === true) {
80+
return 'This catalogue item is critical.';
81+
}
82+
83+
if (showFlagged === false) {
84+
return 'This catalogue item is not critical.';
85+
}
86+
87+
return 'Unable to determine if this catalogue item is critical. If the expected lifetime is "None" please update this field. Otherwise wait until this is recalculated.';
88+
};
89+
7790
const MoveCatalogueItemsButton = (props: {
7891
selectedItems: CatalogueItem[];
7992
onChangeSelectedItems: (selectedItems: MRT_RowSelectionState) => void;
@@ -247,6 +260,24 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
247260
const columns = React.useMemo<MRT_ColumnDef<TableRowData>[]>(() => {
248261
const viewCatalogueItemProperties = parentInfo.properties ?? [];
249262
return [
263+
{
264+
header: 'Is Critical',
265+
accessorFn: (row) => (row.catalogueItem.is_flagged ? 'Yes' : 'No'),
266+
id: 'catalogueItem.is_flagged',
267+
filterVariant: COLUMN_FILTER_VARIANTS.boolean,
268+
enableColumnFilterModes: false,
269+
size: 180,
270+
filterSelectOptions: COLUMN_FILTER_BOOLEAN_OPTIONS,
271+
Cell: ({ row }) => {
272+
const showFlagged = row.original.catalogueItem.is_flagged;
273+
return (
274+
<CriticalityTooltipIcon
275+
showFlagged={showFlagged}
276+
label={getCICriticalityLabel(showFlagged)}
277+
/>
278+
);
279+
},
280+
},
250281
{
251282
header: 'Name',
252283
Header: TableHeaderOverflowTip,
@@ -255,32 +286,22 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
255286
filterVariant: COLUMN_FILTER_VARIANTS.string,
256287
filterFn: COLUMN_FILTER_FUNCTIONS.string,
257288
columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.string,
258-
size: 250,
289+
size: dense ? 500 : 250,
259290
Cell: ({ row, renderedCellValue }) => {
260-
const showFlagged =
261-
row.original.catalogueItem.is_flagged && isCriticalMode;
262291
return (
263-
<Box sx={{ display: 'flex', alignItems: 'center' }}>
264-
{isCriticalMode && (
265-
<CriticalityTooltipIcon
266-
label={'Items are running low in this catalogue item'}
267-
showFlagged={showFlagged}
268-
/>
292+
<OverflowTip sx={{ fontSize: 'inherit' }}>
293+
{dense ? (
294+
renderedCellValue
295+
) : (
296+
<MuiLink
297+
underline="hover"
298+
component={Link}
299+
to={`${row.original.catalogueItem.id}`}
300+
>
301+
{renderedCellValue}
302+
</MuiLink>
269303
)}
270-
<OverflowTip sx={{ fontSize: 'inherit' }}>
271-
{dense ? (
272-
renderedCellValue
273-
) : (
274-
<MuiLink
275-
underline="hover"
276-
component={Link}
277-
to={`${row.original.catalogueItem.id}`}
278-
>
279-
{renderedCellValue}
280-
</MuiLink>
281-
)}
282-
</OverflowTip>
283-
</Box>
304+
</OverflowTip>
284305
);
285306
},
286307

@@ -703,7 +724,6 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
703724
}, [
704725
apiSettings?.spares?.sparesDefinition,
705726
dense,
706-
isCriticalMode,
707727
isSparesDefinitionDefined,
708728
parentInfo.properties,
709729
sparesFilterState,
@@ -755,6 +775,7 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
755775
initialState: {
756776
columnVisibility: {
757777
'catalogueItem.created_time': false,
778+
'catalogueItem.is_flagged': isCriticalMode,
758779
'catalogueItem.criticality': isCriticalMode,
759780
},
760781
pagination: { pageSize: dense ? 5 : 15, pageIndex: 0 },
@@ -768,7 +789,8 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
768789
columns: dense
769790
? [
770791
{ ...columns[0], size: undefined },
771-
{ ...columns[2], size: undefined },
792+
{ ...columns[1], size: undefined },
793+
{ ...columns[3], size: undefined },
772794
]
773795
: columns, // If dense only show the name column
774796
data: tableRows ?? [], //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
@@ -1108,14 +1130,20 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
11081130
});
11091131

11101132
React.useEffect(() => {
1111-
if (
1112-
isCriticalMode !==
1113-
table.getState().columnVisibility['catalogueItem.criticality']
1114-
)
1115-
table.setColumnVisibility((prev) => ({
1133+
table.setColumnVisibility((prev) => {
1134+
const nextOn = isCriticalMode;
1135+
const same =
1136+
prev['catalogueItem.criticality'] === nextOn &&
1137+
prev['catalogueItem.is_flagged'] === nextOn;
1138+
1139+
if (same) return prev;
1140+
1141+
return {
11161142
...prev,
1117-
'catalogueItem.criticality': isCriticalMode,
1118-
}));
1143+
'catalogueItem.criticality': nextOn,
1144+
'catalogueItem.is_flagged': nextOn,
1145+
};
1146+
});
11191147
}, [isCriticalMode, table]);
11201148

11211149
return (

0 commit comments

Comments
 (0)