Update MyProjects grid column headings and cell formats, Remove scrol…

…lbar from printed Calculation Summary (#1543) * Updated My Project grid headings and cell formats * Updated My Project grid headings and cell formats
hackforla · Nov 29, 2023 · 479279a · 479279a
1 parent 58e8d0d
commit 479279a
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 68 deletions.
diff --git a/client/src/components/PdfPrint/PdfPrint.js b/client/src/components/PdfPrint/PdfPrint.js
@@ -18,11 +18,9 @@ import logo from "../../images/ladot.png";
 
 const useStyles = createUseStyles({
   Pdf: {
-    display: "flex",
-    flexDirection: "column",
-    flex: "1 1 auto",
-    minWidth: "85vw",
-    margin: "50px auto"
+    margin: "1em !important",
+    padding: "0 !important",
+    overflow: "hidden"
   },
   rule: {
     display: "flex",
@@ -148,7 +146,7 @@ export const PdfPrint = forwardRef((props, ref) => {
     );
 
   return (
-    <div ref={ref} className={clsx("tdm-wizard-review-page", classes.Pdf)}>
+    <div ref={ref} className={classes.Pdf}>
       <h1>
         <img
           className={classes.logo}

diff --git a/client/src/components/ProjectWizard/WizardFooter.js b/client/src/components/ProjectWizard/WizardFooter.js
@@ -44,6 +44,10 @@ const WizardFooter = ({
 }) => {
   const classes = useStyles();
   const componentRef = useRef();
+  const projectNameRule = rules && rules.find(r => r.code === "PROJECT_NAME");
+  const projectName = projectNameRule
+    ? projectNameRule.value
+    : "TDM Calculation Summary";
 
   return (
     <>
@@ -83,6 +87,9 @@ const WizardFooter = ({
                 />
               )}
               content={() => componentRef.current}
+              documentTitle={projectName}
+              bodyClass="printContainer"
+              pageStyle=".printContainer {overflow: hidden;}"
             />
             <div style={{ display: "none" }}>
               <PdfPrint

diff --git a/client/src/components/Projects/ProjectContextMenu.js b/client/src/components/Projects/ProjectContextMenu.js
@@ -77,7 +77,7 @@ const ProjectContextMenu = ({
           className={classes.listItemIcon}
           alt={`Print Project #${project.id} Icon`}
         />
-        Print
+        Print Summary
       </li>
       <li
         onClick={() => handleClick(handleDownloadCsv)}
@@ -138,18 +138,18 @@ const ProjectContextMenu = ({
               <FontAwesomeIcon
                 icon={faTrash}
                 className={classes.listItemIcon}
-                alt={`Remove Project #${project.id} from Trash Icon`}
+                alt={`Restore Project from Trash Icon`}
               />
-              Remove from Trash
+              Restore from Trash
             </>
           ) : (
             <>
               <FontAwesomeIcon
                 icon={faTrash}
                 className={classes.listItemIcon}
-                alt={`Move  Project #${project.id} to Trash Icon`}
+                alt={`Delete Project Icon`}
               />
-              Move to Trash
+              Delete
             </>
           )}
         </li>

diff --git a/client/src/components/Projects/ProjectTableRow.js b/client/src/components/Projects/ProjectTableRow.js
@@ -7,8 +7,7 @@ import Popup from "reactjs-popup";
 import "reactjs-popup/dist/index.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-  faCamera,
-  faTrash,
+  faEye,
   faEyeSlash,
   faEllipsisV
 } from "@fortawesome/free-solid-svg-icons";
@@ -29,6 +28,10 @@ const useStyles = createUseStyles({
     padding: "0.2em",
     textAlign: "right"
   },
+  tdCenterAlign: {
+    padding: "0.2em",
+    textAlign: "center"
+  },
   actionIcons: {
     display: "flex",
     justifyContent: "space-around",
@@ -118,61 +121,65 @@ const ProjectTableRow = ({
   };
 
   const handlePrintPdf = useReactToPrint({
-    content: () => printRef.current
+    content: () => printRef.current,
+    bodyClass: "printContainer",
+    pageStyle: ".printContainer {overflow: hidden;}"
   });
 
   const fallbackToBlank = value => {
     return value !== "undefined" ? value : "";
   };
 
+  // Last Modified Date column should display the Last Modified date, unless the project is
+  // deleted, in which case it will show the deleted date followed by "-Deleted" in red.
+  const dateModifiedDisplay = () => {
+    if (project.dateTrashed) {
+      return (
+        <span>
+          {moment(project.dateTrashed).format("YYYY-MM-DD")}
+          <span style={{ color: "red" }}>-Deleted</span>
+        </span>
+      );
+    }
+    return <span>{moment(project.dateModified).format("YYYY-MM-DD")}</span>;
+  };
+
   return (
     <tr key={project.id}>
-      <td className={classes.td}>
-        <Link to={`/calculation/1/${project.id}`}>{project.name}</Link>
-      </td>
-      <td className={classes.td}>{project.address}</td>
-      <td className={classes.td}>{fallbackToBlank(formInputs.VERSION_NO)}</td>
-      <td className={classes.td}>
-        {fallbackToBlank(formInputs.BUILDING_PERMIT)}
-      </td>
-      <td
-        className={classes.td}
-      >{`${project.firstName} ${project.lastName}`}</td>
-      <td className={classes.tdRightAlign}>
-        {moment(project.dateCreated).format("MM/DD/YYYY")}
-      </td>
-      <td className={classes.tdRightAlign}>
-        {momentModified.isSame(moment(), "day")
-          ? momentModified.format("h:mm A")
-          : momentModified.format("MM/DD/YYYY")}
-      </td>
-      <td className={classes.tdRightAlign}>
-        {project.dateHidden && (
+      <td className={classes.tdCenterAlign}>
+        {project.dateHidden ? (
           <FontAwesomeIcon
             icon={faEyeSlash}
             alt={`Project Is Hidden`}
             title={`Project is hidden`}
+            style={{ width: "2em" }}
           />
-        )}
-      </td>
-      <td className={classes.tdRightAlign}>
-        {project.dateTrashed && (
+        ) : (
           <FontAwesomeIcon
-            icon={faTrash}
-            alt={`Project Is In Trash`}
-            title={`Project is in trash`}
+            icon={faEye}
+            alt={`Project Is Visible`}
+            title={`Project is visible`}
+            style={{ width: "2em" }}
           />
         )}
       </td>
+      <td className={classes.td}>
+        {project.dateSnapshotted ? "Snapshot" : "Draft"}
+      </td>
+      <td className={classes.td}>
+        <Link to={`/calculation/1/${project.id}`}>{project.name}</Link>
+      </td>
+      <td className={classes.td}>{project.address}</td>
+      <td className={classes.td}>{fallbackToBlank(formInputs.VERSION_NO)}</td>
+      <td
+        className={classes.td}
+      >{`${project.firstName} ${project.lastName}`}</td>
       <td className={classes.tdRightAlign}>
-        {project.dateSnapshotted && (
-          <FontAwesomeIcon
-            icon={faCamera}
-            alt={`Project Is A Snapshot`}
-            title={`Project is a snapshot`}
-          />
-        )}
+        {moment(project.dateCreated).format("YYYY-MM-DD")}
       </td>
+
+      <td className={classes.td}>{dateModifiedDisplay()}</td>
+
       <td className={classes.actionIcons}>
         {projectData && (
           <div>

diff --git a/client/src/components/Projects/ProjectsPage.js b/client/src/components/Projects/ProjectsPage.js
@@ -4,13 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { createUseStyles } from "react-jss";
 import moment from "moment";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faSortUp,
-  faSortDown,
-  faCamera,
-  faTrash,
-  faEye
-} from "@fortawesome/free-solid-svg-icons";
+import { faSortUp, faSortDown } from "@fortawesome/free-solid-svg-icons";
 import SearchIcon from "../../images/search.png";
 
 import Pagination from "../ProjectWizard/Pagination.js";
@@ -76,7 +70,7 @@ const useStyles = createUseStyles({
       borderBottom: "1px solid #E7EBF0"
     },
     "& tr td": {
-      padding: "12px 18px",
+      padding: "12px",
       verticalAlign: "middle"
     },
     "& tr:hover": {
@@ -319,24 +313,23 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
   };
 
   const headerData = [
+    {
+      id: "dateHidden",
+      label: "Visibility"
+    },
+    {
+      id: "dateSnapshotted",
+      label: "Status"
+    },
     { id: "name", label: "Name" },
     { id: "address", label: "Address" },
     { id: "VERSION_NO", label: "Alternative Number" },
-    { id: "BUILDING_PERMIT", label: "Building Permit" },
     { id: "firstName", label: "Created By" },
     { id: "dateCreated", label: "Created On" },
     { id: "dateModified", label: "Last Modified" },
     {
-      id: "dateHidden",
-      label: <FontAwesomeIcon icon={faEye} alt={`Project Is Hidden`} />
-    },
-    {
-      id: "dateTrashed",
-      label: <FontAwesomeIcon icon={faTrash} alt={`Project Is In Trash`} />
-    },
-    {
-      id: "dateSnapshotted",
-      label: <FontAwesomeIcon icon={faCamera} alt={`Project Is a Snapshot`} />
+      id: "contextMenu",
+      label: ""
     }
   ];