#1638 - redesign all cr page

Author: RChandler234

src/frontend/src/components/Tabs.tsx

@@ -36,14 +36,10 @@ const NERTabs = ({ setTab, tabsLabels, baseUrl, defaultTab, id }: TabProps) => {
   };
 
   return (
-    <Tabs
-      sx={{ borderBottom: 1, borderColor: 'divider' }}
-      value={tabValue}
-      onChange={handleTabChange}
-      aria-label={`${id}-tabs`}
-    >
+    <Tabs value={tabValue} onChange={handleTabChange} aria-label={`${id}-tabs`}>
       {tabsLabels.map((tab, idx) => (
         <Tab
+          sx={{ borderBottom: 1, borderColor: 'divider' }}
           label={tab.tabName}
           aria-label={tab.tabUrlValue}
           value={idx}

src/frontend/src/layouts/PageTitle/PageTitle.tsx

@@ -27,17 +27,19 @@ const PageTitle: React.FC<PageTitleProps> = ({ title, previousPages, headerRight
     <>
       <PageBreadcrumbs currentPageTitle={title} previousPages={previousPages} />
       <Box sx={{ mb: 2 }}>
-        <Grid container>
-          <Grid item xs={6} md={8}>
+        <Grid container rowSpacing={1}>
+          <Grid item xs={4} md={4}>
             <Typography variant="h4" fontSize={30}>
               {title}
             </Typography>
           </Grid>
-          <Grid item xs={6} md={4} textAlign={'right'}>
+          <Grid item xs={8} md={4}>
+            {tabs && <Box>{tabs}</Box>}
+          </Grid>
+          <Grid item xs={12} md={4} textAlign={['left', 'left', 'right']}>
             {headerRight}
           </Grid>
         </Grid>
-        {tabs && <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>{tabs}</Box>}
       </Box>
     </>
   );

src/frontend/src/pages/ChangeRequestsPage/ChangeRequestsTable.tsx

@@ -3,20 +3,37 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
-import { DataGrid, GridColDef, GridFilterModel, GridRow, GridRowProps, GridToolbar } from '@mui/x-data-grid';
+import {
+  DataGrid,
+  GridColDef,
+  GridFilterModel,
+  GridRow,
+  GridRowProps,
+  GridToolbarContainer,
+  GridToolbarFilterButton,
+  GridToolbarQuickFilter
+} from '@mui/x-data-grid';
 import { routes } from '../../utils/routes';
 import { datePipe, fullNamePipe, wbsPipe } from '../../utils/pipes';
 import { useAllChangeRequests } from '../../hooks/change-requests.hooks';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import ErrorPage from '../ErrorPage';
-import { useTheme } from '@mui/system';
-import { useState } from 'react';
+import { Box, useTheme } from '@mui/system';
+import { useEffect, useState } from 'react';
 import { ChangeRequest, ChangeRequestType, validateWBS, WbsNumber } from 'shared';
 import { GridColDefStyle } from '../../utils/tables';
 import { Link } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 
+const CustomToolbar = () => (
+  <GridToolbarContainer>
+    <GridToolbarQuickFilter />
+    <GridToolbarFilterButton />
+  </GridToolbarContainer>
+);
+
 const ChangeRequestsTable: React.FC = () => {
+  const [windowSize, setWindowSize] = useState(window.innerWidth);
   const { isLoading, isError, data, error } = useAllChangeRequests();
   if (localStorage.getItem('cr-table-row-count') === null) {
     localStorage.setItem('cr-table-row-count', '50');
@@ -32,10 +49,71 @@ const ChangeRequestsTable: React.FC = () => {
 
   const theme = useTheme();
 
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize(window.innerWidth);
+    }
+
+    // Attach the event listener to the window object
+    window.addEventListener('resize', handleResize);
+
+    // Remove the event listener when the component unmounts
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   if (isLoading || !data) return <LoadingIndicator />;
 
   if (isError) return <ErrorPage message={error?.message} />;
 
+  const smallColumns: GridColDef[] = [
+    {
+      ...baseColDef,
+      field: 'crId',
+      type: 'number',
+      headerName: 'ID',
+      maxWidth: 75
+    },
+    {
+      ...baseColDef,
+      field: 'dateReviewed',
+      headerName: 'Date Reviewed',
+      type: 'date',
+      valueFormatter: (params) => (params.value ? datePipe(params.value) : ''),
+      maxWidth: 200
+    },
+    {
+      ...baseColDef,
+      field: 'wbs',
+      headerName: 'WBS',
+      filterable: true,
+      sortable: true,
+      maxWidth: 300,
+      valueGetter: (params) => `${wbsPipe(params.value.wbsNum)} - ${params.value.name}`,
+      sortComparator: (_v1, _v2, param1, param2) => {
+        const wbs1: WbsNumber = validateWBS((param1.value as string).split(' ')[0]);
+        const wbs2: WbsNumber = validateWBS((param2.value as string).split(' ')[0]);
+
+        if (wbs1.carNumber !== wbs2.carNumber) {
+          return wbs1.carNumber - wbs2.carNumber;
+        } else if (wbs1.projectNumber !== wbs2.projectNumber) {
+          return wbs1.projectNumber - wbs2.projectNumber;
+        } else if (wbs1.workPackageNumber !== wbs2.workPackageNumber) {
+          return wbs1.workPackageNumber - wbs2.workPackageNumber;
+        } else {
+          return 0;
+        }
+      }
+    },
+    {
+      ...baseColDef,
+      field: 'submitter',
+      headerName: 'Submitter',
+      maxWidth: 200
+    }
+  ];
+
   const columns: GridColDef[] = [
     {
       ...baseColDef,
@@ -141,7 +219,15 @@ const ChangeRequestsTable: React.FC = () => {
   );
 
   return (
-    <div>
+    <Box
+      sx={{
+        '& .Mui-even': {
+          backgroundColor: theme.palette.background.paper,
+          border: `1px solid ${theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'}`
+        },
+        '& .Mui-odd': { border: `1px solid ${theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'}` }
+      }}
+    >
       <DataGrid
         autoHeight
         disableSelectionOnClick
@@ -164,11 +250,27 @@ const ChangeRequestsTable: React.FC = () => {
             reviewer: fullNamePipe(v.reviewer)
           })) || []
         }
-        columns={columns}
+        columns={windowSize < 1000 ? smallColumns : columns}
         getRowId={(row) => row.crId}
-        sx={{ background: theme.palette.background.paper }}
+        sx={{
+          border: 0,
+          '& .MuiDataGrid-row:hover': {
+            backgroundColor: '#ef4345'
+          },
+          '& .MuiDataGrid-columnHeader': {
+            borderRight: `1px solid ${theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'}`,
+            borderLeft: `1px solid ${theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'}`
+          },
+          '& .MuiDataGrid-columnHeaders': {
+            border: `1px solid ${theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'}`
+          },
+          '.MuiDataGrid-columnSeparator': {
+            display: 'none'
+          }
+        }}
+        getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? 'Mui-even' : 'Mui-odd')}
         components={{
-          Toolbar: GridToolbar,
+          Toolbar: CustomToolbar,
           Row: (props: GridRowProps & { row: ChangeRequest }) => {
             return (
               <Link
@@ -213,7 +315,7 @@ const ChangeRequestsTable: React.FC = () => {
           }
         }}
       />
-    </div>
+    </Box>
   );
 };