update: Add toggle expand all button to table component

informatici · Sep 4, 2023 · d4901f3 · d4901f3
1 parent b273156
commit d4901f3
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 39 deletions.
diff --git a/src/components/accessories/table/Table.tsx b/src/components/accessories/table/Table.tsx
@@ -32,6 +32,8 @@ import {
 import ConfirmationDialog from "../confirmationDialog/ConfirmationDialog";
 import { useTranslation } from "react-i18next";
 import warningIcon from "../../../assets/warning-icon.png";
+import SmallButton from "../smallButton/SmallButton";
+import Button from "../button/Button";
 
 const Table: FunctionComponent<IProps> = ({
   rowData,
@@ -64,6 +66,7 @@ const Table: FunctionComponent<IProps> = ({
   const [openDeleteConfirmation, setOpenDeleteConfirmation] = useState(false);
   const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false);
   const [currentRow, setCurrentRow] = useState({} as any);
+  const [expanded, setExpanded] = useState(false);
   const handleChangePage = (event: unknown, newPage: number) => {
     setPage(newPage);
   };
@@ -224,9 +227,18 @@ const Table: FunctionComponent<IProps> = ({
     setOpenCancelConfirmation(false);
   };
 
+  const handleExpand = () => {
+    setExpanded(!expanded);
+  };
+
   return (
     <>
       <TableContainer component={Paper}>
+        <div className="header">
+          <Button type="button" onClick={handleExpand}>
+            {t("common.toggle_expand_all")}
+          </Button>
+        </div>
         <MaterialComponent className="table" aria-label="simple table">
           <TableHead className="table_header">
             <TableRow>
@@ -276,6 +288,7 @@ const Table: FunctionComponent<IProps> = ({
                   showEmptyCell={showEmptyCell}
                   renderCellDetails={renderItemDetails}
                   detailColSpan={detailColSpan}
+                  expanded={expanded}
                 />
               ))}
           </TableBody>

diff --git a/src/components/accessories/table/TableBodyRow.tsx b/src/components/accessories/table/TableBodyRow.tsx
@@ -20,19 +20,9 @@ const TableBodyRow: FunctionComponent<IRowProps> = ({
   renderCellDetails,
   coreRow,
   detailColSpan,
+  expanded,
 }) => {
   const [open, setOpen] = React.useState(false);
-  const isPrintMode = useMediaQuery("print");
-  useHotkeys("ctrl+space", async (event, handler) => {
-    event.preventDefault();
-    setOpen((previousState) => !previousState);
-  });
-
-  useEffect(() => {
-    if (!isPrintMode) {
-      setOpen(false);
-    }
-  }, [isPrintMode]);
 
   return (
     <>
@@ -44,7 +34,11 @@ const TableBodyRow: FunctionComponent<IRowProps> = ({
               size="small"
               onClick={() => setOpen(!open)}
             >
-              {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
+              {(expanded ? expanded : open) ? (
+                <KeyboardArrowUp />
+              ) : (
+                <KeyboardArrowDown />
+              )}
             </IconButton>
           </TableCell>
         ) : (
@@ -68,7 +62,7 @@ const TableBodyRow: FunctionComponent<IRowProps> = ({
             colSpan={detailColSpan ?? 6}
           >
             <Collapse
-              in={isPrintMode ? isPrintMode : open}
+              in={expanded ? expanded : open}
               timeout="auto"
               unmountOnExit
               className="collapseWrapper"

diff --git a/src/components/accessories/table/styles.scss b/src/components/accessories/table/styles.scss
@@ -1,32 +1,41 @@
 @import "../../../styles/variables";
 @import "../../../../node_modules/susy/sass/susy";
+.header {
+  display: flex;
+  justify-content: end;
+}
 
-
-.table{
-  .table_header{
-    th{
+.table {
+  @media print {
+    height: auto !important;
+  }
+  .table_header {
+    th {
       text-transform: capitalize;
       font-weight: 600;
     }
   }
-  .table_body{
+  .table_body {
+    @media print {
+      height: auto !important;
+    }
     tr {
-      td.MuiTableCell-root{
+      td.MuiTableCell-root {
         padding: 5px;
       }
     }
-    .collapseWrapper{
+    .collapseWrapper {
       background: lighten($c-grey-lighter, 22%);
       padding: 5px 5px;
       flex: 1;
-      ul{
+      ul {
         column-count: 2;
         margin: 14px;
         padding: 15px 27px;
-        @include susy-media($smartphone){
+        @include susy-media($smartphone) {
           column-count: 1;
         }
-        li{
+        li {
           list-style: none;
         }
         li + li {
@@ -35,4 +44,4 @@
       }
     }
   }
-}
+}
diff --git a/src/components/accessories/table/types.ts b/src/components/accessories/table/types.ts
@@ -38,6 +38,7 @@ export interface IRowProps {
   renderCellDetails?: <T>(row: T) => any;
   coreRow?: any;
   detailColSpan?: number;
+  expanded?: boolean;
 }
 
 export type TActions =

diff --git a/src/resources/i18n/en.json b/src/resources/i18n/en.json
@@ -444,7 +444,8 @@
       "thisyear": "This Year",
       "lastyear": "Last Year"
     },
-    "continue": "Continue ?"
+    "continue": "Continue ?",
+    "toggle_expand_all": "Toggle Expand All"
   },
   "permission": {
     "denied": "Permission denied",
@@ -546,11 +547,11 @@
     "statusmustbedone": "Exam status must be 'DONE' if results are provided",
     "changestatus": "Change Exam Status",
     "changelabstatusto": "The status of the exam {{code}} will be changed to {{status}}",
-    "statuses" : {
-      "DRAFT" : "DRAFT",
-      "ALL" : "ALL",
-      "OPEN" : "OPEN",
-      "DONE" : "DONE"
+    "statuses": {
+      "DRAFT": "DRAFT",
+      "ALL": "ALL",
+      "OPEN": "OPEN",
+      "DONE": "DONE"
     }
   },
   "admission": {
@@ -725,15 +726,15 @@
       "elderly": "Elderly"
     },
     "lab": {
-      "undefined" : {"txt": "Undefined"},
-      "blood": {"txt": "Blood"},
-      "cfs": {"txt": "CFS"},
-      "film": {"txt": "FILM"},
-      "sputum":{"txt": "Sputum"},
-      "stool":{"txt": "Stool"},
-      "swabs":{"txt": "Swabs"},
-      "tissues":{"txt": "Tissues"},
-      "urine":{"txt": "Urine"}
+      "undefined": { "txt": "Undefined" },
+      "blood": { "txt": "Blood" },
+      "cfs": { "txt": "CFS" },
+      "film": { "txt": "FILM" },
+      "sputum": { "txt": "Sputum" },
+      "stool": { "txt": "Stool" },
+      "swabs": { "txt": "Swabs" },
+      "tissues": { "txt": "Tissues" },
+      "urine": { "txt": "Urine" }
     }
   }
 }