Add popup for met req column

frontend/src/views/DataViews/CaseCollection.tsx

@@ -15,6 +15,9 @@ import {
 import IconButton from '@mui/material/IconButton';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { Refresh } from '@mui/icons-material';
+import CircleIcon from '@mui/icons-material/Circle';
+import Tooltip from '@mui/material/Tooltip';
+import FormPopup from '../FormPopup';
 
 export type RemsCase = {
   case_number?: string;
@@ -39,6 +42,8 @@ export type RemsCase = {
 const CaseCollection = (props: { refresh: boolean }) => {
   const [allData, setAllData] = useState<RemsCase[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [open, setOpen] = useState(false);
+  const [rowData, setRowData] = useState({});
 
   useEffect(() => {
     if (props.refresh) {
@@ -79,13 +84,35 @@ const CaseCollection = (props: { refresh: boolean }) => {
       });
   };
 
+  const openForms = (event: any, row: RemsCase) => {
+    setRowData(row);
+    setOpen(true);
+  }
+
+  const handleClose = () => {
+    setOpen(false);
+  }
+
   const formattedReqs = (row: RemsCase) => {
-    let reqNames: String[] = [];
+    let allCompleted = true;
+    let color = '#f0ad4e';
+    let tooltip = 'Forms not completed';
     row.metRequirements.forEach((req: any) => {
-      const completed = req.completed ? 'Completed' : 'Not completed';
-      reqNames.push(`${req.requirementName}: ${completed}`);
+      if (!req.completed) {
+        allCompleted = false;
+      }
     });
-    return reqNames.join(', ');
+    if (allCompleted) {
+      color = 'green';
+      tooltip = 'Forms completed';
+    }
+    return (
+      <Tooltip title={tooltip}>
+        <IconButton onClick={(event: any) => openForms(event, row)}>
+            <CircleIcon sx={{color: color}} />
+        </IconButton>
+      </Tooltip>
+    )
   };
 
   if (allData.length < 1 && !isLoading) {
@@ -154,7 +181,7 @@ const CaseCollection = (props: { refresh: boolean }) => {
                           <TableCell align="right">{row.status}</TableCell>
                           <TableCell align="right">{row.dispenseStatus}</TableCell>
                           <TableCell align="right">{row.auth_number}</TableCell>
-                          <TableCell align="right">{metReq}</TableCell>
+                          <TableCell align="center">{metReq}</TableCell>
                           <TableCell align="right">
                             <IconButton
                               aria-label="delete"
@@ -172,6 +199,7 @@ const CaseCollection = (props: { refresh: boolean }) => {
             </CardContent>
           </Card>
         </Card>
+        <FormPopup open={open} handleClose={handleClose} data={rowData} />
       </Card>
     );
   }

frontend/src/views/FormPopup.tsx

@@ -0,0 +1,82 @@
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import {
+    Box,
+    Button,
+    IconButton,
+    List,
+    ListItem,
+    ListItemIcon,
+    ListItemText
+  } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import CheckCircle from '@mui/icons-material/CheckCircle';
+import Close from '@mui/icons-material/Close';
+
+const FormPopup = (props: { open: any; handleClose: any; data: any; }) => {
+    const { open, handleClose, data } = props;
+
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            fullWidth={true}
+            maxWidth='sm'
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+        >
+            <DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
+            REMS Status
+            </DialogTitle>
+            <IconButton
+                aria-label="close"
+                onClick={handleClose}
+                sx={() => ({
+                    position: 'absolute',
+                    right: 8,
+                    top: 8,
+                    color: 'grey',
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
+            <DialogContent style={{paddingTop: '15px', borderBottom: '1px solid #F1F3F4'}}>
+            <Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
+                <List>
+                  {data?.metRequirements?.map((metRequirements: any) => {
+                        return (
+                            <ListItem
+                            disablePadding
+                            key={metRequirements.requirementName}
+                            data-testid="etasu-item"
+                            >
+                            <ListItemIcon>
+                                {metRequirements.completed ? (
+                                <CheckCircle color="success" />
+                                ) : (
+                                <Close color="warning" />
+                                )}
+                            </ListItemIcon>
+                            {metRequirements.completed ? (
+                                <ListItemText primary={metRequirements.requirementName} />
+                            ) : (
+                                <ListItemText
+                                primary={metRequirements.requirementName}
+                                />
+                            )}
+                            </ListItem>
+                        );
+                  })}
+                </List>
+            </Box>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose} variant='outlined' sx={{borderColor: '#2F6A47', color: '#2F6A47'}}>Ok</Button>
+            </DialogActions>
+      </Dialog>
+    )
+};
+
+export default FormPopup;