Merge pull request #1571 from Northeastern-Electric-Racing/#1328-work-package-redesign-activities-deliverables

#1328-work package redesign, activities and deliverables

Author: RChandler234

src/frontend/src/components/ReactHookEditableList.tsx

@@ -1,36 +1,58 @@
-import { Grid, Button, IconButton, TextField } from '@mui/material';
+import { Grid, IconButton, TextField, InputLabel } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { FieldArrayWithId, UseFieldArrayRemove, UseFormRegister, UseFieldArrayAppend } from 'react-hook-form';
+import { Box } from '@mui/system';
+import { NERButton } from './NERButton';
 
 interface ReactHookEditableListProps {
   name: string;
   ls: FieldArrayWithId[];
   register: UseFormRegister<any>;
   append: UseFieldArrayAppend<any, any>;
   remove: UseFieldArrayRemove;
+  bulletName?: string;
 }
 
-const ReactHookEditableList: React.FC<ReactHookEditableListProps> = ({ name, ls, register, append, remove }) => {
+const ReactHookEditableList: React.FC<ReactHookEditableListProps> = ({ name, ls, bulletName, register, append, remove }) => {
   return (
     <>
-      {ls.map((_element, i) => {
-        return (
-          <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
-            <TextField required autoComplete="off" sx={{ width: 9 / 10 }} {...register(`${name}.${i}.detail`)} />
-            <IconButton type="button" onClick={() => remove(i)} sx={{ mx: 1, my: 0 }}>
-              <DeleteIcon />
-            </IconButton>
-          </Grid>
-        );
-      })}
-      <Button
+      <Grid container columnSpacing={{ xs: 4, sm: 2, md: 3 }}>
+        {ls.map((_element, i) => {
+          return (
+            <Grid item xs={12} md={6} lg={4} key={`${name}-${i}`}>
+              <InputLabel sx={{ marginBottom: '5px', marginTop: '7px' }}>
+                {bulletName} {i + 1}
+              </InputLabel>
+              <Box sx={{ display: 'flex', alignItems: 'start', marginBottom: '10px' }}>
+                <TextField
+                  required
+                  autoComplete="off"
+                  placeholder={'Enter ' + bulletName + ' . . .'}
+                  sx={{ width: 12 / 12 }}
+                  multiline
+                  maxRows={3}
+                  {...register(`${name}.${i}.detail`)}
+                />
+                <IconButton
+                  type="button"
+                  onClick={() => remove(i)}
+                  sx={{ mx: 1, color: 'red', marginLeft: '15px', marginTop: '3px', borderRadius: '4px', outline: 'solid' }}
+                >
+                  <DeleteIcon />
+                </IconButton>
+              </Box>
+            </Grid>
+          );
+        })}
+      </Grid>
+      <NERButton
         variant="contained"
-        color="success"
+        color="primary"
         onClick={() => append({ bulletId: -1, detail: '' })}
-        sx={{ my: 2, width: 'max-content' }}
+        sx={{ width: 'max-content', marginBottom: '30px', marginTop: '10px' }}
       >
-        + Add New Bullet
-      </Button>
+        {bulletName ? `+ Add ${bulletName}` : '+ Add new bullet'}
+      </NERButton>
     </>
   );
 };

src/frontend/src/pages/WorkPackageDetailPage/WorkPackageEditContainer/WorkPackageEditContainer.tsx

@@ -14,7 +14,7 @@ import { useQuery } from '../../../hooks/utils.hooks';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
-import { Box, TextField, Autocomplete, FormControl } from '@mui/material';
+import { Box, TextField, Autocomplete, FormControl, Typography } from '@mui/material';
 import ReactHookEditableList from '../../../components/ReactHookEditableList';
 import { useEditWorkPackage } from '../../../hooks/work-packages.hooks';
 import WorkPackageEditDetails from './WorkPackageEditDetails';
@@ -216,24 +216,24 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({ wor
             />
           </FormControl>
         </PageBlock>
-        <PageBlock title="Expected Activities">
-          <ReactHookEditableList
-            name="expectedActivities"
-            register={register}
-            ls={expectedActivities}
-            append={appendExpectedActivity}
-            remove={removeExpectedActivity}
-          />
-        </PageBlock>
-        <PageBlock title="Deliverables">
-          <ReactHookEditableList
-            name="deliverables"
-            register={register}
-            ls={deliverables}
-            append={appendDeliverable}
-            remove={removeDeliverable}
-          />
-        </PageBlock>
+        <Typography variant="h5">Expected Activities</Typography>
+        <ReactHookEditableList
+          name="expectedActivities"
+          register={register}
+          ls={expectedActivities}
+          append={appendExpectedActivity}
+          remove={removeExpectedActivity}
+          bulletName="Expected Activity"
+        />
+        <Typography variant="h5">Deliverables</Typography>
+        <ReactHookEditableList
+          name="deliverables"
+          register={register}
+          ls={deliverables}
+          append={appendDeliverable}
+          remove={removeDeliverable}
+          bulletName="Deliverable"
+        />
         <Box textAlign="right" sx={{ my: 2 }}>
           <NERFailButton variant="contained" onClick={exitEditMode} sx={{ mx: 1 }}>
             Cancel