Merge pull request #2281 from Northeastern-Electric-Racing/#2085-Hide…

…-Columns-For-Good Make Hidden Columns Persistent
Northeastern-Electric-Racing · May 24, 2024 · 7e38871 · 7e38871
2 parents 05f7876 + ae698fc
commit 7e38871
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 15 deletions.
diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTable.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTable.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@mui/system';
-import { GridColumns, GridRowParams, GridValidRowModel } from '@mui/x-data-grid';
+import { GridColumnVisibilityModel, GridColumns, GridRowParams, GridValidRowModel } from '@mui/x-data-grid';
 import { Assembly, Material } from 'shared';
 import { BomRow, bomTableStyles, materialToRow, BomStyledDataGrid } from '../../../../utils/bom.utils';
 import { addMaterialCosts } from '../BOMTab';
@@ -8,12 +8,14 @@ import { useTheme } from '@mui/material';
 import { useState } from 'react';
 
 interface BOMTableProps {
+  hideColumn: boolean[];
+  setHideColumn: React.Dispatch<React.SetStateAction<boolean[]>>;
   columns: GridColumns<BomRow>;
   materials: Material[];
   assemblies: Assembly[];
 }
 
-const BOMTable: React.FC<BOMTableProps> = ({ columns, materials, assemblies }) => {
+const BOMTable: React.FC<BOMTableProps> = ({ hideColumn, setHideColumn, columns, materials, assemblies }) => {
   const [openRows, setOpenRows] = useState<String[]>([]);
 
   const arrowSymbol = (rowId: string) => {
@@ -82,6 +84,14 @@ const BOMTable: React.FC<BOMTableProps> = ({ columns, materials, assemblies }) =
       }}
     >
       <BomStyledDataGrid
+        onColumnVisibilityModelChange={(model: GridColumnVisibilityModel) => {
+          //store a state inside a parent array (array in a parent class), and then every time the state changes, update the parent state, add another part that, on reload, we check the parent state and update the child state
+          const tempColumns: boolean[] = [];
+          Object.keys(model).forEach((toDelete) => {
+            tempColumns.push(!model[toDelete]);
+          });
+          localStorage.setItem('hideColumn', JSON.stringify(tempColumns));
+        }}
         columns={columns as GridColumns<GridValidRowModel>}
         rows={rows.concat(materialsWithAssemblies.filter(isAssemblyOpen))}
         getRowClassName={(params) =>

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx
@@ -20,9 +20,11 @@ import NotesIcon from '@mui/icons-material/Notes';
 
 interface BOMTableWrapperProps {
   project: Project;
+  hideColumn: boolean[];
+  setHideColumn: React.Dispatch<React.SetStateAction<boolean[]>>;
 }
 
-const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({ project }) => {
+const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({ project, hideColumn, setHideColumn }) => {
   const [showEditMaterial, setShowEditMaterial] = useState(false);
   const [selectedMaterialId, setSelectedMaterialId] = useState('');
   const [modalShow, setModalShow] = useState(false);
@@ -44,6 +46,13 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({ project }) => {
 
   const user = useCurrentUser();
   const toast = useToast();
+  const storedHideColumn = JSON.parse(localStorage.getItem('hideColumn') || 'false');
+
+  if (storedHideColumn === 'false') {
+    hideColumn = new Array(12).fill(false);
+  } else {
+    hideColumn = storedHideColumn;
+  }
 
   if (isLoading) return <LoadingIndicator />;
 
@@ -178,6 +187,7 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({ project }) => {
     return actions;
   };
 
+  //Try to have the updated column created in BOMTable stored here, and then look at if the name of the column appears here, if it does then we dont hide, else we hide.
   const columns: GridColumns<any> = [
     {
       ...bomBaseColDef,
@@ -186,15 +196,17 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({ project }) => {
       headerName: 'Status',
       renderCell: renderStatusBOM,
       sortable: false,
-      filterable: false
+      filterable: false,
+      hide: hideColumn[0]
     },
     {
       ...bomBaseColDef,
       field: 'type',
       headerName: 'Type',
       type: 'string',
       sortable: false,
-      filterable: false
+      filterable: false,
+      hide: hideColumn[1]
     },
     {
       ...bomBaseColDef,
@@ -203,7 +215,8 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({ project }) => {
       headerName: 'Name',
       type: 'string',
       sortable: false,
-      filterable: false
+      filterable: false,
+      hide: hideColumn[2]
     },
     {
       ...bomBaseColDef,
@@ -212,7 +225,8 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({ project }) => {
       headerName: 'Manufacturer',
       type: 'string',
       sortable: false,
-      filterable: false
+      filterable: false,
+      hide: hideColumn[3]
     },
     {
       ...bomBaseColDef,
@@ -228,7 +242,8 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({ project }) => {
         } else {
           return 1;
         }
-      }
+      },
+      hide: hideColumn[4]
     },
     {
       ...bomBaseColDef,
@@ -237,31 +252,35 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({ project }) => {
       headerName: 'PDM File Name',
       type: 'string',
       sortable: false,
-      filterable: false
+      filterable: false,
+      hide: hideColumn[5]
     },
     {
       ...bomBaseColDef,
       field: 'quantity',
       headerName: 'Quantity',
       type: 'number',
       sortable: false,
-      filterable: false
+      filterable: false,
+      hide: hideColumn[6]
     },
     {
       ...bomBaseColDef,
       field: 'price',
       headerName: 'Price per Unit',
       type: 'number',
       sortable: false,
-      filterable: false
+      filterable: false,
+      hide: hideColumn[7]
     },
     {
       ...bomBaseColDef,
       field: 'subtotal',
       headerName: 'Subtotal',
       type: 'number',
       sortable: false,
-      filterable: false
+      filterable: false,
+      hide: hideColumn[8]
     },
     {
       ...bomBaseColDef,
@@ -271,7 +290,8 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({ project }) => {
       type: 'actions',
       getActions,
       sortable: false,
-      filterable: false
+      filterable: false,
+      hide: hideColumn[11]
     }
   ];
 
@@ -298,7 +318,14 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({ project }) => {
           </Box>
         </NERModal>
       )}
-      <BOMTable columns={columns} assemblies={project.assemblies} materials={project.materials} />
+
+      <BOMTable
+        hideColumn={hideColumn}
+        setHideColumn={setHideColumn}
+        columns={columns}
+        assemblies={project.assemblies}
+        materials={project.materials}
+      />
     </Box>
   );
 };

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOMTab.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOMTab.tsx
@@ -15,6 +15,8 @@ export const addMaterialCosts = (accumulator: number, currentMaterial: MaterialP
   currentMaterial.subtotal + accumulator;
 
 const BOMTab = ({ project }: { project: Project }) => {
+  const initialHideColumn = new Array(12).fill(false);
+  const [hideColumn, setHideColumn] = useState<boolean[]>(initialHideColumn);
   const [showAddMaterial, setShowAddMaterial] = useState(false);
   const [showAddAssembly, setShowAddAssembly] = useState(false);
   const theme = useTheme();
@@ -28,7 +30,7 @@ const BOMTab = ({ project }: { project: Project }) => {
       <CreateMaterialModal open={showAddMaterial} onHide={() => setShowAddMaterial(false)} wbsElement={project} />
       <CreateAssemblyModal open={showAddAssembly} onHide={() => setShowAddAssembly(false)} wbsElement={project} />
       <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: 'calc(100vh - 220px)' }}>
-        <BOMTableWrapper project={project} />
+        <BOMTableWrapper project={project} hideColumn={hideColumn} setHideColumn={setHideColumn} />
         <Box justifyContent="space-between" display="flex" flexDirection="row">
           <Box display="flex" gap="20px">
             <NERSuccessButton
@@ -42,6 +44,17 @@ const BOMTab = ({ project }: { project: Project }) => {
             <NERButton variant="contained" onClick={() => setShowAddAssembly(true)} disabled={isGuest(user.role)}>
               New Assembly
             </NERButton>
+            <NERButton
+              variant="text"
+              onClick={() => {
+                const newHideColumn = new Array(12).fill(false);
+                localStorage.setItem('hideColumn', JSON.stringify(newHideColumn));
+                setHideColumn(newHideColumn);
+              }}
+              disabled={isGuest(user.role)}
+            >
+              Show All Columns
+            </NERButton>
           </Box>
           <Box display="flex" gap="20px" alignItems="center">
             <Box sx={{ backgroundColor: theme.palette.background.paper, padding: '8px 14px 8px 14px', borderRadius: '6px' }}>