Implement Hide/Unhide feature (#1513)

hackforla · Nov 16, 2023 · baefc1e · baefc1e
1 parent 9fbddc0
commit baefc1e
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 51 deletions.
diff --git a/client/src/components/PdfPrint/PdfPrint.js b/client/src/components/PdfPrint/PdfPrint.js
@@ -167,10 +167,10 @@ export const PdfPrint = forwardRef((props, ref) => {
           ) : null}
         </div>
         <div className={classes.projectInfoDetailsContainer}>
-          {projectAddress.value && (
+          {projectAddress && projectAddress.value && (
             <ProjectInfo name={"ADDRESS:"} rule={projectAddress} />
           )}
-          {parcelNumbers.value ? (
+          {parcelNumbers && parcelNumbers.value ? (
             <ProjectInfoList name={"PARCEL # (AIN)"} rule={parcelNumbers} />
           ) : null}
           {buildingPermit && (

diff --git a/client/src/components/Projects/DeleteProjectModal.js b/client/src/components/Projects/DeleteProjectModal.js
@@ -29,7 +29,7 @@ const useStyles = createUseStyles(theme => ({
   }
 }));
 
-const DeleteProjectModal = ({ mounted, onClose, selectedProjectName }) => {
+const DeleteProjectModal = ({ mounted, onClose, project }) => {
   const theme = useTheme();
   const classes = useStyles();
 
@@ -39,27 +39,63 @@ const DeleteProjectModal = ({ mounted, onClose, selectedProjectName }) => {
       onClose={onClose}
       initialFocus="#cancelButton"
     >
-      <div className={classes.heading1} style={{ marginBottom: "1.5rem" }}>
-        <FontAwesomeIcon icon={faTrashCan} /> Delete Project
-      </div>
-      <div style={theme.typography.subHeading}>
-        <img src={WarningIcon} className={classes.warningIcon} alt="Warning" />
-        Are you sure you want to <span>permanently</span> delete the project,
-      </div>
+      {project.dateTrashed ? (
+        <>
+          <div
+            className={classes.heading1}
+            style={{ marginBottom: "1.5rem", color: "red" }}
+          >
+            <FontAwesomeIcon icon={faTrashCan} /> Restore Project from Trash
+          </div>
+          <div style={theme.typography.subHeading}>
+            <img
+              src={WarningIcon}
+              className={classes.warningIcon}
+              alt="Warning"
+            />
+            Are you sure you want to restore the project from the trash,
+          </div>
+        </>
+      ) : (
+        <>
+          <div className={classes.heading1} style={{ marginBottom: "1.5rem" }}>
+            <FontAwesomeIcon icon={faTrashCan} /> Delete Project
+          </div>
+          <div style={theme.typography.subHeading}>
+            <img
+              src={WarningIcon}
+              className={classes.warningIcon}
+              alt="Warning"
+            />
+            Are you sure you want to delete the project,
+          </div>
+        </>
+      )}
+
       <div style={{ ...theme.typography.heading3, marginBottom: "1.5rem" }}>
-        {selectedProjectName}?
+        {project.name}?
       </div>
       <div className={classes.buttonFlexBox}>
         <Button onClick={onClose} variant="text" id="cancelButton">
           Cancel
         </Button>
-        <Button
-          onClick={() => onClose("ok")}
-          variant="contained"
-          color={"colorError"}
-        >
-          Delete
-        </Button>
+        {project.dateTrashed ? (
+          <Button
+            onClick={() => onClose("ok")}
+            variant="contained"
+            color={"colorError"}
+          >
+            Restore
+          </Button>
+        ) : (
+          <Button
+            onClick={() => onClose("ok")}
+            variant="contained"
+            color={"colorError"}
+          >
+            Delete
+          </Button>
+        )}
       </div>
     </ModalDialog>
   );
@@ -68,7 +104,7 @@ const DeleteProjectModal = ({ mounted, onClose, selectedProjectName }) => {
 DeleteProjectModal.propTypes = {
   mounted: PropTypes.bool,
   onClose: PropTypes.func,
-  selectedProjectName: PropTypes.string
+  project: PropTypes.any
 };
 
 export default DeleteProjectModal;
diff --git a/client/src/components/Projects/ProjectContextMenu.js b/client/src/components/Projects/ProjectContextMenu.js
@@ -1,5 +1,4 @@
 import React from "react";
-import { useState } from "react";
 import PropTypes from "prop-types";
 
 import { createUseStyles } from "react-jss";
@@ -37,15 +36,9 @@ const ProjectContextMenu = ({
   handleDeleteModalOpen,
   handleSnapshotModalOpen,
   handleDownloadCsv,
-  handlePrintPdf
+  handlePrintPdf,
+  handleHide
 }) => {
-  const [projectVisibility, SetProjectVisibility] = useState(
-    project.dateHidden
-  );
-  const toggleProjectVisibility = () => {
-    SetProjectVisibility(!projectVisibility);
-  };
-
   const classes = useStyles();
 
   return (
@@ -94,11 +87,8 @@ const ProjectContextMenu = ({
         />
         Duplicate
       </li>
-      <li
-        onClick={() => toggleProjectVisibility(project)}
-        className={classes.listItem}
-      >
-        {projectVisibility ? (
+      <li onClick={() => handleHide(project)} className={classes.listItem}>
+        {project.dateHidden ? (
           <>
             <FontAwesomeIcon
               icon={faEyeSlash}
@@ -153,7 +143,8 @@ ProjectContextMenu.propTypes = {
   handleDeleteModalOpen: PropTypes.func,
   handleSnapshotModalOpen: PropTypes.func,
   handleDownloadCsv: PropTypes.func,
-  handlePrintPdf: 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
@@ -85,7 +85,8 @@ const ProjectTableRow = ({
   project,
   handleCopyModalOpen,
   handleDeleteModalOpen,
-  handleSnapshotModalOpen
+  handleSnapshotModalOpen,
+  handleHide
 }) => {
   const classes = useStyles();
   const momentModified = moment(project.dateModified);
@@ -197,6 +198,7 @@ const ProjectTableRow = ({
                 handleDownloadCsv={handleDownloadCsv}
                 handlePrintPdf={handlePrintPdf}
                 handleSnapshotModalOpen={handleSnapshotModalOpen}
+                handleHide={handleHide}
               />
             </Popup>
             <div style={{ display: "none" }}>
@@ -223,7 +225,8 @@ ProjectTableRow.propTypes = {
   project: PropTypes.object.isRequired,
   handleCopyModalOpen: PropTypes.func.isRequired,
   handleDeleteModalOpen: PropTypes.func.isRequired,
-  handleSnapshotModalOpen: PropTypes.func.isRequired
+  handleSnapshotModalOpen: PropTypes.func.isRequired,
+  handleHide: PropTypes.func.isRequired
 };
 
 export default ProjectTableRow;
diff --git a/client/src/components/Projects/ProjectsPage.js b/client/src/components/Projects/ProjectsPage.js
@@ -94,6 +94,8 @@ const useStyles = createUseStyles({
 });
 
 const ProjectsPage = ({ account, contentContainerRef }) => {
+  const classes = useStyles();
+  // const componentRef = useRef();
   const [filterText, setFilterText] = useState("");
   const [order, setOrder] = useState("asc");
   const email = account.email;
@@ -105,8 +107,9 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
   const [snapshotModalOpen, setSnapshotModalOpen] = useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
   const [selectedProject, setSelectedProject] = useState(null);
-  const classes = useStyles();
+
   const [currentPage, setCurrentPage] = useState(1);
+
   const projectsPerPage = 10;
   const highestPage = Math.ceil(projects.length / projectsPerPage);
 
@@ -146,7 +149,6 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
           name: newProjectName,
           formInputs: JSON.stringify(projectFormInputsAsJson)
         });
-        setSelectedProject(null);
       } catch (err) {
         handleError(err);
       }
@@ -162,8 +164,10 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
   const handleDeleteModalClose = async action => {
     if (action === "ok") {
       try {
-        await projectService.del(selectedProject.id);
-        setSelectedProject(null);
+        await projectService.trash(
+          [selectedProject.id],
+          !selectedProject.dateTrashed
+        );
       } catch (err) {
         handleError(err);
       }
@@ -191,6 +195,12 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
     setSnapshotModalOpen(false);
   };
 
+  const handleHide = project => {
+    setSelectedProject(project);
+    projectService.hide([project.id], !project.dateHidden);
+    console.error(project.dateHidden);
+  };
+
   const descCompareBy = (a, b, orderBy) => {
     let projectA, projectB;
 
@@ -267,7 +277,7 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
       : "";
     project["dateCreated"] = moment(project["dateCreated"]).format();
     project["dateModified"] = moment(project["dateModified"]).format();
-    project["dateHidden"] = project["dateTrashed"]
+    project["dateHidden"] = project["dateHidden"]
       ? moment(project["dateHidden"]).format()
       : null;
     project["dateTrashed"] = project["dateTrashed"]
@@ -310,15 +320,15 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
     { id: "dateModified", label: "Last Modified" },
     {
       id: "dateHidden",
-      label: <FontAwesomeIcon icon={faEye} alt={`Project Is In Trash`} />
+      label: <FontAwesomeIcon icon={faEye} alt={`Project Is Hidden`} />
     },
     {
       id: "dateTrashed",
       label: <FontAwesomeIcon icon={faTrash} alt={`Project Is In Trash`} />
     },
     {
       id: "dateSnapshotted",
-      label: <FontAwesomeIcon icon={faCamera} alt={`Project Is In Trash`} />
+      label: <FontAwesomeIcon icon={faCamera} alt={`Project Is a Snapshot`} />
     }
   ];
 
@@ -397,6 +407,7 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
                   handleCopyModalOpen={handleCopyModalOpen}
                   handleDeleteModalOpen={handleDeleteModalOpen}
                   handleSnapshotModalOpen={handleSnapshotModalOpen}
+                  handleHide={handleHide}
                 />
               ))
             ) : (
@@ -426,7 +437,7 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
           <DeleteProjectModal
             mounted={deleteModalOpen}
             onClose={handleDeleteModalClose}
-            selectedProjectName={selectedProjectName}
+            project={selectedProject}
           />
 
           <SnapshotProjectModal
@@ -436,6 +447,17 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
           />
         </>
       )}
+      {/* <div style={{ display: "none" }}>
+        {rules ? (
+          <PdfPrint
+            ref={componentRef}
+            rules={rules}
+            dateModified={dateModified || new Date(2023, 11, 18).toDateString()}
+          />
+        ) : (
+          <div ref={componentRef}>duh</div>
+        )}
+      </div> */}
     </ContentContainerNoSidebar>
   );
 };

diff --git a/client/src/components/ToolTip/ToolTip.js b/client/src/components/ToolTip/ToolTip.js
@@ -18,7 +18,6 @@ const ToolTip = ({ id }) => {
       textColor="#32578A"
       backgroundColor="#F7F9FA"
       borderColor="rgb(30, 36, 63)"
-      border={true}
       offset={{ right: 20 }}
       clickable
     />

diff --git a/client/src/components/UI/AriaModal/ModalDialog.js b/client/src/components/UI/AriaModal/ModalDialog.js
@@ -1,11 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { createUseStyles, useTheme } from "react-jss";
+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(() => ({
+const useStyles = createUseStyles({
   modalContainer: {
     zIndex: "999",
     position: "fixed",
@@ -49,7 +49,7 @@ const useStyles = createUseStyles(() => ({
       cursor: "pointer"
     }
   }
-}));
+});
 
 export default function ModalDialog({
   mounted,
@@ -60,8 +60,7 @@ export default function ModalDialog({
   underlayClickExits = true,
   escapeExits = true
 }) {
-  const theme = useTheme();
-  const classes = useStyles({ theme });
+  const classes = useStyles();
 
   const getApplicationNode = () => {
     return document.getElementById("body");

diff --git a/client/src/services/project.service.js b/client/src/services/project.service.js
@@ -37,3 +37,19 @@ export function getAllArchivedProjects() {
     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/server/app/services/project.service.js b/server/app/services/project.service.js
@@ -90,7 +90,7 @@ const hide = async (ids, hide, loginId) => {
     });
 
     request.input("ids", tvp);
-    request.input("hide", hide);
+    request.input("hide", hide ? 1 : 0);
     request.input("loginId", loginId);
     const response = await request.execute("Project_Hide");
     return response.returnValue;