Merge pull request #165 from jadmsaadaot/SUBMIT-task#170

Integrate internal documents table in package page with backend
bcgov · Nov 14, 2024 · 2f90d6c · 2f90d6c
2 parents 73876c3 + 94af982
commit 2f90d6c
Show file tree

Hide file tree

Showing 12 changed files with 159 additions and 122 deletions.
diff --git a/submit-web/src/components/Projects/ProjectTable/EmptyRow.tsx b/submit-web/src/components/Projects/ProjectTable/EmptyRow.tsx
@@ -1,13 +1,16 @@
 import { TableCell, TableRow } from "@mui/material";
 import { BCDesignTokens } from "epic.theme";
 
-export default function EmptyRow() {
+type EmptyRowProps = {
+  colSpan: number;
+};
+export default function EmptyRow({ colSpan = 4 }: EmptyRowProps) {
   return (
     <TableRow key={`empty-row`} sx={{ py: 1 }}>
       <TableCell
         component="th"
         scope="row"
-        colSpan={4}
+        colSpan={colSpan}
         sx={{
           border: 0,
           py: BCDesignTokens.layoutPaddingXsmall,

diff --git a/submit-web/src/components/Shared/Table/common.tsx b/submit-web/src/components/Shared/Table/common.tsx
@@ -10,3 +10,19 @@ export const StyledTableHeadCell = styled(TableCell)(() => ({
   },
   border: "none",
 }));
+
+export 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,
+  },
+}));
diff --git a/submit-web/src/components/Shared/Table/utils.ts b/submit-web/src/components/Shared/Table/utils.ts
@@ -1,3 +1,5 @@
+import { downloadObject } from "@/hooks/api/useObjectStorage";
+
 export type Order = "asc" | "desc";
 
 export function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
@@ -21,3 +23,22 @@ export function tableSort<T, Key extends keyof T>(
     ? (a, b) => descendingComparator(a, b, orderBy)
     : (a, b) => -descendingComparator(a, b, orderBy);
 }
+
+export const getObjectFromS3 = async ({
+  name,
+  url,
+}: {
+  name: string;
+  url: string;
+}) => {
+  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();
+};
diff --git a/submit-web/src/components/Submission/DocumentRow.tsx b/submit-web/src/components/Submission/DocumentRow.tsx
@@ -1,38 +1,14 @@
-import {
-  Link as MuiLink,
-  styled,
-  TableCell,
-  TableRow,
-  Typography,
-} from "@mui/material";
-import { BCDesignTokens } from "epic.theme";
+import { Link as MuiLink, TableRow, Typography } from "@mui/material";
 import { Submission } from "@/models/Submission";
-import { downloadObject } from "@/hooks/api/useObjectStorage";
 import { useState } from "react";
 import { notify } from "../Shared/Snackbar/snackbarStore";
+import { getObjectFromS3 } from "../Shared/Table/utils";
+import { StyledTableCell } from "../Shared/Table/common";
 
 type DocumentRowProps = {
   documentSubmission: Submission;
 };
 
-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)(() => ({}));
-
 export default function DocumentRow({ documentSubmission }: DocumentRowProps) {
   const [pendingGetObject, setPendingGetObject] = useState(false);
   const {
@@ -41,28 +17,19 @@ export default function DocumentRow({ documentSubmission }: DocumentRowProps) {
     submitted_by,
   } = documentSubmission;
 
-  const getObjectFromS3 = async () => {
+  const downloadDocument = 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();
+      await getObjectFromS3({ name, url });
     } catch (e) {
       notify.error("Failed to download document");
     } finally {
       setPendingGetObject(false);
     }
   };
   return (
-    <StyledTableRow>
+    <TableRow>
       <StyledTableCell colSpan={2}>
         <Typography
           variant="body1"
@@ -74,13 +41,13 @@ export default function DocumentRow({ documentSubmission }: DocumentRowProps) {
             mx: 0.5,
           }}
         >
-          <MuiLink onClick={getObjectFromS3}>{name}</MuiLink>
+          <MuiLink onClick={downloadDocument}>{name}</MuiLink>
         </Typography>
       </StyledTableCell>
       <StyledTableCell align="right">{submitted_by || ""}</StyledTableCell>
       <StyledTableCell align="right">{version}</StyledTableCell>
       <StyledTableCell align="right"></StyledTableCell>
       <StyledTableCell align="right"></StyledTableCell>
-    </StyledTableRow>
+    </TableRow>
   );
 }
