Skip to content

Commit c466135

Browse files
RChandler234RChandler234
authored
Merge pull request #1624 from Northeastern-Electric-Racing/#1324-Project-Form-Redesign
#1324 Changed ReactHookEditableList and associated forms
2 parents 47c2e81 + d797b5c commit c466135

4 files changed

Lines changed: 113 additions & 109 deletions

File tree

‎src/frontend/src/components/ReactHookEditableList.tsx‎

Lines changed: 49 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,64 @@
1-
import { Grid, Button, IconButton, TextField, Typography, Stack, InputLabel, Box } from '@mui/material';
1+
import { Grid, IconButton, TextField, InputLabel, Box } from '@mui/material';
22
import DeleteIcon from '@mui/icons-material/Delete';
33
import { FieldArrayWithId, UseFieldArrayRemove, UseFormRegister, UseFieldArrayAppend } from 'react-hook-form';
4-
import { Title } from '@mui/icons-material';
4+
import { NERButton } from './NERButton';
55

66
interface ReactHookEditableListProps {
77
name: string;
88
ls: FieldArrayWithId[];
99
register: UseFormRegister<any>;
1010
append: UseFieldArrayAppend<any, any>;
1111
remove: UseFieldArrayRemove;
12-
title: string;
12+
bulletName: string;
1313
}
1414

