From a48145b25e1c4d9f3d6d71088c6938eb877fa153 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Thu, 10 Apr 2025 14:08:53 -0600
Subject: [PATCH] put back everything else minus the styling

---
 src/common/ResponsiveTable.tsx | 242 ++++++++++++++++-----------------
 1 file changed, 121 insertions(+), 121 deletions(-)

diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx
index 0159c6c..4dbe820 100644
--- a/src/common/ResponsiveTable.tsx
+++ b/src/common/ResponsiveTable.tsx
@@ -96,7 +96,7 @@ interface Props<T> {
 
 export default function ResponsiveTable<T extends Object>(props: Props<T>) {
   const { 
-    // rows, 
+    rows, 
     total, 
     page, 
     pageSize, 
@@ -136,7 +136,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
 
   const filterKey = window.location.pathname.split('/').pop() + "-table-filter-list";
 
-  console.log("Most of the function and the table container")
+  console.log("Put back everything minus the style classes")
 
   const [filterList, setFilterList] = useState<string[]>(() => {
     const saved = localStorage.getItem(filterKey);
@@ -260,125 +260,125 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     return String(val).charAt(0).toUpperCase() + String(val).slice(1);
   }
 
-  // const renderMobileRow = (row: T) => {
-  //   if (renderMobile) return (
-  //     renderMobile(row)
-  //   )
-  //   if (columns) {
-  //     return (
-  //       <Grid2 container direction={"row"} spacing={1} >
-  //         {columns.map((column, index) => {
-  //           return (
-  //             <React.Fragment key={"mobile-row-column-"+index}>
-  //               { !hideKeys && <Grid2 size={{ xs: 3 }} alignContent={"center"}>
-  //                 <Typography fontWeight={"bold"} >
-  //                   {column.title+": "}
-  //                 </Typography>
-  //               </Grid2>}
-  //               <Grid2 size={{ xs: hideKeys ? 12 : 9 }} alignContent={"center"} >
-  //                 {column.render(row)}
-  //               </Grid2>
-  //             </React.Fragment>
-  //           )
-  //         })}
-  //       </Grid2>
-  //     )
-  //   }
-  //   return (
-  //     Object.keys(row).map((key, index) => {
-  //       let value = row[key as keyof typeof row]
+  const renderMobileRow = (row: T) => {
+    if (renderMobile) return (
+      renderMobile(row)
+    )
+    if (columns) {
+      return (
+        <Grid2 container direction={"row"} spacing={1} >
+          {columns.map((column, index) => {
+            return (
+              <React.Fragment key={"mobile-row-column-"+index}>
+                { !hideKeys && <Grid2 size={{ xs: 3 }} alignContent={"center"}>
+                  <Typography fontWeight={"bold"} >
+                    {column.title+": "}
+                  </Typography>
+                </Grid2>}
+                <Grid2 size={{ xs: hideKeys ? 12 : 9 }} alignContent={"center"} >
+                  {column.render(row)}
+                </Grid2>
+              </React.Fragment>
+            )
+          })}
+        </Grid2>
+      )
+    }
+    return (
+      Object.keys(row).map((key, index) => {
+        let value = row[key as keyof typeof row]
         
-  //       return (
-  //         <Grid2 container direction={"row"} key={"mobile-list-"+index} spacing={1} padding={1}>
-  //           <Grid2 size={{ xs: 4 }} alignContent={"center"} >
-  //             <Typography fontWeight={"bold"} >
-  //               {capitalize(key)+": "}
-  //             </Typography>
-  //           </Grid2>
-  //           <Grid2 size={{ xs: 8 }}>
-  //             <Typography>
-  //               {value+""}
-  //             </Typography>
-  //           </Grid2>
-  //         </Grid2>
-  //       )
-  //     })
-  //   )
-  // }
+        return (
+          <Grid2 container direction={"row"} key={"mobile-list-"+index} spacing={1} padding={1}>
+            <Grid2 size={{ xs: 4 }} alignContent={"center"} >
+              <Typography fontWeight={"bold"} >
+                {capitalize(key)+": "}
+              </Typography>
+            </Grid2>
+            <Grid2 size={{ xs: 8 }}>
+              <Typography>
+                {value+""}
+              </Typography>
+            </Grid2>
+          </Grid2>
+        )
+      })
+    )
+  }
 
 
-  // if (isMobile || mobileView) return (
-  //   <Box>
-  //     <Box className={classes.mobileTitleBox}>
-  //       {renderTitle()}
-  //       {renderSubtitle()}
-  //       {setSearchText && searchBar()}
-  //     </Box>
-  //     {rows.map((row, index) => {
-  //       return (
-  //         <Card className={classNames(classes.card, onRowClick&&classes.rowHover)} key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
-  //           {renderMobileRow(row)}
-  //           {renderGutter &&
-  //             <>
-  //             <Divider/>
-  //             <Collapse className={classes.gutter} in={openGutters.includes(index)} >
-  //               {renderGutter(row)}
-  //             </Collapse>
-  //             {openGutters.includes(index) && <Divider/>}
-  //             <ListItemButton 
-  //               sx={{ 
-  //                 width: "100%", 
-  //                 display: "flex", 
-  //                 justifyContent: "center",
-  //                 padding: gutterPadding
-  //               }} 
-  //               onClick={(event) => handleCollapse(index, event)} 
-  //               // style={{pre}}
-  //             >
-  //               <IconButton 
-  //                 sx={{
-  //                   transform: openGutters.includes(index) ? 
-  //                               'rotate(-90deg)' : 'rotate(90deg)',
-  //                   transition: 'transform 0.3s ease',
-  //                   alignContent: "center"
-  //                 }}
-  //               >
-  //                 <ChevronRight/>
-  //               </IconButton>
-  //             </ListItemButton>
-  //             </>
-  //           }
-  //         </Card>
-  //       )
-  //     })}
-  //     {(rows && rows.length < 1) &&
-  //       (!isLoading ?
-  //         <Typography sx={{ textAlign: "center" }} color="textSecondary">
-  //           { noDataMessage ? noDataMessage : "No data."}
-  //         </Typography>
-  //       :
-  //         <Box sx={{ width: "100%", textAlign: "center" }} >
-  //           <CircularProgress/>
-  //         </Box>
-  //       )
-  //     }
-  //   </Box>
-  // )
+  if (isMobile || mobileView) return (
+    <Box>
+      <Box /*className={classes.mobileTitleBox}*/>
+        {renderTitle()}
+        {renderSubtitle()}
+        {setSearchText && searchBar()}
+      </Box>
+      {rows.map((row, index) => {
+        return (
+          <Card /*className={classNames(classes.card, onRowClick&&classes.rowHover)}*/ key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
+            {renderMobileRow(row)}
+            {renderGutter &&
+              <>
+              <Divider/>
+              <Collapse /*className={classes.gutter}*/ in={openGutters.includes(index)} >
+                {renderGutter(row)}
+              </Collapse>
+              {openGutters.includes(index) && <Divider/>}
+              <ListItemButton 
+                sx={{ 
+                  width: "100%", 
+                  display: "flex", 
+                  justifyContent: "center",
+                  padding: gutterPadding
+                }} 
+                onClick={(event) => handleCollapse(index, event)} 
+                // style={{pre}}
+              >
+                <IconButton 
+                  sx={{
+                    transform: openGutters.includes(index) ? 
+                                'rotate(-90deg)' : 'rotate(90deg)',
+                    transition: 'transform 0.3s ease',
+                    alignContent: "center"
+                  }}
+                >
+                  <ChevronRight/>
+                </IconButton>
+              </ListItemButton>
+             </>
+            }
+          </Card>
+        )
+      })}
+      {(rows && rows.length < 1) &&
+        (!isLoading ?
+          <Typography sx={{ textAlign: "center" }} color="textSecondary">
+            { noDataMessage ? noDataMessage : "No data."}
+          </Typography>
+        :
+          <Box sx={{ width: "100%", textAlign: "center" }} >
+            <CircularProgress/>
+          </Box>
+        )
+      }
+    </Box>
+  )
 
-  // const filter = (colName: string) => {
-  //   let newFilterList = [...filterList]
-  //   if (filterList.includes(colName)) {
-  //     newFilterList = newFilterList.filter(name => name !== colName)
-  //   } else {
-  //     newFilterList.push(colName)
-  //   }
-  //   setFilterList(newFilterList)
-  // }
+  const filter = (colName: string) => {
+    let newFilterList = [...filterList]
+    if (filterList.includes(colName)) {
+      newFilterList = newFilterList.filter(name => name !== colName)
+    } else {
+      newFilterList.push(colName)
+    }
+    setFilterList(newFilterList)
+  }
 
 
   return (
       <TableContainer /*className={classes.tableContainer}*/ component={Paper}>
-      {/* <Table>
+      <Table>
         <TableHead>
           
           <TableRow sx={ !title && !setSearchText ? { display: "none" } : undefined}>
@@ -396,7 +396,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                       {actions && actions}
                     </Grid2>
                     <Grid2>
-                      {setSearchText &&<Box className={classes.searchContainer}>
+                      {setSearchText &&<Box /*className={classes.searchContainer}*/>
                         {searchBar()}
                       </Box>}
                     </Grid2>
@@ -459,7 +459,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
               // if (filterList.includes()) return null
               return (
                 <React.Fragment key={"row-"+index}>
-                  <TableRow onClick={() => onRowClick&&onRowClick(row)} className={onRowClick ? classes.rowHover : undefined}>
+                  <TableRow onClick={() => onRowClick&&onRowClick(row)} /*className={onRowClick ? classes.rowHover : undefined}*/>
                     {rowSelect &&
                       <TableCell>
                         <Checkbox 
@@ -508,7 +508,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                     }
                   </TableRow>
                   {renderGutter && 
-                    <TableRow className={classes.gutter}>
+                    <TableRow /*className={classes.gutter}*/>
                       <TableCell colSpan={6} sx={{padding:0, margin: 0, border: "none"}}>
                         <Collapse in={openGutters.includes(index)} timeout="auto" unmountOnExit>
                           {renderGutter(row)}
@@ -530,8 +530,8 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
             </TableRow>
           }
         </TableBody>
-      </Table> */}
-      {/* {!hidePagination &&
+      </Table>
+      {!hidePagination &&
         <TablePagination
           rowsPerPageOptions={rowsPerPageOptions ? rowsPerPageOptions : [5, 10, 20]}
           component="div"
@@ -541,8 +541,8 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
           onPageChange={(_event, page) => handlePageChange(page)}
           onRowsPerPageChange={handleRowsPerPageChange}
         />
-      } */}
-      {/* <Menu
+      }
+      <Menu
         id="userMenu"
         anchorEl={columnAnchor}
         open={columnAnchor !== null}
@@ -566,7 +566,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
               </MenuItem>
             )
           })}
-      </Menu> */}
+      </Menu>
     </TableContainer>
   )
 }
\ No newline at end of file