diff --git a/frontend/src/views/DataViews/CaseCollection.tsx b/frontend/src/views/DataViews/CaseCollection.tsx index 865c6b4..96bdd42 100644 --- a/frontend/src/views/DataViews/CaseCollection.tsx +++ b/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([]); 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 ( + + openForms(event, row)}> + + + + ) }; if (allData.length < 1 && !isLoading) { @@ -154,7 +181,7 @@ const CaseCollection = (props: { refresh: boolean }) => { {row.status} {row.dispenseStatus} {row.auth_number} - {metReq} + {metReq} { + ); } diff --git a/frontend/src/views/FormPopup.tsx b/frontend/src/views/FormPopup.tsx new file mode 100644 index 0000000..817b61c --- /dev/null +++ b/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 ( + + + REMS Status + + ({ + position: 'absolute', + right: 8, + top: 8, + color: 'grey', + })} + > + + + + + + {data?.metRequirements?.map((metRequirements: any) => { + return ( + + + {metRequirements.completed ? ( + + ) : ( + + )} + + {metRequirements.completed ? ( + + ) : ( + + )} + + ); + })} + + + + + + + + ) +}; + +export default FormPopup; \ No newline at end of file