Revert "Revert "Changed the forms and updated editablelist""

This reverts commit 18e5268.

Author: jackturner106

src/frontend/src/components/ReactHookEditableList.tsx

@@ -1,69 +1,69 @@
-import { Grid, Button, IconButton, TextField, InputLabel, Box, Stack, Typography } from '@mui/material';
+import { Grid, Button, IconButton, TextField, Typography, Stack, InputLabel, Box } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { FieldArrayWithId, UseFieldArrayRemove, UseFormRegister, UseFieldArrayAppend } from 'react-hook-form';
+import { Title } from '@mui/icons-material';
 
 interface ReactHookEditableListProps {
   name: string;
   ls: FieldArrayWithId[];
   register: UseFormRegister<any>;
   append: UseFieldArrayAppend<any, any>;
   remove: UseFieldArrayRemove;
-  label: string;
   title: string;
 }
 
-const ReactHookEditableList: React.FC<ReactHookEditableListProps> = ({
-  name,
-  ls,
-  register,
-  append,
-  remove,
-  label = 'item'
-}) => {
+const ReactHookEditableList: React.FC<ReactHookEditableListProps> = ({ name, ls, title, register, append, remove }) => {
   return (
     <>
-      <Box>
-        <Stack direction="row" spacing={2}>
-          <Typography variant="h5">{label + 's'}</Typography>
+      <Stack spacing={1}>
+        <Stack direction={'row'} spacing={2}>
+          <Typography variant="h5">{title}</Typography>
           <Button
             variant="contained"
             color="primary"
             onClick={() => append({ bulletId: -1, detail: '' })}
             sx={{ my: 2, width: 'max-content', textTransform: 'none' }}
           >
-            {'Add ' + label}
+            + Add {title}
           </Button>
         </Stack>
         <Grid container spacing={2}>
+          {
+            //</Grid><Grid container sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }} spacing={2}>
+          }
           {ls.map((_element, i) => {
             return (
-              //Grid container with direction "row", and then each item inside is wrapped in a grid-element
-              //xs argument: number out of 12, takes up that amount of space
-              <Grid item sx={{ alignItems: 'center' }} xs={12} md={4}>
-                <InputLabel>{label + ' ' + (i + 1)}</InputLabel>
-                <Box sx={{ display: 'flex' }}>
-                  <TextField
-                    required
-                    multiline
-                    placeholder={'Enter a ' + label + '...'}
-                    inputProps={{ style: { fontSize: 14 } }}
-                    minRows={2}
-                    autoComplete="off"
-                    sx={{ width: 12 / 12, padding: 0 }}
-                    {...register(`${name}.${i}.detail`)}
-                  />
-                  <Stack spacing={0}>
-                    <IconButton type="button" onClick={() => remove(i)} sx={{ mx: 1, my: 0 }}>
-                      <DeleteIcon />
-                    </IconButton>
-                    <Box></Box>
-                  </Stack>
-                </Box>
-              </Grid>
+              <>
+                <Grid item sx={{ alignItems: 'center' }} xs={12} md={4}>
+                  <InputLabel>{title + ' ' + (i + 1)}</InputLabel>
+                  <Box sx={{ display: 'flex' }}>
+                    <TextField
+                      required
+                      multiline
+                      placeholder={'Enter ' + title + '...'}
+                      inputProps={{ style: { fontSize: 14 } }}
+                      minRows={2}
+                      autoComplete="off"
+                      sx={{ width: 12 / 12, padding: 0 }}
+                      {...register(`${name}.${i}.detail`)}
+                    />
+                    <Stack spacing={0}>
+                      <IconButton
+                        type="button"
+                        onClick={() => remove(i)}
+                        sx={{ mx: 1, my: 0, color: 'red', borderRadius: '4px', outline: 'solid' }}
+                      >
+                        <DeleteIcon />
+                      </IconButton>
+                      <Box></Box>
+                    </Stack>
+                  </Box>
+                </Grid>
+              </>
             );
           })}
         </Grid>
-      </Box>
+      </Stack>
     </>
   );
 };

src/frontend/src/pages/CreateWorkPackagePage/CreateWorkPackageFormView.tsx

@@ -294,7 +294,6 @@ const CreateWorkPackageFormView: React.FC<CreateWorkPackageFormViewProps> = ({
                   ls={expectedActivities}
                   append={appendExpectedActivity}
                   remove={removeExpectedActivity}
-                  label="Expected Activity"
                   title="Expected Activites"
                 />
               </FormControl>
@@ -307,7 +306,6 @@ const CreateWorkPackageFormView: React.FC<CreateWorkPackageFormViewProps> = ({
                   ls={deliverables}
                   append={appendDeliverable}
                   remove={removeDeliverable}
-                  label="Deliverable"
                   title="Deliverables"
                 />
               </FormControl>

src/frontend/src/pages/ProjectDetailPage/ProjectEdit/ProjectEditContainer.tsx

@@ -219,7 +219,6 @@ const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ project, ex
             ls={goals}
             append={appendGoal}
             remove={removeGoal}
-            label="Goal"
             title="Goals"
           />
           <ReactHookEditableList
@@ -228,7 +227,6 @@ const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ project, ex
             ls={features}
             append={appendFeature}
             remove={removeFeature}
-            label="Feature"
             title="Features"
           />
           <ReactHookEditableList
@@ -237,7 +235,6 @@ const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ project, ex
             ls={constraints}
             append={appendConstraint}
             remove={removeConstraint}
-            label="Constraint"
             title="Other Constraints"
           />
           <ReactHookEditableList
@@ -246,7 +243,6 @@ const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ project, ex
             ls={rules}
             append={appendRule}
             remove={removeRule}
-            label="Rule"
             title="Rules"
           />
         </Stack>

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

@@ -223,7 +223,6 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({ wor
             ls={expectedActivities}
             append={appendExpectedActivity}
             remove={removeExpectedActivity}
-            label="Expected Activity"
             title="Expected Activites"
           />
           <ReactHookEditableList
@@ -232,7 +231,6 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({ wor
             ls={deliverables}
             append={appendDeliverable}
             remove={removeDeliverable}
-            label="Deliverable"
             title="Deliverables"
           />
         </Stack>