Merge pull request #2023 from trillium/ts_2022

Add accordion to edit project page

Author: trillium

client/src/components/ProjectForm.jsx

@@ -191,7 +191,7 @@ export default function ProjectForm({
       >
         <EditIcon style={{ p: 1 }} />
         <Typography sx={{ p: 1, fontSize: '14px', fontWeight: '600' }}>
-          {editMode ? 'Cancel' : 'Edit Mode'}
+          {editMode ? 'Cancel' : 'Edit'}
         </Typography>
       </Box>
     );
@@ -239,6 +239,7 @@ export default function ProjectForm({
         <TitledBox
           title={editMode ? 'Editing Project' : 'Project Information'}
           badge={isEdit ? editIcon() : addIcon()}
+          expandable={true}
         >
           <form
             id="project-form"
@@ -297,7 +298,7 @@ export default function ProjectForm({
           </Grid>
         </TitledBox>
       ) : (
-        <TitledBox title={'Project Information'}>
+        <TitledBox title={'Project Information'} expandable={true}>
           {' '}
           <form
             id="project-form"

client/src/components/manageProjects/editPMs/editProjectMembers.jsx

@@ -140,6 +140,7 @@ const EditProjectMembers = ({ projectToEdit }) => {
       <TitledBox
         title={'Project Members (Event Editors)'}
         badge={editIcon()}
+        expandable={true}
       >
         {/* Email search componennt */}
         <Grid container direction="column" sx={{ width: '100%', backgroundColor: editMode ? 'white' : '' }}>

client/src/components/manageProjects/editProject.jsx

@@ -121,7 +121,10 @@ const EditProject = ({
               display: 'flex',
               '&:hover': { color: 'red', cursor: 'pointer' },
             }}
-            onClick={() => setIsCreateNew(true)}
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsCreateNew(true);
+            }}
           >
             <PlusIcon style={{ marginRight: '7px' }} />
             <Typography
@@ -134,6 +137,7 @@ const EditProject = ({
             </Typography>
           </Box>
         }
+        expandable={true}
       >
         <div className="event-list">
           <h2 className="event-alert">{eventAlert}</h2>
@@ -157,7 +161,7 @@ const EditProject = ({
         </div>
       </TitledBox>
 
-      <TitledBox title="Manually Edit Events Checkin">
+      <TitledBox title="Manually Edit Events Checkin" expandable={true}>
         <div className="event-list">
           <h2 className="event-alert">{eventAlert}</h2>
           <ul>

client/src/components/parts/boxes/TitledBox.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Box, Typography, Divider } from '@mui/material';
 import Accordion from '@mui/material/Accordion';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -22,9 +22,15 @@ export default function TitledBox({
   childrenBoxSx,
   expandable = false,
 }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
   if (expandable) {
     return (
-      <Accordion sx={{ bgcolor: '#F5F5F5', my: 3 }}>
+      <Accordion
+        sx={{ bgcolor: '#F5F5F5', my: 3 }}
+        expanded={isExpanded}
+        onChange={(event, expanded) => setIsExpanded(expanded)}
+      >
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel-content"
@@ -41,7 +47,13 @@ export default function TitledBox({
             <Typography sx={{ fontSize: '18px', fontWeight: '600' }}>
               {title}
             </Typography>
-            {badge}
+            <Box
+              onClick={(e) => {
+                if (isExpanded) e.stopPropagation();
+              }}
+            >
+              {badge}
+            </Box>
           </Box>
         </AccordionSummary>
         <Divider sx={{ borderColor: 'rgba(0,0,0,1)' }} />