Skip to content

Commit 090ac05

Browse files
RChandler234RChandler234
committed
#1637 - clean up code, tweak the look a bit
1 parent eb1cd45 commit 090ac05

2 files changed

Lines changed: 56 additions & 107 deletions

File tree

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

Lines changed: 55 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,19 @@ import Chip from '@mui/material/Chip';
88
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 { ChangeRequest, ChangeRequestStatus, ChangeRequestType, StandardChangeRequest, wbsPipe } from 'shared';
11+
import {
12+
ActivationChangeRequest,
13+
ChangeRequest,
14+
ChangeRequestStatus,
15+
ChangeRequestType,
16+
StandardChangeRequest,
17+
wbsPipe
18+
} from 'shared';
1219
import { routes } from '../utils/routes';
1320
import { Link as RouterLink } from 'react-router-dom';
1421
import { fullNamePipe } from '../utils/pipes';
1522
import { ChangeRequestTypeTextPipe, ChangeRequestStatusTextPipe } from '../utils/enum-pipes';
1623

17-
const determineChangeRequestTypeView = (cr: ChangeRequest) => {
18-
if (cr.type === ChangeRequestType.Activation || cr.type === ChangeRequestType.StageGate) {
19-
return cr.status === ChangeRequestStatus.Implemented ? (
20-
<ImplementedCardDetails cr={cr} />
21-
) : (
22-
<StageGateActivationCardDetails cr={cr} />
23-
);
24-
} else {
25-
return <StandardCardDetails cr={cr as StandardChangeRequest} />;
26-
}
27-
};
28-
29-
// should I use object mapping instead of switch statements?
3024
const determineChangeRequestStatusPillColor = (status: ChangeRequestStatus) => {
3125
switch (status) {
3226
case ChangeRequestStatus.Implemented:
@@ -42,89 +36,6 @@ const determineChangeRequestStatusPillColor = (status: ChangeRequestStatus) => {
4236
}
4337
};
4438

45-
// same for here ^^
46-
const determineChangeRequestTypeDesc = (type: ChangeRequestType) => {
47-
switch (type) {
48-
case ChangeRequestType.StageGate:
49-
return 'Stage Gate';
50-
case ChangeRequestType.Activation:
51-
return 'Activate';
52-
default:
53-
return 'Other';
54-
}
55-
};
56-
57-
// return the review notes for a change request if there are any otherwise display No notes
58-
const ImplementedCardDetails = ({ cr }: { cr: ChangeRequest }) => {
59-
const theme = useTheme();
60-
return (
61-
<Box
62-
sx={{
63-
backgroundColor: theme.palette.divider,
64-
width: '100%',
65-
height: 75,
66-
borderRadius: 1,
67-
padding: 1,
68-
overflow: 'hidden',
69-
textOverflow: 'ellipsis'
70-
}}
71-
>
72-
<Typography variant="body1" fontSize={14}>
73-
{cr.reviewNotes ? cr.reviewNotes : 'No review notes'}
74-
</Typography>
75-
</Box>
76-
);
77-
};
78-
79-
// could possibly abstract these as the contents are the only difference
80-
// non implemented change requests that are of stage gat and activation type
81-
const StageGateActivationCardDetails = ({ cr }: { cr: ChangeRequest }) => {
82-
const theme = useTheme();
83-
const descriptionType = determineChangeRequestTypeDesc(cr.type);
84-
return (
85-
<Box
86-
sx={{
87-
backgroundColor: theme.palette.divider,
88-
width: '100%',
89-
height: 75,
90-
borderRadius: 1,
91-
padding: 1,
92-
overflow: 'hidden',
93-
textOverflow: 'ellipsis'
94-
}}
95-
>
96-
<Typography variant="body1" fontSize={14}>
97-
{descriptionType + ': '}
98-
<Link color="inherit" component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(cr.wbsNum)}`}>
99-
{wbsPipe(cr.wbsNum)}
100-
</Link>
101-
</Typography>
102-
</Box>
103-
);
104-
};
105-
106-
const StandardCardDetails = ({ cr }: { cr: StandardChangeRequest }) => {
107-
const theme = useTheme();
108-
return (
109-
<Box
110-
sx={{
111-
backgroundColor: theme.palette.divider,
112-
width: '100%',
113-
height: 75,
114-
borderRadius: 1,
115-
padding: 1,
116-
overflow: 'hidden',
117-
textOverflow: 'ellipsis'
118-
}}
119-
>
120-
<Typography variant="body1" fontSize={14}>
121-
{cr.what}
122-
</Typography>
123-
</Box>
124-
);
125-
};
126-
127-
// I can abstract the two pills into one component but I'm not sure if it's worth it since the difference is the label and color
12839
const ChangeRequestTypePill = ({ type }: { type: ChangeRequestType }) => {
12940
return (
13041
<Chip
@@ -158,13 +69,54 @@ const ChangeRequestStatusPill = ({ status }: { status: ChangeRequestStatus }) =>
15869
);
15970
};
16071

72+
const CRCardDescription = ({ cr }: { cr: ChangeRequest }) => {
73+
const theme = useTheme();
74+
const isAccepted = cr.status === ChangeRequestStatus.Implemented || cr.status === ChangeRequestStatus.Accepted;
75+
const isStageGate = cr.type === ChangeRequestType.StageGate;
76+
const isActivation = cr.type === ChangeRequestType.Activation;
77+
return (
78+
<Box
79+
sx={{
80+
backgroundColor: theme.palette.divider,
81+
width: '100%',
82+
height: 75,
83+
borderRadius: 1,
84+
padding: 1,
85+
overflow: 'hidden',
86+
textOverflow: 'ellipsis'
87+
}}
88+
>
89+
<Typography variant="body1" fontSize={14}>
90+
{isAccepted ? (
91+
cr.reviewNotes ? (
92+
'Review Notes: ' + cr.reviewNotes
93+
) : (
94+
'No review notes'
95+
)
96+
) : isActivation ? (
97+
<div>
98+
<Typography variant="body1" fontSize={14}>
99+
Lead: {fullNamePipe((cr as ActivationChangeRequest).projectLead)}
100+
</Typography>
101+
<Typography variant="body1" fontSize={14}>
102+
Manager: {fullNamePipe((cr as ActivationChangeRequest).projectManager)}
103+
</Typography>
104+
</div>
105+
) : isStageGate ? (
106+
'Stage Gate ' + wbsPipe(cr.wbsNum) + ' - ' + cr.wbsName
107+
) : (
108+
(cr as StandardChangeRequest).what
109+
)}
110+
</Typography>
111+
</Box>
112+
);
113+
};
114+
161115
interface ChangeRequestDetailCardProps {
162116
changeRequest: ChangeRequest;
163117
}
164118

165-
// Convert work package stage into badge for display
166119
const ChangeRequestDetailCard: React.FC<ChangeRequestDetailCardProps> = ({ changeRequest }) => {
167-
const ChangeRequestTypeView = () => determineChangeRequestTypeView(changeRequest);
168120
return (
169121
<Card sx={{ width: 325, mr: 2, borderRadius: 3, mb: 2 }}>
170122
<CardContent>
@@ -180,13 +132,12 @@ const ChangeRequestDetailCard: React.FC<ChangeRequestDetailCardProps> = ({ chang
180132
{'Change Request #' + changeRequest.crId}
181133
</Typography>
182134
</Link>
183-
<Stack direction={'column'}>
135+
<Stack direction={'column'} maxWidth={'195px'}>
184136
<Typography variant="body1" sx={{ mr: 2, fontWeight: 'bold', fontSize: 13 }}>
185137
From: {fullNamePipe(changeRequest.submitter)}
186138
</Typography>
187-
<Typography fontWeight={'bold'} variant="h1" fontSize={13} noWrap>
188-
WBS:{' '}
189-
<Link color={'inherit'} component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(changeRequest.wbsNum)}`}>
139+
<Typography fontWeight={'bold'} fontSize={12} noWrap>
140+
<Link component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(changeRequest.wbsNum)}`}>
190141
{wbsPipe(changeRequest.wbsNum)} {changeRequest.wbsName}
191142
</Link>
192143
</Typography>
@@ -199,7 +150,7 @@ const ChangeRequestDetailCard: React.FC<ChangeRequestDetailCardProps> = ({ chang
199150
</Stack>
200151
</Grid>
201152
</Grid>
202-
<ChangeRequestTypeView />
153+
<CRCardDescription cr={changeRequest} />
203154
</CardContent>
204155
</Card>
205156
);

‎src/frontend/src/pages/ChangeRequestsPage/ChangeRequestsOverview.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,9 +116,7 @@ const ChangeRequestsOverview: React.FC = () => {
116116
{crList.length > 0 ? (
117117
<Grid container>{displayCRCards(crList)}</Grid>
118118
) : (
119-
<Typography variant="subtitle2" gutterBottom>
120-
{emptyMessage}
121-
</Typography>
119+
<Typography gutterBottom>{emptyMessage}</Typography>
122120
)}
123121
</>
124122
);

0 commit comments

Comments
 (0)