Add client-side projectResultService to perform calculation for a pro…

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 (
+    <ModalDialog mounted={mounted} onClose={onClose}>
+      <div style={{ overflow: "auto", maxHeight: "90vh" }}>
+        <div className={classes.heading1} style={{ marginBottom: "1.5rem" }}>
+          Project Result
+        </div>
+        <div>{JSON.stringify(selectedProject, null, 2)}</div>
+
+        <table>
+          <tr>
+            <th>ID</th>
+            <th>Code</th>
+            <th>Name</th>
+            <th>value</th>
+            <th>units</th>
+            <th>category</th>
+          </tr>
+          {rules
+            .filter(rule => rule.category === "input")
+            .map(r => (
+              <tr key={r.code}>
+                <td>{r.id}</td>
+                <td>{r.code}</td>
+                <td>{r.name}</td>
+                <td>{r.value}</td>
+                <td>{r.units}</td>
+                <td>{r.category}</td>
+              </tr>
+            ))}
+          {rules
+            .filter(rule => rule.category === "measure")
+            .map(r => (
+              <tr key={r.code}>
+                <td>{r.id}</td>
+                <td>{r.code}</td>
+                <td>{r.name}</td>
+                <td>{r.value}</td>
+                <td>{r.units}</td>
+                <td>{r.category}</td>
+              </tr>
+            ))}
+          {rules
+            .filter(rule => rule.category === "calculation")
+            .map(r => (
+              <tr key={r.code}>
+                <td>{r.id}</td>
+                <td>{r.code}</td>
+                <td>{r.name}</td>
+                <td>{r.value}</td>
+                <td>{r.units}</td>
+                <td>{r.category}</td>
+              </tr>
+            ))}
+        </table>
+      </div>
+      <div className={classes.buttonFlexBox}>
+        <Button onClick={onClose} variant="text">
+          Close
+        </Button>
+        {/* <Button
+          onClick={() => onClose("ok")}
+          variant="contained"
+          color={"colorPrimary"}
+        >
+          Create a Copy
+        </Button> */}
+      </div>
+    </ModalDialog>
+  );
+}
+
+DownloadProjectModal.propTypes = {
+  mounted: PropTypes.bool,
+  onClose: PropTypes.func,
+  selectedProject: PropTypes.any
+};

client/src/components/Projects/ProjectContextMenu.js

@@ -28,7 +28,8 @@ const useStyles = createUseStyles({
 const ProjectContextMenu = ({
   project,
   handleCopyModalOpen,
-  handleDeleteModalOpen
+  handleDeleteModalOpen,
+  handleDownloadCSV
 }) => {
   const [projectVisibility, SetProjectVisibility] = useState(
     project.dateHidden
@@ -61,7 +62,10 @@ const ProjectContextMenu = ({
         />
         Print
       </li>
-      <li className={classes.listItem}>
+      <li
+        onClick={() => handleDownloadCSV(project)}
+        className={classes.listItem}
+      >
         <FontAwesomeIcon
           icon={faFileCsv}
           className={classes.listItemIcon}
@@ -136,7 +140,8 @@ const ProjectContextMenu = ({
 ProjectContextMenu.propTypes = {
   project: PropTypes.object,
   handleCopyModalOpen: PropTypes.func,
-  handleDeleteModalOpen: PropTypes.func
+  handleDeleteModalOpen: PropTypes.func,
+  handleDownloadCSV: PropTypes.func
 };
 
 export default ProjectContextMenu;

client/src/components/Projects/ProjectsPage.js

@@ -23,6 +23,7 @@ import * as projectService from "../../services/project.service";
 
 import DeleteProjectModal from "./DeleteProjectModal";
 import CopyProjectModal from "./CopyProjectModal";
+import DownloadProjectModal from "./DownloadProjectModal.js";
 import Popup from "reactjs-popup";
 import "reactjs-popup/dist/index.css";
 import ProjectContextMenu from "./ProjectContextMenu";
@@ -128,6 +129,7 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
   const [orderBy, setOrderBy] = useState("dateCreated");
   const [copyModalOpen, setCopyModalOpen] = useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [downloadModalOpen, setDownloadModalOpen] = useState(false);
   const [selectedProject, setSelectedProject] = useState(null);
   const classes = useStyles();
   const [currentPage, setCurrentPage] = useState(1);
@@ -202,6 +204,15 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
     setDeleteModalOpen(false);
   };
 
+  const handleDownloadModalOpen = project => {
+    setSelectedProject(project);
+    setDownloadModalOpen(true);
+  };
+
+  const handleDownloadModalClose = async () => {
+    setDownloadModalOpen(false);
+  };
+
   const descCompareBy = (a, b, orderBy) => {
     let projectA, projectB;
 
@@ -475,6 +486,7 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
                         project={project}
                         handleCopyModalOpen={handleCopyModalOpen}
                         handleDeleteModalOpen={handleDeleteModalOpen}
+                        handleDownloadCSV={handleDownloadModalOpen}
                       />
                     </Popup>
                     {project.loginId === currentUser.id && <></>}
@@ -510,6 +522,12 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
             onClose={handleDeleteModalClose}
             selectedProjectName={selectedProjectName}
           />
+
+          <DownloadProjectModal
+            mounted={downloadModalOpen}
+            onClose={handleDownloadModalClose}
+            selectedProject={selectedProject}
+          />
         </>
       )}
     </ContentContainerNoSidebar>

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;
+}