Remove ability for PMs to edit Project Information on VRMS (#1634)

* conditionally rendering project form based on auth.isAdmin, conditionally rendering badge in TitleBox based on whether the prop exists * updates to auth.user.accessLevel * removed console.logs
hackforla · May 16, 2024 · 4474bb6 · 4474bb6
1 parent 29172a0
commit 4474bb6
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 66 deletions.
diff --git a/client/src/components/ProjectForm.js b/client/src/components/ProjectForm.js
@@ -64,7 +64,7 @@ export default function ProjectForm({
   formData,
   projectToEdit,
   isEdit,
-  setFormData
+  setFormData,
 }) {
   const history = useHistory();
 
@@ -74,11 +74,11 @@ export default function ProjectForm({
   const [editMode, setEditMode] = useState(false);
   const { auth } = useAuth();
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const handleOpen = () => setIsModalOpen(true)
-  const handleClose = () => setIsModalOpen(false)
+  const handleOpen = () => setIsModalOpen(true);
+  const handleClose = () => setIsModalOpen(false);
   const checkFields = () => {
-    history.push("/projects")
-  }
+    history.push('/projects');
+  };
 
   /**
    * React Hook Forms
@@ -95,7 +95,7 @@ export default function ProjectForm({
     handleSubmit,
     reset,
     formState: { errors },
-    control
+    control,
   } = useForm({
     mode: 'all',
     // Holds the current project data in state.
@@ -104,7 +104,7 @@ export default function ProjectForm({
     },
   });
 
-  const { dirtyFields } = useFormState({control})
+  const { dirtyFields } = useFormState({ control });
 
   // ----------------- Submit requests -----------------
 
@@ -134,8 +134,6 @@ export default function ProjectForm({
     setEditMode(false);
   };
 
-
-
   // ----------------- Handles and Toggles -----------------
 
   // Handles the location radio button change.
@@ -229,46 +227,51 @@ export default function ProjectForm({
       <Box sx={{ textAlign: 'center' }}>
         <Typography variant="h1">Project Management</Typography>
       </Box>
-      <TitledBox
-        title={editMode ? 'Editing Project' : 'Project Information'}
-        badge={isEdit ? editIcon() : addIcon()}
+      {auth.user.accessLevel === 'admin' ? (
+        <TitledBox
+          title={editMode ? 'Editing Project' : 'Project Information'}
+          badge={isEdit ? editIcon() : addIcon()}
+        />
+      ) : (
+        <TitledBox title={'Project Information'} />
+      )}
+      <form
+        id="project-form"
+        onSubmit={handleSubmit((data) => {
+          isEdit ? submitEditProject(data) : submitNewProject(data);
+        })}
       >
-
-        <form
-          id="project-form"
-          onSubmit={handleSubmit((data) => {
-            isEdit ? submitEditProject(data) : submitNewProject(data);
-          })}
-        >
-
-          {arr.map((input) => (
-            <ValidatedTextField
-              key={input.name}
-              register={register}
-              isEdit={isEdit}
-              editMode={editMode}
-              locationType={locationType}
-              locationRadios={locationRadios}
-              errors={errors}
-              input={input}
-            />
-          ))}
-          <ChangesModal
-        open={isModalOpen}
-        onClose={handleClose}
-        destination={'/projects'}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-        handleClose={handleClose}
+        {arr.map((input) => (
+          <ValidatedTextField
+            key={input.name}
+            register={register}
+            isEdit={isEdit}
+            editMode={editMode}
+            locationType={locationType}
+            locationRadios={locationRadios}
+            errors={errors}
+            input={input}
+          />
+        ))}
+        <ChangesModal
+          open={isModalOpen}
+          onClose={handleClose}
+          destination={'/projects'}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+          handleClose={handleClose}
         />
-        </form>
+      </form>
+      {auth.user.accessLevel === 'admin' ? (
         <Box>
           <Grid container justifyContent="space-evenly" sx={{ my: 3 }}>
             <Grid item xs="auto">
               <StyledButton
                 type="submit"
                 form="project-form"
-                variant={!isEdit ? 'secondary' : !editMode ? 'contained' : 'secondary'}
+                variant={
+                  !isEdit ? 'secondary' : !editMode ? 'contained' : 'secondary'
+                }
                 cursor="pointer"
                 disabled={isEdit ? !editMode : false}
               >
@@ -279,14 +282,20 @@ export default function ProjectForm({
               <StyledButton
                 variant="contained"
                 cursor="pointer"
-                onClick={!editMode || Object.keys(dirtyFields).length === 0 ? checkFields: handleOpen}
+                onClick={
+                  !editMode || Object.keys(dirtyFields).length === 0
+                    ? checkFields
+                    : handleOpen
+                }
               >
                 Close
               </StyledButton>
             </Grid>
           </Grid>
         </Box>
-      </TitledBox>
+      ) : (
+        ''
+      )}
     </Box>
   ) : (
     <Redirect to="/login" />

diff --git a/client/src/components/parts/boxes/TitledBox.js b/client/src/components/parts/boxes/TitledBox.js
@@ -2,27 +2,25 @@ import React from 'react';
 import { Box, Typography, Divider } from '@mui/material';
 
 export default function TitledBox({ title, children, badge, childrenBoxSx }) {
-    return (
-        <Box sx={{ bgcolor: '#F5F5F5', my: 3 }}>
-            <Box
-                sx={{
-                    p: 2,
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                }}
-            >
-                <Box>
-                    <Typography sx={{ fontSize: '18px', fontWeight: '600' }}>
-                        {title}
-                    </Typography>
-                </Box>
-                {badge}
-            </Box>
-            <Divider sx={{ borderColor: 'rgba(0,0,0,1)' }} />
-            <Box sx={{ py: 2, px: 4, ...childrenBoxSx }}>{children}</Box>
+  return (
+    <Box sx={{ bgcolor: '#F5F5F5', my: 3 }}>
+      <Box
+        sx={{
+          p: 2,
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <Box>
+          <Typography sx={{ fontSize: '18px', fontWeight: '600' }}>
+            {title}
+          </Typography>
         </Box>
-    );
-
-
-}
+        {badge ? badge : ' '}
+      </Box>
+      <Divider sx={{ borderColor: 'rgba(0,0,0,1)' }} />
+      <Box sx={{ py: 2, px: 4, ...childrenBoxSx }}>{children}</Box>
+    </Box>
+  );
+}