From 4dca5e0f1fb7da7c5731eb02dcfdea14cfdbc46f Mon Sep 17 00:00:00 2001 From: John Darragh Date: Tue, 28 Nov 2023 21:32:21 -0800 Subject: [PATCH] Updated My Project grid headings and cell formats --- client/src/components/PdfPrint/PdfPrint.js | 10 +-- .../components/ProjectWizard/WizardFooter.js | 6 ++ .../components/Projects/ProjectContextMenu.js | 10 +-- .../components/Projects/ProjectTableRow.js | 82 +++++++++++-------- .../src/components/Projects/ProjectsPage.js | 30 +++---- 5 files changed, 73 insertions(+), 65 deletions(-) diff --git a/client/src/components/PdfPrint/PdfPrint.js b/client/src/components/PdfPrint/PdfPrint.js index bb2b9817..b1eb5239 100644 --- 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 ( -
+

{ const classes = useStyles(); const componentRef = useRef(); + const projectName = rules + ? rules.find(r => r.code === "PROJECT_NAME").value + : "TDM Calculation Summary"; return ( <> @@ -83,6 +86,9 @@ const WizardFooter = ({ /> )} content={() => componentRef.current} + documentTitle={projectName} + bodyClass="printContainer" + pageStyle=".printContainer {overflow: hidden;}" />
- Print + Print Summary
  • handleClick(handleDownloadCsv)} @@ -138,18 +138,18 @@ const ProjectContextMenu = ({ - Remove from Trash + Restore from Trash ) : ( <> - Move to Trash + Delete )}
    • diff --git a/client/src/components/Projects/ProjectTableRow.js b/client/src/components/Projects/ProjectTableRow.js index 278bed0a..6d44ff96 100644 --- 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,15 +121,51 @@ 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 ( + + {moment(project.dateTrashed).format("YYYY-MM-DD")} + -Deleted + + ); + } + return {moment(project.dateModified).format("YYYY-MM-DD")}; + }; + return ( + + {project.dateHidden ? ( + + ) : ( + + )} + + + {project.dateSnapshotted ? "Snapshot" : "Draft"} + {project.name} @@ -139,40 +178,11 @@ const ProjectTableRow = ({ className={classes.td} >{`${project.firstName} ${project.lastName}`} - {moment(project.dateCreated).format("MM/DD/YYYY")} - - - {momentModified.isSame(moment(), "day") - ? momentModified.format("h:mm A") - : momentModified.format("MM/DD/YYYY")} - - - {project.dateHidden && ( - - )} - - - {project.dateTrashed && ( - - )} - - - {project.dateSnapshotted && ( - - )} + {moment(project.dateCreated).format("YYYY-MM-DD")} + + {dateModifiedDisplay()} + {projectData && (
    diff --git a/client/src/components/Projects/ProjectsPage.js b/client/src/components/Projects/ProjectsPage.js index 32009914..785da6ef 100644 --- 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,6 +313,14 @@ 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" }, @@ -327,16 +329,8 @@ const ProjectsPage = ({ account, contentContainerRef }) => { { id: "dateCreated", label: "Created On" }, { id: "dateModified", label: "Last Modified" }, { - id: "dateHidden", - label: - }, - { - id: "dateTrashed", - label: - }, - { - id: "dateSnapshotted", - label: + id: "contextMenu", + label: "" } ];