diff --git a/submit-web/src/components/Submission/InternalDocuments/Row.tsx b/submit-web/src/components/Submission/InternalDocuments/Row.tsx
@@ -0,0 +1,49 @@
+import { Link as MuiLink, TableRow, Typography } from "@mui/material";
+import { useState } from "react";
+import { InternalStaffDocument } from "@/models/SubmissionItem";
+import { getObjectFromS3 } from "@/components/Shared/Table/utils";
+import { notify } from "@/components/Shared/Snackbar/snackbarStore";
+import { StyledTableCell } from "@/components/Shared/Table/common";
+
+type RowProps = {
+  internalStaffDocument: InternalStaffDocument;
+};
+
+export default function Row({ internalStaffDocument }: RowProps) {
+  const [pendingGetObject, setPendingGetObject] = useState(false);
+  const { name, url, created_by } = internalStaffDocument;
+
+  const downloadDocument = async () => {
+    try {
+      if (pendingGetObject) return;
+      setPendingGetObject(true);
+      await getObjectFromS3({ name, url });
+    } catch (e) {
+      notify.error("Failed to download document");
+    } finally {
+      setPendingGetObject(false);
+    }
+  };
+  return (
+    <TableRow>
+      <StyledTableCell colSpan={2}>
+        <Typography
+          variant="body1"
+          color="inherit"
+          sx={{
+            overflow: "clip",
+            textOverflow: "ellipsis",
+            cursor: "pointer",
+            mx: 0.5,
+          }}
+        >
+          <MuiLink onClick={downloadDocument}>{name}</MuiLink>
+        </Typography>
+      </StyledTableCell>
+      <StyledTableCell align="right">{created_by || ""}</StyledTableCell>
+      <StyledTableCell align="right"></StyledTableCell>
+      <StyledTableCell align="right"></StyledTableCell>
+      <StyledTableCell align="right"></StyledTableCell>
+    </TableRow>
+  );
+}
diff --git a/submit-web/src/components/Submission/InternalDocuments/index.tsx b/submit-web/src/components/Submission/InternalDocuments/index.tsx
@@ -1,30 +1,23 @@
-import {
-  Link as MuiLink,
-  TableCell,
-  TableRow,
-  Typography,
-} from "@mui/material";
+import { Link as MuiLink, Typography } from "@mui/material";
 import { BCDesignTokens } from "epic.theme";
-import { StaffSubmission, SUBMISSION_STATUS } from "@/models/Submission";
-import { Unless } from "react-if";
+import { When } from "react-if";
 import {
   SubmissionItemTableCell,
   PackageTableRow,
 } from "../SubmissionItemTableRow";
-import DocumentRow from "../DocumentRow";
+import { InternalStaffDocument } from "@/models/SubmissionItem";
+import Row from "./Row";
+import EmptyRow from "@/components/Projects/ProjectTable/EmptyRow";
 
+type InternalDocumentsProps = {
+  internalStaffDocuments: Array<InternalStaffDocument>;
+  submissionItemId?: number;
+};
 export default function InternalDocuments({
-  submissions,
-}: {
-  submissions: Array<StaffSubmission>;
-}) {
+  internalStaffDocuments,
+  submissionItemId,
+}: InternalDocumentsProps) {
   const actionLabel = "Add Documents";
-  const internalDocuments = submissions.flatMap((submission) =>
-    submission.internal_staff_documents.map((doc) => ({
-      ...submission,
-      submitted_document: { name: doc.name, url: doc.url },
-    }))
-  );
 
   const onActionClick = () => {};
 
@@ -56,7 +49,7 @@ export default function InternalDocuments({
           {/* TODO Add Staff Status' */}
         </SubmissionItemTableCell>
         <SubmissionItemTableCell align="center">
-          <Unless condition={status === SUBMISSION_STATUS.SUBMITTED.value}>
+          <When condition={Boolean(submissionItemId)}>
             <Typography
               variant="body2"
               sx={{
@@ -70,24 +63,13 @@ export default function InternalDocuments({
             >
               {actionLabel}
             </Typography>
-          </Unless>
+          </When>
         </SubmissionItemTableCell>
       </PackageTableRow>
-      {internalDocuments.map((document) => (
-        <DocumentRow
-          key={`doc-row-${document.id}`}
-          documentSubmission={document}
-        />
+      {internalStaffDocuments.map((document) => (
+        <Row key={`doc-row-${document.id}`} internalStaffDocument={document} />
       ))}
-      <TableRow key={`row-${name}-divider`}>
-        <TableCell
-          colSpan={5}
-          sx={{
-            py: BCDesignTokens.layoutPaddingXsmall,
-            border: 0,
-          }}
-        />
-      </TableRow>
+      <EmptyRow colSpan={5} />
     </>
   );
 }
diff --git a/submit-web/src/components/Submission/ItemsTable.tsx b/submit-web/src/components/Submission/ItemsTable.tsx
@@ -50,12 +50,16 @@ export default function ItemsTable({
     submitted_by: subItem?.submitted_by,
     version: subItem.version,
     submissions: subItem.submissions.filter(
-      (submission) => submission.type === SUBMISSION_TYPE.DOCUMENT
+      (submission) => submission.type === SUBMISSION_TYPE.DOCUMENT,
     ),
     has_document:
       subItem.type.submission_method === SUBMISSION_ITEM_METHOD.DOCUMENT_UPLOAD,
   }));
 
+  const internalStaffDocuments = submissionItems.flatMap(
+    (item) => item.internal_staff_documents ?? [],
+  );
+
   return (
     <TableContainer component={Box} sx={{ height: "100%" }}>
       <Table sx={{ tableLayout: "fixed" }}>
@@ -113,7 +117,9 @@ export default function ItemsTable({
             />
           ))}
           <When condition={userType === USER_TYPE.STAFF}>
-            <InternalDocuments submissions={submissionItems} />
+            <InternalDocuments
+              internalStaffDocuments={internalStaffDocuments}
+            />
           </When>
         </TableBody>
       </Table>

diff --git a/submit-web/src/components/Submission/SubmissionItemTableRow/index.tsx b/submit-web/src/components/Submission/SubmissionItemTableRow/index.tsx
@@ -31,7 +31,7 @@ export const SubmissionItemTableCell = styled(TableCell)<{ error?: boolean }>(
       borderTopRightRadius: 5,
       borderBottomRightRadius: 5,
     },
-  })
+  }),
 );
 
 const StyledTableRow = styled(TableRow)<{ error?: boolean }>(({ error }) => ({
@@ -54,7 +54,7 @@ export const PackageTableRow = ({
   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
+      : child,
   );
 
   return (