From 5b8f4c37a78092b2d6ffbf070f17d8d088be0f74 Mon Sep 17 00:00:00 2001 From: Alejandro-Vega Date: Fri, 24 Nov 2023 11:52:13 -0500 Subject: [PATCH 1/8] Created ErrorDialog for validation results --- src/content/dataSubmissions/ErrorDialog.tsx | 158 ++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 src/content/dataSubmissions/ErrorDialog.tsx diff --git a/src/content/dataSubmissions/ErrorDialog.tsx b/src/content/dataSubmissions/ErrorDialog.tsx new file mode 100644 index 00000000..5b53e080 --- /dev/null +++ b/src/content/dataSubmissions/ErrorDialog.tsx @@ -0,0 +1,158 @@ +import { Button, Dialog, DialogProps, IconButton, Stack, Typography, styled } from "@mui/material"; +import { ReactComponent as CloseIconSvg } from "../../assets/icons/close_icon.svg"; +import { FormatDate } from "../../utils"; + +const StyledDialog = styled(Dialog)({ + "& .MuiDialog-paper": { + maxWidth: "none", + width: "731px !important", + padding: "38px 42px 68px", + borderRadius: "8px", + border: "2px solid #E25C22", + background: "linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B", + boxShadow: "0px 4px 45px 0px rgba(0, 0, 0, 0.40)", + }, +}); + +const StyledCloseDialogButton = styled(IconButton)(() => ({ + position: 'absolute', + right: "21px", + top: "11px", + padding: "10px", + "& svg": { + color: "#44627C" + } +})); + +const StyledCloseButton = styled(Button)({ + display: "flex", + width: "128px", + height: "42px", + padding: "12px 60px", + justifyContent: "center", + alignItems: "center", + borderRadius: "8px", + border: "1px solid #000", + color: "#000", + textAlign: "center", + fontFamily: "'Nunito', 'Rubik', sans-serif", + fontSize: "16px", + fontStyle: "normal", + fontWeight: "700", + lineHeight: "24px", + letterSpacing: "0.32px", + textTransform: "none", + alignSelf: "center", + marginTop: "45px", + "&:hover": { + background: "transparent", + border: "1px solid #000", + } +}); + +const StyledHeader = styled(Typography)({ + color: "#929292", + fontFamily: "'Nunito Sans', 'Rubik', sans-serif", + fontSize: "13px", + fontStyle: "normal", + fontWeight: "400", + lineHeight: "27px", + letterSpacing: "0.5px", + textTransform: "uppercase", + marginBottom: "2px" +}); + +const StyledTitle = styled(Typography)({ + color: "#E25C22", + fontFamily: "'Nunito Sans', 'Rubik', sans-serif", + fontSize: "35px", + fontStyle: "normal", + fontWeight: "900", + lineHeight: "30px", + marginBottom: "60px" +}); + +const StyledSubtitle = styled(Typography)({ + color: "#453D3D", + fontFamily: "'Public Sans', sans-serif", + fontSize: "14px", + fontStyle: "normal", + fontWeight: 700, + lineHeight: "20px", + letterSpacing: "0.14px", + textTransform: "uppercase", +}); + +const StyledErrorItem = styled(Typography)({ + color: "#131313", + fontFamily: "'Public Sans', sans-serif", + fontSize: "16px", + fontStyle: "normal", + fontWeight: 400, + lineHeight: "22px", +}); + +const StyledErrorDetails = styled(Stack)({ + padding: "10px", +}); + +type ErrorMessage = { // TODO: REMOVE + title: string; + description: string; +}; + +type Props = { + header?: string; + title?: string; + errors: ErrorMessage[]; + uploadedDate: string; + onClose?: () => void; +} & Omit; + +const ErrorDialog = ({ + header, + title, + errors, + uploadedDate, + onClose, + open, + ...rest +}: Props) => { + const handleCloseDialog = () => { + if (typeof onClose === "function") { + onClose(); + } + }; + + return ( + + + + + + Data Submission + + + Error Count + + + + {`${errors?.length || 0} COUNTS ON ${FormatDate(uploadedDate, "M/D/YYYY", "N/A")}:`} + + + {errors?.map((error: ErrorMessage, idx: number) => ( + // eslint-disable-next-line react/no-array-index-key + + {`${idx + 1}. ${error.description}`} + + ))} + + + + Close + + + ); +}; + +export default ErrorDialog; From f411f3f3863d5e71298589f9465edea680999bfa Mon Sep 17 00:00:00 2001 From: Alejandro-Vega Date: Fri, 24 Nov 2023 13:10:01 -0500 Subject: [PATCH 2/8] Created QCResultsContext to make callback functions available to columns --- src/content/dataSubmissions/Contexts/QCResultsContext.tsx | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/content/dataSubmissions/Contexts/QCResultsContext.tsx diff --git a/src/content/dataSubmissions/Contexts/QCResultsContext.tsx b/src/content/dataSubmissions/Contexts/QCResultsContext.tsx new file mode 100644 index 00000000..c442524b --- /dev/null +++ b/src/content/dataSubmissions/Contexts/QCResultsContext.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const QCResultsContext = React.createContext<{ + handleOpenErrorDialog?:(id: string) => void; +}>({}); + +export default QCResultsContext; From 964e993d54f96ee62d7a1b85528f4da25d7ab06b Mon Sep 17 00:00:00 2001 From: Alejandro-Vega Date: Fri, 24 Nov 2023 13:10:52 -0500 Subject: [PATCH 3/8] Added call to ErrorDialog and added context to table --- .../dataSubmissions/QualityControl.tsx | 146 ++++++++++-------- 1 file changed, 85 insertions(+), 61 deletions(-) diff --git a/src/content/dataSubmissions/QualityControl.tsx b/src/content/dataSubmissions/QualityControl.tsx index 468e4c0a..0c9dfc50 100644 --- a/src/content/dataSubmissions/QualityControl.tsx +++ b/src/content/dataSubmissions/QualityControl.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from "react"; +import { useMemo, useRef, useState } from "react"; import { useLazyQuery } from "@apollo/client"; import { useParams } from "react-router-dom"; import { isEqual } from "lodash"; @@ -6,6 +6,8 @@ import { Box, Button, styled } from "@mui/material"; import { SUBMISSION_QC_RESULTS, submissionQCResultsResp } from "../../graphql"; import GenericTable, { Column, FetchListing, TableMethods } from "../../components/DataSubmissions/GenericTable"; import { FormatDate } from "../../utils"; +import ErrorDialog from "./ErrorDialog"; +import QCResultsContext from "./Contexts/QCResultsContext"; const StyledErrorDetailsButton = styled(Button)({ display: "inline", @@ -87,6 +89,60 @@ const testData: QCResults[] = [ }, ]; +const columns: Column[] = [ + { + label: "Type", + renderValue: (data) => data?.nodeType, + field: "nodeType", + }, + { + label: "Batch ID", + renderValue: (data) => data?.batchID, + field: "batchID", + }, + { + label: "Node ID", + renderValue: (data) => data?.nodeID, + field: "nodeID", + }, + { + label: "CRDC ID", + renderValue: (data) => data?.CRDC_ID, + field: "CRDC_ID", + }, + { + label: "Severity", + renderValue: (data) => {data?.severity}, + field: "severity", + }, + { + label: "Submitted Date", + renderValue: (data) => (data?.uploadedDate ? `${FormatDate(data.uploadedDate, "MM-DD-YYYY [at] hh:mm A")}` : ""), + field: "uploadedDate", + default: true + }, + { + label: "Description", + renderValue: (data) => data?.description?.length > 0 && ( + + {({ handleOpenErrorDialog }) => ( + <> + {data.description[0].title} + {" "} + handleOpenErrorDialog && handleOpenErrorDialog(data?._id)} + variant="text" + > + See details + + + )} + + ), + field: "description", + }, +]; + const QualityControl = () => { const { submissionId } = useParams(); @@ -96,7 +152,10 @@ const QualityControl = () => { const [data, setData] = useState(testData); const [prevData, setPrevData] = useState>(null); const [totalData, setTotalData] = useState(testData.length); + const [openErrorDialog, setOpenErrorDialog] = useState(false); + const [selectedRow, setSelectedRow] = useState(null); const tableRef = useRef(null); + const selectedData = data?.find((item) => item._id === selectedRow); const [submissionQCResults] = useLazyQuery(SUBMISSION_QC_RESULTS, { variables: { id: submissionId }, @@ -142,70 +201,35 @@ const QualityControl = () => { } }; - const columns: Column[] = [ - { - label: "Type", - renderValue: (data) => data?.nodeType, - field: "nodeType", - }, - { - label: "Batch ID", - renderValue: (data) => data?.batchID, - field: "batchID", - }, - { - label: "Node ID", - renderValue: (data) => data?.nodeID, - field: "nodeID", - }, - { - label: "CRDC ID", - renderValue: (data) => data?.CRDC_ID, - field: "CRDC_ID", - }, - { - label: "Severity", - renderValue: (data) => {data?.severity}, - field: "severity", - }, - { - label: "Submitted Date", - renderValue: (data) => (data?.uploadedDate ? `${FormatDate(data.uploadedDate, "MM-DD-YYYY [at] hh:mm A")}` : ""), - field: "uploadedDate", - default: true - }, - { - label: "Description", - renderValue: (data) => data?.description?.length > 0 && ( - <> - {data?.description[0].title} - {" "} - {}} - variant="text" - disableRipple - disableTouchRipple - disableFocusRipple - > - See details - - - ), - field: "description", - }, - ]; + const handleOpenErrorDialog = (id: string) => { + setOpenErrorDialog(true); + setSelectedRow(id); + }; + + const providerValue = useMemo(() => ({ + handleOpenErrorDialog + }), [handleOpenErrorDialog]); return ( <> - + + + setOpenErrorDialog(false)} + header="Data Submission" + title="Error Count" + errors={selectedData?.description} + uploadedDate={selectedData?.uploadedDate} /> - {/* Error Dialog */} ); }; From fe1fa4a7ee0e379b473f1eecb515673e80f4cf1c Mon Sep 17 00:00:00 2001 From: Alejandro-Vega Date: Wed, 29 Nov 2023 13:19:12 -0500 Subject: [PATCH 4/8] Added props to ErrorDialog and removed unecessary type --- src/content/dataSubmissions/ErrorDialog.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/content/dataSubmissions/ErrorDialog.tsx b/src/content/dataSubmissions/ErrorDialog.tsx index 5b53e080..9b76a8f2 100644 --- a/src/content/dataSubmissions/ErrorDialog.tsx +++ b/src/content/dataSubmissions/ErrorDialog.tsx @@ -96,14 +96,10 @@ const StyledErrorDetails = styled(Stack)({ padding: "10px", }); -type ErrorMessage = { // TODO: REMOVE - title: string; - description: string; -}; - type Props = { header?: string; title?: string; + closeText?: string; errors: ErrorMessage[]; uploadedDate: string; onClose?: () => void; @@ -112,6 +108,7 @@ type Props = { const ErrorDialog = ({ header, title, + closeText = "Close", errors, uploadedDate, onClose, @@ -130,10 +127,10 @@ const ErrorDialog = ({ - Data Submission + {header} - Error Count + {title} @@ -148,8 +145,8 @@ const ErrorDialog = ({ ))} - - Close + + {closeText} ); From 3ad9631279b4be5059364dc9328c194913c50f68 Mon Sep 17 00:00:00 2001 From: Alejandro-Vega Date: Mon, 4 Dec 2023 16:39:58 -0500 Subject: [PATCH 5/8] Wording updates to QC and error dialog --- src/content/dataSubmissions/ErrorDialog.tsx | 2 +- .../dataSubmissions/QualityControl.tsx | 25 +++++++++++-------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/content/dataSubmissions/ErrorDialog.tsx b/src/content/dataSubmissions/ErrorDialog.tsx index 9b76a8f2..7132705f 100644 --- a/src/content/dataSubmissions/ErrorDialog.tsx +++ b/src/content/dataSubmissions/ErrorDialog.tsx @@ -134,7 +134,7 @@ const ErrorDialog = ({ - {`${errors?.length || 0} COUNTS ON ${FormatDate(uploadedDate, "M/D/YYYY", "N/A")}:`} + {`${errors?.length || 0} ${errors?.length === 1 ? "COUNT" : "COUNTS"} ON ${FormatDate(uploadedDate, "M/D/YYYY", "N/A")}:`} {errors?.map((error: ErrorMessage, idx: number) => ( diff --git a/src/content/dataSubmissions/QualityControl.tsx b/src/content/dataSubmissions/QualityControl.tsx index 0c9dfc50..85c7949d 100644 --- a/src/content/dataSubmissions/QualityControl.tsx +++ b/src/content/dataSubmissions/QualityControl.tsx @@ -16,7 +16,7 @@ const StyledErrorDetailsButton = styled(Button)({ fontSize: "16px", fontStyle: "normal", fontWeight: 600, - lineHeight: "19.6px", + lineHeight: "19px", padding: 0, textDecorationLine: "underline", textTransform: "none", @@ -32,8 +32,8 @@ const testData: QCResults[] = [ submissionID: "c4366aab-8adf-41e9-9432-864b2101231d", nodeType: "Participant", batchID: "123a5678-8adf-41e9-9432-864b2108191d", - nodeID: "123a5678-8adf-41e9-9432-864b2108191d", - CRDC_ID: "123a5678-8adf-41e9-9432-864b2108191d", + nodeID: "103a5678-8adf-41e9-9432-864b2108191d", + CRDC_ID: "113a5678-8adf-41e9-9432-864b2108191d", severity: "Error", description: [ { @@ -55,9 +55,9 @@ const testData: QCResults[] = [ _id: "2", submissionID: "c4366aab-8adf-41e9-9432-864b2101231d", nodeType: "Participant", - batchID: "123a5678-8adf-41e9-9432-864b2108191d", - nodeID: "123a5678-8adf-41e9-9432-864b2108191d", - CRDC_ID: "123a5678-8adf-41e9-9432-864b2108191d", + batchID: "456a5678-8adf-41e9-9432-864b2108191d", + nodeID: "406a5678-8adf-41e9-9432-864b2108191d", + CRDC_ID: "416a5678-8adf-41e9-9432-864b2108191d", severity: "Error", description: [ { @@ -71,9 +71,9 @@ const testData: QCResults[] = [ _id: "3", submissionID: "c4366aab-8adf-41e9-9432-864b2101231d", nodeType: "Participant", - batchID: "123a5678-8adf-41e9-9432-864b2108191d", - nodeID: "123a5678-8adf-41e9-9432-864b2108191d", - CRDC_ID: "123a5678-8adf-41e9-9432-864b2108191d", + batchID: "789a5678-8adf-41e9-9432-864b2108191d", + nodeID: "709a5678-8adf-41e9-9432-864b2108191d", + CRDC_ID: "719a5678-8adf-41e9-9432-864b2108191d", severity: "Error", description: [ { @@ -122,7 +122,7 @@ const columns: Column[] = [ default: true }, { - label: "Description", + label: "Reasons", renderValue: (data) => data?.description?.length > 0 && ( {({ handleOpenErrorDialog }) => ( @@ -132,6 +132,9 @@ const columns: Column[] = [ handleOpenErrorDialog && handleOpenErrorDialog(data?._id)} variant="text" + disableRipple + disableTouchRipple + disableFocusRipple > See details @@ -226,7 +229,7 @@ const QualityControl = () => { open={openErrorDialog} onClose={() => setOpenErrorDialog(false)} header="Data Submission" - title="Error Count" + title="Reasons" errors={selectedData?.description} uploadedDate={selectedData?.uploadedDate} /> From d405e592a9c6a443e40f8bca0f7b76e8e4787a19 Mon Sep 17 00:00:00 2001 From: Alejandro-Vega Date: Mon, 11 Dec 2023 12:55:18 -0500 Subject: [PATCH 6/8] Updated submissionQCResults query and types --- .../Contexts/QCResultsContext.tsx | 2 +- src/graphql/submissionQCResults.ts | 23 +++++++++++-------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/content/dataSubmissions/Contexts/QCResultsContext.tsx b/src/content/dataSubmissions/Contexts/QCResultsContext.tsx index c442524b..ef82cf65 100644 --- a/src/content/dataSubmissions/Contexts/QCResultsContext.tsx +++ b/src/content/dataSubmissions/Contexts/QCResultsContext.tsx @@ -1,7 +1,7 @@ import React from 'react'; const QCResultsContext = React.createContext<{ - handleOpenErrorDialog?:(id: string) => void; + handleOpenErrorDialog?:(data: QCResult) => void; }>({}); export default QCResultsContext; diff --git a/src/graphql/submissionQCResults.ts b/src/graphql/submissionQCResults.ts index 3b84cc86..3a021f81 100644 --- a/src/graphql/submissionQCResults.ts +++ b/src/graphql/submissionQCResults.ts @@ -15,16 +15,19 @@ export const query = gql` orderBy: $orderBy sortDirection: $sortDirection ) { - submissionID - nodeType - batchID - nodeID - CRDC_ID - severity - uploadedDate - description { - title - description + total + results { + submissionID + nodeType + batchID + nodeID + CRDC_ID + severity + uploadedDate + description { + title + description + } } } } From 03447b4cf894b08359ed4a8eb46c59e71bc619c7 Mon Sep 17 00:00:00 2001 From: Alejandro-Vega Date: Mon, 11 Dec 2023 12:56:12 -0500 Subject: [PATCH 7/8] Removed test data and replaced with real data --- .../DataSubmissions/GenericTable.tsx | 12 ++- .../dataSubmissions/DataSubmission.tsx | 4 +- .../dataSubmissions/QualityControl.tsx | 99 +++++-------------- 3 files changed, 38 insertions(+), 77 deletions(-) diff --git a/src/components/DataSubmissions/GenericTable.tsx b/src/components/DataSubmissions/GenericTable.tsx index ad2998cd..0d3fd8f3 100644 --- a/src/components/DataSubmissions/GenericTable.tsx +++ b/src/components/DataSubmissions/GenericTable.tsx @@ -3,6 +3,7 @@ import { Table, TableBody, TableCell, + TableCellProps, TableContainer, TableHead, TablePagination, @@ -118,7 +119,8 @@ export type Column = { renderValue: (a: T, user: User) => string | boolean | number | React.ReactNode; field?: keyof T; default?: true; - minWidth?: string; + sortDisabled?: boolean; + sx?: TableCellProps["sx"]; }; export type FetchListing = { @@ -138,6 +140,7 @@ type Props = { total: number; loading?: boolean; noContentText?: string; + defaultRowsPerPage?: number; setItemKey?: (item: T, index: number) => string; onFetchData?: (params: FetchListing, force: boolean) => void; onOrderChange?: (order: Order) => void; @@ -151,6 +154,7 @@ const DataSubmissionBatchTable = ({ total = 0, loading, noContentText, + defaultRowsPerPage = 10, setItemKey, onFetchData, onOrderChange, @@ -163,7 +167,7 @@ const DataSubmissionBatchTable = ({ columns.find((c) => c.default) || columns.find((c) => c.field) ); const [page, setPage] = useState(0); - const [perPage, setPerPage] = useState(10); + const [perPage, setPerPage] = useState(defaultRowsPerPage); useEffect(() => { fetchData(); @@ -221,8 +225,8 @@ const DataSubmissionBatchTable = ({ {columns.map((col: Column) => ( - - {col.field ? ( + + {col.field && !col.sortDisabled ? ( [] = [ renderValue: (data) => (data?.createdAt ? `${FormatDate(data.createdAt, "MM-DD-YYYY [at] hh:mm A")}` : ""), field: "createdAt", default: true, - minWidth: "240px" + sx: { + minWidth: "240px" + } }, /* TODO: Error Count removed for MVP2-M2. Will be re-added in the future */ ]; diff --git a/src/content/dataSubmissions/QualityControl.tsx b/src/content/dataSubmissions/QualityControl.tsx index 5392f6d1..e2facafd 100644 --- a/src/content/dataSubmissions/QualityControl.tsx +++ b/src/content/dataSubmissions/QualityControl.tsx @@ -26,70 +26,21 @@ const StyledErrorDetailsButton = styled(Button)({ }, }); -const testData: QCResult[] = [ - { - submissionID: "c4366aab-8adf-41e9-9432-864b2101231d", - nodeType: "Participant", - batchID: "123a5678-8adf-41e9-9432-864b2108191d", - nodeID: "103a5678-8adf-41e9-9432-864b2108191d", - CRDC_ID: "113a5678-8adf-41e9-9432-864b2108191d", - severity: "Error", - description: [ - { - title: "Incorrect control vocabulary.", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget duis at tellus at urna condimentum mattis. Eget nunc scelerisque viverra mauris in aliquam sem.", - }, - { - title: "Missing required field.", - description: "Elit eget gravida cum sociis natoque. Risus quis varius quam quisque id diam vel quam. Senectus et netus et malesuada fames ac turpis egestas. Scelerisque eu ultrices vitae auctor eu augue ut.", - }, - { - title: "Value not in the range.", - description: "Consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Nec ullamcorper sit amet risus. Faucibus in ornare quam viverra orci sagittis. Venenatis urna cursus eget nunc.", - }, - ], - uploadedDate: "2023-11-08T19:39:15.469Z", - }, - { - submissionID: "c4366aab-8adf-41e9-9432-864b2101231d", - nodeType: "Participant", - batchID: "456a5678-8adf-41e9-9432-864b2108191d", - nodeID: "406a5678-8adf-41e9-9432-864b2108191d", - CRDC_ID: "416a5678-8adf-41e9-9432-864b2108191d", - severity: "Error", - description: [ - { - title: "Missing required field.", - description: "Elit eget gravida cum sociis natoque. Risus quis varius quam quisque id diam vel quam. Senectus et netus et malesuada fames ac turpis egestas. Scelerisque eu ultrices vitae auctor eu augue ut.", - }, - ], - uploadedDate: "2023-11-08T19:39:15.469Z", - }, - { - submissionID: "c4366aab-8adf-41e9-9432-864b2101231d", - nodeType: "Participant", - batchID: "789a5678-8adf-41e9-9432-864b2108191d", - nodeID: "709a5678-8adf-41e9-9432-864b2108191d", - CRDC_ID: "719a5678-8adf-41e9-9432-864b2108191d", - severity: "Error", - description: [ - { - title: "Value not in the range.", - description: "Consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Nec ullamcorper sit amet risus. Faucibus in ornare quam viverra orci sagittis. Venenatis urna cursus eget nunc.", - }, - { - title: "Incorrect control vocabulary.", - description: "Elit eget gravida cum sociis natoque. Risus quis varius quam quisque id diam vel quam. Senectus et netus et malesuada fames ac turpis egestas. Scelerisque eu ultrices vitae auctor eu augue ut.", - }, - ], - uploadedDate: "2023-11-08T19:39:15.469Z", - }, -]; +const StyledNodeType = styled(Box)({ + display: "flex", + alignItems: "center", +}); + +const StyledSeverity = styled(Box)({ + minHeight: 76.5, + display: "flex", + alignItems: "center", +}); const columns: Column[] = [ { label: "Type", - renderValue: (data) => data?.nodeType, + renderValue: (data) => {data?.nodeType}, field: "nodeType", }, { @@ -109,11 +60,11 @@ const columns: Column[] = [ }, { label: "Severity", - renderValue: (data) => {data?.severity}, + renderValue: (data) => {data?.severity}, field: "severity", }, { - label: "Submitted Date", + label: "Uploaded Date", renderValue: (data) => (data?.uploadedDate ? `${FormatDate(data.uploadedDate, "MM-DD-YYYY [at] hh:mm A")}` : ""), field: "uploadedDate", default: true @@ -124,10 +75,10 @@ const columns: Column[] = [ {({ handleOpenErrorDialog }) => ( <> - {data.description[0].title} + {data.description[0]?.title} {" "} {} /* handleOpenErrorDialog && handleOpenErrorDialog(data?.nodeID) */} + onClick={() => handleOpenErrorDialog && handleOpenErrorDialog(data)} variant="text" disableRipple disableTouchRipple @@ -140,6 +91,10 @@ const columns: Column[] = [ ), field: "description", + sortDisabled: true, + sx: { + minWidth: "260px", + } }, ]; @@ -149,13 +104,12 @@ const QualityControl = () => { const [loading, setLoading] = useState(false); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [error, setError] = useState(null); - const [data, setData] = useState(testData); + const [data, setData] = useState([]); const [prevData, setPrevData] = useState>(null); - const [totalData, setTotalData] = useState(testData.length); + const [totalData, setTotalData] = useState(0); const [openErrorDialog, setOpenErrorDialog] = useState(false); - const [selectedRow, setSelectedRow] = useState(null); + const [selectedRow, setSelectedRow] = useState(null); const tableRef = useRef(null); - const selectedData = null; // data?.find((item) => item._id === selectedRow); const [submissionQCResults] = useLazyQuery(SUBMISSION_QC_RESULTS, { variables: { id: submissionId }, @@ -201,9 +155,9 @@ const QualityControl = () => { } }; - const handleOpenErrorDialog = (id: string) => { + const handleOpenErrorDialog = (data: QCResult) => { setOpenErrorDialog(true); - setSelectedRow(id); + setSelectedRow(data); }; const providerValue = useMemo(() => ({ @@ -219,6 +173,7 @@ const QualityControl = () => { data={data || []} total={totalData || 0} loading={loading} + defaultRowsPerPage={20} setItemKey={(item, idx) => `${idx}_${item.batchID}_${item.nodeID}`} onFetchData={handleFetchQCResults} /> @@ -228,8 +183,8 @@ const QualityControl = () => { onClose={() => setOpenErrorDialog(false)} header="Data Submission" title="Reasons" - errors={selectedData?.description} - uploadedDate={selectedData?.uploadedDate} + errors={selectedRow?.description} + uploadedDate={selectedRow?.uploadedDate} /> ); From 64e789da164be50e172e7b7cda6de316c3b512bb Mon Sep 17 00:00:00 2001 From: Alejandro-Vega Date: Mon, 11 Dec 2023 14:25:02 -0500 Subject: [PATCH 8/8] Removed duplicate styling --- src/content/dataSubmissions/QualityControl.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/dataSubmissions/QualityControl.tsx b/src/content/dataSubmissions/QualityControl.tsx index e2facafd..ed865662 100644 --- a/src/content/dataSubmissions/QualityControl.tsx +++ b/src/content/dataSubmissions/QualityControl.tsx @@ -29,6 +29,7 @@ const StyledErrorDetailsButton = styled(Button)({ const StyledNodeType = styled(Box)({ display: "flex", alignItems: "center", + textTransform: "capitalize" }); const StyledSeverity = styled(Box)({ @@ -40,7 +41,7 @@ const StyledSeverity = styled(Box)({ const columns: Column[] = [ { label: "Type", - renderValue: (data) => {data?.nodeType}, + renderValue: (data) => {data?.nodeType}, field: "nodeType", }, {