Revert "Changed the forms and updated editablelist"

This reverts commit e2b2c9a.

Author: jackturner106

src/frontend/src/components/ReactHookEditableList.tsx

@@ -1,69 +1,69 @@
-import { Grid, Button, IconButton, TextField, Typography, Stack, InputLabel, Box } from '@mui/material';
+import { Grid, Button, IconButton, TextField, InputLabel, Box, Stack, Typography } 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, title, register, append, remove }) => {
+const ReactHookEditableList: React.FC<ReactHookEditableListProps> = ({
+  name,
+  ls,
+  register,
+  append,
+  remove,
+  label = 'item'
+}) => {
   return (
     <>
-      <Stack spacing={1}>
-        <Stack direction={'row'} spacing={2}>
-          <Typography variant="h5">{title}</Typography>
+      <Box>
+        <Stack direction="row" spacing={2}>
+          <Typography variant="h5">{label + 's'}</Typography>
           <Button
             variant="contained"
             color="primary"
             onClick={() => append({ bulletId: -1, detail: '' })}
             sx={{ my: 2, width: 'max-content', textTransform: 'none' }}
           >
-            + Add {title}
+            {'Add ' + label}
           </Button>
         </Stack>
         <Grid container spacing={2}>
-          {
-            //</Grid><Grid container sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }} spacing={2}>
-          }
           {ls.map((_element, i) => {
             return (
-              <>
-                <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 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>
-      </Stack>
+      </Box>
     </>
   );
 };

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

@@ -294,6 +294,7 @@ const CreateWorkPackageFormView: React.FC<CreateWorkPackageFormViewProps> = ({
                   ls={expectedActivities}
                   append={appendExpectedActivity}
                   remove={removeExpectedActivity}
+                  label="Expected Activity"
                   title="Expected Activites"
                 />
               </FormControl>
@@ -306,6 +307,7 @@ 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,6 +219,7 @@ const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ project, ex
             ls={goals}
             append={appendGoal}
             remove={removeGoal}
+            label="Goal"
             title="Goals"
           />
           <ReactHookEditableList
@@ -227,6 +228,7 @@ const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ project, ex
             ls={features}
             append={appendFeature}
             remove={removeFeature}
+            label="Feature"
             title="Features"
           />
           <ReactHookEditableList
@@ -235,6 +237,7 @@ const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ project, ex
             ls={constraints}
             append={appendConstraint}
             remove={removeConstraint}
+            label="Constraint"
             title="Other Constraints"
           />
           <ReactHookEditableList
@@ -243,6 +246,7 @@ 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,6 +223,7 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({ wor
             ls={expectedActivities}
             append={appendExpectedActivity}
             remove={removeExpectedActivity}
+            label="Expected Activity"
             title="Expected Activites"
           />
           <ReactHookEditableList
@@ -231,6 +232,7 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({ wor
             ls={deliverables}
             append={appendDeliverable}
             remove={removeDeliverable}
+            label="Deliverable"
             title="Deliverables"
           />
         </Stack>