Skip to content

Commit f8de6d5

Browse files
ninestninest
authored
Merge branch 'feature/Project-Form-Redesign' into #1320-create-project-endpoint
2 parents 971c473 + c466135 commit f8de6d5

4 files changed

Lines changed: 113 additions & 108 deletions

File tree

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

Lines changed: 49 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +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 { NERButton } from './NERButton';
45

56
interface ReactHookEditableListProps {
67
name: string;
78
ls: FieldArrayWithId[];
89
register: UseFormRegister<any>;
910
append: UseFieldArrayAppend<any, any>;
1011
remove: UseFieldArrayRemove;
11-
title: string;
12+
bulletName: string;
1213
}
1314

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

‎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)