Skip to content

Commit a279e00

Browse files
bderbs30bderbs30
committed
#1637: reformatted component layout
1 parent c81a96d commit a279e00

1 file changed

Lines changed: 106 additions & 93 deletions

File tree

‎src/frontend/src/components/ChangeRequestDetailCard.tsx‎

Lines changed: 106 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -3,52 +3,26 @@
33
* See the LICENSE file in the repository root folder for details.
44
*/
55

6-
import { Card, CardContent, Grid, TextField, Typography } from '@mui/material';
6+
import { Card, CardContent, Grid, Typography, useTheme } from '@mui/material';
77
import Chip from '@mui/material/Chip';
8-
import { green, blue, red, grey, orange, purple } from '@mui/material/colors';
8+
import { green, blue, red, grey, purple } from '@mui/material/colors';
99
import { Box, Stack } from '@mui/system';
1010
import { Link } from '@mui/material';
11-
import {
12-
ActivationChangeRequest,
13-
ChangeRequest,
14-
ChangeRequestStatus,
15-
ChangeRequestType,
16-
StageGateChangeRequest,
17-
StandardChangeRequest,
18-
wbsPipe
19-
} from 'shared';
11+
import { ChangeRequest, ChangeRequestStatus, ChangeRequestType, StandardChangeRequest, wbsPipe } from 'shared';
2012
import { routes } from '../utils/routes';
2113
import { Link as RouterLink } from 'react-router-dom';
22-
import { datePipe, fullNamePipe } from '../utils/pipes';
23-
import { Cancel, Construction, DateRange, Description, DoneAll, Person, Start, Work } from '@mui/icons-material';
14+
import { fullNamePipe } from '../utils/pipes';
2415
import { ChangeRequestTypeTextPipe, ChangeRequestStatusTextPipe } from '../utils/enum-pipes';
2516

