diff --git a/src/content/dataSubmissions/Contexts/BatchTableContext.tsx b/src/content/dataSubmissions/Contexts/BatchTableContext.tsx new file mode 100644 index 00000000..4aa65c09 --- /dev/null +++ b/src/content/dataSubmissions/Contexts/BatchTableContext.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const BatchTableContext = React.createContext<{ + handleOpenErrorDialog?:(data: Batch) => void; +}>({}); + +export default BatchTableContext; diff --git a/src/content/dataSubmissions/Contexts/QCResultsContext.tsx b/src/content/dataSubmissions/Contexts/QCResultsContext.tsx index ef82cf65..fd07d42e 100644 --- a/src/content/dataSubmissions/Contexts/QCResultsContext.tsx +++ b/src/content/dataSubmissions/Contexts/QCResultsContext.tsx @@ -1,7 +1,7 @@ -import React from 'react'; +import React from "react"; const QCResultsContext = React.createContext<{ - handleOpenErrorDialog?:(data: QCResult) => void; + handleOpenErrorDialog?:(data: QCResult) => void; }>({}); export default QCResultsContext; diff --git a/src/content/dataSubmissions/DataSubmission.tsx b/src/content/dataSubmissions/DataSubmission.tsx index 5bec53a7..cd7aacee 100644 --- a/src/content/dataSubmissions/DataSubmission.tsx +++ b/src/content/dataSubmissions/DataSubmission.tsx @@ -5,6 +5,7 @@ import { Alert, AlertColor, Box, + Button, Card, CardActions, CardActionsProps, @@ -37,6 +38,8 @@ import { FormatDate } from "../../utils"; import DataSubmissionActions from "./DataSubmissionActions"; import QualityControl from "./QualityControl"; import { ReactComponent as CopyIconSvg } from "../../assets/icons/copy_icon_2.svg"; +import ErrorDialog from "./ErrorDialog"; +import BatchTableContext from "./Contexts/BatchTableContext"; import DataSubmissionStatistics from '../../components/DataSubmissions/ValidationStatistics'; import ValidationControls from '../../components/DataSubmissions/ValidationControls'; import { useAuthContext } from "../../components/Contexts/AuthContext"; @@ -203,6 +206,23 @@ const StyledCopyIDButton = styled(IconButton)(() => ({ } })); +const StyledErrorDetailsButton = styled(Button)(() => ({ + color: "#0D78C5", + fontFamily: "Inter", + fontSize: "16px", + fontStyle: "normal", + fontWeight: 600, + lineHeight: "19px", + textDecorationLine: "underline", + textTransform: "none", + padding: 0, + justifyContent: "flex-start", + "&:hover": { + background: "transparent", + textDecorationLine: "underline", + }, +})); + const columns: Column[] = [ { label: "Upload Type", @@ -233,7 +253,32 @@ const columns: Column[] = [ minWidth: "240px" } }, - /* TODO: Error Count removed for MVP2-M2. Will be re-added in the future */ + { + label: "Errors", + renderValue: (data) => ( + + {({ handleOpenErrorDialog }) => { + if (data?.errors?.length === 0) { + return null; + } + + return ( + handleOpenErrorDialog && handleOpenErrorDialog(data)} + variant="text" + disableRipple + disableTouchRipple + disableFocusRipple + > + {data.errors?.length > 0 ? `${data.errors.length} ${data.errors.length === 1 ? "Error" : "Errors"}` : ""} + + ); + }} + + ), + field: "errors", + sortDisabled: true + }, ]; const URLTabs = { @@ -254,6 +299,8 @@ const DataSubmission = () => { const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [changesAlert, setChangesAlert] = useState(null); + const [openErrorDialog, setOpenErrorDialog] = useState(false); + const [selectedRow, setSelectedRow] = useState(null); const tableRef = useRef(null); const isValidTab = tab && Object.values(URLTabs).includes(tab); const disableSubmit = useMemo( @@ -385,6 +432,15 @@ const DataSubmission = () => { navigator.clipboard.writeText(submissionId); }; + const handleOpenErrorDialog = (data: Batch) => { + setOpenErrorDialog(true); + setSelectedRow(data); + }; + + const providerValue = useMemo(() => ({ + handleOpenErrorDialog + }), [handleOpenErrorDialog]); + return ( @@ -432,7 +488,7 @@ const DataSubmission = () => { {tab === URLTabs.DATA_UPLOAD ? ( - <> + { data={batchFiles || []} total={totalBatchFiles || 0} loading={loading} + defaultRowsPerPage={20} onFetchData={handleFetchBatchFiles} /> - + ) : } @@ -459,6 +516,14 @@ const DataSubmission = () => { + setOpenErrorDialog(false)} + header="Data Submission" + title="Error Count" + errors={selectedRow?.errors} + uploadedDate={dataSubmission?.createdAt} + /> ); }; diff --git a/src/content/dataSubmissions/ErrorDialog.tsx b/src/content/dataSubmissions/ErrorDialog.tsx index 7132705f..e0bdebfe 100644 --- a/src/content/dataSubmissions/ErrorDialog.tsx +++ b/src/content/dataSubmissions/ErrorDialog.tsx @@ -94,13 +94,15 @@ const StyledErrorItem = styled(Typography)({ const StyledErrorDetails = styled(Stack)({ padding: "10px", + overflowY: "auto", + maxHeight: "290px" }); type Props = { header?: string; title?: string; closeText?: string; - errors: ErrorMessage[]; + errors: string[]; uploadedDate: string; onClose?: () => void; } & Omit; @@ -137,10 +139,10 @@ const ErrorDialog = ({ {`${errors?.length || 0} ${errors?.length === 1 ? "COUNT" : "COUNTS"} ON ${FormatDate(uploadedDate, "M/D/YYYY", "N/A")}:`} - {errors?.map((error: ErrorMessage, idx: number) => ( + {errors?.map((error: string, idx: number) => ( // eslint-disable-next-line react/no-array-index-key - - {`${idx + 1}. ${error.description}`} + + {`${idx + 1}. ${error}`} ))} diff --git a/src/content/dataSubmissions/QualityControl.tsx b/src/content/dataSubmissions/QualityControl.tsx index ed865662..1b389964 100644 --- a/src/content/dataSubmissions/QualityControl.tsx +++ b/src/content/dataSubmissions/QualityControl.tsx @@ -184,7 +184,7 @@ const QualityControl = () => { onClose={() => setOpenErrorDialog(false)} header="Data Submission" title="Reasons" - errors={selectedRow?.description} + errors={selectedRow?.description?.map((error) => error.description)} uploadedDate={selectedRow?.uploadedDate} />