-
+
+
+
+
+
- {uploadFiles.length > 0 && (
+ {(uploadFiles.length > 0 || failedFiles.length > 0) && (
@@ -61,7 +92,12 @@ const FileDropArea = (props) => {
Size
- {uploadFiles.map((file) => FormRow(file))}
+ {failedFiles.map((failed, index) => {
+ return failed.map((file) => {
+ return FormRow(file, false);
+ });
+ })}
+ {uploadFiles.map((file) => FormRow(file, true))}
)}
diff --git a/frontend/src/uploads/components/FileRequirements.js b/frontend/src/uploads/components/FileRequirements.js
new file mode 100644
index 00000000..aa8e0834
--- /dev/null
+++ b/frontend/src/uploads/components/FileRequirements.js
@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from "react";
+import useAxios from "../../app/utilities/useAxios";
+import ROUTES_UPLOAD from "../routes";
+
+const FileRequirements = ({ datasetSelected }) => {
+ const axios = useAxios();
+ const [requirements, setRequirements] = useState([]);
+
+ useEffect(() => {
+ if (datasetSelected) {
+ axios
+ .get(
+ ROUTES_UPLOAD.FILE_REQUIREMENTS.replace(":dataset", datasetSelected),
+ )
+ .then((response) => {
+ const list = [];
+ for (const [key, value] of Object.entries(response.data)) {
+ list.push(
{value});
+ }
+ setRequirements(list);
+ })
+ .catch((error) => {
+ //do something here?
+ });
+ }
+ }, [datasetSelected]);
+
+ if (requirements.length > 0) {
+ return (
+
+
File Requirements
+
+ Ensure your file meets the following conditions before uploading:
+
+
+
+ );
+ }
+ return null;
+};
+
+export default FileRequirements;
diff --git a/frontend/src/uploads/components/UploadIssues.js b/frontend/src/uploads/components/UploadIssues.js
new file mode 100644
index 00000000..538a5a2a
--- /dev/null
+++ b/frontend/src/uploads/components/UploadIssues.js
@@ -0,0 +1,185 @@
+import React, { useState } from "react";
+import {
+ Box,
+ Typography,
+ AccordionSummary,
+ AccordionDetails,
+ Accordion,
+ Button,
+} from "@mui/material";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import UploadIssuesDetail from "./UploadIssuesDetail";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+const UploadIssues = ({
+ confirmUpload,
+ groupedCriticalErrors,
+ groupedErrors,
+ groupedWarnings,
+ totalIssueCount,
+ clearErrors,
+ setUploadFiles,
+}) => {
+ const [showAllIssues, setShowAllIssues] = useState(false);
+
+ const toggleShowAllIssues = () => {
+ setShowAllIssues(!showAllIssues);
+ };
+
+ const criticalMsg = "Must fix before file can be processed";
+ const errorMsg = "Must fix before uploading";
+ const warningMsg = "Can upload without fixing";
+ const renderUploadFailed = () => {
+ const missingHeadersError =
+ groupedCriticalErrors?.Headers?.["Missing Headers"];
+ let missingHeadersMsg = "";
+ if (missingHeadersError) {
+ const missingColumns = missingHeadersError.Rows;
+ const columnsText =
+ missingColumns.length === 1
+ ? `column "${missingColumns[0]} is "`
+ : `columns "${missingColumns.join(", ")}" are `;
+
+ missingHeadersMsg = `Your file has been processed and the ${columnsText} not found in the dataset.
+ Please ensure that your dataset matches the provided template, and that all required columns are present.
+ You can download the template for reference. Once corrected, you can upload your file again.`;
+ }
+ const missingWorksheetError =
+ groupedCriticalErrors?.Spreadsheet?.["Missing Worksheet"];
+ let missingWorksheetMsg = "";
+ if (missingWorksheetError) {
+ const sheetName =
+ groupedCriticalErrors.Spreadsheet["Missing Worksheet"].Rows[0];
+ missingWorksheetMsg = missingWorksheetError
+ ? `File Upload Failed - The sheet name doesn't match the required “${sheetName}”.
+ Please rename the sheet to the required “${sheetName}” before the next upload.`
+ : "";
+ }
+ const errorMsg = missingHeadersMsg || missingWorksheetMsg;
+ return (
+
+ {errorMsg}
+
+ );
+ };
+
+ const errorHeading = () => {
+ const missingHeadersError =
+ groupedCriticalErrors?.Headers?.["Missing Headers"]?.ExpectedType;
+ const missingWorksheetError =
+ groupedCriticalErrors?.Spreadsheet?.["Missing Worksheet"]?.ExpectedType;
+ return missingHeadersError || missingWorksheetError;
+ };
+
+ return (
+ <>
+
+
+
+ {totalIssueCount.criticalErrors >= 1
+ ? `File upload failed - ${errorHeading()}`
+ : "Your file upload results"}
+
+ {totalIssueCount.criticalErrors >= 1 && renderUploadFailed()}
+ {totalIssueCount.criticalErrors == 0 && (
+
+ Your file has been processed and contains the following errors and
+ warnings. Please review them below
+
+ )}
+ {totalIssueCount.errors >= 1 && (
+
+
+ {totalIssueCount.errors} Errors
+
+ - {errorMsg}
+
+ )}
+ {totalIssueCount.warnings >= 1 && (
+
+
+ {totalIssueCount.warnings} Warnings
+
+ - {warningMsg}
+
+ )}
+ {totalIssueCount.criticalErrors == 0 && (
+ <>
+
+
+
+ {totalIssueCount.criticalErrors >= 1 && (
+
+ )}
+ {totalIssueCount.errors >= 1 && (
+
+ )}
+ {totalIssueCount.warnings >= 1 && (
+
+ )}
+
+
+
+ )}
+ {totalIssueCount.warnings >= 1 && totalIssueCount.errors === 0 && (
+
+ Do you want to upload the file regardless of the warnings?
+
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default UploadIssues;
diff --git a/frontend/src/uploads/components/UploadIssuesDetail.js b/frontend/src/uploads/components/UploadIssuesDetail.js
new file mode 100644
index 00000000..3471a092
--- /dev/null
+++ b/frontend/src/uploads/components/UploadIssuesDetail.js
@@ -0,0 +1,139 @@
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+import { Box, Button } from "@mui/material";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+const UploadIssuesDetail = ({ type, issues, totalIssueCount, msg }) => {
+ const [showAllRowsMap, setShowAllRowsMap] = useState({}); // State to toggle showing all rows for each issue
+ const errorTypes = ["critical", "error"];
+ const classname = errorTypes.includes(type) ? "error" : "warning";
+
+ const toggleShowAllRows = (column, errorType) => {
+ const key = `${column}_${errorType}`;
+ setShowAllRowsMap((prevState) => ({
+ ...prevState,
+ [key]: !prevState[key],
+ }));
+ };
+
+ const renderWarning = (group) => (
+
+ -
+ Rows: {group.Rows.join(", ")}
+ {Object.keys(group).map((key) => {
+ if (key !== "Rows") {
+ return (
+
+ {" "} {/* spacer */}
+ {Array.isArray(group[key]) ? group[key].join(", ") : group[key]}
+
+ );
+ }
+ return null;
+ })}
+
+
+ );
+
+ const renderError = (errorDetails) => (
+
+ );
+
+ return (
+
+
+
+
+ {totalIssueCount}{" "}
+ {type === "critical"
+ ? "Critical Errors"
+ : type === "error"
+ ? "Errors"
+ : "Warnings"}
+
+
+
+ ({msg})
+ {Object.keys(issues).map((column) => (
+
+ Column: {column}
+ {Object.keys(issues[column]).map((errorType, index) => {
+ const errorDetails = issues[column][errorType];
+ return (
+
+
+
+ -
+ Expected Value:{" "}
+
+ {errorDetails.ExpectedType || errorDetails.ExpectedFormat}
+
+
+
+ {errorDetails.Groups
+ ? errorDetails.Groups.map((group, groupIndex) => (
+
+ {renderWarning(group)}
+ {group.Rows.length > 15 && (
+
+ )}
+
+ ))
+ : renderError(errorDetails)}
+
+ );
+};
+
+UploadIssuesDetail.propTypes = {
+ type: PropTypes.string.isRequired,
+ issues: PropTypes.object.isRequired,
+ totalIssueCount: PropTypes.number.isRequired,
+ msg: PropTypes.string.isRequired,
+};
+
+export default UploadIssuesDetail;
diff --git a/frontend/src/uploads/components/UploadPage.js b/frontend/src/uploads/components/UploadPage.js
index 6228e42b..6dedd1cd 100644
--- a/frontend/src/uploads/components/UploadPage.js
+++ b/frontend/src/uploads/components/UploadPage.js
@@ -11,8 +11,10 @@ import {
FormControl,
} from "@mui/material";
import UploadIcon from "@mui/icons-material/Upload";
+import DownloadIcon from "@mui/icons-material/Download";
import FileDropArea from "./FileDropArea";
import Loading from "../../app/components/Loading";
+import FileRequirements from "./FileRequirements";
const UploadPage = (props) => {
const {
@@ -28,17 +30,29 @@ const UploadPage = (props) => {
downloadSpreadsheet,
setAlert,
loading,
+ totalIssueCount,
+ clearErrors,
+ failedFiles,
} = props;
+
const selectionList = datasetList.map((obj, index) => (
));
+
+ const noIssues = (totalIssueCount) => {
+ return (
+ Object.keys(totalIssueCount).length === 0 &&
+ totalIssueCount.constructor === Object
+ );
+ };
+
return (
<>
Upload Program Data
- {alertElement}
+ {noIssues && alertElement}
Select Program
@@ -54,8 +68,15 @@ const UploadPage = (props) => {
{selectionList}
{datasetSelected && (
-
@@ -85,12 +106,18 @@ const UploadPage = (props) => {