Merge pull request #190 from djnunez-aot/note-section

Ui touch ups for staff table
bcgov · Dec 6, 2024 · d5cb269 · d5cb269
2 parents 3f133c3 + c51d3a8
commit d5cb269
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 13 deletions.
diff --git a/submit-web/src/components/Projects/ProjectTable/StaffTableHead.tsx b/submit-web/src/components/Projects/ProjectTable/StaffTableHead.tsx
@@ -13,14 +13,57 @@ export default function StaffTableHead() {
       }}
     >
       <TableRow>
-        <StyledTableHeadCell>Submission Name</StyledTableHeadCell>
-        <StyledTableHeadCell align="right">Type</StyledTableHeadCell>
-        <StyledTableHeadCell align="right">Submitted On</StyledTableHeadCell>
-        <StyledTableHeadCell align="right">
+        <StyledTableHeadCell
+          sx={{
+            minWidth: "250px",
+            flexGrow: 1,
+          }}
+        >
+          Submission Name
+        </StyledTableHeadCell>
+        <StyledTableHeadCell
+          align="right"
+          sx={{
+            maxWidth: "75px",
+          }}
+        >
+          Type
+        </StyledTableHeadCell>
+        <StyledTableHeadCell
+          align="right"
+          sx={{
+            maxWidth: "75px",
+          }}
+        >
+          Submitted On
+        </StyledTableHeadCell>
+        <StyledTableHeadCell
+          align="right"
+          sx={{
+            maxWidth: "80px",
+            lineHeight: 1.2,
+            wordWrap: "break-word",
+            textAlign: "right",
+          }}
+        >
           Days since submission
         </StyledTableHeadCell>
-        <StyledTableHeadCell align="right">CC Completed On</StyledTableHeadCell>
-        <StyledTableHeadCell align="right">MP Review</StyledTableHeadCell>
+        <StyledTableHeadCell
+          align="right"
+          sx={{
+            maxWidth: "75px",
+          }}
+        >
+          CC Completed On
+        </StyledTableHeadCell>
+        <StyledTableHeadCell
+          align="right"
+          sx={{
+            maxWidth: "75px",
+          }}
+        >
+          MP Review
+        </StyledTableHeadCell>
         <StyledTableHeadCell align="center">Status</StyledTableHeadCell>
       </TableRow>
     </TableHead>

diff --git a/submit-web/src/components/Projects/ProjectTable/StaffTableRow.tsx b/submit-web/src/components/Projects/ProjectTable/StaffTableRow.tsx
@@ -25,6 +25,10 @@ export default function StaffTableRow({ submissionPackage }: ProjectRowProps) {
     });
   };
 
+  if (submissionPackage.json === null) {
+    return <></>;
+  }
+
   const {
     name,
     json,
@@ -38,8 +42,14 @@ export default function StaffTableRow({ submissionPackage }: ProjectRowProps) {
 
   return (
     <>
-      <StyledProjectTableRow>
-        <StyledProjectTableCell>
+      <StyledProjectTableRow sx={{ maxHeight: "40px", py: 0 }}>
+        <StyledProjectTableCell
+          sx={{
+            minWidth: "150px",
+            flexGrow: 1,
+            py: 0,
+          }}
+        >
           <Link
             sx={{
               color: BCDesignTokens.themeBlue90,
@@ -60,8 +70,30 @@ export default function StaffTableRow({ submissionPackage }: ProjectRowProps) {
             <ArrowForwardIos fontSize="small" />
           </Link>
         </StyledProjectTableCell>
-        <StyledProjectTableCell align="right">{type}</StyledProjectTableCell>
-        <StyledProjectTableCell align="right">
+        <StyledProjectTableCell
+          align="right"
+          sx={{
+            maxWidth: "75px",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {type}
+        </StyledProjectTableCell>
+        <StyledProjectTableCell
+          align="right"
+          sx={{
+            maxWidth: "80px",
+            lineHeight: 1.2,
+            wordWrap: "break-word",
+            textAlign: "right",
+            color:
+              days_since_submission > 4
+                ? BCDesignTokens.typographyColorDanger
+                : BCDesignTokens.supportBorderColorSuccess,
+          }}
+        >
           {submitted_on ? dayjs(submitted_on).format("DD-MMM-YYYY") : ""}
         </StyledProjectTableCell>
         <StyledProjectTableCell
@@ -71,17 +103,33 @@ export default function StaffTableRow({ submissionPackage }: ProjectRowProps) {
               days_since_submission > 4
                 ? BCDesignTokens.typographyColorDanger
                 : BCDesignTokens.supportBorderColorSuccess,
+            maxWidth: "75px",
           }}
         >
           {days_since_submission && `+ ${days_since_submission} Days`}
         </StyledProjectTableCell>
-        <StyledProjectTableCell align="right">
+        <StyledProjectTableCell
+          align="right"
+          sx={{
+            maxWidth: "75px",
+          }}
+        >
           {cc_completed_on}
         </StyledProjectTableCell>
-        <StyledProjectTableCell align="right">
+        <StyledProjectTableCell
+          align="right"
+          sx={{
+            maxWidth: "75px",
+          }}
+        >
           {mp_review}
         </StyledProjectTableCell>
-        <StyledProjectTableCell align="right">
+        <StyledProjectTableCell
+          align="right"
+          sx={{
+            pr: BCDesignTokens.layoutPaddingSmall,
+          }}
+        >
           <PackageStatusChipStack
             status={status}
             reviewStatus={review_status}