#1637: abstracted type and status chips

Author: bderbs30

src/frontend/src/components/ChangeRequestDetailCard.tsx

@@ -3,14 +3,15 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
-import { Card, CardContent, Grid, Typography } from '@mui/material';
+import { Card, CardContent, Grid, TextField, Typography } from '@mui/material';
 import Chip from '@mui/material/Chip';
-import { green, blue, red, grey, orange } from '@mui/material/colors';
+import { green, blue, red, grey, orange, purple } from '@mui/material/colors';
 import { Box, Stack } from '@mui/system';
 import { Link } from '@mui/material';
 import {
   ActivationChangeRequest,
   ChangeRequest,
+  ChangeRequestStatus,
   ChangeRequestType,
   StageGateChangeRequest,
   StandardChangeRequest,
@@ -20,7 +21,7 @@ import { routes } from '../utils/routes';
 import { Link as RouterLink } from 'react-router-dom';
 import { datePipe, fullNamePipe } from '../utils/pipes';
 import { Cancel, Construction, DateRange, Description, DoneAll, Person, Start, Work } from '@mui/icons-material';
-import { ChangeRequestTypeTextPipe } from '../utils/enum-pipes';
+import { ChangeRequestTypeTextPipe, ChangeRequestStatusTextPipe } from '../utils/enum-pipes';
 
 const determineChangeRequestTypeView = (cr: ChangeRequest) => {
   switch (cr.type) {
@@ -33,7 +34,7 @@ const determineChangeRequestTypeView = (cr: ChangeRequest) => {
   }
 };
 
-const determineChangeRequestPillColor = (type: ChangeRequestType) => {
+const determineChangeRequestTypePillColor = (type: ChangeRequestType) => {
   switch (type) {
     case 'STAGE_GATE':
       return orange[900];
@@ -48,6 +49,21 @@ const determineChangeRequestPillColor = (type: ChangeRequestType) => {
   }
 };
 
+const determineChangeRequestStatusPillColor = (status: ChangeRequestStatus) => {
+  switch (status) {
+    case 'Implemented':
+      return blue[600];
+    case 'Accepted':
+      return green[600];
+    case 'Denied':
+      return red[400];
+    case 'Open':
+      return purple[400];
+    default:
+      return grey[500];
+  }
+};
+
 const StandardCardDetails = ({ cr }: { cr: StandardChangeRequest }) => {
   return (
     <Grid container mt={1} ml={'2px'}>
@@ -97,53 +113,73 @@ const ActivationCardDetails = ({ cr }: { cr: ActivationChangeRequest }) => {
   );
 };
 
+const ChangeRequestTypePill = ({ type }: { type: ChangeRequestType }) => {
+  return (
+    <Chip
+      size="small"
+      label={ChangeRequestTypeTextPipe(type)}
+      variant="filled"
+      sx={{
+        fontSize: 12,
+        color: 'white',
+        backgroundColor: red[600],
+        mb: 0.5
+      }}
+    />
+  );
+};
+
+const ChangeRequestStatusPill = ({ status }: { status: ChangeRequestStatus }) => {
+  const statusPillColor = determineChangeRequestStatusPillColor(status);
+  return (
+    <Chip
+      size="small"
+      label={ChangeRequestStatusTextPipe(status)}
+      variant="filled"
+      sx={{
+        fontSize: 12,
+        color: 'white',
+        backgroundColor: statusPillColor,
+        mb: 0.5
+      }}
+    />
+  );
+};
+
 interface ChangeRequestDetailCardProps {
   changeRequest: ChangeRequest;
 }
 
 // Convert work package stage into badge for display
 const ChangeRequestDetailCard: React.FC<ChangeRequestDetailCardProps> = ({ changeRequest }) => {
   const ChangeRequestTypeView = () => determineChangeRequestTypeView(changeRequest);
-  const pillColor = determineChangeRequestPillColor(changeRequest.type);
   return (
     <Card sx={{ width: 300, mr: 1, mb: 1, borderRadius: 5 }}>
       <CardContent>
-        <Grid container justifyContent="space-between" alignItems="center">
+        <Grid container justifyContent="space-between" alignItems="flex-start">
           <Grid item>
             <Link component={RouterLink} to={`${routes.CHANGE_REQUESTS}/${changeRequest.crId}`} noWrap>
               <Typography variant="h6" sx={{ mb: 0.5 }}>
-                {'CR #' + changeRequest.crId}
+                {'Change Request #' + changeRequest.crId}
               </Typography>
             </Link>
-          </Grid>
-          <Grid item display="flex" justifyContent="flex-end">
             <Chip
-              size="small"
-              label={ChangeRequestTypeTextPipe(changeRequest.type)}
-              variant="outlined"
-              sx={{
-                fontSize: 12,
-                color: pillColor,
-                borderColor: pillColor,
-                mb: 0.5
-              }}
+              label={`From: ${fullNamePipe(changeRequest.submitter)}`}
+              sx={{ mr: 2, ml: -1.5, backgroundColor: 'transparent', maxWidth: '150', fontWeight: 'bold' }}
             />
           </Grid>
+          <Grid item display="flex" justifyContent="flex-end">
+            <Stack direction={'column'} spacing={1}>
+              <ChangeRequestTypePill type={changeRequest.type} />
+              <ChangeRequestStatusPill status={changeRequest.status} />
+            </Stack>
+          </Grid>
         </Grid>
-        <Stack direction="row">
-          <Chip
-            icon={<Person />}
-            label={fullNamePipe(changeRequest.submitter)}
-            sx={{ mr: 2, ml: -1, backgroundColor: 'transparent', maxWidth: '150' }}
-          />
-          <Chip icon={<DateRange />} label={datePipe(changeRequest.dateSubmitted)} sx={{ backgroundColor: 'transparent' }} />
-        </Stack>
-        <Typography fontWeight={'regular'} variant="h6" fontSize={16} noWrap>
+        <Typography fontWeight={'bold'} variant="h5" fontSize={16} noWrap>
           <Link component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(changeRequest.wbsNum)}`}>
-            {wbsPipe(changeRequest.wbsNum)} - {changeRequest.wbsName}
+            WBS: {wbsPipe(changeRequest.wbsNum)} - {changeRequest.wbsName}
           </Link>
         </Typography>
-        <ChangeRequestTypeView />
       </CardContent>
     </Card>
   );

src/frontend/src/utils/enum-pipes.ts

@@ -4,7 +4,7 @@
  */
 
 import { yellow, green, blue, purple, grey } from '@mui/material/colors';
-import { ChangeRequestType, WorkPackageStage } from 'shared';
+import { ChangeRequestStatus, ChangeRequestType, WorkPackageStage } from 'shared';
 
 // maps stage to the desired color
 export const WorkPackageStageColorPipe: (stage: WorkPackageStage | undefined) => string = (stage) => {
@@ -52,3 +52,16 @@ export const ChangeRequestTypeTextPipe: (type: ChangeRequestType) => string = (t
       return 'Other';
   }
 };
+
+export const ChangeRequestStatusTextPipe: (status: ChangeRequestStatus) => string = (status) => {
+  switch (status) {
+    case ChangeRequestStatus.Implemented:
+      return 'Implemented';
+    case ChangeRequestStatus.Accepted:
+      return 'Accepted';
+    case ChangeRequestStatus.Denied:
+      return 'Denied';
+    case ChangeRequestStatus.Open:
+      return 'Open';
+  }
+};