From 03447b4cf894b08359ed4a8eb46c59e71bc619c7 Mon Sep 17 00:00:00 2001 From: Alejandro-Vega Date: Mon, 11 Dec 2023 12:56:12 -0500 Subject: [PATCH] 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} /> );