Select TDM strategies to earn earn points to reach the Target (left
panel).
-
+
{(allowResidentialPackage || allowSchoolPackage) && (
<>
diff --git a/client/src/components/ProjectWizard/WizardPages/ProjectPackages.js b/client/src/components/ProjectWizard/WizardPages/ProjectPackages.js
deleted file mode 100644
index 4b181733..00000000
--- a/client/src/components/ProjectWizard/WizardPages/ProjectPackages.js
+++ /dev/null
@@ -1,264 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { createUseStyles, useTheme } from "react-jss";
-import ToolTipIcon from "../../ToolTip/ToolTipIcon";
-import ToolTip from "../../ToolTip/ToolTip";
-import ToolTipLabel from "../../ToolTip/ToolTipLabel";
-
-const useStyles = createUseStyles({
- box: {
- backgroundColor: "#E7EBF0",
- padding: "0",
- maxWidth: "45%",
- margin: "1em"
- },
- boxHeader: {
- color: "white",
- backgroundColor: "#003069",
- padding: "1em",
- minHeight: "3em",
- fontSize: "20px",
- fontWeight: "700",
- fontFamily: "Calibri"
- },
- boxContent: {
- margin: "1em",
- fontFamily: "Calibri",
- fontWeight: "700",
- fontSize: "14px",
- lineHeight: "17px"
- },
- caption: {
- fontSize: "18px",
- fontWeight: "700",
- lineHeight: "22px",
- textAlign: "center"
- },
- table1: {
- width: "90%",
- margin: "1em",
- fontSize: "0.8em"
- },
- col1: {
- padding: "0.2em 0 0.2em 0.2em",
- fontSize: "15px",
- fontWeight: "700",
- lineHeight: "17px"
- },
- col2: {
- padding: "0.2em 0 0.2em 1em",
- fontSize: "15px",
- fontWeight: "700",
- lineHeight: "17px"
- },
- subtotal1: {
- padding: "0.5em 0 0.2em 0.2em",
- fontWeight: "700",
- fontSize: "18px"
- },
- subtotal2: {
- padding: "0.5em 0 0.2em 1em",
- fontWeight: "700",
- fontSize: "18px"
- },
- tooltipLabel: {
- flexGrow: "1",
- flexShrink: "1"
- },
- //TODO: refactor labels
- tooltip: {
- color: "rgb(30, 36, 63) !important",
- padding: "15px",
- minWidth: "200px",
- maxWidth: "400px",
- fontFamily: "Arial",
- fontSize: 12,
- lineHeight: "16px",
- fontWeight: "bold",
- boxShadow: "0px 0px 8px rgba(0, 46, 109, 0.2)",
- borderRadius: 2,
- "&.show": {
- visibility: "visible !important",
- opacity: "1 !important"
- }
- }
-});
-
-function ProjectPackages(props) {
- const { allowResidentialPackage, allowSchoolPackage } = props;
-
- //TODO: use or remove theme. it's not actually getting used by the useStyles...
- const theme = useTheme();
- const classes = useStyles({ theme });
- return (
-
- {allowResidentialPackage && allowSchoolPackage ? (
- <>
-
- You qualify for bonus packages!
-
-
- All LEVEL 1 projects qualify for at least one optional bonus
- package. Based on your land uses you qualify for both packages. Here
- is a breakdown of each package.
-
-
- ) : (
- <>
-
- You qualify for a bonus package!
-
-
- All LEVEL 1 projects qualify for one optional bonus package. Based
- on your land use you qualify for the package below.
-
-
- )}
-
- {allowResidentialPackage ? (
-
-
-
- Residential or Employment Package
-
-
-
-
This Package includes:
-
-
-
- +2
- Points for Bike Parking
-
-
- +4
-
- Points for Encouragement Program
-
-
-
-
- (Education, Marketing & Outreach)
-
-
-
- +8
-
- Points for Unbundling Parking
-
-
-
-
- 14
- Points
-
-
-
-
-
- ) : null}
- {allowSchoolPackage ? (
-
-
-
School Package
-
-
-
This Package includes:
-
-
-
- +2
- Points for Bike Parking
-
-
- +6
-
- Points for Encouragement Program
-
-
-
-
- (Voluntary Travel Behavior...)
-
-
-
- +2
- Points for HOV Program
-
-
- +4
-
- Points for School Safety Program
-
-
-
- 14
- Points
-
-
-
-
-
- ) : null}
-
- {allowResidentialPackage && allowSchoolPackage ? (
- <>
-
- You will be able to select these packages on the next page.
-
-
- Selecting a package will earn one additional bonus point.
-
-
- ) : (
- <>
-
- You will be able to select this package on the next page.
-
-
- {" "}
- Selecting the package will earn one additional bonus point.
-
-
- )}
-
- Learn more about packages
-
-
-
-
-
-
-
- );
-}
-
-ProjectPackages.propTypes = {
- allowResidentialPackage: PropTypes.bool.isRequired,
- allowSchoolPackage: PropTypes.bool.isRequired
-};
-
-export default ProjectPackages;
diff --git a/client/src/components/ProjectWizard/WizardPages/ProjectSpecifications.js b/client/src/components/ProjectWizard/WizardPages/ProjectSpecifications.js
index cceaa4d8..c9038c7e 100644
--- a/client/src/components/ProjectWizard/WizardPages/ProjectSpecifications.js
+++ b/client/src/components/ProjectWizard/WizardPages/ProjectSpecifications.js
@@ -17,6 +17,15 @@ const useStyles = createUseStyles(theme => ({
alignRight: {
gridColumn: "h-end",
justifyContent: "flex-end"
+ },
+ subtitle: {
+ marginTop: "0.5em",
+ marginBottom: "1em",
+ textAlign: "center",
+ fontWeight: "normal",
+ fontStyle: "normal",
+ fontSize: "20px",
+ lineHeight: "140%"
}
}));
@@ -26,7 +35,7 @@ function ProjectSpecifications(props) {
return (
Determine Project Level
-
+
Project Level (left panel) and Citywide Parking Baseline (next page) are
determined by the use specifications entered below.
diff --git a/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectInfo.jsx b/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectInfo.jsx
index 58f51e28..6c0d8623 100644
--- a/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectInfo.jsx
+++ b/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectInfo.jsx
@@ -19,7 +19,8 @@ const useStyles = createUseStyles({
},
projectInfoDetails: {
color: "#0F2940",
- fontFamily: "Calibri Bold",
+ fontFamily: "Calibri",
+ fontWeight: 700,
fontSize: "16px"
}
});
diff --git a/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectInfoContainer.jsx b/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectInfoContainer.jsx
index ae7ace54..3a08eb4d 100644
--- a/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectInfoContainer.jsx
+++ b/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectInfoContainer.jsx
@@ -14,14 +14,16 @@ const useStyles = createUseStyles({
textProjectInfoHeader: {
color: "#0F2940",
fontSize: "24px",
- fontFamily: "Calibri Bold",
+ fontFamily: "Calibri",
+ fontWeight: 700,
paddingLeft: "12px",
paddingRight: ".8em"
},
textProjectInfoHeaderAddress: {
color: "rgba(15, 41, 64, .5)",
fontSize: "24px",
- fontFamily: "Calibri Bold"
+ fontFamily: "Calibri",
+ fontWeight: "700"
},
projectInfoDetailsContainer: {
paddingTop: "6px",
diff --git a/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectInfoList.jsx b/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectInfoList.jsx
index 404c7e4a..a3151e20 100644
--- a/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectInfoList.jsx
+++ b/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectInfoList.jsx
@@ -18,7 +18,8 @@ const useStyles = createUseStyles({
},
projectInfoDetails: {
color: "#0F2940",
- fontFamily: "Calibri Bold",
+ fontFamily: "Calibri",
+ fontWeight: 700,
fontSize: "16px"
},
AINValuesContainer: {
diff --git a/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectSummary.js b/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectSummary.js
index ea2f92fe..5004d9aa 100644
--- a/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectSummary.js
+++ b/client/src/components/ProjectWizard/WizardPages/ProjectSummary/ProjectSummary.js
@@ -12,6 +12,7 @@ import MeasureSelected from "./MeasureSelected";
import PointsEarnedMessage from "./PointsEarnedMessage";
import LandUses from "./LandUses";
import Result from "./Result";
+import { useTheme } from "react-jss";
const useStyles = createUseStyles({
projectSummary: {
@@ -19,9 +20,9 @@ const useStyles = createUseStyles({
flexDirection: "column",
flex: "1 1 auto"
},
- success: {
- color: "#A7C539"
- },
+ // success: {
+ // color: "#A7C539"
+ // },
failure: {
color: "#E46247"
},
@@ -70,8 +71,8 @@ const useStyles = createUseStyles({
fontFamily: "Calibri",
fontWeight: "700",
fontStyle: "normal",
- lineHeight: "32px",
- fontSmoothing: "antialiased"
+ lineHeight: "32px"
+ // fontSmoothing: "antialiased"
},
resultsContainer: {
padding: "30px 0",
@@ -117,6 +118,7 @@ const useStyles = createUseStyles({
const ProjectSummary = props => {
const classes = useStyles();
+ const theme = useTheme();
const { rules } = props;
const parkingRequired = getRule(rules, "PARK_REQUIREMENT");
@@ -177,8 +179,10 @@ const ProjectSummary = props => {
return (
-
TDM Calculation Summary
-
+
+ TDM Calculation Summary
+
+
{props.dateModified && (
-
+ {parkingProvidedRuleOnly && (
+
+ )}
+
Your project level
diff --git a/client/src/components/ProjectWizard/WizardPages/index.js b/client/src/components/ProjectWizard/WizardPages/index.js
index 1f51781a..049c344e 100644
--- a/client/src/components/ProjectWizard/WizardPages/index.js
+++ b/client/src/components/ProjectWizard/WizardPages/index.js
@@ -2,12 +2,10 @@ import ProjectDescriptions from "./ProjectDescriptions";
import ProjectSpecifications from "./ProjectSpecifications";
import ProjectTargetPoints from "./ProjectTargetPoints";
import ProjectMeasures from "./ProjectMeasures";
-import ProjectPackages from "./ProjectPackages";
export {
ProjectDescriptions,
ProjectSpecifications,
ProjectTargetPoints,
- ProjectMeasures,
- ProjectPackages
+ ProjectMeasures
};
diff --git a/client/src/components/ProjectWizard/WizardSidebar/SidebarCart.js b/client/src/components/ProjectWizard/WizardSidebar/SidebarCart.js
index 599b0d2c..afe2881c 100644
--- a/client/src/components/ProjectWizard/WizardSidebar/SidebarCart.js
+++ b/client/src/components/ProjectWizard/WizardSidebar/SidebarCart.js
@@ -91,7 +91,7 @@ const SidebarCart = props => {
key={rule.code}
className={strategyRules ? classes.row : classes.noDisplay}
>
- {rule.name}
+ {rule.name}
{Math.round(rule.calcValue * 100) / 100}
diff --git a/client/src/components/ProjectWizard/WizardSidebar/WizardSidebar.js b/client/src/components/ProjectWizard/WizardSidebar/WizardSidebar.js
index 224906be..fdca112f 100644
--- a/client/src/components/ProjectWizard/WizardSidebar/WizardSidebar.js
+++ b/client/src/components/ProjectWizard/WizardSidebar/WizardSidebar.js
@@ -1,9 +1,8 @@
import React from "react";
import PropTypes from "prop-types";
import { createUseStyles } from "react-jss";
-import SwitchViewButton from "../../Button/SwitchViewButton";
import SidebarPointsPanel from "./SidebarPointsPanel";
-import Sidebar from "../../Sidebar";
+import Sidebar from "../../Layout/Sidebar";
const useStyles = createUseStyles({
sidebarContent: {
@@ -20,22 +19,13 @@ const useStyles = createUseStyles({
}
});
-const WizardSidebar = ({
- rules,
- onViewChange,
- resultRules,
- strategyRules,
- page
-}) => {
+const WizardSidebar = ({ rules, resultRules, strategyRules, page }) => {
const classes = useStyles();
return (
{rules && rules.length > 0 && (
-
- Switch to Single Page View
-
({
+ buttonFlexBox: {
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "center",
+ margin: 0
+ },
+ heading1: theme.typography.heading1
+}));
+
+export default function CopyProjectModal({
+ mounted,
+ onClose,
+ selectedProjectName
+}) {
+ const theme = useTheme();
+ const classes = useStyles({ theme });
+ const [duplicateProjectName, setDuplicateProjectName] = useState(
+ `${selectedProjectName} (COPY)`
+ );
+
+ return (
+
+
+
+
+ Type a new name to duplicate the project
+
+ {`${selectedProjectName}`}.
+
+
+
+
+ Cancel
+
+ onClose("ok", duplicateProjectName)}
+ variant="contained"
+ color={"colorPrimary"}
+ >
+ Create a Copy
+
+
+
+ );
+}
+
+CopyProjectModal.propTypes = {
+ mounted: PropTypes.bool,
+ onClose: PropTypes.func,
+ selectedProjectName: PropTypes.string
+};
diff --git a/client/src/components/Projects/DeleteProjectModal.js b/client/src/components/Projects/DeleteProjectModal.js
index e737ff98..da388db7 100644
--- a/client/src/components/Projects/DeleteProjectModal.js
+++ b/client/src/components/Projects/DeleteProjectModal.js
@@ -1,11 +1,20 @@
import React from "react";
-import WarningIcon from "../../images/warning-icon.png";
-import { createUseStyles } from "react-jss";
-import * as projectService from "../../services/project.service";
import { PropTypes } from "prop-types";
-import ProjectActionModal from "./ProjectActionModal";
+import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Button from "../Button/Button";
+import WarningIcon from "../../images/warning-icon.png";
+import { createUseStyles, useTheme } from "react-jss";
+import ModalDialog from "../UI/AriaModal/ModalDialog";
-const useStyles = createUseStyles({
+const useStyles = createUseStyles(theme => ({
+ buttonFlexBox: {
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "center",
+ margin: 0
+ },
+ heading1: theme.typography.heading1,
instruction: {
fontSize: "20px",
lineHeight: "32px",
@@ -16,60 +25,86 @@ const useStyles = createUseStyles({
}
},
warningIcon: {
- float: "left",
- margin: "4px 12px 12px 0"
+ margin: "0 10px"
}
-});
+}));
-const DeleteProjectModal = ({
- selectedProject,
- setSelectedProject,
- handleError,
- deleteModalOpen,
- toggleDeleteModal,
- setDeleteModalOpen
-}) => {
+const DeleteProjectModal = ({ mounted, onClose, project }) => {
+ const theme = useTheme();
const classes = useStyles();
- const deleteProject = async project => {
- try {
- await projectService.del(project.id);
- } catch (err) {
- handleError(err);
- }
-
- toggleDeleteModal();
- setSelectedProject(null);
- };
-
return (
- setDeleteModalOpen(!deleteModalOpen)}
- contentLabel="Delete Modal"
- toggleCloseButton={() => setDeleteModalOpen(!deleteModalOpen)}
- action="delete"
- title="Delete Project"
- submitButtonLabel="Delete"
- handleSubmit={() => deleteProject(selectedProject)}
+
-
- permanently delete this project,
-
- {selectedProject && selectedProject.name} ?
-
-
+ {project.dateTrashed ? (
+ <>
+
+
+
+
+ Are you sure you want to restore the project from the trash,
+
+
+
+
+ Are you sure you want to delete the project,
+
+ {project.name}?
+
+
+
+ Cancel
+
+ {project.dateTrashed ? (
+ onClose("ok")}
+ variant="contained"
+ color={"colorError"}
+ >
+ Restore
+
+ ) : (
+ onClose("ok")}
+ variant="contained"
+ color={"colorError"}
+ >
+ Delete
+
+ )}
+
+
);
};
DeleteProjectModal.propTypes = {
- selectedProject: PropTypes.object.isRequired,
- setSelectedProject: PropTypes.func.isRequired,
- toggleDeleteModal: PropTypes.func.isRequired,
- handleError: PropTypes.func.isRequired,
- deleteModalOpen: PropTypes.bool.isRequired,
- setDeleteModalOpen: PropTypes.func.isRequired
+ mounted: PropTypes.bool,
+ onClose: PropTypes.func,
+ project: PropTypes.any
};
export default DeleteProjectModal;
diff --git a/client/src/components/Projects/DownloadProjectModal.js b/client/src/components/Projects/DownloadProjectModal.js
new file mode 100644
index 00000000..f4674b7b
--- /dev/null
+++ b/client/src/components/Projects/DownloadProjectModal.js
@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { createUseStyles, useTheme } from "react-jss";
+import * as projectResultService from "..////../services/projectResult.service";
+
+import Button from "../Button/Button";
+// import { faCopy } from "@fortawesome/free-solid-svg-icons";
+// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import ModalDialog from "../UI/AriaModal/ModalDialog";
+
+const useStyles = createUseStyles(theme => ({
+ buttonFlexBox: {
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "center",
+ margin: 0
+ },
+ heading1: theme.typography.heading1
+}));
+
+export default function DownloadProjectModal({
+ mounted,
+ onClose,
+ selectedProject
+}) {
+ const theme = useTheme();
+ const classes = useStyles({ theme });
+ const selectedProjectId = selectedProject.id;
+ const [rules, setRules] = useState([]);
+
+ useEffect(() => {
+ const getProjectResult = async () => {
+ const rules =
+ await projectResultService.getProjectResult(selectedProjectId);
+ setRules(rules);
+ console.error(rules);
+ };
+
+ getProjectResult();
+ }, [selectedProjectId, setRules]);
+
+ return (
+
+
+
+ Project Result
+
+
{JSON.stringify(selectedProject, null, 2)}
+
+
+
+ ID
+ Code
+ Name
+ value
+ units
+ category
+
+ {rules
+ .filter(rule => rule.category === "input")
+ .map(r => (
+
+ {r.id}
+ {r.code}
+ {r.name}
+ {r.value}
+ {r.units}
+ {r.category}
+
+ ))}
+ {rules
+ .filter(rule => rule.category === "measure")
+ .map(r => (
+
+ {r.id}
+ {r.code}
+ {r.name}
+ {r.value}
+ {r.units}
+ {r.category}
+
+ ))}
+ {rules
+ .filter(rule => rule.category === "calculation")
+ .map(r => (
+
+ {r.id}
+ {r.code}
+ {r.name}
+ {r.value}
+ {r.units}
+ {r.category}
+
+ ))}
+
+
+
+ Close
+
+ {/* onClose("ok")}
+ variant="contained"
+ color={"colorPrimary"}
+ >
+ Create a Copy
+ */}
+
+
+ );
+}
+
+DownloadProjectModal.propTypes = {
+ mounted: PropTypes.bool,
+ onClose: PropTypes.func,
+ selectedProject: PropTypes.any
+};
diff --git a/client/src/components/Projects/DuplicateProjectModal.js b/client/src/components/Projects/DuplicateProjectModal.js
deleted file mode 100644
index 18c9f935..00000000
--- a/client/src/components/Projects/DuplicateProjectModal.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { useState } from "react";
-import { createUseStyles } from "react-jss";
-import * as projectService from "../../services/project.service";
-import { PropTypes } from "prop-types";
-import ProjectActionModal from "./ProjectActionModal";
-
-const useStyles = createUseStyles({
- instruction: {
- fontSize: "20px",
- lineHeight: "32px",
- textAlign: "center"
- },
- inputField: {
- boxSizing: "border-box",
- fontSize: "20px",
- lineHeight: "24px",
- padding: "16px",
- border: "1px solid #979797",
- marginTop: "8px"
- }
-});
-
-const DuplicateProjectModal = ({
- selectedProject,
- setSelectedProject,
- handleError,
- duplicateModalOpen,
- toggleDuplicateModal,
- setDuplicateModalOpen
-}) => {
- const classes = useStyles();
- const projectFormInputsAsJson = JSON.parse(selectedProject.formInputs);
- const [duplicateProjectName, setDuplicateProjectName] = useState(
- `${projectFormInputsAsJson.PROJECT_NAME} (COPY)`
- );
-
- const duplicateProject = async () => {
- projectFormInputsAsJson.PROJECT_NAME = duplicateProjectName;
-
- try {
- await projectService.post({
- ...selectedProject,
- name: duplicateProjectName,
- formInputs: JSON.stringify(projectFormInputsAsJson)
- });
- } catch (err) {
- handleError(err);
- }
-
- toggleDuplicateModal();
- setSelectedProject(null);
- };
-
- const handleDuplicateProjectNameChange = newProjectName => {
- setDuplicateProjectName(newProjectName);
- };
-
- return (
- setDuplicateModalOpen(!duplicateModalOpen)}
- contentLabel="Duplicate Modal"
- toggleCloseButton={() => setDuplicateModalOpen(!duplicateModalOpen)}
- action="duplicate"
- title="Duplicate Project"
- submitButtonLabel="Create a Copy"
- handleSubmit={duplicateProject}
- >
-
- Type a new name to duplicate the project,
- {selectedProject && selectedProject.name} .
-
-
- );
-};
-
-DuplicateProjectModal.propTypes = {
- selectedProject: PropTypes.object.isRequired,
- setSelectedProject: PropTypes.func.isRequired,
- toggleDuplicateModal: PropTypes.func.isRequired,
- handleError: PropTypes.func.isRequired,
- duplicateModalOpen: PropTypes.bool.isRequired,
- setDuplicateModalOpen: PropTypes.func.isRequired
-};
-
-export default DuplicateProjectModal;
diff --git a/client/src/components/Projects/FilterDrawer.js b/client/src/components/Projects/FilterDrawer.js
new file mode 100644
index 00000000..a0b8f638
--- /dev/null
+++ b/client/src/components/Projects/FilterDrawer.js
@@ -0,0 +1,188 @@
+import React, { useContext } from "react";
+import UserContext from "../../contexts/UserContext";
+import PropTypes from "prop-types";
+import Button from "../Button/Button";
+import "react-datepicker/dist/react-datepicker.css";
+import DateRangePicker from "../UI/DateRangePicker";
+
+import { createUseStyles } from "react-jss";
+
+const useStyles = createUseStyles({
+ // "@keyframes expandWidth": {
+ // from: { width: 0 },
+ // to: { width: "100%" }
+ // },
+ container: {
+ margin: "0 0.5em 0 0",
+ height: "100vh",
+ // width: "25rem",
+ padding: "1rem",
+ display: "flex",
+ flexDirection: "column",
+ borderRight: "1px solid #EEE",
+ overflowY: "auto"
+ },
+ majorHeading: {
+ marginBottom: "0"
+ },
+ minorHeading: {
+ marginBottom: "0.25rem"
+ },
+ textInput: {
+ width: "96%",
+ padding: "0.12em"
+ },
+ row: {
+ display: "flex",
+ flexDirection: "row"
+ },
+ column: {
+ flexBasis: "50%",
+ display: "flex",
+ flexDirection: "column"
+ }
+});
+
+const FilterPopup = ({ criteria, setCriteria, setCollapsed }) => {
+ const userContext = useContext(UserContext);
+ const account = userContext.account;
+ const classes = useStyles();
+
+ const resetCriteria = () => {
+ setCriteria({
+ type: "all",
+ status: "active",
+ visibility: "visible",
+ name: "",
+ address: "",
+ author: "",
+ alternative: "",
+ startDateCreated: null,
+ endDateCreated: null,
+ startDateModified: null,
+ endDateModified: null
+ });
+ };
+
+ const handleChange = (e, propertyName) => {
+ setCriteria({ ...criteria, [propertyName]: e.target.value });
+ };
+
+ const handleChangeDate = (property, date) => {
+ setCriteria({ ...criteria, [property]: date });
+ };
+
+ return (
+
+
setCollapsed(true)}
+ >
+ <<
+
+
Filters
+
+
+
+ {/*
{JSON.stringify(criteria, null, 2)} */}
+
Project Type
+
+
handleChange(e, "type")} value={criteria.type}>
+ Draft
+ Snapshot
+ Draft and Snapshot
+
+
+
Status
+
handleChange(e, "status")}
+ value={criteria.status}
+ >
+ Active
+ Deleted
+ Active and Deleted
+
+
+
Visibility
+
handleChange(e, "visibility")}
+ value={criteria.visibility}
+ >
+ Visible
+ Hidden
+ Visible and Hidden
+
+
+
Project Name
+
handleChange(e, "name")}
+ className={classes.textInput}
+ />
+
+
Address
+
handleChange(e, "address")}
+ className={classes.textInput}
+ />
+ {account.isAdmin && (
+ <>
+
Author
+
handleChange(e, "author")}
+ className={classes.textInput}
+ />
+
+ )}
+
+
Alternative Number
+
handleChange(e, "alternative")}
+ className={classes.textInput}
+ />
+
+
Created On
+
handleChangeDate("startDateCreated", date)}
+ setEndDate={date => handleChangeDate("endDateCreated", date)}
+ />
+
+ Modified On
+ handleChangeDate("startDateModified", date)}
+ setEndDate={date => handleChangeDate("endDateModified", date)}
+ />
+
+
+ Reset Filters
+
+
+
-
-
-
- {title}
-
-
- {children}
-
-
-
- Cancel
-
-
- {submitButtonLabel}
-
-
-
- );
-};
-
-ProjectActionModal.propTypes = {
- isOpen: PropTypes.bool.isRequired,
- onRequestClose: PropTypes.func.isRequired,
- contentLabel: PropTypes.string.isRequired,
- toggleCloseButton: PropTypes.func.isRequired,
- action: PropTypes.string.isRequired,
- title: PropTypes.string.isRequired,
- handleSubmit: PropTypes.func.isRequired,
- submitButtonLabel: PropTypes.string.isRequired,
- children: PropTypes.any.isRequired
-};
-
-// Required to bind modal to our appElement (http://reactcommunity.org/react-modal/accessibility/)
-Modal.setAppElement("#root");
-
-export default ProjectActionModal;
diff --git a/client/src/components/Projects/ProjectContextMenu.js b/client/src/components/Projects/ProjectContextMenu.js
new file mode 100644
index 00000000..c2e7bce9
--- /dev/null
+++ b/client/src/components/Projects/ProjectContextMenu.js
@@ -0,0 +1,207 @@
+import React, { useContext } from "react";
+import UserContext from "../../contexts/UserContext";
+import PropTypes from "prop-types";
+
+import { createUseStyles } from "react-jss";
+import {
+ faPrint,
+ faEye,
+ faEyeSlash,
+ faCamera,
+ faTrash,
+ faClone,
+ faFileCsv,
+ faPencil
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const useStyles = createUseStyles({
+ list: {
+ display: "flex",
+ flexDirection: "column",
+ listStyleType: "none",
+ margin: 0,
+ padding: 0
+ },
+ listItem: {
+ display: "flex",
+ flexDirection: "row",
+ padding: "0.5rem",
+ "&:hover": {
+ background: "#B2C0D3",
+ cursor: "pointer"
+ }
+ },
+ listItemDisabled: {
+ display: "flex",
+ flexDirection: "row",
+ padding: "0.5rem",
+ color: "gray"
+ },
+ listItemIcon: { marginRight: "0.3rem" }
+});
+
+const ProjectContextMenu = ({
+ project,
+ closeMenu,
+ handleCopyModalOpen,
+ handleDeleteModalOpen,
+ handleSnapshotModalOpen,
+ handleRenameSnapshotModalOpen,
+ handleDownloadCsv,
+ handlePrintPdf,
+ handleHide
+}) => {
+ const userContext = useContext(UserContext);
+ const account = userContext.account;
+ const classes = useStyles();
+
+ const handleClick = callback => {
+ callback(project);
+ closeMenu();
+ };
+
+ return (
+
+ {project.dateSnapshotted && project.loginId == account.id ? (
+ handleClick(handleRenameSnapshotModalOpen)}
+ >
+
+ ) : null}
+
+ {project.dateSnapshotted && project.loginId !== account.id ? (
+
+
+ ) : null}
+
+ {!project.dateSnapshotted && project.loginId == account.id ? (
+ handleClick(handleSnapshotModalOpen)}
+ >
+
+ ) : null}
+
+ handleClick(handlePrintPdf)}
+ className={classes.listItem}
+ >
+
+ handleClick(handleDownloadCsv)}
+ className={classes.listItem}
+ >
+
+ handleClick(handleCopyModalOpen)}
+ className={classes.listItem}
+ >
+
+ {project.loginId !== account.id ? null : (
+ handleClick(handleHide)}
+ className={classes.listItem}
+ >
+ {project.dateHidden ? (
+ <>
+
+ )}
+ {project.loginId !== account.id ? null : (
+ handleClick(handleDeleteModalOpen)}
+ className={classes.listItem}
+ style={{ borderTop: "1px solid black", color: "red" }}
+ >
+ {project.dateTrashed ? (
+ <>
+
+ )}
+
+ );
+};
+
+ProjectContextMenu.propTypes = {
+ project: PropTypes.object,
+ closeMenu: PropTypes.func,
+ handleCopyModalOpen: PropTypes.func,
+ handleDeleteModalOpen: PropTypes.func,
+ handleSnapshotModalOpen: PropTypes.func,
+ handleRenameSnapshotModalOpen: PropTypes.func,
+ handleDownloadCsv: PropTypes.func,
+ handlePrintPdf: PropTypes.func,
+ handleHide: PropTypes.func
+};
+
+export default ProjectContextMenu;
diff --git a/client/src/components/Projects/ProjectTableRow.js b/client/src/components/Projects/ProjectTableRow.js
new file mode 100644
index 00000000..18921233
--- /dev/null
+++ b/client/src/components/Projects/ProjectTableRow.js
@@ -0,0 +1,394 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { createUseStyles } from "react-jss";
+import { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import Popup from "reactjs-popup";
+import "reactjs-popup/dist/index.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+ faEye,
+ faEyeSlash,
+ faEllipsisV
+} from "@fortawesome/free-solid-svg-icons";
+import moment from "moment";
+import { CSVLink } from "react-csv";
+import { useReactToPrint } from "react-to-print";
+
+import ProjectContextMenu from "./ProjectContextMenu";
+import PdfPrint from "../PdfPrint/PdfPrint";
+import fetchEngineRules from "./fetchEngineRules";
+
+const useStyles = createUseStyles({
+ td: {
+ padding: "0.2em",
+ textAlign: "left"
+ },
+ tdRightAlign: {
+ padding: "0.2em",
+ textAlign: "right"
+ },
+ tdCenterAlign: {
+ padding: "0.2em",
+ textAlign: "center"
+ },
+ actionIcons: {
+ display: "flex",
+ justifyContent: "space-around",
+ width: "auto",
+ "& button": {
+ border: "none",
+ backgroundColor: "transparent",
+ "&:hover": {
+ cursor: "pointer"
+ }
+ }
+ }
+});
+
+const mapCsvRules = (project, rules) => {
+ // Specify which rules we want to include in the CSV, and in what order by code.
+ const includeRuleCodes = [
+ "PROJECT_NAME",
+ "PROJECT_ADDRESS",
+ "APN",
+ "VERSION_NO",
+ "BUILDING_PERMIT",
+ "CASE_NO_LADOT",
+ "CASE_NO_PLANNING",
+ "PROJECT_DESCRIPTION",
+ "PROJECT_LEVEL",
+ "PARK_REQUIREMENT",
+ "PARK_SPACES",
+ "CALC_PARK_RATIO",
+ "TARGET_POINTS_PARK",
+ "PTS_EARNED",
+ "PTS_PKG_RESIDENTIAL_COMMERCIAL",
+ "PTS_PKG_SCHOOL",
+ "STRATEGY_AFFORDABLE",
+ "STRATEGY_BIKE_1",
+ "STRATEGY_BIKE_3",
+ "STRATEGY_BIKE_4",
+ "STRATEGY_BIKE_5",
+ "STRATEGY_CAR_SHARE_1",
+ "STRATEGY_CAR_SHARE_3",
+ "STRATEGY_CAR_SHARE_4",
+ "STRATEGY_CAR_SHARE_ELECTRIC",
+ "STRATEGY_CAR_SHARE_BONUS",
+ "STRATEGY_CHILD_CARE",
+ "STRATEGY_HOV_2",
+ "STRATEGY_HOV_3",
+ "STRATEGY_HOV_4",
+ "STRATEGY_HOV_5",
+ "STRATEGY_INFO_1",
+ "STRATEGY_INFO_2",
+ "STRATEGY_INFO_3",
+ "STRATEGY_INFO_5",
+ "STRATEGY_MIXED_USE",
+ "STRATEGY_MOBILITY_INVESTMENT_1",
+ "STRATEGY_MOBILITY_INVESTMENT_2",
+ "STRATEGY_PARKING_1",
+ "STRATEGY_PARKING_2",
+ "STRATEGY_PARKING_3",
+ "STRATEGY_PARKING_4",
+ "STRATEGY_PARKING_5",
+ "STRATEGY_SHARED_MOBILITY_1",
+ "STRATEGY_SHARED_MOBILITY_2",
+ "STRATEGY_TELECOMMUTE_1",
+ "STRATEGY_TELECOMMUTE_2",
+ "STRATEGY_TRANSIT_ACCESS_1",
+ "STRATEGY_TRANSIT_ACCESS_3",
+ "STRATEGY_TRANSIT_ACCESS_4",
+ "STRATEGY_TRANSIT_ACCESS_5",
+ "STRATEGY_TMO_1",
+ "STRATEGY_TMO_2",
+ "STRATEGY_APPLICANT",
+ "UNITS_CONDO",
+ "PARK_CONDO",
+ "UNITS_HABIT_LT3",
+ "UNITS_HABIT_3",
+ "UNITS_HABIT_GT3",
+ "AFFORDABLE_HOUSING",
+ "UNITS_GUEST",
+ "SF_RETAIL",
+ "SF_FURNITURE",
+ "SF_RESTAURANT",
+ "SF_HEALTH_CLUB",
+ "SF_RESTAURANT_TAKEOUT",
+ "SF_OFFICE",
+ "SF_INST_GOV",
+ "SF_INST_OTHER",
+ "SF_INDUSTRIAL",
+ "SF_WAREHOUSE",
+ "SF_INST_MEDICAL_SVC",
+ "SF_HOSPITAL",
+ "STUDENTS_ELEMENTARY",
+ "CLASSROOM_SCHOOL",
+ "STUDENTS_TRADE_SCHOOL",
+ "HS_STUDENTS",
+ "HS_AUDITORIUM_SEATS",
+ "HS_AUDITORIUM_SF",
+ "SEAT_AUDITORIUM",
+ "SF_AUDITORIUM_NO_SEATS"
+ ];
+
+ // Get the needed data from the rule calculation
+ // flatMap/filter improves testability by allowing missing rules.
+ const orderedRules = includeRuleCodes
+ .flatMap(rc => rules.find(r => r.code === rc))
+ .filter(r => !!r)
+ .map(r => ({
+ code: r.code,
+ name: r.name,
+ dataType: r.dataType,
+ choices: r.choices,
+ value: r.value,
+ units: r.units
+ }));
+
+ // Augment with meta-data from project table that is not included in rules.
+ const projectProperties = [
+ {
+ code: "Id",
+ name: "Project Id",
+ dataType: "project",
+ choices: null,
+ value: project.id
+ },
+ {
+ code: "Author FN",
+ name: "Author First Name",
+ dataType: "project",
+ choices: null,
+ value: project.firstName
+ },
+ {
+ code: "Author LN",
+ name: "Author Last Name",
+ dataType: "project",
+ choices: null,
+ value: project.lastName
+ },
+ {
+ code: "Date Created",
+ name: "Date Created",
+ dataType: "project",
+ choices: null,
+ value: project.dateCreated
+ },
+ {
+ code: "Date Modified",
+ name: "Date Modified",
+ dataType: "project",
+ choices: null,
+ value: project.dateModified
+ },
+ {
+ code: "Date Hidden",
+ name: "Date Hidden",
+ dataType: "project",
+ choices: null,
+ value: project.dateHidden
+ },
+ {
+ code: "Date Deleted",
+ name: "Date Deleted",
+ dataType: "project",
+ choices: null,
+ value: project.dateTrashed
+ },
+ {
+ code: "Date Snapshotted",
+ name: "Date Snapshotted",
+ dataType: "project",
+ choices: null,
+ value: project.dateSnapshotted
+ }
+ ];
+
+ let columnData = projectProperties.concat(orderedRules);
+
+ const ruleNames = columnData.flatMap(rule => {
+ if (rule.dataType === "choice") {
+ return rule.choices.map(choice => rule.name + " - " + choice.name);
+ } else {
+ return `${rule.name}${rule.units ? " (" + rule.units + ")" : ""}`;
+ }
+ });
+
+ const ruleValues = columnData.flatMap(rule => {
+ if (rule.dataType === "choice") {
+ return rule.choices.map(choice =>
+ choice.id == rule.value || (choice.id == 0 && !rule.value) ? "Y" : "N"
+ );
+ } else {
+ return rule.value ? rule.value.toString() : "";
+ }
+ });
+
+ const flat = [
+ ["TDM Calculation Project Summary"],
+ ["Date Printed: " + Date().toString()], // TODO: prefer ISO string?
+ [],
+ ruleNames,
+ ruleValues
+ ];
+ return flat;
+};
+
+const ProjectTableRow = ({
+ project,
+ handleCopyModalOpen,
+ handleDeleteModalOpen,
+ handleSnapshotModalOpen,
+ handleRenameSnapshotModalOpen,
+ handleHide
+}) => {
+ const classes = useStyles();
+ const momentModified = moment(project.dateModified);
+ const formInputs = JSON.parse(project.formInputs);
+
+ const csvRef = useRef(); // setup the ref that we'll use for the hidden CsvLink click once we've updated the data
+ const printRef = useRef();
+
+ const [projectData, setProjectData] = useState();
+
+ // Download and process rules once for both CSV and PDF rendering
+ useEffect(() => {
+ const fetchRules = async () => {
+ const rules = await fetchEngineRules(project);
+ const csvData = project && mapCsvRules(project, rules || []);
+
+ setProjectData({ pdf: rules, csv: csvData });
+ };
+
+ fetchRules()
+ // TODO: do we have better reporting than this?
+ .catch(console.error);
+ }, [project]);
+
+ const handleDownloadCsv = () => {
+ csvRef.current.link.click();
+ };
+
+ const handlePrintPdf = useReactToPrint({
+ 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.address}
+ {fallbackToBlank(formInputs.VERSION_NO)}
+ {`${project.firstName} ${project.lastName}`}
+
+ {moment(project.dateCreated).format("YYYY-MM-DD")}
+
+
+ {dateModifiedDisplay()}
+
+
+ {projectData && (
+
+
+
+
+
+
+ );
+};
+
+ProjectTableRow.propTypes = {
+ project: PropTypes.object.isRequired,
+ handleCopyModalOpen: PropTypes.func.isRequired,
+ handleDeleteModalOpen: PropTypes.func.isRequired,
+ handleSnapshotModalOpen: PropTypes.func.isRequired,
+ handleRenameSnapshotModalOpen: PropTypes.func.isRequired,
+ handleHide: PropTypes.func.isRequired
+};
+
+export default ProjectTableRow;
diff --git a/client/src/components/Projects/ProjectTableRow.test.js b/client/src/components/Projects/ProjectTableRow.test.js
new file mode 100644
index 00000000..08ddfe90
--- /dev/null
+++ b/client/src/components/Projects/ProjectTableRow.test.js
@@ -0,0 +1,263 @@
+import React from "react";
+import { BrowserRouter } from "react-router-dom";
+import ProjectTableRow from "./ProjectTableRow";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+jest.mock("react-to-print", () => ({
+ __esModule: true,
+ default: jest.fn(),
+ useReactToPrint: jest.fn()
+}));
+
+// Set up a Jest mock function to check any props.
+const mockPrint = jest.fn();
+jest.mock("../PdfPrint/PdfPrint", () => {
+ const { forwardRef } = jest.requireActual("react");
+ return {
+ __esModule: true,
+ default: forwardRef((props, ref) => {
+ mockPrint(props);
+ return PdfPrint
;
+ })
+ };
+});
+// Set up a Jest mock function to check any props.
+const mockCsv = jest.fn();
+jest.mock("react-csv", () => {
+ const { forwardRef } = jest.requireActual("react");
+ return {
+ __esModule: true,
+ CSVLink: forwardRef((props, ref) => {
+ mockCsv(props);
+ return CSVLink
;
+ })
+ };
+});
+
+const projectRules = [
+ {
+ code: "PROJECT_NAME",
+ name: "Rule 1",
+ value: 1,
+ dataType: "number",
+ used: true
+ },
+ {
+ code: "PROJECT_ADDRESS",
+ name: "Rule 2",
+ value: 2,
+ dataType: "number",
+ used: true
+ },
+ {
+ code: "APN",
+ name: "Rule 3",
+ value: 3,
+ dataType: "choice",
+ used: true,
+ choices: [
+ { id: 1, name: "Choice 1" },
+ { id: 2, name: "Choice 2" },
+ { id: 3, name: "Choice 3" }
+ ]
+ }
+];
+
+jest.mock("./fetchEngineRules", () =>
+ jest.fn(() => Promise.resolve(projectRules))
+);
+
+describe("ProjectTableRow", () => {
+ const project = {
+ id: 1,
+ name: "Project 1",
+ address: "123 Main St",
+ firstName: "John",
+ lastName: "Doe",
+ dateCreated: "2022-08-01T12:00:00.000Z",
+ dateModified: "2023-08-01T12:00:00.000Z",
+ formInputs: "{}"
+ };
+
+ const handleCopyModalOpen = jest.fn();
+ const handleDeleteModalOpen = jest.fn();
+ const handleSnapshotModalOpen = jest.fn();
+ const handleHide = jest.fn();
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ // NOTE: must call "await waitFor()" at the end of every test
+ // this is because useEffect is triggered on render,
+ // in order to generate the CSV and PDF.
+ // and the tests need a chance to process the setProjectData.
+ it("renders project data", async () => {
+ render(
+
+
+
+ );
+
+ expect(screen.getByText(project.name)).toBeInTheDocument();
+ expect(screen.getByText(project.address)).toBeInTheDocument();
+ expect(
+ screen.getByText(project.firstName + " " + project.lastName)
+ ).toBeInTheDocument();
+ expect(screen.getByText("2022-08-01")).toBeInTheDocument();
+ expect(screen.getByText("2023-08-01")).toBeInTheDocument();
+ expect(screen.queryByTitle("Project is hidden")).not.toBeInTheDocument();
+ expect(screen.queryByText("-Deleted")).not.toBeInTheDocument();
+ expect(screen.queryByTitle("Snapshot")).not.toBeInTheDocument();
+ expect(screen.getByText("Draft")).toBeInTheDocument();
+
+ await waitFor(() => expect(screen.getByRole("button")).toBeInTheDocument());
+ });
+
+ it("renders project form inputs", async () => {
+ const formInputs = { VERSION_NO: "98.6", BUILDING_PERMIT: "12345" };
+ project.formInputs = JSON.stringify(formInputs);
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByText(formInputs.VERSION_NO)).toBeInTheDocument();
+ expect(
+ screen.queryByText(formInputs.BUILDING_PERMIT)
+ ).not.toBeInTheDocument();
+
+ await waitFor(() => expect(screen.getByRole("button")).toBeInTheDocument());
+ });
+
+ it("renders project date modified", async () => {
+ const dateModified = "2023-10-02T12:34:56.789Z";
+ project.dateModified = dateModified;
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByText("2023-10-02")).toBeInTheDocument();
+ await waitFor(() => expect(screen.getByRole("button")).toBeInTheDocument());
+ });
+
+ it("renders project hidden/trashed/snapshotted icons", async () => {
+ const dateHidden = "2021-08-03T00:00:00.000Z";
+ const dateTrashed = "2021-08-04T00:00:00.000Z";
+ const dateSnapshotted = "2021-08-05T00:00:00.000Z";
+ project.dateHidden = dateHidden;
+ project.dateTrashed = dateTrashed;
+ project.dateSnapshotted = dateSnapshotted;
+
+ render(
+
+
+
+ );
+
+ expect(screen.queryByRole("button")).toBeNull();
+
+ expect(screen.getByTitle("Project is hidden")).toBeInTheDocument();
+ expect(screen.getByText("-Deleted")).toBeInTheDocument();
+ expect(screen.queryByTitle("Draft")).not.toBeInTheDocument();
+ expect(screen.getByText("Snapshot")).toBeInTheDocument();
+
+ await waitFor(() => expect(screen.getByRole("button")).toBeInTheDocument());
+ });
+
+ it("renders async project context menu", async () => {
+ const fetchEngineRules = require("./fetchEngineRules");
+ fetchEngineRules.mockImplementation(() => Promise.resolve(projectRules));
+ render(
+
+
+
+ );
+ expect(fetchEngineRules).toHaveBeenCalledTimes(1);
+ expect(screen.queryByRole("button")).toBeNull();
+
+ await waitFor(() => expect(screen.getByRole("button")).toBeInTheDocument());
+ expect(mockPrint).toHaveBeenCalledTimes(1);
+ expect(mockPrint).toHaveBeenCalledWith(
+ expect.objectContaining({
+ dateModified: "10/02/2023",
+ rules: projectRules
+ })
+ );
+
+ expect(mockCsv).toHaveBeenCalledTimes(1);
+ expect(mockCsv).toHaveBeenCalledWith(
+ expect.objectContaining({
+ filename: "TDM-data.csv",
+ target: "_blank",
+ data: expect.arrayContaining([
+ expect.arrayContaining(["TDM Calculation Project Summary"]),
+ expect.arrayContaining([
+ "Rule 1",
+ "Rule 2",
+ "Rule 3 - Choice 1",
+ "Rule 3 - Choice 2",
+ "Rule 3 - Choice 3"
+ ]),
+ expect.arrayContaining(["1", "2", "Y", "N", "N"])
+ ])
+ })
+ );
+ });
+});
diff --git a/client/src/components/Projects/ProjectsPage.js b/client/src/components/Projects/ProjectsPage.js
index ab43eb1d..8ad168a9 100644
--- a/client/src/components/Projects/ProjectsPage.js
+++ b/client/src/components/Projects/ProjectsPage.js
@@ -1,43 +1,73 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useContext } from "react";
import PropTypes from "prop-types";
-import { Link, withRouter } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import { createUseStyles } from "react-jss";
-import * as projectService from "../../services/project.service";
-import moment from "moment";
-import { useToast } from "../../contexts/Toast";
+import UserContext from "../../contexts/UserContext.js";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faSortUp,
- faSortDown
- // faPrint
+ faSortDown,
+ faFilter
} from "@fortawesome/free-solid-svg-icons";
import SearchIcon from "../../images/search.png";
-import CopyIcon from "../../images/copy.png";
-import DeleteIcon from "../../images/trash.png";
-import Pagination from "../Pagination.js";
-import DeleteProjectModal from "./DeleteProjectModal";
-import DuplicateProjectModal from "./DuplicateProjectModal";
+import Pagination from "../ProjectWizard/Pagination.js";
import ContentContainerNoSidebar from "../Layout/ContentContainerNoSidebar";
-// import ReactToPrint from "react-to-print";
-import { PdfPrint } from "../PdfPrint/PdfPrint";
+import useErrorHandler from "../../hooks/useErrorHandler";
+import useProjects from "../../hooks/useGetProjects";
+import * as projectService from "../../services/project.service";
+import SnapshotProjectModal from "./SnapshotProjectModal";
+import RenameSnapshotModal from "./RenameSnapshotModal";
+
+import DeleteProjectModal from "./DeleteProjectModal";
+import CopyProjectModal from "./CopyProjectModal";
+import ProjectTableRow from "./ProjectTableRow";
+import FilterDrawer from "./FilterDrawer.js";
const useStyles = createUseStyles({
+ outerDiv: {
+ display: "flex",
+ flexDirection: "row-reverse",
+ justifyItems: "flex-start"
+ },
+ contentDiv: {
+ flexBasis: "75%",
+ flexShrink: 1,
+ flexGrow: 1,
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center"
+ },
+ filter: {
+ overflow: "hidden",
+ flexBasis: "18rem",
+ flexShrink: 0,
+ flexGrow: 0,
+ transition: "flex-basis 1s ease-in-out"
+ },
+ filterCollapsed: {
+ overflow: "hidden",
+ flexBasis: "1%",
+ flexShrink: 0,
+ flexGrow: 0,
+ transition: "flex-basis 1s ease-in-out"
+ },
pageTitle: {
marginTop: "2em"
},
searchBarWrapper: {
position: "relative",
- alignSelf: "flex-end"
+ alignSelf: "center"
},
searchBar: {
maxWidth: "100%",
- width: "382px",
- padding: "12px 12px 12px 48px"
+ width: "20em",
+ padding: "12px 12px 12px 48px",
+ marginRight: "0.5rem"
},
searchIcon: {
position: "absolute",
left: "16px",
- top: "12px"
+ top: "14px"
},
table: {
minWidth: "850px",
@@ -50,10 +80,6 @@ const useStyles = createUseStyles({
padding: "0.2em",
textAlign: "left"
},
- tdRightAlign: {
- padding: "0.2em",
- textAlign: "right"
- },
thead: {
fontWeight: "bold",
backgroundColor: "#002E6D",
@@ -72,18 +98,13 @@ const useStyles = createUseStyles({
marginLeft: "8px",
verticalAlign: "baseline"
},
- printIcon: {
- verticalAlign: "baseline",
- opacity: ".4",
- height: "20px"
- },
tbody: {
background: "#F9FAFB",
"& tr": {
borderBottom: "1px solid #E7EBF0"
},
"& tr td": {
- padding: "12px 18px",
+ padding: "12px",
verticalAlign: "middle"
},
"& tr:hover": {
@@ -93,18 +114,6 @@ const useStyles = createUseStyles({
tdNoSavedProjects: {
textAlign: "center"
},
- actionIcons: {
- display: "flex",
- justifyContent: "space-around",
- width: "auto",
- "& button": {
- border: "none",
- backgroundColor: "transparent",
- "&:hover": {
- cursor: "pointer"
- }
- }
- },
tableContainer: {
overflow: "auto",
width: "100%",
@@ -112,35 +121,49 @@ const useStyles = createUseStyles({
}
});
-const ProjectsPage = ({
- account,
- history,
- contentContainerRef,
- rules,
- dateModified
-}) => {
- const [projects, setProjects] = useState([]);
+const ProjectsPage = ({ contentContainerRef }) => {
+ const classes = useStyles();
+ const userContext = useContext(UserContext);
+
const [filterText, setFilterText] = useState("");
const [order, setOrder] = useState("asc");
+ const email = userContext.account.email;
+ const navigate = useNavigate();
+ const handleError = useErrorHandler(email, navigate);
+ const [projects, setProjects] = useProjects(handleError);
const [orderBy, setOrderBy] = useState("dateCreated");
- const [duplicateModalOpen, setDuplicateModalOpen] = useState(false);
+ const [copyModalOpen, setCopyModalOpen] = useState(false);
+ const [snapshotModalOpen, setSnapshotModalOpen] = useState(false);
+ const [renameSnapshotModalOpen, setRenameSnapshotModalOpen] = useState(false);
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
const [selectedProject, setSelectedProject] = useState(null);
- const classes = useStyles();
- const toast = useToast();
const [currentPage, setCurrentPage] = useState(1);
+
const projectsPerPage = 10;
const highestPage = Math.ceil(projects.length / projectsPerPage);
- const email = account.email;
- const currentUser = JSON.parse(localStorage.getItem("currentUser"));
- const toastAdd = toast.add;
- const historyPush = history.push;
-
- const pageLinks = document.getElementsByClassName("pageLinkContainer-0-2-40");
- for (let i = 0; i < pageLinks.length; i++) {
- pageLinks[i].classList.remove("highlightPage");
- if (i === currentPage - 1) pageLinks[i].classList.add("highlightPage");
- }
+
+ const [criteria, setCriteria] = useState({
+ type: "all",
+ status: "active",
+ visibility: "visible",
+ name: "",
+ address: "",
+ author: "",
+ alternative: "",
+ startDateCreated: null,
+ endDateCreated: null,
+ startDateModified: null,
+ endDateModified: null
+ });
+ const [filterCollapsed, setFilterCollapsed] = useState(true);
+
+ const selectedProjectName = (() => {
+ if (!selectedProject) {
+ return "";
+ }
+ const projectFormInputsAsJson = JSON.parse(selectedProject.formInputs);
+ return projectFormInputsAsJson.PROJECT_NAME || "";
+ })();
const paginate = pageNumber => {
if (typeof pageNumber === "number") {
@@ -152,50 +175,104 @@ const ProjectsPage = ({
}
};
- const handleError = useCallback(
- error => {
- if (error.response && error.response.status === 401) {
- toastAdd(
- "For your security, your session has expired. Please log in again."
- );
- historyPush(`/logout/${encodeURIComponent(email)}`);
+ const handleCopyModalOpen = project => {
+ if (project) {
+ setSelectedProject(project);
+ }
+ setCopyModalOpen(true);
+ };
+
+ const updateProjects = async () => {
+ const updated = await projectService.get();
+ setProjects(updated.data);
+ };
+
+ const handleCopyModalClose = async (action, newProjectName) => {
+ if (action === "ok") {
+ const projectFormInputsAsJson = JSON.parse(selectedProject.formInputs);
+ projectFormInputsAsJson.PROJECT_NAME = newProjectName;
+
+ try {
+ await projectService.post({
+ ...selectedProject,
+ name: newProjectName,
+ formInputs: JSON.stringify(projectFormInputsAsJson)
+ });
+ await updateProjects();
+ } catch (err) {
+ handleError(err);
}
- console.error(error);
- },
- [email, toastAdd, historyPush]
- );
+ }
+ setCopyModalOpen(false);
+ };
- const getProjects = useCallback(async () => {
- try {
- const result = await projectService.get();
- if (result.data === "" || result.data === false) {
- setProjects([]);
- } else {
- setProjects(result.data);
+ const handleDeleteModalOpen = project => {
+ setSelectedProject(project);
+ setDeleteModalOpen(true);
+ };
+
+ const handleDeleteModalClose = async action => {
+ if (action === "ok") {
+ try {
+ await projectService.trash(
+ [selectedProject.id],
+ !selectedProject.dateTrashed
+ );
+ await updateProjects();
+ } catch (err) {
+ handleError(err);
}
- } catch (err) {
- handleError(err);
}
- }, [handleError]);
+ setDeleteModalOpen(false);
+ };
- useEffect(() => {
- if (!selectedProject) {
- getProjects();
+ const handleSnapshotModalOpen = project => {
+ setSelectedProject(project);
+ setSnapshotModalOpen(true);
+ };
+
+ const handleSnapshotModalClose = async (action, newProjectName) => {
+ if (action === "ok") {
+ try {
+ await projectService.snapshot({
+ id: selectedProject.id,
+ name: newProjectName
+ });
+ await updateProjects();
+ setSelectedProject(null);
+ } catch (err) {
+ handleError(err);
+ }
}
- }, [selectedProject, getProjects]);
+ setSnapshotModalOpen(false);
+ };
- const toggleDuplicateModal = project => {
- if (project) {
- setSelectedProject(project);
- } else {
- setSelectedProject(null);
+ const handleRenameSnapshotModalOpen = project => {
+ setSelectedProject(project);
+ setRenameSnapshotModalOpen(true);
+ };
+
+ const handleRenameSnapshotModalClose = async (action, newProjectName) => {
+ if (action === "ok") {
+ try {
+ await projectService.renameSnapshot({
+ id: selectedProject.id,
+ name: newProjectName
+ });
+ await updateProjects();
+ setSelectedProject(null);
+ } catch (err) {
+ handleError(err);
+ }
}
- setDuplicateModalOpen(!duplicateModalOpen);
+ setRenameSnapshotModalOpen(false);
};
- const toggleDeleteModal = project => {
- project ? setSelectedProject(project) : setSelectedProject(null);
- setDeleteModalOpen(!deleteModalOpen);
+ const handleHide = async project => {
+ setSelectedProject(project);
+ await projectService.hide([project.id], !project.dateHidden);
+ await updateProjects();
+ console.error(project.dateHidden);
};
const descCompareBy = (a, b, orderBy) => {
@@ -215,6 +292,13 @@ const ProjectsPage = ({
projectB = JSON.parse(b.formInputs).BUILDING_PERMIT
? JSON.parse(b.formInputs).BUILDING_PERMIT
: "undefined";
+ } else if (
+ orderBy === "dateHidden" ||
+ orderBy === "dateTrashed" ||
+ orderBy === "dateSnapshotted"
+ ) {
+ projectA = a[orderBy] ? 1 : 0;
+ projectB = b[orderBy] ? 1 : 0;
} else {
projectA = a[orderBy].toLowerCase();
projectB = b[orderBy].toLowerCase();
@@ -255,32 +339,75 @@ const ProjectsPage = ({
setFilterText(text);
};
- const filterProjects = project => {
+ const getDateOnly = date => {
+ const dateOnly = new Date(date).toDateString();
+ return new Date(dateOnly);
+ };
+
+ const filterProjects = p => {
+ if (criteria.type === "draft" && p.dateSnapshotted) return false;
+ if (criteria.type === "snapshot" && !p.dateSnapshotted) return false;
+ if (criteria.status === "active" && p.dateTrashed) return false;
+ if (criteria.status === "deleted" && !p.dateTrashed) return false;
+ if (criteria.visibility === "visible" && p.dateHidden) return false;
+ if (criteria.visibility === "hidden" && !p.dateHidden) return false;
+ if (
+ criteria.name &&
+ !p.name.toLowerCase().includes(criteria.name.toLowerCase())
+ )
+ return false;
+ if (
+ criteria.address &&
+ !p.address.toLowerCase().includes(criteria.address.toLowerCase())
+ )
+ return false;
+
+ if (
+ criteria.startDateCreated &&
+ getDateOnly(p.dateCreated) < getDateOnly(criteria.startDateCreated)
+ )
+ return false;
+ if (
+ criteria.endDateCreated &&
+ getDateOnly(p.dateCreated) > getDateOnly(criteria.endDateCreated)
+ )
+ return false;
+ if (
+ criteria.startDateModified &&
+ getDateOnly(p.dateModified) < getDateOnly(criteria.startDateModified)
+ )
+ return false;
+ if (
+ criteria.endDateModified &&
+ getDateOnly(p.dateModified) > getDateOnly(criteria.endDateModified)
+ )
+ return false;
+
// fullName attr allows searching by full name, not just by first or last name
- project["fullName"] = `${project["firstName"]} ${project["lastName"]}`;
- project["versionNum"] = JSON.parse(project["formInputs"]).VERSION_NO
- ? JSON.parse(project["formInputs"]).VERSION_NO
- : "";
- project["buildingPermit"] = JSON.parse(project["formInputs"])
- .BUILDING_PERMIT
- ? JSON.parse(project["formInputs"]).BUILDING_PERMIT
+ p["fullname"] = `${p["firstName"]} ${p["lastName"]}`;
+ if (
+ criteria.author &&
+ !p.fullname.toLowerCase().includes(criteria.author.toLowerCase())
+ )
+ return false;
+ p.alternative = JSON.parse(p["formInputs"]).VERSION_NO
+ ? JSON.parse(p["formInputs"]).VERSION_NO
: "";
- project["dateCreated"] = moment(project["dateCreated"]).format();
- project["dateModified"] = moment(project["dateModified"]).format();
+ if (
+ criteria.alternative &&
+ !p.alternative.toLowerCase().includes(criteria.alternative.toLowerCase())
+ ) {
+ return false;
+ }
+ // Search criteria for filterText - redundant with individual search
+ // criteria in FilterDrawer, and we could get rid of the search box
+ // above the grid.
if (filterText !== "") {
- let ids = [
- "name",
- "address",
- "fullName",
- "versionNum",
- "buildingPermit",
- "dateCreated",
- "dateModified"
- ];
+ let ids = ["name", "address", "fullName", "alternative"];
return ids.some(id => {
- let colValue = String(project[id]).toLowerCase();
+ let colValue = String(p[id]).toLowerCase();
return colValue.includes(filterText.toLowerCase());
});
}
@@ -289,13 +416,24 @@ const ProjectsPage = ({
};
const headerData = [
+ {
+ id: "dateHidden",
+ label: "Visibility"
+ },
+ {
+ id: "dateSnapshotted",
+ label: "Status"
+ },
{ id: "name", label: "Name" },
{ id: "address", label: "Address" },
- { id: "VERSION_NO", label: "Version Number" },
- { id: "BUILDING_PERMIT", label: "Building Permit" },
- { id: "firstName", label: "Entered By" },
+ { id: "VERSION_NO", label: "Alternative Number" },
+ { id: "firstName", label: "Created By" },
{ id: "dateCreated", label: "Created On" },
- { id: "dateModified", label: "Last Modified" }
+ { id: "dateModified", label: "Last Modified" },
+ {
+ id: "contextMenu",
+ label: ""
+ }
];
const indexOfLastPost = currentPage * projectsPerPage;
@@ -309,205 +447,194 @@ const ProjectsPage = ({
indexOfLastPost
);
- const componentRef = useRef();
-
return (
-
- Projects
-
-
handleFilterTextChange(e.target.value)}
- />
-
-
-
-
-
- {headerData.map((header, i) => {
- const label = header.label.split(" ");
- const lastWordOfLabel = label.splice(-1, 1);
- return (
- handleSort(header.id)}
+
+
+
+
+
+
+
Projects
+
+
+
+
+
handleFilterTextChange(e.target.value)}
+ />
+
+
+ {filterCollapsed ? (
+
setFilterCollapsed(false)}
>
- {label}{" "}
- {orderBy === header.id ? (
-
- {lastWordOfLabel}{" "}
- {order === "asc" ? (
-
- ) : (
-
- {lastWordOfLabel}
-
+ ) : null}
+
+
+
+
+
+ {headerData.map(header => {
+ const label = header.label;
+ return (
+ handleSort(header.id)
+ }
+ >
+ {orderBy === header.id ? (
+
+ {label}{" "}
+ {order === "asc" ? (
+
+ ) : (
+ {label}
+ )}
+
+ );
+ })}
+
+
+
+ {projects.length ? (
+ currentProjects.map(project => (
+
- {projects.length ? (
- currentProjects.map(project => (
-
-
-
- {project.address}
-
- {JSON.parse(project.formInputs).VERSION_NO !== "undefined"
- ? JSON.parse(project.formInputs).VERSION_NO
- : ""}
-
-
- {JSON.parse(project.formInputs).BUILDING_PERMIT !==
- "undefined"
- ? JSON.parse(project.formInputs).BUILDING_PERMIT
- : ""}
-
- {`${project.firstName} ${project.lastName}`}
-
- {moment(project.dateCreated).format("MM/DD/YYYY")}
-
-
- {moment(project.dateModified).isSame(moment(), "day")
- ? moment(project.dateModified).format("h:mm A")
- : moment(project.dateModified).format("MM/DD/YYYY")}
-
-
- {project.loginId === currentUser.id && (
- <>
- toggleDuplicateModal(project)}>
-
- {/* (
-
-
- )}
- content={() => componentRef.current}
- /> */}
-
- toggleDeleteModal(project)}>
-
-
+ ))
+ ) : (
+
+
+ No Saved Projects
+
+
)}
-
-
- ))
+
+
+
+
+
+ {selectedProject && (
+ <>
+
+
+
+
+
+ )}
+ {/*
+ {rules ? (
+
) : (
-
-
- No Saved Projects
-
-
+
duh
)}
-
-
+
+
-
-
- {selectedProject && (
- <>
-
-
-
-
- )}
);
};
ProjectsPage.propTypes = {
- account: PropTypes.shape({
- firstName: PropTypes.string,
- lastName: PropTypes.string,
- id: PropTypes.number,
- email: PropTypes.string
- }),
- match: PropTypes.shape({
- params: PropTypes.shape({
- page: PropTypes.string,
- projectId: PropTypes.string
- })
- }),
- history: PropTypes.shape({
- push: PropTypes.func.isRequired
- }),
- contentContainerRef: PropTypes.object,
- rules: PropTypes.array,
- dateModified: PropTypes.string || null
+ contentContainerRef: PropTypes.object
};
-export default withRouter(ProjectsPage);
+export default ProjectsPage;
diff --git a/client/src/components/Projects/RenameSnapshotModal.js b/client/src/components/Projects/RenameSnapshotModal.js
new file mode 100644
index 00000000..17817459
--- /dev/null
+++ b/client/src/components/Projects/RenameSnapshotModal.js
@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { createUseStyles, useTheme } from "react-jss";
+import Button from "../Button/Button";
+import ModalDialog from "../UI/AriaModal/ModalDialog";
+
+const useStyles = createUseStyles(theme => ({
+ buttonFlexBox: {
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "center",
+ margin: 0
+ },
+ heading1: theme.typography.heading1,
+ buttonColor: {
+ backgroundColor: "#eaeff2"
+ }
+}));
+
+export default function RenameSnapshotModal({
+ mounted,
+ onClose,
+ selectedProjectName
+}) {
+ const theme = useTheme();
+ const classes = useStyles({ theme });
+ const [snapshotProjectName, setSnapshotProjectName] = useState(
+ `${selectedProjectName}`
+ );
+
+ return (
+
+
+ Rename Snapshot?
+
+
+ What would you like to rename your snapshot to?
+
+
+
+
+
+ Cancel
+
+ onClose("ok", snapshotProjectName)}
+ variant="contained"
+ >
+ Done
+
+
+
+ );
+}
+
+RenameSnapshotModal.propTypes = {
+ mounted: PropTypes.bool,
+ onClose: PropTypes.func,
+ selectedProjectName: PropTypes.string
+};
diff --git a/client/src/components/Projects/SnapshotProjectModal.js b/client/src/components/Projects/SnapshotProjectModal.js
new file mode 100644
index 00000000..e12af207
--- /dev/null
+++ b/client/src/components/Projects/SnapshotProjectModal.js
@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { createUseStyles, useTheme } from "react-jss";
+
+import Button from "../Button/Button";
+import { faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import ModalDialog from "../UI/AriaModal/ModalDialog";
+
+const useStyles = createUseStyles(theme => ({
+ buttonFlexBox: {
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "center",
+ margin: 0
+ },
+ heading1: theme.typography.heading1,
+ buttonColor: {
+ backgroundColor: "#eaeff2"
+ }
+}));
+
+export default function SnapshotProjectModal({
+ mounted,
+ onClose,
+ selectedProjectName
+}) {
+ const theme = useTheme();
+ const classes = useStyles({ theme });
+ const [snapshotProjectName, setSnapshotProjectName] = useState(
+ `${selectedProjectName}`
+ );
+
+ return (
+
+
+
+
+ Once converted, this project draft will no longer be in an editable
+ state.
+
+
+
+
+
+ Cancel
+
+ onClose("ok", snapshotProjectName)}
+ variant="contained"
+ >
+ Done
+
+
+
+ );
+}
+
+SnapshotProjectModal.propTypes = {
+ mounted: PropTypes.bool,
+ onClose: PropTypes.func,
+ selectedProjectName: PropTypes.string
+};
diff --git a/client/src/components/Projects/fetchEngineRules.js b/client/src/components/Projects/fetchEngineRules.js
new file mode 100644
index 00000000..e8b27592
--- /dev/null
+++ b/client/src/components/Projects/fetchEngineRules.js
@@ -0,0 +1,28 @@
+import * as ruleService from "../../services/rule.service";
+import Engine from "../../services/tdm-engine";
+
+// These are the calculation results we want to calculate
+// and display on the main page.
+// TODO: share these constants with the real thing in TdmCalculationContainer?
+const resultRuleCodes = [
+ "PROJECT_LEVEL",
+ "CALC_PARK_RATIO",
+ "TARGET_POINTS_PARK",
+ "PTS_EARNED"
+];
+
+const fetchEngineRules = async project => {
+ const ruleResponse = await ruleService.getByCalculationId(
+ project.calculationId
+ );
+ const engine = new Engine(ruleResponse.data);
+
+ const inputs = project.formInputs;
+ const data = JSON.parse(inputs);
+
+ engine.run(data, resultRuleCodes);
+ const rules = engine.showRulesArray();
+ return rules;
+};
+
+export default fetchEngineRules;
diff --git a/client/src/components/PublicComment/PublicCommentPage.test.js b/client/src/components/PublicComment/PublicCommentPage.test.js
deleted file mode 100644
index aca42f7d..00000000
--- a/client/src/components/PublicComment/PublicCommentPage.test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from "react";
-import PublicCommentPage from "./PublicCommentPage";
-import { render, screen, fireEvent } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom";
-import { postPublicComment } from "./postPublicComment";
-
-describe("PublicCommentFormPage", () => {
- // eslint-disable-next-line jest/no-disabled-tests
- it.skip("has fields for PublicComment form", () => {
- render(
);
-
- expect(
- screen.getByRole("heading", { name: /public comment form/i })
- ).toBeVisible();
- expect(screen.getByPlaceholderText(/name/i)).toBeVisible();
- expect(screen.getByPlaceholderText(/email/i)).toBeVisible();
- expect(screen.getByPlaceholderText(/comment/i)).toBeVisible();
- expect(
- screen.getByRole("checkbox", /forward to ladot \/ developers/i)
- ).toBeVisible();
- });
-
- // eslint-disable-next-line jest/no-disabled-tests
- it.skip("fills out form and saves public comment", async () => {
- render(
);
-
- await userEvent.type(screen.getByPlaceholderText(/name/i), "some name");
- await userEvent.type(screen.getByPlaceholderText(/email/i), "some email");
- await userEvent.type(
- screen.getByPlaceholderText(/comment/i),
- "some comment"
- );
- // await userEvent.type(screen.getByRole('checkbox', /forward to ladot \/ developers/i))
-
- fireEvent.click(screen.getByRole("button", { name: /submit/i }));
-
- await new Promise(resolve => setImmediate(resolve));
-
- expect(postPublicComment).toHaveBeenCalledTimes(1);
- expect(postPublicComment).toHaveBeenCalledWith({
- name: "some name",
- email: "some email",
- comment: "some comment"
- });
- });
-});
diff --git a/client/src/components/PublicComment/postPublicComment.js b/client/src/components/PublicComment/postPublicComment.js
deleted file mode 100644
index 61251390..00000000
--- a/client/src/components/PublicComment/postPublicComment.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import axios from "axios";
-
-const baseUrl = "/api/public-comment";
-axios.defaults.baseUrl = baseUrl;
-
-export const postPublicComment = async formElements => {
- const response = await axios.post(baseUrl, {
- name: formElements.name,
- email: formElements.email,
- comment: formElements.comment,
- forwardToWebTeam: formElements.forwardToWebTeam
- });
- return response;
-};
diff --git a/client/src/components/PublicComment/postPublicComment.test.js b/client/src/components/PublicComment/postPublicComment.test.js
deleted file mode 100644
index 7b601194..00000000
--- a/client/src/components/PublicComment/postPublicComment.test.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { postPublicComment } from "./postPublicComment";
-import nock from "nock";
-
-describe("postPublicComment", () => {
- afterEach(nock.cleanAll);
- afterAll(nock.restore);
-
- const publicCommentToSave = {
- name: "some name",
- comment: "some comment",
- email: "some email"
- };
-
- // eslint-disable-next-line jest/expect-expect
- it("should post/save public comment", async () => {
- const expectedReqBody = publicCommentToSave;
- const publicCommentPostedScope = nock("http://localhost", {
- reqheaders: {
- "Content-Type": "application/json"
- }
- })
- .post("/api/public-comment", expectedReqBody)
- .reply(201);
-
- await postPublicComment(publicCommentToSave);
- publicCommentPostedScope.done();
- });
-
- it("rejects when response is not 201", async () => {
- nock("http://localhost").post("/api/public-comment").reply(500);
-
- await expect(postPublicComment(publicCommentToSave)).rejects.toThrowError(
- /failed/i
- );
- });
-});
diff --git a/client/src/components/Roles.js b/client/src/components/Roles.js
index 6adbad42..89074959 100644
--- a/client/src/components/Roles.js
+++ b/client/src/components/Roles.js
@@ -1,12 +1,16 @@
-import React, { useState, useEffect } from "react";
-import { withRouter, Redirect } from "react-router-dom";
+import React, { useState, useEffect, useContext } from "react";
+import PropTypes from "prop-types";
+import { Navigate, Link } from "react-router-dom";
import { createUseStyles } from "react-jss";
import * as accountService from "../services/account.service";
import { useToast } from "../contexts/Toast";
-import {
- useAppInsightsContext,
- useTrackMetric
-} from "@microsoft/applicationinsights-react-js";
+import UserContext from "../contexts/UserContext";
+import Popup from "reactjs-popup";
+import "reactjs-popup/dist/index.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faEllipsisV } from "@fortawesome/free-solid-svg-icons";
+import RolesContextMenu from "./ArchiveDelete/RolesContextMenu";
+import ContentContainer from "./Layout/ContentContainer";
const useStyles = createUseStyles({
main: {
@@ -25,6 +29,11 @@ const useStyles = createUseStyles({
fontWeight: "normal",
fontStyle: "normal"
},
+ archiveTitle: {
+ marginTop: "0.5em",
+ textAlign: "center",
+ fontSize: "16px"
+ },
table: {
minWidth: "80%",
margin: "20px"
@@ -61,20 +70,43 @@ const useStyles = createUseStyles({
},
link: {
textDecoration: "underline"
+ },
+ optionsButton: {
+ border: "none",
+ backgroundColor: "transparent",
+ cursor: "pointer",
+ padding: "0.2em 0.5em",
+ borderRadius: "4px",
+ "&:hover": {
+ backgroundColor: "#f2f2f2"
+ }
+ },
+ popupContent: {
+ cursor: "pointer",
+ "&:hover": {
+ backgroundColor: "#E9E9E9",
+ borderRadius: "4px"
+ }
+ },
+ hoveredRow: {
+ backgroundColor: "#f0e300"
+ },
+ disabledOptionsButton: {
+ cursor: "not-allowed",
+ opacity: 0.5
}
});
-const Roles = () => {
+const Roles = ({ contentContainerRef }) => {
const [accounts, setAccounts] = useState([]);
const [searchString, setSearchString] = useState("");
const [filteredAccounts, setFilteredAccounts] = useState([]);
const [redirectPath, setRedirectPath] = useState("");
+ const [hoveredRow, setHoveredRow] = useState(null);
const classes = useStyles();
const toast = useToast();
- const appInsights = useAppInsightsContext();
-
- appInsights.trackMetric("Roles Component");
- const trackComponent = useTrackMetric(appInsights, "Roles");
+ const userContext = useContext(UserContext);
+ const loggedInUserId = userContext.account.id;
useEffect(() => {
const getAccounts = async () => {
@@ -139,81 +171,177 @@ const Roles = () => {
}
};
+ const handleArchiveUser = async user => {
+ try {
+ const response = await accountService.archiveAccount(user.id);
+ if (response.status === 200) {
+ toast.add(`Successfully archived ${user.email}`);
+ // Filters out the archived user from the list
+ const newAccounts = accounts.filter(account => account.id !== user.id);
+ setAccounts(newAccounts);
+ filt(newAccounts, searchString);
+ } else {
+ toast.add("Failed to archive user.");
+ }
+ } catch (err) {
+ toast.add("An error occurred while trying to archive the user.");
+ }
+ };
+
return (
-
- {redirectPath ?
: null}
-
Security Roles
-
- Grant or Revoke Admin Permissions
-
-
+
-
- Find:
-
- Security Roles
+
+ Grant or Revoke Admin Permissions
+
+
-
+ >
+
+ Find:
+
+
{
+ setSearchString(e.target.value);
+ filt(accounts, e.target.value);
+ }}
+ data-testid="searchString"
+ />
+
+
+
-
+
+
The Los Angeles Department of Transportation (LADOT), in partnership
- with the Department of City Planning and Hack for LA (a project of Code
- for America), has developed the City of Los Angeles Transportation
+ with the Department of City Planning and Hack for LA (a project of Civic
+ Tech Structure), has developed the City of Los Angeles Transportation
Demand Management (TDM) Calculator (TDM Calculator) to provide the
public with an understanding of the TDM Ordinance. Currently available
for review: Council File 15-0719-S19 / the Los Angeles Department of
diff --git a/client/src/components/TermsAndConditions/TermsAndConditionsModal.js b/client/src/components/TermsAndConditions/TermsAndConditionsModal.js
index d7bd3d8b..7a6ec21c 100644
--- a/client/src/components/TermsAndConditions/TermsAndConditionsModal.js
+++ b/client/src/components/TermsAndConditions/TermsAndConditionsModal.js
@@ -1,8 +1,6 @@
-import React, { useState } from "react";
+import React from "react";
import { createUseStyles } from "react-jss";
-import { withRouter } from "react-router-dom";
-import { useHistory } from "react-router";
-import Modal from "react-modal";
+import ModalDialog from "../UI/AriaModal/ModalDialog";
import Button from "../Button/Button";
import PropTypes from "prop-types";
import TermsAndConditionsContent from "./TermsAndConditionsContent";
@@ -15,51 +13,21 @@ const useStyles = createUseStyles({
}
});
-const modalStyleDefaultOverrides = {
- overlay: {
- backgroundColor: "rgba(0, 0, 0, 0.05)",
- display: "flex",
- justifyContent: "center",
- alignItems: "center",
- zIndex: 100
- },
- content: {
- position: "static",
- top: "50px",
- right: "auto",
- bottom: "auto",
- left: "200px",
- boxSizing: "border-box",
- maxHeight: "80%",
- width: "80%",
- padding: "60px 56px 0px 60px",
- backgroundColor: "#ffffff",
- boxShadow: "0px 5px 10px rgba(0, 46, 109, 0.2)"
- }
-};
-
-const TermsAndConditionsModal = () => {
+const TermsAndConditionsModal = ({ hasAcceptedTerms, onAcceptTerms }) => {
const classes = useStyles();
- const [modalOpen, setModalOpen] = useState(true);
- const history = useHistory();
-
- const toggleTermsAndConditionsModal = () => {
- setModalOpen(!modalOpen);
- };
-
if (localStorage.getItem("termsAndConditions")) return null;
return (
-
-
+
{
onClick={e => {
e.preventDefault();
window.location.href = "https://ladot.lacity.org/";
+ // THIS WILL CLOSE THE MODAL IMPLICITLY
}}
variant="outlined"
>
@@ -78,19 +47,19 @@ const TermsAndConditionsModal = () => {
color="colorPrimary"
onClick={e => {
e.preventDefault();
- window.localStorage.setItem("termsAndConditions", "Accepted");
- history.go(0);
+ onAcceptTerms();
}}
>
Accept
-
+
);
};
TermsAndConditionsModal.propTypes = {
- termsAndConditionsModalProp: PropTypes.string
+ hasAcceptedTerms: PropTypes.bool,
+ onAcceptTerms: PropTypes.func
};
-export default withRouter(TermsAndConditionsModal);
+export default TermsAndConditionsModal;
diff --git a/client/src/components/TermsAndConditions/TermsAndConditionsPage.js b/client/src/components/TermsAndConditions/TermsAndConditionsPage.js
index 1cad56d4..061e21d2 100644
--- a/client/src/components/TermsAndConditions/TermsAndConditionsPage.js
+++ b/client/src/components/TermsAndConditions/TermsAndConditionsPage.js
@@ -12,7 +12,7 @@ const useStyles = createUseStyles({
const TermsAndConditionsPage = () => {
const classes = useStyles();
return (
-
+
diff --git a/client/src/components/ToolTip/ToolTip.js b/client/src/components/ToolTip/ToolTip.js
index 9e63f417..587bb5e8 100644
--- a/client/src/components/ToolTip/ToolTip.js
+++ b/client/src/components/ToolTip/ToolTip.js
@@ -1,11 +1,11 @@
import React from "react";
import PropTypes from "prop-types";
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from "react-tooltip";
const ToolTip = ({ id }) => {
return (
- {
textColor="#32578A"
backgroundColor="#F7F9FA"
borderColor="rgb(30, 36, 63)"
- border={true}
offset={{ right: 20 }}
clickable
/>
diff --git a/client/src/components/ToolTip/ToolTipLabel.js b/client/src/components/ToolTip/ToolTipLabel.js
index 413e4a02..f990d118 100644
--- a/client/src/components/ToolTip/ToolTipLabel.js
+++ b/client/src/components/ToolTip/ToolTipLabel.js
@@ -2,8 +2,26 @@ import React from "react";
import PropTypes from "prop-types";
import { createUseStyles } from "react-jss";
import clsx from "clsx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faInfo, faCircle } from "@fortawesome/free-solid-svg-icons";
const useStyles = createUseStyles(theme => ({
+ labelWrapper: {
+ flexGrow: "1",
+ flexShrink: "1",
+ flexBasis: "50%",
+ "&:hover $iconContainer": {
+ visibility: "visible"
+ },
+ "&:hover": {
+ cursor: "pointer"
+ }
+ },
+ labelWrapperWithoutDesc: {
+ flexGrow: "1",
+ flexShrink: "1",
+ flexBasis: "50%"
+ },
tooltipLabel: {
flexGrow: "1",
flexShrink: "1",
@@ -14,11 +32,20 @@ const useStyles = createUseStyles(theme => ({
flexShrink: "1",
flexBasis: "50%",
"&:hover": {
- fontWeight: "bold",
- textDecoration: "underline",
cursor: "pointer"
}
},
+ accordionLabelClicked: {
+ color: "#002E6D",
+ fontWeight: "bold",
+ flexGrow: "1",
+ flexShrink: "1",
+ flexBasis: "50%",
+ "&:hover": {
+ cursor: "pointer"
+ },
+ fontSmoothing: "antialiased"
+ },
tooltip: {
color: "rgb(30, 36, 63) !important",
padding: "15px",
@@ -40,6 +67,15 @@ const useStyles = createUseStyles(theme => ({
content: '" *"',
color: theme.colors.warning
}
+ },
+ faInfoIcon: {
+ color: "#ffffff"
+ },
+ faCircle: {
+ color: "#002E6D"
+ },
+ iconContainer: {
+ visibility: "hidden"
}
}));
@@ -51,7 +87,8 @@ const ToolTipLabel = ({
requiredInput,
disabledInput,
setShowDescription,
- description
+ description,
+ showDescription
}) => {
const classes = useStyles();
const requiredStyle = requiredInput && classes.requiredInputLabel;
@@ -64,11 +101,76 @@ const ToolTipLabel = ({
if (code && code.startsWith("UNITS_HABIT")) {
return (
-
+
+ {children}
+
+ {description ? (
+
+
+ ) : null}
+
+ );
+ }
+
+ return (
+
+
{children}
+ {tooltipContent &&
+ code &&
+ !code.startsWith("STRATEGY") &&
+ !code.startsWith("PKG") &&
+ null}
- );
- }
-
- return (
-
- {children}
- {tooltipContent &&
- code &&
- !code.startsWith("STRATEGY") &&
- !code.startsWith("PKG") &&
- null}
-
+ {description ? (
+
+
+ ) : null}
+
);
};
@@ -116,7 +212,8 @@ ToolTipLabel.propTypes = {
requiredInput: PropTypes.bool,
disabledInput: PropTypes.bool,
setShowDescription: PropTypes.func,
- description: PropTypes.string
+ description: PropTypes.string,
+ showDescription: PropTypes.bool
};
export default ToolTipLabel;
diff --git a/client/src/components/UI/AriaModal/ModalDialog.js b/client/src/components/UI/AriaModal/ModalDialog.js
new file mode 100644
index 00000000..78f9fb93
--- /dev/null
+++ b/client/src/components/UI/AriaModal/ModalDialog.js
@@ -0,0 +1,112 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { createUseStyles } from "react-jss";
+import AriaModal from "react-aria-modal";
+import { faX } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const useStyles = createUseStyles({
+ modalContainer: {
+ zIndex: "999",
+ position: "fixed",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)",
+ width: "100vw",
+ height: "100vh",
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ alignItems: "center",
+ backgroundColor: "rgba(255, 255, 255, 0.7)",
+ fontSize: "1rem",
+ fontWeight: "normal"
+ },
+ modalContent: {
+ maxWidth: "90vw",
+ minWidth: "40vw",
+ padding: "1rem",
+ position: "relative",
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "stretch",
+ border: "1px solid #d8dce3",
+ borderRadius: "0",
+ boxSizing: "border-box",
+ boxShadow: "0px 5px 10px rgba(0, 46, 109, 0.5)",
+ backgroundColor: "rgba(255, 255, 255, 1)"
+ },
+ buttonFlexBox: {
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "flex-end",
+ margin: 0
+ },
+ closeButton: {
+ border: "0 solid white",
+ backgroundColor: "transparent",
+ "&:hover": {
+ cursor: "pointer"
+ }
+ }
+});
+
+export default function ModalDialog({
+ mounted,
+ children,
+ onClose,
+ initialFocus,
+ omitCloseBox = false,
+ underlayClickExits = true,
+ escapeExits = true,
+ title = "Title Text"
+}) {
+ const classes = useStyles();
+
+ const getApplicationNode = () => {
+ return document.getElementById("body");
+ };
+
+ return (
+
onClose()}
+ initialFocus={initialFocus || null}
+ getApplicationNode={getApplicationNode}
+ underlayClass={classes.modalContainer}
+ dialogClass={classes.modalContent}
+ includeDefaultStyles={false}
+ verticallyCenter={true}
+ underlayClickExits={underlayClickExits}
+ escapeExits={escapeExits || false}
+ // scrollDisabled={false}
+ >
+
+ {omitCloseBox ? null : (
+
+
+
+
+ )}
+ {children}
+
+ );
+}
+
+ModalDialog.propTypes = {
+ mounted: PropTypes.bool,
+ children: PropTypes.any,
+ onClose: PropTypes.func,
+ initialFocus: PropTypes.string,
+ omitCloseBox: PropTypes.bool,
+ underlayClickExits: PropTypes.bool,
+ escapeExits: PropTypes.bool,
+ title: PropTypes.string
+};
diff --git a/client/src/components/UI/DatePickerCustomInput.jsx b/client/src/components/UI/DatePickerCustomInput.jsx
new file mode 100644
index 00000000..13007023
--- /dev/null
+++ b/client/src/components/UI/DatePickerCustomInput.jsx
@@ -0,0 +1,29 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const DatePickerCustomInput = forwardRef(
+ ({ value, onClick, onChange }, ref) => (
+
+ )
+);
+
+DatePickerCustomInput.displayName = "DatePickerCustomInput";
+
+// DatePickerCustomInput.defaultProps = {
+// style:
+// };
+
+DatePickerCustomInput.propTypes = {
+ value: PropTypes.any,
+ onClick: PropTypes.func,
+ onChange: PropTypes.func
+};
+
+export default DatePickerCustomInput;
diff --git a/client/src/components/UI/DateRangePicker.jsx b/client/src/components/UI/DateRangePicker.jsx
new file mode 100644
index 00000000..f4682125
--- /dev/null
+++ b/client/src/components/UI/DateRangePicker.jsx
@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from "prop-types";
+import DatePicker from "react-datepicker";
+import DatePickerCustomInput from "./DatePickerCustomInput";
+
+const DateRangePicker = ({ startDate, endDate, setStartDate, setEndDate }) => {
+ return (
+
+
setStartDate(date)}
+ startDate={startDate}
+ endDate={endDate}
+ customInput={ to
+ setEndDate(date)}
+ startDate={startDate}
+ endDate={endDate}
+ customInput={
+ );
+};
+
+DateRangePicker.propTypes = {
+ startDate: PropTypes.any,
+ endDate: PropTypes.any,
+ setStartDate: PropTypes.func,
+ setEndDate: PropTypes.func
+};
+
+export default DateRangePicker;
diff --git a/client/src/components/UI/Quill.js b/client/src/components/UI/Quill.js
new file mode 100644
index 00000000..03344fba
--- /dev/null
+++ b/client/src/components/UI/Quill.js
@@ -0,0 +1,34 @@
+import React from "react";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
+
+const Quill = props => {
+ const modules = {
+ toolbar: [
+ ["bold", "underline", "strike"],
+ [{ list: "ordered" }, { list: "bullet" }],
+ ["link"]
+ ]
+ };
+
+ const formats = [
+ "bold",
+ "underline",
+ "strike",
+ "list",
+ "bullet",
+ "indent",
+ "link"
+ ];
+
+ return (
+
+ );
+};
+
+export default Quill;
diff --git a/client/src/components/UI/RadioButton.jsx b/client/src/components/UI/RadioButton.jsx
new file mode 100644
index 00000000..4d8847bd
--- /dev/null
+++ b/client/src/components/UI/RadioButton.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const RadioButton = ({ label, value, onChange }) => {
+ return (
+
+
+ );
+};
+
+RadioButton.propTypes = {
+ label: PropTypes.any,
+ value: PropTypes.any,
+ onChange: PropTypes.func
+};
+
+export default RadioButton;
diff --git a/client/src/contexts/Toast/Toast.js b/client/src/contexts/Toast/Toast.js
index fa402413..f082a10c 100644
--- a/client/src/contexts/Toast/Toast.js
+++ b/client/src/contexts/Toast/Toast.js
@@ -12,7 +12,8 @@ const useStyles = createUseStyles({
marginTop: "16px",
display: "flex",
position: "fixed",
- top: "5.6em",
+ top: "5%",
+ right: "5%",
zIndex: "100"
},
"@media (max-width: 1024px)": {
diff --git a/client/src/contexts/Toast/withToastProvider.js b/client/src/contexts/Toast/withToastProvider.js
index 74f39b1c..298e62d3 100644
--- a/client/src/contexts/Toast/withToastProvider.js
+++ b/client/src/contexts/Toast/withToastProvider.js
@@ -33,8 +33,10 @@ const withToastProvider = Component => {
};
const remove = id => setToasts(toasts.filter(t => t.id !== id));
- const contentContainer = contentContainerRef.current;
- const appContainer = appContainerRef.current;
+ const contentContainer = contentContainerRef
+ ? contentContainerRef.current
+ : null;
+ const appContainer = appContainerRef ? appContainerRef.current : null;
return (
diff --git a/client/src/contexts/UserContext.js b/client/src/contexts/UserContext.js
index 9789385a..d09c410b 100644
--- a/client/src/contexts/UserContext.js
+++ b/client/src/contexts/UserContext.js
@@ -1,8 +1,5 @@
import React from "react";
-const UserContext = React.createContext({
- account: null,
- updateAccount: () => {}
-});
+const UserContext = React.createContext(null);
export default UserContext;
diff --git a/client/src/helpers/Environment.js b/client/src/helpers/Environment.js
index 384d9967..79f1254d 100644
--- a/client/src/helpers/Environment.js
+++ b/client/src/helpers/Environment.js
@@ -1,7 +1,7 @@
export const Environment =
process.env.NODE_ENV === "development" ||
- window.location.hostname.toLowerCase().includes("tdmdev")
+ window.location.hostname.toLowerCase().includes("tdm-dev")
? process.env.REACT_APP_ENV || "DEV"
- : window.location.hostname.toLowerCase().includes("tdmuat")
+ : window.location.hostname.toLowerCase().includes("tdm-uat")
? "UAT"
: "PROD";
diff --git a/client/src/hooks/useErrorHandler.js b/client/src/hooks/useErrorHandler.js
new file mode 100644
index 00000000..7310c02a
--- /dev/null
+++ b/client/src/hooks/useErrorHandler.js
@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+
+import { useToast } from "../contexts/Toast";
+
+const useErrorHandler = (email, historyPush) => {
+ const toast = useToast();
+ const toastAdd = toast.add;
+
+ const handleError = useCallback(
+ error => {
+ if (error.response && error.response.status === 401) {
+ toastAdd(
+ "For your security, your session has expired. Please log in again."
+ );
+ historyPush(`/login/${encodeURIComponent(email)}`);
+ }
+ console.error(error);
+ },
+ [email, toastAdd, historyPush]
+ );
+
+ return handleError;
+};
+
+export default useErrorHandler;
diff --git a/client/src/hooks/useFocus.js b/client/src/hooks/useFocus.js
new file mode 100644
index 00000000..37ec122c
--- /dev/null
+++ b/client/src/hooks/useFocus.js
@@ -0,0 +1,12 @@
+import { useRef } from "react";
+
+const useFocus = () => {
+ const htmlElRef = useRef(null);
+ const setFocus = () => {
+ htmlElRef.current && htmlElRef.current.focus();
+ };
+
+ return [htmlElRef, setFocus];
+};
+
+export default useFocus;
diff --git a/client/src/hooks/useGetProjects.js b/client/src/hooks/useGetProjects.js
new file mode 100644
index 00000000..319e8239
--- /dev/null
+++ b/client/src/hooks/useGetProjects.js
@@ -0,0 +1,27 @@
+import { useState, useEffect, useCallback } from "react";
+import * as projectService from "../services/project.service";
+
+const useProjects = handleError => {
+ const [projects, setProjects] = useState([]);
+
+ const getProjects = useCallback(async () => {
+ try {
+ const result = await projectService.get();
+ if (result.data === "" || result.data === false) {
+ setProjects([]);
+ } else {
+ setProjects(result.data);
+ }
+ } catch (err) {
+ handleError(err);
+ }
+ }, [handleError]);
+
+ useEffect(() => {
+ getProjects();
+ }, [getProjects]);
+
+ return [projects, setProjects];
+};
+
+export default useProjects;
diff --git a/client/src/components/useLocalStorage.js b/client/src/hooks/useLocalStorage.js
similarity index 100%
rename from client/src/components/useLocalStorage.js
rename to client/src/hooks/useLocalStorage.js
diff --git a/client/src/index.js b/client/src/index.js
index 64d7ec1e..7a7716eb 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,6 +1,6 @@
import React from "react";
import { createRoot } from "react-dom/client";
-import AppWrapper from "./AppWrapper";
+import App from "./App";
import { ThemeProvider } from "react-jss";
import { jssTheme } from "./styles/theme";
@@ -21,7 +21,7 @@ try {
const root = createRoot(container);
root.render(
-
);
} catch (err) {
diff --git a/client/src/services/account.service.js b/client/src/services/account.service.js
index e6ee5e1b..0f375651 100644
--- a/client/src/services/account.service.js
+++ b/client/src/services/account.service.js
@@ -64,6 +64,11 @@ export const login = async (email, password) => {
}
};
+export const logout = async () => {
+ const response = await axios.get(`${baseUrl}/logout`);
+ return response;
+};
+
export const confirmRegister = async token => {
const body = { token };
const response = await axios.post(baseUrl + "/confirmRegister", body);
@@ -79,3 +84,23 @@ export const resetPassword = async values => {
const response = await axios.post(baseUrl + "/resetPassword", values);
return response;
};
+
+export const archiveAccount = async id => {
+ const response = await axios.put(`${baseUrl}/${id}/archiveaccount`);
+ return response;
+};
+
+export const unarchiveAccount = async id => {
+ const response = await axios.put(`${baseUrl}/${id}/unarchiveaccount`);
+ return response;
+};
+
+export const getAllArchivedAccounts = async () => {
+ const response = await axios.get(`${baseUrl}/archivedaccounts`);
+ return response;
+};
+
+export const deleteAccount = async id => {
+ const response = await axios.delete(`${baseUrl}/${id}/deleteaccount`);
+ return response;
+};
diff --git a/client/src/services/calculation.service.js b/client/src/services/calculation.service.js
index 9140dadd..bbaf633c 100644
--- a/client/src/services/calculation.service.js
+++ b/client/src/services/calculation.service.js
@@ -9,15 +9,3 @@ export function get() {
export function getById(id) {
return axios.get(`${baseUrl}/${id}`);
}
-
-export function post(calculation) {
- return axios.post(baseUrl, calculation);
-}
-
-export function put(calculation) {
- return axios.put(baseUrl + "/" + calculation.id, calculation);
-}
-
-export function del(id) {
- return axios.delete(baseUrl + "/" + id);
-}
diff --git a/client/src/services/faqCategory.service.js b/client/src/services/faqCategory.service.js
index 740919a5..986707da 100644
--- a/client/src/services/faqCategory.service.js
+++ b/client/src/services/faqCategory.service.js
@@ -10,10 +10,10 @@ export function post(faqCategory) {
return axios.post(baseUrl, faqCategory);
}
-export function put(faqCategory) {
- return axios.put(baseUrl + "/" + faqCategory.id, faqCategory);
-}
+// export function put(faqCategory) {
+// return axios.put(baseUrl + "/" + faqCategory.id, faqCategory);
+// }
-export function del(id) {
- return axios.delete(baseUrl + "/" + id);
-}
+// export function del(id) {
+// return axios.delete(baseUrl + "/" + id);
+// }
diff --git a/client/src/services/feedback.service.js b/client/src/services/feedback.service.js
new file mode 100644
index 00000000..819e2f39
--- /dev/null
+++ b/client/src/services/feedback.service.js
@@ -0,0 +1,7 @@
+import axios from "axios";
+
+const baseUrl = "/api/feedbacks";
+
+export function post(feedback) {
+ return axios.post(baseUrl, feedback);
+}
diff --git a/client/src/services/project.service.js b/client/src/services/project.service.js
index 9bbb7270..cdeb587c 100644
--- a/client/src/services/project.service.js
+++ b/client/src/services/project.service.js
@@ -25,3 +25,35 @@ export function put(project) {
export function del(id) {
return axios.delete(baseUrl + "/" + id);
}
+
+export function snapshot(id) {
+ return axios.put(baseUrl + "/snapshot", id);
+}
+
+export function renameSnapshot(id) {
+ return axios.put(baseUrl + "/renameSnapshot", id);
+}
+
+export function getAllArchivedProjects() {
+ try {
+ return axios.get(`${baseUrl}/archivedprojects`);
+ } catch (error) {
+ return new Promise.reject(error);
+ }
+}
+
+export function hide(projectIds, hide) {
+ try {
+ return axios.put(`${baseUrl}/hide`, { ids: projectIds, hide });
+ } catch (error) {
+ return new Promise.reject(error);
+ }
+}
+
+export function trash(projectIds, trash) {
+ try {
+ return axios.put(`${baseUrl}/trash`, { ids: projectIds, trash });
+ } catch (error) {
+ return new Promise.reject(error);
+ }
+}
diff --git a/client/src/services/projectResult.service.js b/client/src/services/projectResult.service.js
new file mode 100644
index 00000000..f53058c3
--- /dev/null
+++ b/client/src/services/projectResult.service.js
@@ -0,0 +1,24 @@
+import Engine from "./tdm-engine";
+import * as ruleService from "../services/rule.service";
+import * as projectService from "../services/project.service";
+
+/*
+Run the calculation engine on a project's inputs to generate
+a complete calculation, in the form of a "filled in" rules array.
+*/
+export async function getProjectResult(projectId) {
+ const resultRuleCodes = [
+ "PROJECT_LEVEL",
+ "CALC_PARK_RATIO",
+ "TARGET_POINTS_PARK",
+ "PTS_EARNED"
+ ];
+
+ const ruleResponse = await ruleService.getByCalculationId(1);
+ const projectResponse = await projectService.getById(projectId);
+ const inputs = JSON.parse(projectResponse.data.formInputs);
+ const engine = new Engine(ruleResponse.data);
+ engine.run(inputs, resultRuleCodes);
+ const result = engine.showRulesArray();
+ return result;
+}
diff --git a/client/src/services/tdm-engine.test.js b/client/src/services/tdm-engine.test.js
index 21a7b51d..8417bd34 100644
--- a/client/src/services/tdm-engine.test.js
+++ b/client/src/services/tdm-engine.test.js
@@ -6,50 +6,51 @@ import {
project2,
project3
} from "../test-data/tdm-calc-examples.js";
+import "@testing-library/jest-dom";
describe("class Engine", () => {
- // beforeEach(done => {
- // done();
- // });
it("Engine Test 1 - A + B", () => {
- return new Promise(done => {
- const engine = new Engine(engineTestRules);
- const result = engine.run(engineTestInput1, ["CALC_A_PLUS_B"]);
- expect(result).toEqual({ CALC_A_PLUS_B: 20 });
- done();
- });
+ const engine = new Engine(engineTestRules);
+ const result = engine.run(engineTestInput1, ["CALC_A_PLUS_B"]);
+ const rules = engine.showRulesArray();
+ const rule = rules.find(rule => rule.code === "CALC_A_PLUS_B");
+ expect(rule).toBeTruthy();
+ expect(rule.value).toEqual(20);
+ expect(result).toEqual(false);
});
+
it("Engine Test 2 - (A+B) + {A*B)", () => {
- return new Promise(done => {
- const engine = new Engine(engineTestRules);
- const result = engine.run(engineTestInput1, [
- "CALC_A_PLUS_B_PLUS_A_TIMES_B"
- ]);
- expect(result).toEqual({
- CALC_A_PLUS_B_PLUS_A_TIMES_B: 111
- });
- done();
- });
+ const engine = new Engine(engineTestRules);
+ const result = engine.run(engineTestInput1, [
+ "CALC_A_PLUS_B_PLUS_A_TIMES_B"
+ ]);
+ const rules = engine.showRulesArray();
+ const rule = rules.find(
+ rule => rule.code === "CALC_A_PLUS_B_PLUS_A_TIMES_B"
+ );
+ expect(rule).toBeTruthy();
+ expect(rule.value).toEqual(111);
+ expect(result).toEqual(false);
});
it("Engine Test 3 - A**2 + B**2", () => {
- return new Promise(done => {
- const engine = new Engine(engineTestRules);
- const result = engine.run(engineTestInput1, ["CALC_A2_PLUS_B2"]);
- expect(result).toEqual({
- CALC_A2_PLUS_B2: 218
- });
- done();
- });
+ const engine = new Engine(engineTestRules);
+ const result = engine.run(engineTestInput1, ["CALC_A2_PLUS_B2"]);
+ const rules = engine.showRulesArray();
+ const rule = rules.find(rule => rule.code === "CALC_A2_PLUS_B2");
+ expect(rule).toBeTruthy();
+ expect(rule.value).toEqual(218);
+ expect(result).toEqual(false);
});
it("Engine Test 4 - Hypotenuse AB", () => {
- return new Promise(done => {
- const engine = new Engine(engineTestRules);
- const result = engine.run(engineTestInput1, ["CALC_HYPOTENUSE_AB"]);
- expect(result.CALC_HYPOTENUSE_AB).toBeCloseTo(14.76482);
- done();
- });
+ const engine = new Engine(engineTestRules);
+ const result = engine.run(engineTestInput1, ["CALC_HYPOTENUSE_AB"]);
+ const rules = engine.showRulesArray();
+ const rule = rules.find(rule => rule.code === "CALC_HYPOTENUSE_AB");
+ expect(rule).toBeTruthy();
+ expect(rule.value).toBeCloseTo(14.76482);
+ expect(result).toEqual(false);
});
it("TDM Calculation - Barrington Condos", () => {
@@ -61,44 +62,57 @@ describe("class Engine", () => {
"TARGET_POINTS_PARK",
"PTS_EARNED"
]);
- expect(result.PARK_REQUIREMENT).toEqual(92);
- expect(result.PROJECT_LEVEL).toEqual(1);
- expect(result.TARGET_POINTS_PARK).toEqual(15);
- expect(result.PTS_EARNED).toEqual(16);
+ expect(result).toEqual(false);
+ const rules = engine.showRulesArray();
+ const results = rules.reduce((acc, rule) => {
+ acc[rule.code] = rule.value;
+ return acc;
+ }, {});
+
+ expect(results.PARK_REQUIREMENT).toEqual(92);
+ expect(results.PROJECT_LEVEL).toEqual(1);
+ expect(results.TARGET_POINTS_PARK).toEqual(15);
+ expect(results.PTS_EARNED).toEqual(16);
done();
});
});
it("TDM Calculation - Beatrice Building", () => {
- return new Promise(done => {
- const engine = new Engine(tdmRules);
- const result = engine.run(project2, [
- "PARK_REQUIREMENT",
- "PROJECT_LEVEL",
- "TARGET_POINTS_PARK",
- "PTS_EARNED"
- ]);
- expect(result.PARK_REQUIREMENT).toEqual(597);
- expect(result.PROJECT_LEVEL).toEqual(3);
- expect(result.TARGET_POINTS_PARK).toEqual(33);
- expect(result.PTS_EARNED).toEqual(33);
- done();
- });
+ const engine = new Engine(tdmRules);
+ const result = engine.run(project2, [
+ "PARK_REQUIREMENT",
+ "PROJECT_LEVEL",
+ "TARGET_POINTS_PARK",
+ "PTS_EARNED"
+ ]);
+ expect(result).toEqual(false);
+ const rules = engine.showRulesArray();
+ const results = rules.reduce((acc, rule) => {
+ acc[rule.code] = rule.value;
+ return acc;
+ }, {});
+ expect(results.PARK_REQUIREMENT).toEqual(597);
+ expect(results.PROJECT_LEVEL).toEqual(3);
+ expect(results.TARGET_POINTS_PARK).toEqual(33);
+ expect(results.PTS_EARNED).toEqual(33);
});
it("TDM Calculation - Project 3 - Clarendon Apartments", () => {
- return new Promise(done => {
- const engine = new Engine(tdmRules);
- const result = engine.run(project3, [
- "PARK_REQUIREMENT",
- "PROJECT_LEVEL",
- "TARGET_POINTS_PARK",
- "PTS_EARNED"
- ]);
- expect(result.PARK_REQUIREMENT).toEqual(552);
- expect(result.PROJECT_LEVEL).toEqual(3);
- expect(result.TARGET_POINTS_PARK).toEqual(25);
- expect(result.PTS_EARNED).toEqual(24);
- done();
- });
+ const engine = new Engine(tdmRules);
+ const result = engine.run(project3, [
+ "PARK_REQUIREMENT",
+ "PROJECT_LEVEL",
+ "TARGET_POINTS_PARK",
+ "PTS_EARNED"
+ ]);
+ expect(result).toEqual(false);
+ const rules = engine.showRulesArray();
+ const results = rules.reduce((acc, rule) => {
+ acc[rule.code] = rule.value;
+ return acc;
+ }, {});
+ expect(results.PARK_REQUIREMENT).toEqual(552);
+ expect(results.PROJECT_LEVEL).toEqual(3);
+ expect(results.TARGET_POINTS_PARK).toEqual(25);
+ expect(results.PTS_EARNED).toEqual(24);
});
});
diff --git a/client/src/styles/App.scss b/client/src/styles/App.scss
index 84cf1880..5f31dd0b 100644
--- a/client/src/styles/App.scss
+++ b/client/src/styles/App.scss
@@ -3,44 +3,36 @@
@import "_variables.scss";
// import scss files below
-html,
-body,
-div,
-object,
-iframe,
-p,
-blockquote,
-form,
-legend,
-label,
-table,
-header,
-footer,
-nav,
-section,
-figure {
- margin: 0;
- padding: 0;
-}
-
body {
background: $color-background;
font-family: $font;
-webkit-text-size-adjust: 100%;
color: #474747;
+ overflow-y: scroll;
}
h1 {
- font-family: "Calibri Bold";
- font-size: 1.7em;
- margin-top: 0;
- margin-bottom: 0;
+ font-weight: bold;
+ font-size: 28px;
+ line-height: 140%;
+}
+
+h2 {
+ font-weight: bold;
+ font-size: 24px;
+ line-height: 140%;
+}
+
+h3 {
+ font-weight: bold;
+ font-size: 20px;
+ line-height: 140%;
}
p {
- font-size: 1em;
- line-height: 1.4em;
- margin-bottom: 1em;
+ font-weight: normal;
+ font-size: 16px;
+ line-height: 120%;
}
cite {
@@ -48,8 +40,7 @@ cite {
}
blockquote {
- font-family: "Calibri Bold";
- font-weight: normal;
+ font-weight: 700;
background-color: #92cc4e;
color: #474747;
padding: 1em 2em;
@@ -59,8 +50,7 @@ blockquote {
}
strong {
- font-family: "Calibri Bold";
- font-weight: normal;
+ font-weight: bold;
}
code {
@@ -103,12 +93,17 @@ abbr {
color: #cc4e10;
}
-button,
+button {
+ font-family: $font;
+ font-weight: bold;
+ font-size: 16px;
+}
+
input,
select,
textarea {
- font-family: inherit;
- font-size: 100%;
+ font-family: $font;
+ font-size: 16px;
margin: 0 1px 0;
}
@@ -122,7 +117,6 @@ input[type="radio"] {
// default styles for links, buttons, etc here?
// import individual scss files below
#root {
- font-family: $font;
color: $color-primary;
background-color: $color-background;
}
diff --git a/client/src/styles/AuthForms.css b/client/src/styles/AuthForms.css
index 9c60b2dc..73dbc0a7 100644
--- a/client/src/styles/AuthForms.css
+++ b/client/src/styles/AuthForms.css
@@ -11,7 +11,8 @@
}
@font-face {
- font-family: "Calibri Bold";
+ font-family: "Calibri";
+ font-weight: 700;
src: url("fonts/calibriBold.eot");
/* IE9 Compat Modes */
src: url("fonts/calibriBold.eot?#iefix") format("embedded-opentype"),
diff --git a/client/src/styles/Calculation.scss b/client/src/styles/Calculation.scss
index b8cca7c7..a5b633b5 100644
--- a/client/src/styles/Calculation.scss
+++ b/client/src/styles/Calculation.scss
@@ -22,7 +22,7 @@
}
}
-//TODO: Delete after refactoring About, Privacy, Terms, Login, Register, PublicComment
+//TODO: Delete after refactoring About, Privacy, Terms, Login, Register, Feedback
.tdm-wizard-content-container {
flex-basis: auto;
flex-grow: 1;
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index e464ca19..4647a5da 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -1,30 +1,33 @@
@import "./_variables_ladot.scss";
@font-face {
- font-family: "Calibri";
- src: url("fonts/calibri.eot"); /* IE9 Compat Modes */
- src: url("fonts/calibri.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
- url("fonts/calibri.woff2") format("woff2"), /* Super Modern Browsers */
- url("fonts/calibri.woff") format("woff"), /* Pretty Modern Browsers */
- url("fonts/calibri.ttf") format("truetype"), /* Safari, Android, iOS */
- url("fonts/calibri.svg#svgFontName") format("svg"); /* Legacy iOS */
+ font-family: "Calibri";
+ src: url("fonts/calibri.eot"); /* IE9 Compat Modes */
+ src: url("fonts/calibri.eot?#iefix") format("embedded-opentype"),
+ /* IE6-IE8 */ url("fonts/calibri.woff2") format("woff2"),
+ /* Super Modern Browsers */ url("fonts/calibri.woff") format("woff"),
+ /* Pretty Modern Browsers */ url("fonts/calibri.ttf") format("truetype"),
+ /* Safari, Android, iOS */ url("fonts/calibri.svg#svgFontName")
+ format("svg"); /* Legacy iOS */
}
@font-face {
- font-family: "Calibri Bold";
- src: url("fonts/calibriBold.eot"); /* IE9 Compat Modes */
- src: url("fonts/calibriBold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
- url("fonts/calibriBold.woff2") format("woff2"), /* Super Modern Browsers */
- url("fonts/calibriBold.woff") format("woff"), /* Pretty Modern Browsers */
- url("fonts/calibriBold.ttf") format("truetype"), /* Safari, Android, iOS */
- url("fonts/calibriBold.svg#svgFontName") format("svg"); /* Legacy iOS */
+ font-family: "Calibri";
+ font-weight: 700;
+ src: url("fonts/calibriBold.eot"); /* IE9 Compat Modes */
+ src: url("fonts/calibriBold.eot?#iefix") format("embedded-opentype"),
+ /* IE6-IE8 */ url("fonts/calibriBold.woff2") format("woff2"),
+ /* Super Modern Browsers */ url("fonts/calibriBold.woff") format("woff"),
+ /* Pretty Modern Browsers */ url("fonts/calibriBold.ttf") format("truetype"),
+ /* Safari, Android, iOS */ url("fonts/calibriBold.svg#svgFontName")
+ format("svg"); /* Legacy iOS */
}
-
+
// font family is dictated by the LADOT style guide
$font: "Calibri", Arial, sans-serif;
-$color-primary: #0F2940; // LADOT Blue
+$color-primary: #0f2940; // LADOT Blue
$color-secondary: black;
$color-background: white;
-$color-lightgrey: #D8D8D8;
+$color-lightgrey: #d8d8d8;
$color-darkgrey: #979797;
$color-form-lightgrey: $color-lightgrey;
@@ -36,5 +39,4 @@ $color-form-lightgrey: $color-lightgrey;
// $color-link: $color-express-park-1 ;
$color-button: $color-express-park-9;
-
$color-highlight: #a7c539; // Color for Prev/Next buttons
diff --git a/client/src/styles/theme.js b/client/src/styles/theme.js
index 7850b517..0b0cb130 100644
--- a/client/src/styles/theme.js
+++ b/client/src/styles/theme.js
@@ -32,7 +32,7 @@ module.exports = {
},
typography: {
largeText: {
- fontFamily: "calibri",
+ fontFamily: "Calibri",
fontSize: "38px",
fontWeight: 700,
lineHeight: "40px",
@@ -41,7 +41,7 @@ module.exports = {
color: "#000000"
},
heading1: {
- fontFamily: "calibri",
+ fontFamily: "Calibri",
fontSize: "28px",
fontWeight: 700,
lineHeight: "40px",
@@ -50,7 +50,7 @@ module.exports = {
color: "#000000"
},
heading2: {
- fontFamily: "calibri",
+ fontFamily: "Calibri",
fontSize: "24px",
fontWeight: 700,
lineHeight: "32px",
@@ -59,7 +59,7 @@ module.exports = {
color: "#000000"
},
heading3: {
- fontFamily: "calibri",
+ fontFamily: "Calibri",
fontSize: "20px",
fontWeight: 700,
lineHeight: "28px",
@@ -68,7 +68,7 @@ module.exports = {
color: "#000000"
},
subHeading: {
- fontFamily: "calibri",
+ fontFamily: "Calibri",
fontSize: "20px",
fontWeight: 400,
lineHeight: "28px",
@@ -77,7 +77,7 @@ module.exports = {
color: "#000000"
},
paragraph1: {
- fontFamily: "calibri",
+ fontFamily: "Calibri",
fontSize: "16px",
fontWeight: 400,
lineHeight: "20px",
@@ -86,7 +86,7 @@ module.exports = {
color: "#000000"
},
button: {
- fontFamily: "calibri",
+ fontFamily: "Calibri",
fontSize: "16px",
fontWeight: 700,
lineHeight: "20px",
diff --git a/cypress/.eslintrc.json b/cypress/.eslintrc.json
deleted file mode 100644
index a22baaf3..00000000
--- a/cypress/.eslintrc.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "extends": [
- "plugin:cypress/recommended"
- ],
- "env": {
- "cypress/globals": true
- }
-}
\ No newline at end of file
diff --git a/cypress/.prettierrc.js b/cypress/.prettierrc.js
deleted file mode 100644
index 0287dda1..00000000
--- a/cypress/.prettierrc.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// Exporting an empty object for the .prettierrc
-// overrides and User or Workspace settings the
-// user may have set, so the project enforces
-// using default prettier settings.
-module.exports = {
- trailingComma: "es5",
- arrowParens: "always",
- printWidth: 120,
-};
diff --git a/cypress/cypress-config.json b/cypress/cypress-config.json
deleted file mode 100644
index c95c1fb5..00000000
--- a/cypress/cypress-config.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "baseUrl": "http://localhost:3000",
- "video": false,
- "defaultCommandTimeout": 10000
-}
diff --git a/cypress/cypress.json b/cypress/cypress.json
deleted file mode 100644
index 69a88e3b..00000000
--- a/cypress/cypress.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/cypress/cypress/fixtures/example.json b/cypress/cypress/fixtures/example.json
deleted file mode 100644
index da18d935..00000000
--- a/cypress/cypress/fixtures/example.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "name": "Using fixtures to represent data",
- "email": "hello@cypress.io",
- "body": "Fixtures are a great way to mock data for responses to routes"
-}
\ No newline at end of file
diff --git a/cypress/cypress/integration/navigation-and-pages.spec.js b/cypress/cypress/integration/navigation-and-pages.spec.js
deleted file mode 100644
index 1623b260..00000000
--- a/cypress/cypress/integration/navigation-and-pages.spec.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/// Name: ${name}
+ const { name, email, comment, forwardToWebTeam, selectedProjectIds } =
+ feedback;
+
+ let projects = [];
+ if (loginId && selectedProjectIds) {
+ for (let i = 0; i < selectedProjectIds.length; i++) {
+ const p = await projectService.getById(loginId, selectedProjectIds[i]);
+ projects.push(p);
+ }
+ }
+
+ let body = ` Name: ${name}
Email : ${email ? email : "Anonymous"}
Comment : ${comment}
Forward To Website Team : ${
forwardToWebTeam ? "Yes" : "No"
- }
`
+ }
+ `;
+ if (projects && projects.length > 0) {
+ body +=
+ `Referenced Project(s)
+ Clicking on a link to one of the projects will allow you to log in to TDM, then, once login is successful, it will
+ open the project.
+
+
+ Name
+ Address
+ Date Modified
+ Date Created
+ Link
+ ` +
+ projects.map(project => {
+ console.log(project);
+ return `${project.name}
+
+ ${JSON.parse(project.formInputs)["PROJECT_ADDRESS"]}
+ ${moment(project.dateModified).format(
+ "MM/DD/YYYY h:mm A"
+ )} ${moment(project.dateCreated).format(
+ "MM/DD/YYYY h:mm A"
+ )} ${clientUrl}/login?projectId=${project.id}