From fb93e612742e08d03a5bbf11135a77c98d3b5a06 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Wed, 30 Oct 2024 07:53:36 -0400 Subject: [PATCH 01/14] setup table for document uploading --- .../DocumentUpload/DocumentTable.tsx | 114 +++++++++++ .../DocumentUpload/DocumentTableRow.tsx | 177 ++++++++++++++++++ .../layout/SideNav/ProjectsSubRoutes.tsx | 2 +- .../DocumentUploadSection.tsx | 80 +++----- .../ManagementPlanSubmission/index.tsx | 21 ++- .../_submissionLayout/index.tsx | 8 +- .../_dashboard/projects/index.tsx | 2 +- 7 files changed, 337 insertions(+), 67 deletions(-) create mode 100644 submit-web/src/components/DocumentUpload/DocumentTable.tsx create mode 100644 submit-web/src/components/DocumentUpload/DocumentTableRow.tsx diff --git a/submit-web/src/components/DocumentUpload/DocumentTable.tsx b/submit-web/src/components/DocumentUpload/DocumentTable.tsx new file mode 100644 index 00000000..070b7c33 --- /dev/null +++ b/submit-web/src/components/DocumentUpload/DocumentTable.tsx @@ -0,0 +1,114 @@ +import { + Box, + Table, + TableBody, + TableContainer, + TableHead, + TableRow, + Typography, +} from "@mui/material"; +import { BCDesignTokens } from "epic.theme"; +import TableSortLabel from "@mui/material/TableSortLabel"; +import { useEffect, useState } from "react"; +import { Order } from "../Shared/Table/utils"; +import SwapVertIcon from "@mui/icons-material/SwapVert"; +import { StyledTableHeadCell } from "../Shared/Table/common"; +import { Submission } from "@/models/Submission"; +import DocumentTableRow, { + StyledHeadTableCell, + StyledHeadTableRow, + StyledTableCell, + StyledTableRow, +} from "./DocumentTableRow"; + +export default function ItemsTable({ + header, + documents, +}: { + header: string; + documents: Array; +}) { + const [order, setOrder] = useState("asc"); + const [orderBy, setOrderBy] = useState("name"); + + const handleRequestSort = (property: keyof any) => { + const isAsc = orderBy === property && order === "asc"; + setOrder(isAsc ? "desc" : "asc"); + setOrderBy(property); + }; + + const sortedSubmissionItems = documents.map((document) => ({ + id: document.id, + name: document.submitted_document.name, + submitted_by: document.account_user.full_name, + version: document.version, + })); + + return ( + + + + + + handleRequestSort("name")} + IconComponent={SwapVertIcon} + sx={{ + ".MuiTableSortLabel-icon": { + color: `${BCDesignTokens.themeGray70} !important`, + "&:hover": { + color: "#EDEBE9 !important", + }, + }, + }} + > + + Form/Document + + + + Uploaded by + Version + Actions + + + + + + + {header} + + + + {sortedSubmissionItems?.map((document) => ( + + ))} + +
+ + ); +} diff --git a/submit-web/src/components/DocumentUpload/DocumentTableRow.tsx b/submit-web/src/components/DocumentUpload/DocumentTableRow.tsx new file mode 100644 index 00000000..edc1cee2 --- /dev/null +++ b/submit-web/src/components/DocumentUpload/DocumentTableRow.tsx @@ -0,0 +1,177 @@ +import React, { useState } from "react"; +import { + Link as MuiLink, + styled, + TableCell, + TableRow, + TableRowProps, + Typography, +} from "@mui/material"; +import { BCDesignTokens } from "epic.theme"; +import { useNavigate, useParams } from "@tanstack/react-router"; +import { downloadObject } from "@/hooks/api/useObjectStorage"; +import { notify } from "../Shared/Snackbar/snackbarStore"; + +export const StyledHeadTableCell = styled(TableCell)<{ error?: boolean }>( + ({ error }) => ({ + borderTop: error + ? `1px solid ${BCDesignTokens.supportBorderColorDanger}` + : `1px solid ${BCDesignTokens.themeBlue20}`, + borderBottom: error + ? `1px solid ${BCDesignTokens.supportBorderColorDanger}` + : `1px solid ${BCDesignTokens.themeBlue20}`, + padding: `${BCDesignTokens.layoutPaddingXsmall} !important`, + "&:first-of-type": { + borderLeft: error + ? `1px solid ${BCDesignTokens.supportBorderColorDanger}` + : `1px solid ${BCDesignTokens.themeBlue20}`, + borderTopLeftRadius: 5, + borderBottomLeftRadius: 5, + }, + "&:last-of-type": { + borderRight: error + ? `1px solid ${BCDesignTokens.supportBorderColorDanger}` + : `1px solid ${BCDesignTokens.themeBlue20}`, + borderTopRightRadius: 5, + borderBottomRightRadius: 5, + }, + }) +); + +export const StyledHeadTableRow = styled(TableRow)<{ error?: boolean }>( + ({ error }) => ({ + backgroundColor: error + ? BCDesignTokens.supportSurfaceColorDanger + : BCDesignTokens.themeBlue10, + "&:hover": { + backgroundColor: BCDesignTokens.themeBlue40, + }, + }) +); + +const StyledTableCell = styled(TableCell)(() => ({ + borderTop: `1px solid ${BCDesignTokens.themeBlue20}`, + borderBottom: `1px solid ${BCDesignTokens.themeBlue20}`, + padding: `${BCDesignTokens.layoutPaddingXsmall} !important`, + "&:first-of-type": { + borderLeft: `1px solid ${BCDesignTokens.themeBlue20}`, + borderTopLeftRadius: 5, + borderBottomLeftRadius: 5, + }, + "&:last-of-type": { + borderRight: `1px solid ${BCDesignTokens.themeBlue20}`, + borderTopRightRadius: 5, + borderBottomRightRadius: 5, + }, +})); + +const StyledTableRow = styled(TableRow)(() => ({})); + +type StyledTableRowProps = TableRowProps & { error?: boolean }; +const PackageTableRow = ({ + error, + children, + ...otherProps +}: StyledTableRowProps) => { + // pass error to every child + const childrenWithProps = React.Children.map(children, (child) => + React.isValidElement(child) + ? React.cloneElement(child, { error } as any) // eslint-disable-line @typescript-eslint/no-explicit-any + : child + ); + + return ( + + {childrenWithProps} + + ); +}; + +type DocumentTableRowProps = { + documentItem: { + id: number; + name: string; + submitted_by: string; + version: number; + url: string; + }; + error?: boolean; +}; +export default function DocumentTableRow({ + documentItem, + error = false, +}: DocumentTableRowProps) { + const [pendingGetObject, setPendingGetObject] = useState(false); + const navigate = useNavigate(); + const { projectId, submissionPackageId } = useParams({ + from: "/_authenticated/_dashboard/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId", + }); + + const { name, id, submitted_by, version, url } = documentItem; + + const onActionClick = () => { + navigate({ + to: `/projects/${projectId}/submission-packages/${submissionPackageId}/submissions/${id}`, + }); + }; + + const getObjectFromS3 = async () => { + try { + if (pendingGetObject) return; + setPendingGetObject(true); + const response = await downloadObject({ + filename: name, + s3sourceuri: url, + }); + const linkUrl = window.URL.createObjectURL(new Blob([response.data])); + const link = document.createElement("a"); + link.href = linkUrl; + link.setAttribute("download", name); + document.body.appendChild(link); + link.click(); + } catch (e) { + notify.error("Failed to download documentItem"); + } finally { + setPendingGetObject(false); + } + }; + + return ( + <> + + + + {name} + + + {submitted_by} + {version} + + + Remove + + + + + ); +} diff --git a/submit-web/src/components/Shared/layout/SideNav/ProjectsSubRoutes.tsx b/submit-web/src/components/Shared/layout/SideNav/ProjectsSubRoutes.tsx index 3e2386b5..d7f00556 100644 --- a/submit-web/src/components/Shared/layout/SideNav/ProjectsSubRoutes.tsx +++ b/submit-web/src/components/Shared/layout/SideNav/ProjectsSubRoutes.tsx @@ -8,7 +8,7 @@ export default function ProjectsSubRoutes() { const { accountId } = useAccount(); const { filters } = useProjectFilters(); const { data: accountProjects, isPending } = useGetAccountProjects({ - accountId, + accountId: 1, searchOptions: filters, }); diff --git a/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx b/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx index c1e7563f..d096df95 100644 --- a/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx +++ b/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx @@ -12,6 +12,9 @@ import { ControlledFileUpload } from "@/components/Shared/controlled/ControlledF import { MANAGEMENT_PLAN_DOCUMENT_FOLDERS } from "./constants"; import { useQueryClient } from "@tanstack/react-query"; import { SubmissionItem } from "@/models/SubmissionItem"; +import DocumentTable from "@/components/DocumentUpload/DocumentTable"; +import { QUERY_KEY } from "@/hooks/api/constants"; +import { ManagementPlanSubmission } from "."; export const DocumentUploadSection = () => { const { submissionId: submissionItemId } = useParams({ @@ -20,8 +23,8 @@ export const DocumentUploadSection = () => { const queryClient = useQueryClient(); const submissionItem = queryClient.getQueryData([ - "item", - submissionItemId, + QUERY_KEY.SUBMISSION_ITEM, + Number(submissionItemId), ]); const { reset, handleAddDocuments, documents } = useDocumentUploadStore(); @@ -42,40 +45,41 @@ export const DocumentUploadSection = () => { } const documentSubmissions = submissionItem?.submissions.filter( - (submission) => submission.type === SUBMISSION_TYPE.DOCUMENT, + (submission) => submission.type === SUBMISSION_TYPE.DOCUMENT ); const documentSubmissionIds = documentSubmissions?.map( - (submission) => submission.id, + (submission) => submission.id ); const managementPlanDocuments = documentSubmissions?.filter( (submission) => submission.submitted_document.folder === - MANAGEMENT_PLAN_DOCUMENT_FOLDERS.MANAGEMENT_PLAN, + MANAGEMENT_PLAN_DOCUMENT_FOLDERS.MANAGEMENT_PLAN ); const supportingDocuments = documentSubmissions?.filter( (submission) => submission.submitted_document.folder === - MANAGEMENT_PLAN_DOCUMENT_FOLDERS.SUPPORTING, + MANAGEMENT_PLAN_DOCUMENT_FOLDERS.SUPPORTING ); const pendingDocuments = documents.filter( (document) => !document.submissionId || - !documentSubmissionIds?.includes(document.submissionId), + !documentSubmissionIds?.includes(document.submissionId) ); const pendingManagementPlanDocuments = pendingDocuments.filter( (document) => - document.folder === MANAGEMENT_PLAN_DOCUMENT_FOLDERS.MANAGEMENT_PLAN, + document.folder === MANAGEMENT_PLAN_DOCUMENT_FOLDERS.MANAGEMENT_PLAN ); const pendingSupportingDocuments = pendingDocuments.filter( (document) => - document.folder === MANAGEMENT_PLAN_DOCUMENT_FOLDERS.SUPPORTING, + document.folder === MANAGEMENT_PLAN_DOCUMENT_FOLDERS.SUPPORTING ); + return ( @@ -119,7 +123,7 @@ export const DocumentUploadSection = () => { onDrop={(acceptedFiles) => handleOnDrop( acceptedFiles, - MANAGEMENT_PLAN_DOCUMENT_FOLDERS.MANAGEMENT_PLAN, + MANAGEMENT_PLAN_DOCUMENT_FOLDERS.MANAGEMENT_PLAN ) } /> @@ -131,22 +135,14 @@ export const DocumentUploadSection = () => { > Accepted file types: pdf, doc, docx, xlsx. Max. file size: 250 MB. + + + - - - {managementPlanDocuments?.map((docSub) => ( - - ))} - - { onDrop={(acceptedFiles) => handleOnDrop( acceptedFiles, - MANAGEMENT_PLAN_DOCUMENT_FOLDERS.SUPPORTING, + MANAGEMENT_PLAN_DOCUMENT_FOLDERS.SUPPORTING ) } /> @@ -192,31 +188,13 @@ export const DocumentUploadSection = () => { > Accepted file types: pdf, doc, docx, xlsx. Max. file size: 250 MB. - - - - {supportingDocuments?.map((docSub) => ( - - ))} - - - - {pendingSupportingDocuments.map((document) => ( - - ))} + + + ); diff --git a/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/index.tsx b/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/index.tsx index 481a1efc..1d59223e 100644 --- a/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/index.tsx +++ b/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/index.tsx @@ -27,6 +27,7 @@ import { booleanToString, stringToBoolean } from "@/utils"; import Form from "@/components/Shared/Forms/common"; import { useQueryClient } from "@tanstack/react-query"; import { SubmissionItem } from "@/models/SubmissionItem"; +import { QUERY_KEY } from "@/hooks/api/constants"; const managementPlanSubmissionSchema = yup.object().shape({ conditionSatisfied: yup.string().required("Please answer this question."), @@ -65,12 +66,12 @@ export const ManagementPlanSubmission = () => { const queryClient = useQueryClient(); const submissionItem = queryClient.getQueryData([ - "item", + QUERY_KEY.SUBMISSION_ITEM, Number(submissionItemId), ]); const formSubmission = submissionItem?.submissions.find( - (submission) => submission.type === SUBMISSION_TYPE.FORM, + (submission) => submission.type === SUBMISSION_TYPE.FORM ); const defaultFormValues = useMemo(() => { if (!formSubmission?.submitted_form?.submission_json) return {}; @@ -78,22 +79,22 @@ export const ManagementPlanSubmission = () => { return { ...formSubmission.submitted_form.submission_json, conditionSatisfied: booleanToString( - formSubmission.submitted_form.submission_json.conditionSatisfied, + formSubmission.submitted_form.submission_json.conditionSatisfied ), allRequirementsAddressed: booleanToString( - formSubmission.submitted_form.submission_json.allRequirementsAddressed, + formSubmission.submitted_form.submission_json.allRequirementsAddressed ), requirementsClear: booleanToString( - formSubmission.submitted_form.submission_json.requirementsClear, + formSubmission.submitted_form.submission_json.requirementsClear ), informationAccurate: booleanToString( - formSubmission.submitted_form.submission_json.informationAccurate, + formSubmission.submitted_form.submission_json.informationAccurate ), }; }, [formSubmission]); const documentSubmissions = submissionItem?.submissions?.filter( - (submission) => submission.type === SUBMISSION_TYPE.DOCUMENT, + (submission) => submission.type === SUBMISSION_TYPE.DOCUMENT ); const defaultDocumentValues = useMemo(() => { if (!documentSubmissions) return {}; @@ -103,14 +104,14 @@ export const ManagementPlanSubmission = () => { .filter( (submission) => submission.submitted_document.folder === - MANAGEMENT_PLAN_DOCUMENT_FOLDERS.MANAGEMENT_PLAN, + MANAGEMENT_PLAN_DOCUMENT_FOLDERS.MANAGEMENT_PLAN ) .map((submission) => submission.submitted_document.url), supportingDocuments: documentSubmissions .filter( (submission) => submission.submitted_document.folder === - MANAGEMENT_PLAN_DOCUMENT_FOLDERS.SUPPORTING, + MANAGEMENT_PLAN_DOCUMENT_FOLDERS.SUPPORTING ) .map((submission) => submission.submitted_document.url), }; @@ -161,7 +162,7 @@ export const ManagementPlanSubmission = () => { const saveSubmission = async ( formData: ManagementPlanSubmissionForm, - status: SubmissionStatus, + status: SubmissionStatus ) => { const { conditionSatisfied, diff --git a/submit-web/src/routes/_authenticated/_dashboard/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/index.tsx b/submit-web/src/routes/_authenticated/_dashboard/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/index.tsx index f7f97679..bd8ea76f 100644 --- a/submit-web/src/routes/_authenticated/_dashboard/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/index.tsx +++ b/submit-web/src/routes/_authenticated/_dashboard/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/index.tsx @@ -29,7 +29,7 @@ import { PackageStatusChipStack } from "@/components/PackageStatusChip/PackageSt import { usePackageTableStore } from "@/components/Submission/packageTableStore"; export const Route = createFileRoute( - "/_authenticated/_dashboard/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/", + "/_authenticated/_dashboard/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/" )({ component: SubmissionPage, }); @@ -75,7 +75,7 @@ export default function SubmissionPage() { if ( submissionPackage.items.some( - (item) => item.status !== SUBMISSION_STATUS.COMPLETED.value, + (item) => item.status !== SUBMISSION_STATUS.COMPLETED.value ) ) { setIsValidating(true); @@ -95,7 +95,7 @@ export default function SubmissionPage() { } const isPackageSubmitted = submissionPackage.status.includes( - PACKAGE_STATUS.SUBMITTED.value, + PACKAGE_STATUS.SUBMITTED.value ); return ( @@ -192,7 +192,7 @@ export default function SubmissionPage() { loading={isSubmittingPackage} disabled={isPackageSubmitted} > - Submit Management Plan + Submit diff --git a/submit-web/src/routes/_authenticated/_dashboard/projects/index.tsx b/submit-web/src/routes/_authenticated/_dashboard/projects/index.tsx index 9571940d..596be3b8 100644 --- a/submit-web/src/routes/_authenticated/_dashboard/projects/index.tsx +++ b/submit-web/src/routes/_authenticated/_dashboard/projects/index.tsx @@ -23,7 +23,7 @@ export function ProjectsPage() { isPending: isProjectsLoading, isError: isProjectsError, } = useGetAccountProjects({ - accountId, + accountId: 1, searchOptions: filters, }); From 95d7b718ee8b62be57b402f57af98f179e6cb198 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Wed, 30 Oct 2024 08:17:07 -0400 Subject: [PATCH 02/14] clean up pr --- .../DocumentUpload/DocumentTable.tsx | 24 ++++++-- .../DocumentUpload/DocumentTableRow.tsx | 24 +++----- .../DocumentUpload/PendingDocumentRow.tsx | 60 +++++++++++++++++++ .../DocumentUploadSection.tsx | 34 +++++------ 4 files changed, 101 insertions(+), 41 deletions(-) create mode 100644 submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx diff --git a/submit-web/src/components/DocumentUpload/DocumentTable.tsx b/submit-web/src/components/DocumentUpload/DocumentTable.tsx index 070b7c33..0bf5bf47 100644 --- a/submit-web/src/components/DocumentUpload/DocumentTable.tsx +++ b/submit-web/src/components/DocumentUpload/DocumentTable.tsx @@ -9,7 +9,7 @@ import { } from "@mui/material"; import { BCDesignTokens } from "epic.theme"; import TableSortLabel from "@mui/material/TableSortLabel"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import { Order } from "../Shared/Table/utils"; import SwapVertIcon from "@mui/icons-material/SwapVert"; import { StyledTableHeadCell } from "../Shared/Table/common"; @@ -17,16 +17,18 @@ import { Submission } from "@/models/Submission"; import DocumentTableRow, { StyledHeadTableCell, StyledHeadTableRow, - StyledTableCell, - StyledTableRow, } from "./DocumentTableRow"; +import { Document } from "@/store/documentUploadStore"; +import PendingDocumentRow from "./PendingDocumentRow"; -export default function ItemsTable({ +export default function DocumentTable({ header, documents, + pendingDocuments, }: { header: string; documents: Array; + pendingDocuments: Array; }) { const [order, setOrder] = useState("asc"); const [orderBy, setOrderBy] = useState("name"); @@ -42,6 +44,12 @@ export default function ItemsTable({ name: document.submitted_document.name, submitted_by: document.account_user.full_name, version: document.version, + url: document.submitted_document.url, + })); + + const pendingItems = pendingDocuments.map((document) => ({ + id: document.id, + name: document.file.name, })); return ( @@ -104,7 +112,13 @@ export default function ItemsTable({ {sortedSubmissionItems?.map((document) => ( + ))} + {pendingItems?.map((document) => ( + ))} diff --git a/submit-web/src/components/DocumentUpload/DocumentTableRow.tsx b/submit-web/src/components/DocumentUpload/DocumentTableRow.tsx index edc1cee2..01848b87 100644 --- a/submit-web/src/components/DocumentUpload/DocumentTableRow.tsx +++ b/submit-web/src/components/DocumentUpload/DocumentTableRow.tsx @@ -8,7 +8,6 @@ import { Typography, } from "@mui/material"; import { BCDesignTokens } from "epic.theme"; -import { useNavigate, useParams } from "@tanstack/react-router"; import { downloadObject } from "@/hooks/api/useObjectStorage"; import { notify } from "../Shared/Snackbar/snackbarStore"; @@ -49,7 +48,7 @@ export const StyledHeadTableRow = styled(TableRow)<{ error?: boolean }>( }) ); -const StyledTableCell = styled(TableCell)(() => ({ +export const StyledTableCell = styled(TableCell)(() => ({ borderTop: `1px solid ${BCDesignTokens.themeBlue20}`, borderBottom: `1px solid ${BCDesignTokens.themeBlue20}`, padding: `${BCDesignTokens.layoutPaddingXsmall} !important`, @@ -68,7 +67,7 @@ const StyledTableCell = styled(TableCell)(() => ({ const StyledTableRow = styled(TableRow)(() => ({})); type StyledTableRowProps = TableRowProps & { error?: boolean }; -const PackageTableRow = ({ +export const PackageTableRow = ({ error, children, ...otherProps @@ -101,19 +100,10 @@ export default function DocumentTableRow({ documentItem, error = false, }: DocumentTableRowProps) { - const [pendingGetObject, setPendingGetObject] = useState(false); - const navigate = useNavigate(); - const { projectId, submissionPackageId } = useParams({ - from: "/_authenticated/_dashboard/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId", - }); - - const { name, id, submitted_by, version, url } = documentItem; + const { name, submitted_by, version, url } = documentItem; - const onActionClick = () => { - navigate({ - to: `/projects/${projectId}/submission-packages/${submissionPackageId}/submissions/${id}`, - }); - }; + const onActionClick = () => {}; + const [pendingGetObject, setPendingGetObject] = useState(false); const getObjectFromS3 = async () => { try { @@ -151,7 +141,9 @@ export default function DocumentTableRow({ textDecoration: "none", }} > - {name} + + {name} + {submitted_by} diff --git a/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx b/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx new file mode 100644 index 00000000..7a535e50 --- /dev/null +++ b/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx @@ -0,0 +1,60 @@ +import React, { useState } from "react"; +import { CircularProgress, Link as MuiLink, Typography } from "@mui/material"; +import { BCDesignTokens } from "epic.theme"; +import { PackageTableRow, StyledTableCell } from "./DocumentTableRow"; + +type DocumentTableRowProps = { + documentItem: { + id: number; + name: string; + }; + error?: boolean; +}; +export default function PendingDocumentRow({ + documentItem, + error = false, +}: DocumentTableRowProps) { + const { name } = documentItem; + + const onActionClick = () => {}; + + return ( + <> + + + + {name} + + + + + + + + Remove + + + + + ); +} diff --git a/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx b/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx index d096df95..fe585c8e 100644 --- a/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx +++ b/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx @@ -136,23 +136,15 @@ export const DocumentUploadSection = () => { Accepted file types: pdf, doc, docx, xlsx. Max. file size: 250 MB. - + + + - - {pendingManagementPlanDocuments.map((document) => ( - - ))} - { Accepted file types: pdf, doc, docx, xlsx. Max. file size: 250 MB. - + + + From de7db155979bfe9684758e983481633c98ad597b Mon Sep 17 00:00:00 2001 From: David Nunez Date: Wed, 30 Oct 2024 08:25:08 -0400 Subject: [PATCH 03/14] setup consultation record --- .../DocumentUpload/DocumentTable.tsx | 4 +- .../DocumentUploadSection.tsx | 41 ++++++------------- .../DocumentUploadSection.tsx | 33 +++++++-------- 3 files changed, 29 insertions(+), 49 deletions(-) diff --git a/submit-web/src/components/DocumentUpload/DocumentTable.tsx b/submit-web/src/components/DocumentUpload/DocumentTable.tsx index 0bf5bf47..561abc80 100644 --- a/submit-web/src/components/DocumentUpload/DocumentTable.tsx +++ b/submit-web/src/components/DocumentUpload/DocumentTable.tsx @@ -39,7 +39,7 @@ export default function DocumentTable({ setOrderBy(property); }; - const sortedSubmissionItems = documents.map((document) => ({ + const sortedSubmissionItems = documents?.map((document) => ({ id: document.id, name: document.submitted_document.name, submitted_by: document.account_user.full_name, @@ -47,7 +47,7 @@ export default function DocumentTable({ url: document.submitted_document.url, })); - const pendingItems = pendingDocuments.map((document) => ({ + const pendingItems = pendingDocuments?.map((document) => ({ id: document.id, name: document.file.name, })); diff --git a/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx b/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx index 643d60bc..9a029e09 100644 --- a/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx +++ b/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx @@ -12,6 +12,7 @@ import { ControlledFileUpload } from "@/components/Shared/controlled/ControlledF import { CONSULTATION_RECORD_DOCUMENT_FOLDERS } from "./constants"; import { useQueryClient } from "@tanstack/react-query"; import { SubmissionItem } from "@/models/SubmissionItem"; +import DocumentTable from "@/components/DocumentUpload/DocumentTable"; export const DocumentUploadSection = () => { const { submissionId: submissionItemId } = useParams({ @@ -35,7 +36,7 @@ export const DocumentUploadSection = () => { const handleOnDrop = (acceptedFiles: File[]) => { handleAddDocuments( acceptedFiles[0], - CONSULTATION_RECORD_DOCUMENT_FOLDERS.CONSULTATION_RECORDS, + CONSULTATION_RECORD_DOCUMENT_FOLDERS.CONSULTATION_RECORDS ); }; @@ -45,17 +46,17 @@ export const DocumentUploadSection = () => { } const documentSubmissions = submissionItem?.submissions.filter( - (submission) => submission.type === SUBMISSION_TYPE.DOCUMENT, + (submission) => submission.type === SUBMISSION_TYPE.DOCUMENT ); const documentSubmissionIds = documentSubmissions?.map( - (submission) => submission.id, + (submission) => submission.id ); const pendingDocuments = documents.filter( (document) => !document.submissionId || - !documentSubmissionIds?.includes(document.submissionId), + !documentSubmissionIds?.includes(document.submissionId) ); return ( @@ -108,31 +109,13 @@ export const DocumentUploadSection = () => { > Accepted file types: pdf, doc, docx, xlsx. Max. file size: 250 MB. - - - - {documentSubmissions?.map((docSub) => ( - - ))} - - - - {pendingDocuments.map((document) => ( - - ))} + + + ); diff --git a/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx b/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx index fe585c8e..bd2578b8 100644 --- a/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx +++ b/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx @@ -135,15 +135,14 @@ export const DocumentUploadSection = () => { > Accepted file types: pdf, doc, docx, xlsx. Max. file size: 250 MB. - - - - - + + + + @@ -180,15 +179,13 @@ export const DocumentUploadSection = () => { > Accepted file types: pdf, doc, docx, xlsx. Max. file size: 250 MB. - - - - - + + + ); From 42f5a0f1eee8f71765c4d8252174e26263a720c1 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Wed, 30 Oct 2024 08:25:34 -0400 Subject: [PATCH 04/14] remove local setup --- .../src/components/Shared/layout/SideNav/ProjectsSubRoutes.tsx | 2 +- .../src/routes/_authenticated/_dashboard/projects/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/submit-web/src/components/Shared/layout/SideNav/ProjectsSubRoutes.tsx b/submit-web/src/components/Shared/layout/SideNav/ProjectsSubRoutes.tsx index d7f00556..3e2386b5 100644 --- a/submit-web/src/components/Shared/layout/SideNav/ProjectsSubRoutes.tsx +++ b/submit-web/src/components/Shared/layout/SideNav/ProjectsSubRoutes.tsx @@ -8,7 +8,7 @@ export default function ProjectsSubRoutes() { const { accountId } = useAccount(); const { filters } = useProjectFilters(); const { data: accountProjects, isPending } = useGetAccountProjects({ - accountId: 1, + accountId, searchOptions: filters, }); diff --git a/submit-web/src/routes/_authenticated/_dashboard/projects/index.tsx b/submit-web/src/routes/_authenticated/_dashboard/projects/index.tsx index 596be3b8..9571940d 100644 --- a/submit-web/src/routes/_authenticated/_dashboard/projects/index.tsx +++ b/submit-web/src/routes/_authenticated/_dashboard/projects/index.tsx @@ -23,7 +23,7 @@ export function ProjectsPage() { isPending: isProjectsLoading, isError: isProjectsError, } = useGetAccountProjects({ - accountId: 1, + accountId, searchOptions: filters, }); From 5d67333c59b4e372e3a62f9c243d45554eba6973 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Wed, 30 Oct 2024 08:30:17 -0400 Subject: [PATCH 05/14] only render table on first upload --- .../DocumentUploadSection.tsx | 20 +++++---- .../DocumentUploadSection.tsx | 42 ++++++++++++------- 2 files changed, 41 insertions(+), 21 deletions(-) diff --git a/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx b/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx index 9a029e09..d3d376a4 100644 --- a/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx +++ b/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx @@ -109,13 +109,19 @@ export const DocumentUploadSection = () => { > Accepted file types: pdf, doc, docx, xlsx. Max. file size: 250 MB. - - - + + + + + ); diff --git a/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx b/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx index bd2578b8..3225f9e1 100644 --- a/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx +++ b/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx @@ -136,13 +136,20 @@ export const DocumentUploadSection = () => { Accepted file types: pdf, doc, docx, xlsx. Max. file size: 250 MB. - - - + + + + + @@ -179,13 +186,20 @@ export const DocumentUploadSection = () => { > Accepted file types: pdf, doc, docx, xlsx. Max. file size: 250 MB. - - - + + + + + + ); From 8fb0efb6e894d4957698b4464882546918066dae Mon Sep 17 00:00:00 2001 From: David Nunez Date: Wed, 30 Oct 2024 08:31:03 -0400 Subject: [PATCH 06/14] change text to submit to EAO --- .../$submissionPackageId/_submissionLayout/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/submit-web/src/routes/_authenticated/_dashboard/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/index.tsx b/submit-web/src/routes/_authenticated/_dashboard/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/index.tsx index bd8ea76f..c660977c 100644 --- a/submit-web/src/routes/_authenticated/_dashboard/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/index.tsx +++ b/submit-web/src/routes/_authenticated/_dashboard/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/index.tsx @@ -192,7 +192,7 @@ export default function SubmissionPage() { loading={isSubmittingPackage} disabled={isPackageSubmitted} > - Submit + Submit to EAO From f7fada21bf105337442cf110d2bfffc66211aac8 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Wed, 30 Oct 2024 09:09:50 -0400 Subject: [PATCH 07/14] linting --- submit-web/src/components/DocumentUpload/DocumentTable.tsx | 6 ++++-- .../src/components/DocumentUpload/PendingDocumentRow.tsx | 1 - .../ConsultationRecord/DocumentUploadSection.tsx | 2 -- .../ManagementPlanSubmission/DocumentUploadSection.tsx | 3 --- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/submit-web/src/components/DocumentUpload/DocumentTable.tsx b/submit-web/src/components/DocumentUpload/DocumentTable.tsx index 561abc80..b1542f25 100644 --- a/submit-web/src/components/DocumentUpload/DocumentTable.tsx +++ b/submit-web/src/components/DocumentUpload/DocumentTable.tsx @@ -31,9 +31,11 @@ export default function DocumentTable({ pendingDocuments: Array; }) { const [order, setOrder] = useState("asc"); - const [orderBy, setOrderBy] = useState("name"); + const [orderBy, setOrderBy] = useState( + "document.submitted_document.name" + ); - const handleRequestSort = (property: keyof any) => { + const handleRequestSort = (property: keyof Submission) => { const isAsc = orderBy === property && order === "asc"; setOrder(isAsc ? "desc" : "asc"); setOrderBy(property); diff --git a/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx b/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx index 7a535e50..b548c5a9 100644 --- a/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx +++ b/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx @@ -1,4 +1,3 @@ -import React, { useState } from "react"; import { CircularProgress, Link as MuiLink, Typography } from "@mui/material"; import { BCDesignTokens } from "epic.theme"; import { PackageTableRow, StyledTableCell } from "./DocumentTableRow"; diff --git a/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx b/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx index d3d376a4..17034c62 100644 --- a/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx +++ b/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx @@ -2,8 +2,6 @@ import { useEffect } from "react"; import { Box, Divider, Grid, Typography } from "@mui/material"; import { BCDesignTokens, EAOColors } from "epic.theme"; import { useDocumentUploadStore } from "@/store/documentUploadStore"; -import DocumentContainer from "../ManagementPlanSubmission/DocumentContainer"; -import DocumentToUploadContainer from "../DocumentToUploadContainer"; import { When } from "react-if"; import { Navigate, useParams } from "@tanstack/react-router"; import { notify } from "@/components/Shared/Snackbar/snackbarStore"; diff --git a/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx b/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx index 3225f9e1..6256bf96 100644 --- a/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx +++ b/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx @@ -2,19 +2,16 @@ import { useEffect } from "react"; import { Box, Divider, Grid, Typography } from "@mui/material"; import { BCDesignTokens, EAOColors } from "epic.theme"; import { useDocumentUploadStore } from "@/store/documentUploadStore"; -import DocumentContainer from "./DocumentContainer"; import { When } from "react-if"; import { Navigate, useParams } from "@tanstack/react-router"; import { notify } from "@/components/Shared/Snackbar/snackbarStore"; import { SUBMISSION_TYPE } from "@/models/Submission"; -import DocumentToUploadContainer from "../DocumentToUploadContainer"; import { ControlledFileUpload } from "@/components/Shared/controlled/ControlledFileUpload"; import { MANAGEMENT_PLAN_DOCUMENT_FOLDERS } from "./constants"; import { useQueryClient } from "@tanstack/react-query"; import { SubmissionItem } from "@/models/SubmissionItem"; import DocumentTable from "@/components/DocumentUpload/DocumentTable"; import { QUERY_KEY } from "@/hooks/api/constants"; -import { ManagementPlanSubmission } from "."; export const DocumentUploadSection = () => { const { submissionId: submissionItemId } = useParams({ From 34c51c5bf2ba4f33bc92c6ad1a66c256864eba0e Mon Sep 17 00:00:00 2001 From: David Nunez Date: Wed, 30 Oct 2024 16:27:30 -0400 Subject: [PATCH 08/14] clean up badge heights --- submit-web/src/components/PackageStatusChip/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/submit-web/src/components/PackageStatusChip/index.tsx b/submit-web/src/components/PackageStatusChip/index.tsx index 0b23c544..4d54f735 100644 --- a/submit-web/src/components/PackageStatusChip/index.tsx +++ b/submit-web/src/components/PackageStatusChip/index.tsx @@ -12,6 +12,7 @@ const statusStyles: Record = { borderRadius: 1, border: `2px solid ${BCDesignTokens.supportBorderColorSuccess}`, background: BCDesignTokens.supportSurfaceColorSuccess, + height: "24px", }, label: "Approved", }, @@ -20,6 +21,7 @@ const statusStyles: Record = { borderRadius: 1, border: `1px solid ${BCDesignTokens.themeBlue100}`, background: BCDesignTokens.themeBlue20, + height: "24px", }, label: "In Review", }, @@ -34,6 +36,7 @@ const statusStyles: Record = { borderRadius: 1, border: `1px solid ${BCDesignTokens.supportBorderColorInfo}`, background: BCDesignTokens.themeBlue20, + height: "24px", }, label: "Submitted", }, @@ -42,6 +45,7 @@ const statusStyles: Record = { borderRadius: 1, border: `1px solid ${BCDesignTokens.supportBorderColorSuccess}`, background: BCDesignTokens.supportSurfaceColorSuccess, + height: "24px", }, label: "Completed", }, @@ -61,7 +65,7 @@ const statusStyles: Record = { background: EAOColors.DecisionLight, height: "24px", }, - label: "New Submission", + label: "New", }, }; From 59aed33d788fdcc27364d65c5f4a1d97ee5806e6 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Wed, 30 Oct 2024 16:47:03 -0400 Subject: [PATCH 09/14] Bug - Document Query Key mismatch --- .../DocumentUploadSection.tsx | 10 +++++----- .../DocumentUploadSection.tsx | 20 +++++++++---------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx b/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx index 643d60bc..d17a5dae 100644 --- a/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx +++ b/submit-web/src/components/SubmissionItem/ConsultationRecord/DocumentUploadSection.tsx @@ -21,7 +21,7 @@ export const DocumentUploadSection = () => { const queryClient = useQueryClient(); const submissionItem = queryClient.getQueryData([ "item", - submissionItemId, + Number(submissionItemId), ]); const { reset, handleAddDocuments, documents } = useDocumentUploadStore(); @@ -35,7 +35,7 @@ export const DocumentUploadSection = () => { const handleOnDrop = (acceptedFiles: File[]) => { handleAddDocuments( acceptedFiles[0], - CONSULTATION_RECORD_DOCUMENT_FOLDERS.CONSULTATION_RECORDS, + CONSULTATION_RECORD_DOCUMENT_FOLDERS.CONSULTATION_RECORDS ); }; @@ -45,17 +45,17 @@ export const DocumentUploadSection = () => { } const documentSubmissions = submissionItem?.submissions.filter( - (submission) => submission.type === SUBMISSION_TYPE.DOCUMENT, + (submission) => submission.type === SUBMISSION_TYPE.DOCUMENT ); const documentSubmissionIds = documentSubmissions?.map( - (submission) => submission.id, + (submission) => submission.id ); const pendingDocuments = documents.filter( (document) => !document.submissionId || - !documentSubmissionIds?.includes(document.submissionId), + !documentSubmissionIds?.includes(document.submissionId) ); return ( diff --git a/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx b/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx index c1e7563f..6b278846 100644 --- a/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx +++ b/submit-web/src/components/SubmissionItem/ManagementPlanSubmission/DocumentUploadSection.tsx @@ -21,7 +21,7 @@ export const DocumentUploadSection = () => { const queryClient = useQueryClient(); const submissionItem = queryClient.getQueryData([ "item", - submissionItemId, + Number(submissionItemId), ]); const { reset, handleAddDocuments, documents } = useDocumentUploadStore(); @@ -42,39 +42,39 @@ export const DocumentUploadSection = () => { } const documentSubmissions = submissionItem?.submissions.filter( - (submission) => submission.type === SUBMISSION_TYPE.DOCUMENT, + (submission) => submission.type === SUBMISSION_TYPE.DOCUMENT ); const documentSubmissionIds = documentSubmissions?.map( - (submission) => submission.id, + (submission) => submission.id ); const managementPlanDocuments = documentSubmissions?.filter( (submission) => submission.submitted_document.folder === - MANAGEMENT_PLAN_DOCUMENT_FOLDERS.MANAGEMENT_PLAN, + MANAGEMENT_PLAN_DOCUMENT_FOLDERS.MANAGEMENT_PLAN ); const supportingDocuments = documentSubmissions?.filter( (submission) => submission.submitted_document.folder === - MANAGEMENT_PLAN_DOCUMENT_FOLDERS.SUPPORTING, + MANAGEMENT_PLAN_DOCUMENT_FOLDERS.SUPPORTING ); const pendingDocuments = documents.filter( (document) => !document.submissionId || - !documentSubmissionIds?.includes(document.submissionId), + !documentSubmissionIds?.includes(document.submissionId) ); const pendingManagementPlanDocuments = pendingDocuments.filter( (document) => - document.folder === MANAGEMENT_PLAN_DOCUMENT_FOLDERS.MANAGEMENT_PLAN, + document.folder === MANAGEMENT_PLAN_DOCUMENT_FOLDERS.MANAGEMENT_PLAN ); const pendingSupportingDocuments = pendingDocuments.filter( (document) => - document.folder === MANAGEMENT_PLAN_DOCUMENT_FOLDERS.SUPPORTING, + document.folder === MANAGEMENT_PLAN_DOCUMENT_FOLDERS.SUPPORTING ); return ( @@ -119,7 +119,7 @@ export const DocumentUploadSection = () => { onDrop={(acceptedFiles) => handleOnDrop( acceptedFiles, - MANAGEMENT_PLAN_DOCUMENT_FOLDERS.MANAGEMENT_PLAN, + MANAGEMENT_PLAN_DOCUMENT_FOLDERS.MANAGEMENT_PLAN ) } /> @@ -180,7 +180,7 @@ export const DocumentUploadSection = () => { onDrop={(acceptedFiles) => handleOnDrop( acceptedFiles, - MANAGEMENT_PLAN_DOCUMENT_FOLDERS.SUPPORTING, + MANAGEMENT_PLAN_DOCUMENT_FOLDERS.SUPPORTING ) } /> From 6c07180a5458d4357a5d2ed9a6eaea861766f0f9 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Thu, 31 Oct 2024 11:50:17 -0400 Subject: [PATCH 10/14] rename cells --- .../DocumentUpload/DocumentTableRow.tsx | 74 +++++++++---------- .../DocumentUpload/PendingDocumentRow.tsx | 72 +++++++++--------- 2 files changed, 71 insertions(+), 75 deletions(-) diff --git a/submit-web/src/components/DocumentUpload/DocumentTableRow.tsx b/submit-web/src/components/DocumentUpload/DocumentTableRow.tsx index 01848b87..db67abda 100644 --- a/submit-web/src/components/DocumentUpload/DocumentTableRow.tsx +++ b/submit-web/src/components/DocumentUpload/DocumentTableRow.tsx @@ -48,7 +48,7 @@ export const StyledHeadTableRow = styled(TableRow)<{ error?: boolean }>( }) ); -export const StyledTableCell = styled(TableCell)(() => ({ +export const DocumentTableCell = styled(TableCell)(() => ({ borderTop: `1px solid ${BCDesignTokens.themeBlue20}`, borderBottom: `1px solid ${BCDesignTokens.themeBlue20}`, padding: `${BCDesignTokens.layoutPaddingXsmall} !important`, @@ -127,43 +127,41 @@ export default function DocumentTableRow({ }; return ( - <> - - - + + + + {name} + + + + {submitted_by} + {version} + + - - {name} - - - - {submitted_by} - {version} - - - Remove - - - - + textDecoration: "underline", + }, + }} + onClick={onActionClick} + > + Remove + + + ); } diff --git a/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx b/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx index b548c5a9..08968b18 100644 --- a/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx +++ b/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx @@ -1,6 +1,6 @@ import { CircularProgress, Link as MuiLink, Typography } from "@mui/material"; import { BCDesignTokens } from "epic.theme"; -import { PackageTableRow, StyledTableCell } from "./DocumentTableRow"; +import { PackageTableRow, DocumentTableCell } from "./DocumentTableRow"; type DocumentTableRowProps = { documentItem: { @@ -18,42 +18,40 @@ export default function PendingDocumentRow({ const onActionClick = () => {}; return ( - <> - - - + + + {name} + + + + + + + - {name} - - - - - - - - Remove - - - - + textDecoration: "underline", + }, + }} + onClick={onActionClick} + > + Remove + + + ); } From 691d26ceb74642e513db45916b127e38bbb305e5 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Thu, 31 Oct 2024 12:20:09 -0400 Subject: [PATCH 11/14] fix uploading --- .../DocumentUpload/DocumentTable.tsx | 9 +-- .../DocumentUpload/PendingDocumentRow.tsx | 71 +++++++++++++++++-- 2 files changed, 66 insertions(+), 14 deletions(-) diff --git a/submit-web/src/components/DocumentUpload/DocumentTable.tsx b/submit-web/src/components/DocumentUpload/DocumentTable.tsx index b1542f25..63beb59c 100644 --- a/submit-web/src/components/DocumentUpload/DocumentTable.tsx +++ b/submit-web/src/components/DocumentUpload/DocumentTable.tsx @@ -49,11 +49,6 @@ export default function DocumentTable({ url: document.submitted_document.url, })); - const pendingItems = pendingDocuments?.map((document) => ({ - id: document.id, - name: document.file.name, - })); - return ( @@ -117,9 +112,9 @@ export default function DocumentTable({ documentItem={document} /> ))} - {pendingItems?.map((document) => ( + {pendingDocuments?.map((document) => ( ))} diff --git a/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx b/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx index 08968b18..e01cfa56 100644 --- a/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx +++ b/submit-web/src/components/DocumentUpload/PendingDocumentRow.tsx @@ -1,24 +1,79 @@ import { CircularProgress, Link as MuiLink, Typography } from "@mui/material"; import { BCDesignTokens } from "epic.theme"; import { PackageTableRow, DocumentTableCell } from "./DocumentTableRow"; +import { createSubmission } from "@/hooks/api/useSubmissions"; +import { SUBMISSION_TYPE } from "@/models/Submission"; +import { QUERY_KEY } from "@/hooks/api/constants"; +import { notify } from "../Shared/Snackbar/snackbarStore"; +import { useEffect } from "react"; +import { saveObject } from "@/hooks/api/useObjectStorage"; +import { useDocumentUploadStore } from "@/store/documentUploadStore"; +import { useQueryClient } from "@tanstack/react-query"; +import { useParams } from "@tanstack/react-router"; +import { Document } from "@/store/documentUploadStore"; type DocumentTableRowProps = { - documentItem: { - id: number; - name: string; - }; + documentItem: Document; error?: boolean; }; export default function PendingDocumentRow({ documentItem, error = false, }: DocumentTableRowProps) { - const { name } = documentItem; + const { submissionId: subItemId } = useParams({ + from: "/_authenticated/_dashboard/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/submissions/$submissionId", + }); + + const queryClient = useQueryClient(); + + const { triggerPending, completeDocument, removeDocument } = + useDocumentUploadStore(); + + useEffect(() => { + triggerPending(documentItem.id); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const uploadObject = async () => { + try { + const uploadedFile = await saveObject({ + file: documentItem.file, + fileDetails: { + filename: documentItem.file.name, + }, + }); + + const documentData = { + name: documentItem.file.name, + url: uploadedFile.filepath, + folder: documentItem.folder, + }; + const documentSubmission = await createSubmission(Number(subItemId), { + type: SUBMISSION_TYPE.DOCUMENT, + data: documentData, + }); + + completeDocument(documentItem.id, documentSubmission.id); + queryClient.invalidateQueries({ + queryKey: [QUERY_KEY.SUBMISSION_ITEM, documentSubmission.item_id], + }); + } catch (error) { + notify.error("Failed to upload document"); + removeDocument(documentItem.id); + } + }; + + useEffect(() => { + if (documentItem.pending) { + uploadObject(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [documentItem.pending]); const onActionClick = () => {}; return ( - + - {name} + + {documentItem.file.name} + From 005732c8d59625c6b39c10c5b277be994a211755 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Thu, 31 Oct 2024 13:27:33 -0400 Subject: [PATCH 12/14] rename head table row --- submit-web/src/components/DocumentUpload/DocumentTable.tsx | 6 +++--- .../src/components/DocumentUpload/DocumentTableRow.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/submit-web/src/components/DocumentUpload/DocumentTable.tsx b/submit-web/src/components/DocumentUpload/DocumentTable.tsx index 63beb59c..69a9d010 100644 --- a/submit-web/src/components/DocumentUpload/DocumentTable.tsx +++ b/submit-web/src/components/DocumentUpload/DocumentTable.tsx @@ -16,7 +16,7 @@ import { StyledTableHeadCell } from "../Shared/Table/common"; import { Submission } from "@/models/Submission"; import DocumentTableRow, { StyledHeadTableCell, - StyledHeadTableRow, + DocumentHeadTableRow, } from "./DocumentTableRow"; import { Document } from "@/store/documentUploadStore"; import PendingDocumentRow from "./PendingDocumentRow"; @@ -94,7 +94,7 @@ export default function DocumentTable({ - + - + {sortedSubmissionItems?.map((document) => ( ( }) ); -export const StyledHeadTableRow = styled(TableRow)<{ error?: boolean }>( +export const DocumentHeadTableRow = styled(TableRow)<{ error?: boolean }>( ({ error }) => ({ backgroundColor: error ? BCDesignTokens.supportSurfaceColorDanger From 75ddd1589fe2a95639a550d3c56eecedd02f2621 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Thu, 31 Oct 2024 14:13:36 -0400 Subject: [PATCH 13/14] remove sorting in document table --- .../DocumentUpload/DocumentTable.tsx | 54 +++---------------- 1 file changed, 8 insertions(+), 46 deletions(-) diff --git a/submit-web/src/components/DocumentUpload/DocumentTable.tsx b/submit-web/src/components/DocumentUpload/DocumentTable.tsx index 69a9d010..e6239ffe 100644 --- a/submit-web/src/components/DocumentUpload/DocumentTable.tsx +++ b/submit-web/src/components/DocumentUpload/DocumentTable.tsx @@ -8,10 +8,6 @@ import { Typography, } from "@mui/material"; import { BCDesignTokens } from "epic.theme"; -import TableSortLabel from "@mui/material/TableSortLabel"; -import { useState } from "react"; -import { Order } from "../Shared/Table/utils"; -import SwapVertIcon from "@mui/icons-material/SwapVert"; import { StyledTableHeadCell } from "../Shared/Table/common"; import { Submission } from "@/models/Submission"; import DocumentTableRow, { @@ -30,25 +26,6 @@ export default function DocumentTable({ documents: Array; pendingDocuments: Array; }) { - const [order, setOrder] = useState("asc"); - const [orderBy, setOrderBy] = useState( - "document.submitted_document.name" - ); - - const handleRequestSort = (property: keyof Submission) => { - const isAsc = orderBy === property && order === "asc"; - setOrder(isAsc ? "desc" : "asc"); - setOrderBy(property); - }; - - const sortedSubmissionItems = documents?.map((document) => ({ - id: document.id, - name: document.submitted_document.name, - submitted_by: document.account_user.full_name, - version: document.version, - url: document.submitted_document.url, - })); - return (
@@ -61,32 +38,17 @@ export default function DocumentTable({ > - handleRequestSort("name")} - IconComponent={SwapVertIcon} + - - Form/Document - - + Form/Document + Uploaded by Version @@ -106,7 +68,7 @@ export default function DocumentTable({ - {sortedSubmissionItems?.map((document) => ( + {documents?.map((document) => ( Date: Thu, 31 Oct 2024 17:19:10 -0700 Subject: [PATCH 14/14] Add removed resource --- .../src/submit_api/models/queries/project.py | 2 +- submit-api/src/submit_api/resources/project.py | 17 +++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/submit-api/src/submit_api/models/queries/project.py b/submit-api/src/submit_api/models/queries/project.py index e9830436..9a6bd4fe 100644 --- a/submit-api/src/submit_api/models/queries/project.py +++ b/submit-api/src/submit_api/models/queries/project.py @@ -39,7 +39,7 @@ def get_projects_by_account_id(cls, account_id: int, search_options: AccountProj ).join(AccountProject.project) # Apply search filters if provided - if search_options: + if search_options and any(bool(search_option) for search_option in search_options.__dict__.values()): query = cls.filter_by_search_criteria(query, search_options) return query.all() diff --git a/submit-api/src/submit_api/resources/project.py b/submit-api/src/submit_api/resources/project.py index de2ddde6..62bb4bb6 100644 --- a/submit-api/src/submit_api/resources/project.py +++ b/submit-api/src/submit_api/resources/project.py @@ -72,6 +72,23 @@ def get(account_id): projects = ProjectService.get_projects_by_account_id(account_id, search_options) return AccountProjectSchema(many=True).dump(projects), HTTPStatus.OK + @staticmethod + @ApiHelper.swagger_decorators(API, endpoint_description="Add projects in bulk") + @API.expect(project_add_list) + @API.response( + code=HTTPStatus.CREATED, model=project_list_model, description="Added projects" + ) + @API.response(HTTPStatus.BAD_REQUEST, "Bad Request") + @auth.require + @cors.crossdomain(origin="*") + def post(account_id): + """Add projects in bulk.""" + projects_data = AddProjectSchema().load(API.payload) + added_projects = ProjectService.bulk_add_projects( + account_id, projects_data.get("project_ids") + ) + return ProjectSchema(many=True).dump(added_projects), HTTPStatus.CREATED + @cors_preflight("GET, OPTIONS, POST") @API.route("/proponents/", methods=["POST", "GET", "OPTIONS"])