15-
const ReactHookEditableList: React.FC<ReactHookEditableListProps> = ({ name, ls, title, register, append, remove }) => {
15+
const ReactHookEditableList: React.FC<ReactHookEditableListProps> = ({
16+
name,
17+
ls,
18+
register,
19+
append,
20+
remove,
21+
bulletName = 'Item'
22+
}) => {
1623
return (
17-
<>
18-
<Stack spacing={1}>
19-
<Stack direction={'row'} spacing={2}>
20-
<Typography variant="h5">{title}</Typography>
21-
<Button
22-
variant="contained"
23-
color="primary"
24-
onClick={() => append({ bulletId: -1, detail: '' })}
25-
sx={{ my: 2, width: 'max-content', textTransform: 'none' }}
26-
>
27-
+ Add {title}
28-
</Button>
29-
</Stack>
30-
<Grid container spacing={2}>
31-
{
32-
//</Grid><Grid container sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }} spacing={2}>
33-
}
34-
{ls.map((_element, i) => {
35-
return (
36-
<>
37-
<Grid item sx={{ alignItems: 'center' }} xs={12} md={4}>
38-
<InputLabel>{title + ' ' + (i + 1)}</InputLabel>
39-
<Box sx={{ display: 'flex' }}>
40-
<TextField
41-
required
42-
multiline
43-
placeholder={'Enter ' + title + '...'}
44-
inputProps={{ style: { fontSize: 14 } }}
45-
minRows={2}
46-
autoComplete="off"
47-
sx={{ width: 12 / 12, padding: 0 }}
48-
{...register(`${name}.${i}.detail`)}
49-
/>
50-
<Stack spacing={0}>
51-
<IconButton
52-
type="button"
53-
onClick={() => remove(i)}
54-
sx={{ mx: 1, my: 0, color: 'red', borderRadius: '4px', outline: 'solid' }}
55-
>
56-
<DeleteIcon />
57-
</IconButton>
58-
<Box></Box>
59-
</Stack>
60-
</Box>
61-
</Grid>
62-
</>
63-
);
64-
})}
65-
</Grid>
66-
</Stack>
67-
</>
24+
<Box>
25+
<Grid container spacing={2}>
26+
{ls.map((_element, i) => {
27+
return (
28+
<Grid item sx={{ alignItems: 'center' }} xs={12} md={6} lg={4}>
29+
<InputLabel>{bulletName + ' ' + (i + 1)}</InputLabel>
30+
<Box sx={{ display: 'flex', alignItems: 'start' }}>
31+
<TextField
32+
required
33+
multiline
34+
placeholder={'Enter a ' + bulletName + '...'}
35+
inputProps={{ style: { fontSize: 14 } }}
36+
minRows={2}
37+
autoComplete="off"
38+
sx={{ width: 12 / 12, padding: 0 }}
39+
{...register(`${name}.${i}.detail`)}
40+
/>
41+
<IconButton
42+
type="button"
43+
onClick={() => remove(i)}
44+
sx={{ mx: 1, color: 'red', marginLeft: '15px', borderRadius: '4px', outline: 'solid', marginTop: '3px' }}
45+
>
46+
<DeleteIcon />
47+
</IconButton>
48+
</Box>
49+
</Grid>
50+
);
51+
})}
52+
</Grid>
53+
<NERButton
54+
variant="contained"
55+
color="primary"
56+
onClick={() => append({ bulletId: -1, detail: '' })}
57+
sx={{ my: 2, width: 'max-content', textTransform: 'none' }}
58+
>
59+
{'Add ' + bulletName}
60+
</NERButton>
61+
</Box>
6862
);
6963
};
7064

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ const CreateWorkPackageFormView: React.FC<CreateWorkPackageFormViewProps> = ({
294294
ls={expectedActivities}
295295
append={appendExpectedActivity}
296296
remove={removeExpectedActivity}
297-
title="Expected Activites"
297+
bulletName="Expected Activity"
298298
/>
299299
</FormControl>
300300
</Grid>
@@ -306,7 +306,7 @@ const CreateWorkPackageFormView: React.FC<CreateWorkPackageFormViewProps> = ({
306306
ls={deliverables}
307307
append={appendDeliverable}
308308
remove={removeDeliverable}
309-
title="Deliverables"
309+
bulletName="Deliverable"
310310
/>
311311
</FormControl>
312312
</Grid>

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

Lines changed: 45 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { useQuery } from '../../../hooks/utils.hooks';
1515
import { useFieldArray, useForm } from 'react-hook-form';
1616
import { yupResolver } from '@hookform/resolvers/yup';
1717
import * as yup from 'yup';
18-
import { Grid, Box, FormControl, Stack } from '@mui/material';
18+
import { Grid, Box, FormControl, Stack, Typography } from '@mui/material';
1919
import ReactHookTextField from '../../../components/ReactHookTextField';
2020
import ProjectEditDetails from './ProjectEditDetails';
2121
import ReactHookEditableList from '../../../components/ReactHookEditableList';
@@ -213,38 +213,50 @@ const ProjectEditContainer: React.FC<ProjectEditContainerProps> = ({ project, ex
213213
<LinksEditView watch={watch} ls={links} register={register} append={appendLink} remove={removeLink} />
214214
</PageBlock>
215215
<Stack spacing={4}>
216-
<ReactHookEditableList
217-
name="goals"
218-
register={register}
219-
ls={goals}
220-
append={appendGoal}
221-
remove={removeGoal}
222-
title="Goals"
223-
/>
224-
<ReactHookEditableList
225-
name="features"
226-
register={register}
227-
ls={features}
228-
append={appendFeature}
229-
remove={removeFeature}
230-
title="Features"
231-
/>
232-
<ReactHookEditableList
233-
name="constraints"
234-
register={register}
235-
ls={constraints}
236-
append={appendConstraint}
237-
remove={removeConstraint}
238-
title="Other Constraints"
239-
/>
240-
<ReactHookEditableList
241-
name="rules"
242-
register={register}
243-
ls={rules}
244-
append={appendRule}
245-
remove={removeRule}
246-
title="Rules"
247-
/>
216+
<Box>
217+
<Typography variant="h5">{'Goals'}</Typography>
218+
<ReactHookEditableList
219+
name="goals"
220+
register={register}
221+
ls={goals}
222+
append={appendGoal}
223+
remove={removeGoal}
224+
bulletName="Goal"
225+
/>
226+
</Box>
227+
<Box>
228+
<Typography variant="h5">{'Features'}</Typography>
229+
<ReactHookEditableList
230+
name="features"
231+
register={register}
232+
ls={features}
233+
append={appendFeature}
234+
remove={removeFeature}
235+
bulletName="Feature"
236+
/>
237+
</Box>
238+
<Box>
239+
<Typography variant="h5">{'Constraints'}</Typography>
240+
<ReactHookEditableList
241+
name="constraints"
242+
register={register}
243+
ls={constraints}
244+
append={appendConstraint}
245+
remove={removeConstraint}
246+
bulletName="Constraint"
247+
/>
248+
</Box>
249+
<Box>
250+
<Typography variant="h5">{'Rules'}</Typography>
251+
<ReactHookEditableList
252+
name="rules"
253+
register={register}
254+
ls={rules}
255+
append={appendRule}
256+
remove={removeRule}
257+
bulletName="Rule"
258+
/>
259+
</Box>
248260
</Stack>
249261
<Box textAlign="right" sx={{ my: 2 }}>
250262
<NERFailButton variant="contained" onClick={exitEditMode} sx={{ mx: 1 }}>

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

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { useQuery } from '../../../hooks/utils.hooks';
1414
import { Controller, useFieldArray, useForm } from 'react-hook-form';
1515
import { yupResolver } from '@hookform/resolvers/yup';
1616
import * as yup from 'yup';
17-
import { Box, TextField, Autocomplete, FormControl, Stack } from '@mui/material';
17+
import { Box, TextField, Autocomplete, FormControl } from '@mui/material';
1818
import ReactHookEditableList from '../../../components/ReactHookEditableList';
1919
import { useEditWorkPackage } from '../../../hooks/work-packages.hooks';
2020
import WorkPackageEditDetails from './WorkPackageEditDetails';
@@ -216,24 +216,22 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({ wor
216216
/>
217217
</FormControl>
218218
</PageBlock>
219-
<Stack spacing={4}>
220-
<ReactHookEditableList
221-
name="expectedActivities"
222-
register={register}
223-
ls={expectedActivities}
224-
append={appendExpectedActivity}
225-
remove={removeExpectedActivity}
226-
title="Expected Activites"
227-
/>
228-
<ReactHookEditableList
229-
name="deliverables"
230-
register={register}
231-
ls={deliverables}
232-
append={appendDeliverable}
233-
remove={removeDeliverable}
234-
title="Deliverables"
235-
/>
236-
</Stack>
219+
<ReactHookEditableList
220+
name="expectedActivities"
221+
register={register}
222+
ls={expectedActivities}
223+
append={appendExpectedActivity}
224+
remove={removeExpectedActivity}
225+
bulletName="Expected Activity"
226+
/>
227+
<ReactHookEditableList
228+
name="deliverables"
229+
register={register}
230+
ls={deliverables}
231+
append={appendDeliverable}
232+
remove={removeDeliverable}
233+
bulletName="Deliverable"
234+
/>
237235
<Box textAlign="right" sx={{ my: 2 }}>
238236
<NERFailButton variant="contained" onClick={exitEditMode} sx={{ mx: 1 }}>
239237
Cancel

0 commit comments

Comments
 (0)