2617
const determineChangeRequestTypeView = (cr: ChangeRequest) => {
27-
switch (cr.type) {
28-
case 'STAGE_GATE':
29-
return <StageGateCardDetails cr={cr as StageGateChangeRequest} />;
30-
case 'ACTIVATION':
31-
return <ActivationCardDetails cr={cr as ActivationChangeRequest} />;
18+
switch (cr.status) {
19+
case 'Implemented':
20+
return <ImplementedCardDetails cr={cr} />;
3221
default:
3322
return <StandardCardDetails cr={cr as StandardChangeRequest} />;
3423
}
3524
};
3625

37-
const determineChangeRequestTypePillColor = (type: ChangeRequestType) => {
38-
switch (type) {
39-
case 'STAGE_GATE':
40-
return orange[900];
41-
case 'ACTIVATION':
42-
return green[600];
43-
case 'DEFINITION_CHANGE':
44-
return blue[600];
45-
case 'ISSUE':
46-
return red[400];
47-
default:
48-
return grey[500];
49-
}
50-
};
51-
5226
const determineChangeRequestStatusPillColor = (status: ChangeRequestStatus) => {
5327
switch (status) {
5428
case 'Implemented':
@@ -64,51 +38,67 @@ const determineChangeRequestStatusPillColor = (status: ChangeRequestStatus) => {
6438
}
6539
};
6640

67-
const StandardCardDetails = ({ cr }: { cr: StandardChangeRequest }) => {
68-
return (
69-
<Grid container mt={1} ml={'2px'}>
70-
<Grid item>
71-
<Description sx={{ ml: '-4px' }} display={'inline'} />
72-
</Grid>
73-
<Grid item xs>
74-
<Typography ml={'4px'} display={'inline'}>
75-
{cr.what}
76-
</Typography>
77-
</Grid>
78-
</Grid>
79-
);
41+
const determineChangeRequestTypeDesc = (type: ChangeRequestType) => {
42+
switch (type) {
43+
case 'ISSUE':
44+
return 'Issue';
45+
case 'DEFINITION_CHANGE':
46+
return 'Redefinition';
47+
case 'OTHER':
48+
return 'Other';
49+
case 'STAGE_GATE':
50+
return 'Stage Gate';
51+
case 'ACTIVATION':
52+
return 'Activation';
53+
default:
54+
return 'Other';
55+
}
8056
};
8157

82-
const StageGateCardDetails = ({ cr }: { cr: StageGateChangeRequest }) => {
58+
const ImplementedCardDetails = ({ cr }: { cr: ChangeRequest }) => {
59+
const theme = useTheme();
60+
const DescriptionType = determineChangeRequestTypeDesc(cr.type);
8361
return (
84-
<Box ml={-1}>
85-
{cr.confirmDone ? (
86-
<Chip icon={<DoneAll />} label={'Done'} sx={{ backgroundColor: 'transparent' }} />
87-
) : (
88-
<Chip icon={<Cancel />} label={'Not Done'} sx={{ backgroundColor: 'transparent' }} />
89-
)}
62+
<Box
63+
sx={{
64+
backgroundColor: theme.palette.divider,
65+
width: '100%',
66+
minHeight: 75,
67+
borderRadius: 1,
68+
marginTop: 1,
69+
paddingTop: 0.5,
70+
paddingLeft: 1,
71+
paddingRight: 1,
72+
paddingBottom: 0.5
73+
}}
74+
>
75+
<Typography variant="body1" fontSize={14} noWrap>
76+
{DescriptionType + ': '}
77+
<Link color="inherit" component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(cr.wbsNum)}`}>
78+
{wbsPipe(cr.wbsNum)}
79+
</Link>
80+
</Typography>
9081
</Box>
9182
);
9283
};
9384

94-
const ActivationCardDetails = ({ cr }: { cr: ActivationChangeRequest }) => {
85+
const StandardCardDetails = ({ cr }: { cr: StandardChangeRequest }) => {
86+
const theme = useTheme();
9587
return (
96-
<Box>
97-
<Stack direction="row">
98-
<Chip
99-
icon={<Construction />}
100-
label={fullNamePipe(cr.projectLead)}
101-
sx={{ backgroundColor: 'transparent', mr: 2, ml: -1, maxWidth: '150' }}
102-
/>
103-
<Chip
104-
icon={<Work />}
105-
label={fullNamePipe(cr.projectManager)}
106-
sx={{ backgroundColor: 'transparent', maxWidth: '150' }}
107-
/>
108-
</Stack>
109-
<Stack direction="row" justifyContent={'space-between'}>
110-
<Chip icon={<Start />} label={datePipe(cr.startDate)} sx={{ backgroundColor: 'transparent', ml: -1 }} />
111-
</Stack>
88+
<Box
89+
sx={{
90+
backgroundColor: theme.palette.divider,
91+
width: '100%',
92+
minHeight: 75,
93+
borderRadius: 1,
94+
marginTop: 1,
95+
paddingTop: 0.5,
96+
paddingLeft: 1,
97+
paddingRight: 1,
98+
paddingBottom: 0.5
99+
}}
100+
>
101+
{cr.what}
112102
</Box>
113103
);
114104
};
@@ -123,7 +113,8 @@ const ChangeRequestTypePill = ({ type }: { type: ChangeRequestType }) => {
123113
fontSize: 12,
124114
color: 'white',
125115
backgroundColor: red[600],
126-
mb: 0.5
116+
mb: 0.5,
117+
width: 100
127118
}}
128119
/>
129120
);
@@ -140,12 +131,48 @@ const ChangeRequestStatusPill = ({ status }: { status: ChangeRequestStatus }) =>
140131
fontSize: 12,
141132
color: 'white',
142133
backgroundColor: statusPillColor,
143-
mb: 0.5
134+
mb: 0.5,
135+
width: 100
144136
}}
145137
/>
146138
);
147139
};
148140

141+
const ChangeRequestCardHeader = ({ cr }: { cr: ChangeRequest }) => {
142+
return (
143+
<Link underline={'none'} color={'inherit'} component={RouterLink} to={`${routes.CHANGE_REQUESTS}/${cr.crId}`} noWrap>
144+
<Typography variant="h6" sx={{ mb: 0.5 }}>
145+
{'Change Request #' + cr.crId}
146+
</Typography>
147+
</Link>
148+
);
149+
};
150+
151+
const ChangeRequestStatusTypePills = ({ cr }: { cr: ChangeRequest }) => {
152+
return (
153+
<Stack direction={'column'} spacing={1}>
154+
<ChangeRequestTypePill type={cr.type} />
155+
<ChangeRequestStatusPill status={cr.status} />
156+
</Stack>
157+
);
158+
};
159+
160+
const ChangeRequestSubWBSDetails = ({ cr }: { cr: ChangeRequest }) => {
161+
return (
162+
<Stack direction={'column'}>
163+
<Typography variant="body1" sx={{ mr: 2, fontWeight: 'bold', fontSize: 13 }}>
164+
From: {fullNamePipe(cr.submitter)}
165+
</Typography>
166+
<Typography fontWeight={'bold'} variant="h1" fontSize={13} noWrap>
167+
WBS:{' '}
168+
<Link color={'inherit'} component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(cr.wbsNum)}`}>
169+
{wbsPipe(cr.wbsNum)} {cr.wbsName}
170+
</Link>
171+
</Typography>
172+
</Stack>
173+
);
174+
};
175+
149176
interface ChangeRequestDetailCardProps {
150177
changeRequest: ChangeRequest;
151178
}
@@ -154,32 +181,18 @@ interface ChangeRequestDetailCardProps {
154181
const ChangeRequestDetailCard: React.FC<ChangeRequestDetailCardProps> = ({ changeRequest }) => {
155182
const ChangeRequestTypeView = () => determineChangeRequestTypeView(changeRequest);
156183
return (
157-
<Card sx={{ width: 300, mr: 1, mb: 1, borderRadius: 5 }}>
184+
<Card sx={{ width: 325, mr: 2, borderRadius: 3, mb: 2 }}>
158185
<CardContent>
159186
<Grid container justifyContent="space-between" alignItems="flex-start">
160-
<Grid item>
161-
<Link component={RouterLink} to={`${routes.CHANGE_REQUESTS}/${changeRequest.crId}`} noWrap>
162-
<Typography variant="h6" sx={{ mb: 0.5 }}>
163-
{'Change Request #' + changeRequest.crId}
164-
</Typography>
165-
</Link>
166-
<Chip
167-
label={`From: ${fullNamePipe(changeRequest.submitter)}`}
168-
sx={{ mr: 2, ml: -1.5, backgroundColor: 'transparent', maxWidth: '150', fontWeight: 'bold' }}
169-
/>
187+
<Grid item xs mb={1} mt={-1.5}>
188+
<ChangeRequestCardHeader cr={changeRequest} />
189+
<ChangeRequestSubWBSDetails cr={changeRequest} />
170190
</Grid>
171-
<Grid item display="flex" justifyContent="flex-end">
172-
<Stack direction={'column'} spacing={1}>
173-
<ChangeRequestTypePill type={changeRequest.type} />
174-
<ChangeRequestStatusPill status={changeRequest.status} />
175-
</Stack>
191+
<Grid item xs="auto">
192+
<ChangeRequestStatusTypePills cr={changeRequest} />
176193
</Grid>
177194
</Grid>
178-
<Typography fontWeight={'bold'} variant="h5" fontSize={16} noWrap>
179-
<Link component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(changeRequest.wbsNum)}`}>
180-
WBS: {wbsPipe(changeRequest.wbsNum)} - {changeRequest.wbsName}
181-
</Link>
182-
</Typography>
195+
<ChangeRequestTypeView />
183196
</CardContent>
184197
</Card>
185198
);

0 commit comments

Comments
 (0)