Add ProjectShare table and share modal #1700

hackforla · Oct 31, 2024 · b24590d · b24590d
1 parent e811776
commit b24590d
Show file tree

Hide file tree

Showing 16 changed files with 679 additions and 1 deletion.
diff --git a/client/src/components/Projects/ProjectContextMenu.jsx b/client/src/components/Projects/ProjectContextMenu.jsx
@@ -12,7 +12,8 @@ import {
   MdDelete,
   MdRestoreFromTrash,
   MdFileCopy,
-  MdEdit
+  MdEdit,
+  MdOutlineIosShare
 } from "react-icons/md";
 
 const useStyles = createUseStyles({
@@ -49,6 +50,7 @@ const ProjectContextMenu = ({
   handleDeleteModalOpen,
   handleSnapshotModalOpen,
   handleRenameSnapshotModalOpen,
+  handleShareSnapshotModalOpen,
   handlePrintPdf,
   handleHide
 }) => {
@@ -86,6 +88,19 @@ const ProjectContextMenu = ({
         </li>
       ) : null}
 
+      {project.dateSnapshotted && project.loginId == account?.id ? (
+        <li
+          className={classes.listItem}
+          onClick={() => handleClick(handleShareSnapshotModalOpen)}
+        >
+          <MdOutlineIosShare
+            className={classes.listItemIcon}
+            alt={`Share Snapshot #${project.id} Icon`}
+          />
+          Share Snapshot
+        </li>
+      ) : null}
+
       {!project.dateSnapshotted && project.loginId == account?.id ? (
         <li
           className={classes.listItem}
@@ -190,6 +205,7 @@ ProjectContextMenu.propTypes = {
   handleDeleteModalOpen: PropTypes.func,
   handleSnapshotModalOpen: PropTypes.func,
   handleRenameSnapshotModalOpen: PropTypes.func,
+  handleShareSnapshotModalOpen: PropTypes.func,
   handlePrintPdf: PropTypes.func,
   handleHide: PropTypes.func
 };

diff --git a/client/src/components/Projects/ProjectTableRow.jsx b/client/src/components/Projects/ProjectTableRow.jsx
@@ -87,6 +87,7 @@ const ProjectTableRow = ({
   handleDeleteModalOpen,
   handleSnapshotModalOpen,
   handleRenameSnapshotModalOpen,
+  handleShareSnapshotModalOpen,
   handleHide,
   handleCheckboxChange,
   checkedProjectIds,
@@ -340,6 +341,7 @@ const ProjectTableRow = ({
                   handlePrintPdf={handlePrintPdf}
                   handleSnapshotModalOpen={handleSnapshotModalOpen}
                   handleRenameSnapshotModalOpen={handleRenameSnapshotModalOpen}
+                  handleShareSnapshotModalOpen={handleShareSnapshotModalOpen}
                   handleHide={handleHide}
                 />
               )}
@@ -361,6 +363,7 @@ ProjectTableRow.propTypes = {
   handleDeleteModalOpen: PropTypes.func.isRequired,
   handleSnapshotModalOpen: PropTypes.func.isRequired,
   handleRenameSnapshotModalOpen: PropTypes.func.isRequired,
+  handleShareSnapshotModalOpen: PropTypes.func.isRequired,
   handleHide: PropTypes.func.isRequired,
   handleCheckboxChange: PropTypes.func.isRequired,
   checkedProjectIds: PropTypes.arrayOf(PropTypes.number).isRequired,

diff --git a/client/src/components/Projects/ProjectsPage.jsx b/client/src/components/Projects/ProjectsPage.jsx
@@ -15,6 +15,7 @@ import * as projectService from "../../services/project.service";
 import * as droService from "../../services/dro.service";
 import SnapshotProjectModal from "./SnapshotProjectModal";
 import RenameSnapshotModal from "./RenameSnapshotModal";
+import ShareSnapshotModal from "./ShareSnapshotModal";
 
 import DeleteProjectModal from "./DeleteProjectModal";
 import CopyProjectModal from "./CopyProjectModal";
@@ -160,6 +161,7 @@ const ProjectsPage = ({ contentContainerRef }) => {
   const [renameSnapshotModalOpen, setRenameSnapshotModalOpen] = useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
   const [csvModalOpen, setCsvModalOpen] = useState(false);
+  const [shareSnapshotModalOpen, setShareSnapshotModalOpen] = useState(false);
   const [selectedProject, setSelectedProject] = useState(null);
   const [checkedProjectIds, setCheckedProjectIds] = useState([]);
   const [selectAllChecked, setSelectAllChecked] = useState(false);
@@ -445,6 +447,15 @@ const ProjectsPage = ({ contentContainerRef }) => {
     setRenameSnapshotModalOpen(false);
   };
 
+  const handleShareSnapshotModalOpen = project => {
+    setSelectedProject(project);
+    setShareSnapshotModalOpen(true);
+  };
+
+  const handleShareSnapshotModalClose = async () => {
+    setShareSnapshotModalOpen(false);
+  };
+
   const handleHide = async project => {
     try {
       if (!checkedProjectIds.length) {
@@ -941,6 +952,9 @@ const ProjectsPage = ({ contentContainerRef }) => {
                           handleRenameSnapshotModalOpen={
                             handleRenameSnapshotModalOpen
                           }
+                          handleShareSnapshotModalOpen={
+                            handleShareSnapshotModalOpen
+                          }
                           handleHide={handleHide}
                           handleCheckboxChange={handleCheckboxChange}
                           checkedProjectIds={checkedProjectIds}
@@ -1017,6 +1031,11 @@ const ProjectsPage = ({ contentContainerRef }) => {
                     onClose={handleRenameSnapshotModalClose}
                     selectedProjectName={selectedProjectName}
                   />
+                  <ShareSnapshotModal
+                    mounted={shareSnapshotModalOpen}
+                    onClose={handleShareSnapshotModalClose}
+                    project={selectedProject}
+                  />
                 </>
               )}
             </div>