Modal created, route setup

client/src/components/Projects/ProjectContextMenu.js

@@ -10,7 +10,8 @@ import {
   faCamera,
   faTrash,
   faClone,
-  faFileCsv
+  faFileCsv,
+  faPencil
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -31,6 +32,12 @@ const useStyles = createUseStyles({
       cursor: "pointer"
     }
   },
+  listItemDisabled: {
+    display: "flex",
+    flexDirection: "row",
+    padding: "0.5rem",
+    color: "gray"
+  },
   listItemIcon: { marginRight: "0.3rem" }
 });
 
@@ -40,6 +47,7 @@ const ProjectContextMenu = ({
   handleCopyModalOpen,
   handleDeleteModalOpen,
   handleSnapshotModalOpen,
+  handleRenameSnapshotModalOpen,
   handleDownloadCsv,
   handlePrintPdf,
   handleHide
@@ -55,7 +63,32 @@ const ProjectContextMenu = ({
 
   return (
     <ul className={classes.list}>
-      {project.dateSnapshotted || project.loginId !== account.id ? null : (
+      {project.dateSnapshotted && project.loginId == account.id ? (
+        <li
+          className={classes.listItem}
+          onClick={() => handleClick(handleRenameSnapshotModalOpen)}
+        >
+          <FontAwesomeIcon
+            icon={faPencil}
+            className={classes.listItemIcon}
+            alt={`Snapshot Project #${project.id} Icon`}
+          />
+          Rename Snapshot
+        </li>
+      ) : null}
+
+      {project.dateSnapshotted && project.loginId !== account.id ? (
+        <li className={classes.listItemDisabled}>
+          <FontAwesomeIcon
+            icon={faPencil}
+            className={classes.listItemIcon}
+            alt={`Snapshot Project #${project.id} Icon`}
+          />
+          Rename Snapshot
+        </li>
+      ) : null}
+
+      {!project.dateSnapshotted ? (
         <li
           className={classes.listItem}
           onClick={() => handleClick(handleSnapshotModalOpen)}
@@ -67,7 +100,7 @@ const ProjectContextMenu = ({
           />
           Convert to Snapshot
         </li>
-      )}
+      ) : null}
 
       <li
         onClick={() => handleClick(handlePrintPdf)}
@@ -165,6 +198,7 @@ ProjectContextMenu.propTypes = {
   handleCopyModalOpen: PropTypes.func,
   handleDeleteModalOpen: PropTypes.func,
   handleSnapshotModalOpen: PropTypes.func,
+  handleRenameSnapshotModalOpen: PropTypes.func,
   handleDownloadCsv: PropTypes.func,
   handlePrintPdf: PropTypes.func,
   handleHide: PropTypes.func

client/src/components/Projects/ProjectTableRow.js

@@ -241,6 +241,7 @@ const ProjectTableRow = ({
   handleCopyModalOpen,
   handleDeleteModalOpen,
   handleSnapshotModalOpen,
+  handleRenameSnapshotModalOpen,
   handleHide
 }) => {
   const classes = useStyles();
@@ -356,6 +357,7 @@ const ProjectTableRow = ({
                   handleDownloadCsv={handleDownloadCsv}
                   handlePrintPdf={handlePrintPdf}
                   handleSnapshotModalOpen={handleSnapshotModalOpen}
+                  handleRenameSnapshotModalOpen={handleRenameSnapshotModalOpen}
                   handleHide={handleHide}
                 />
               )}
@@ -385,6 +387,7 @@ ProjectTableRow.propTypes = {
   handleCopyModalOpen: PropTypes.func.isRequired,
   handleDeleteModalOpen: PropTypes.func.isRequired,
   handleSnapshotModalOpen: PropTypes.func.isRequired,
+  handleRenameSnapshotModalOpen: PropTypes.func.isRequired,
   handleHide: PropTypes.func.isRequired
 };
 

client/src/components/Projects/ProjectsPage.js

@@ -15,6 +15,8 @@ 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";
@@ -130,6 +132,7 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
   const [orderBy, setOrderBy] = useState("dateCreated");
   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 [currentPage, setCurrentPage] = useState(1);
@@ -242,6 +245,27 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
     setSnapshotModalOpen(false);
   };
 
+  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);
+      }
+    }
+    setRenameSnapshotModalOpen(false);
+  };
+
   const handleHide = async project => {
     setSelectedProject(project);
     await projectService.hide([project.id], !project.dateHidden);
@@ -506,6 +530,9 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
                           handleCopyModalOpen={handleCopyModalOpen}
                           handleDeleteModalOpen={handleDeleteModalOpen}
                           handleSnapshotModalOpen={handleSnapshotModalOpen}
+                          handleRenameSnapshotModalOpen={
+                            handleRenameSnapshotModalOpen
+                          }
                           handleHide={handleHide}
                         />
                       ))
@@ -532,18 +559,21 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
                     onClose={handleCopyModalClose}
                     selectedProjectName={selectedProjectName}
                   />
-
                   <DeleteProjectModal
                     mounted={deleteModalOpen}
                     onClose={handleDeleteModalClose}
                     project={selectedProject}
                   />
-
                   <SnapshotProjectModal
                     mounted={snapshotModalOpen}
                     onClose={handleSnapshotModalClose}
                     selectedProjectName={selectedProjectName}
                   />
+                  <RenameSnapshotModal
+                    mounted={renameSnapshotModalOpen}
+                    onClose={handleRenameSnapshotModalClose}
+                    selectedProjectName={selectedProjectName}
+                  />
                 </>
               )}
               {/* <div style={{ display: "none" }}>

client/src/components/Projects/RenameSnapshotModal.js

@@ -0,0 +1,81 @@
+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 RenameSnapshotModal({
+  mounted,
+  onClose,
+  selectedProjectName
+}) {
+  const theme = useTheme();
+  const classes = useStyles({ theme });
+  const [snapshotProjectName, setSnapshotProjectName] = useState(
+    `${selectedProjectName}`
+  );
+
+  return (
+    <ModalDialog
+      mounted={mounted}
+      onClose={onClose}
+      initialFocus="#duplicateName"
+    >
+      <div className={classes.heading1} style={{ marginBottom: "1.5rem" }}>
+        <FontAwesomeIcon icon={faCopy} /> Rename Snapshot?
+      </div>
+      <div style={theme.typography.subHeading}>
+        What would you like to rename your snapshot to?
+      </div>
+      <div style={{ margin: "1.5rem 2.5rem 1.5rem 0.75rem" }}>
+        <input
+          placeholder="Name of Duplicated Project"
+          type="text"
+          id="duplicateName"
+          name="duplicateName"
+          value={snapshotProjectName}
+          onChange={e => setSnapshotProjectName(e.target.value)}
+        />
+      </div>
+      <div className={classes.buttonFlexBox}>
+        <Button
+          className={classes.buttonColor}
+          onClick={onClose}
+          variant="contained"
+        >
+          Cancel
+        </Button>
+        <Button
+          className={classes.buttonColor}
+          onClick={() => onClose("ok", snapshotProjectName)}
+          variant="contained"
+        >
+          Done
+        </Button>
+      </div>
+    </ModalDialog>
+  );
+}
+
+RenameSnapshotModal.propTypes = {
+  mounted: PropTypes.bool,
+  onClose: PropTypes.func,
+  selectedProjectName: PropTypes.string
+};

client/src/services/project.service.js

@@ -30,6 +30,10 @@ 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`);