-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'bcgov/develop' into SUBMIT-11
- Loading branch information
Showing
10 changed files
with
462 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
87 changes: 87 additions & 0 deletions
87
submit-web/src/components/DocumentUpload/DocumentTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { | ||
| Box, | ||
| Table, | ||
| TableBody, | ||
| TableContainer, | ||
| TableHead, | ||
| TableRow, | ||
| Typography, | ||
| } from "@mui/material"; | ||
| import { BCDesignTokens } from "epic.theme"; | ||
| import { StyledTableHeadCell } from "../Shared/Table/common"; | ||
| import { Submission } from "@/models/Submission"; | ||
| import DocumentTableRow, { | ||
| StyledHeadTableCell, | ||
| DocumentHeadTableRow, | ||
| } from "./DocumentTableRow"; | ||
| import { Document } from "@/store/documentUploadStore"; | ||
| import PendingDocumentRow from "./PendingDocumentRow"; | ||
|
|
||
| export default function DocumentTable({ | ||
| header, | ||
| documents, | ||
| pendingDocuments, | ||
| }: { | ||
| header: string; | ||
| documents: Array<Submission>; | ||
| pendingDocuments: Array<Document>; | ||
| }) { | ||
| return ( | ||
| <TableContainer component={Box} sx={{ height: "100%" }}> | ||
| <Table sx={{ tableLayout: "fixed" }}> | ||
| <TableHead | ||
| sx={{ | ||
| ".MuiTableCell-root": { | ||
| p: BCDesignTokens.layoutPaddingXsmall, | ||
| }, | ||
| }} | ||
| > | ||
| <TableRow> | ||
| <StyledTableHeadCell colSpan={2}> | ||
| <Typography | ||
| variant="body2" | ||
| sx={{ | ||
| color: BCDesignTokens.themeGray70, | ||
| "&:hover": { | ||
| color: "#EDEBE9", | ||
| }, | ||
| }} | ||
| > | ||
| Form/Document | ||
| </Typography> | ||
| </StyledTableHeadCell> | ||
| <StyledTableHeadCell align="right">Uploaded by</StyledTableHeadCell> | ||
| <StyledTableHeadCell align="right">Version</StyledTableHeadCell> | ||
| <StyledTableHeadCell align="center">Actions</StyledTableHeadCell> | ||
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| <DocumentHeadTableRow> | ||
| <StyledHeadTableCell colSpan={5}> | ||
| <Typography | ||
| variant="h6" | ||
| color="inherit" | ||
| fontWeight={900} | ||
| sx={{ mx: 0.5 }} | ||
| > | ||
| {header} | ||
| </Typography> | ||
| </StyledHeadTableCell> | ||
| </DocumentHeadTableRow> | ||
| {documents?.map((document) => ( | ||
| <DocumentTableRow | ||
| key={`custom-row-${document.name}`} | ||
| documentItem={document} | ||
| /> | ||
| ))} | ||
| {pendingDocuments?.map((document) => ( | ||
| <PendingDocumentRow | ||
| key={`pending-row-${document.file.name}`} | ||
| documentItem={document} | ||
| /> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| </TableContainer> | ||
| ); | ||
| } |
167 changes: 167 additions & 0 deletions
167
submit-web/src/components/DocumentUpload/DocumentTableRow.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| import React, { useState } from "react"; | ||
| import { | ||
| Link as MuiLink, | ||
| styled, | ||
| TableCell, | ||
| TableRow, | ||
| TableRowProps, | ||
| Typography, | ||
| } from "@mui/material"; | ||
| import { BCDesignTokens } from "epic.theme"; | ||
| 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 DocumentHeadTableRow = styled(TableRow)<{ error?: boolean }>( | ||
| ({ error }) => ({ | ||
| backgroundColor: error | ||
| ? BCDesignTokens.supportSurfaceColorDanger | ||
| : BCDesignTokens.themeBlue10, | ||
| "&:hover": { | ||
| backgroundColor: BCDesignTokens.themeBlue40, | ||
| }, | ||
| }) | ||
| ); | ||
|
|
||
| export const DocumentTableCell = 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 }; | ||
| export 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 ( | ||
| <StyledTableRow error={error} {...otherProps}> | ||
| {childrenWithProps} | ||
| </StyledTableRow> | ||
| ); | ||
| }; | ||
|
|
||
| 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 { name, submitted_by, version, url } = documentItem; | ||
|
|
||
| const onActionClick = () => {}; | ||
| const [pendingGetObject, setPendingGetObject] = useState(false); | ||
|
|
||
| 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 ( | ||
| <PackageTableRow key={`row-${documentItem.name}`} error={error}> | ||
| <DocumentTableCell colSpan={2}> | ||
| <Typography | ||
| variant="body1" | ||
| color="inherit" | ||
| sx={{ | ||
| overflow: "clip", | ||
| textOverflow: "ellipsis", | ||
| cursor: "pointer", | ||
| mx: 0.5, | ||
| textDecoration: "none", | ||
| }} | ||
| > | ||
| <MuiLink onClick={getObjectFromS3} sx={{ textDecoration: "none" }}> | ||
| {name} | ||
| </MuiLink> | ||
| </Typography> | ||
| </DocumentTableCell> | ||
| <DocumentTableCell align="right">{submitted_by}</DocumentTableCell> | ||
| <DocumentTableCell align="right">{version}</DocumentTableCell> | ||
| <DocumentTableCell align="center"> | ||
| <Typography | ||
| variant="body2" | ||
| sx={{ | ||
| color: BCDesignTokens.typographyColorLink, | ||
| "&:hover": { | ||
| cursor: "pointer", | ||
| textDecoration: "underline", | ||
| }, | ||
| }} | ||
| onClick={onActionClick} | ||
| > | ||
| Remove | ||
| </Typography> | ||
| </DocumentTableCell> | ||
| </PackageTableRow> | ||
| ); | ||
| } |
Oops, something went wrong.