Merge pull request #39 from jadmsaadaot/SUBMIT-task#64

Integrate project resource with front end projects page

submit-api/src/submit_api/models/account_project.py

@@ -18,6 +18,7 @@ class AccountProject(BaseModel):
     id = Column(db.Integer, primary_key=True, autoincrement=True)
     account_id = Column(db.Integer, ForeignKey('accounts.id'), nullable=False)
     project_id = Column(db.Integer, ForeignKey('projects.id'), nullable=False)
+    project = db.relationship('Project', foreign_keys=[project_id], lazy='joined')
 
     @classmethod
     def add_projects_bulk(cls, projects):

submit-api/src/submit_api/models/queries/project.py

@@ -24,8 +24,7 @@ def get_projects_by_account_id(cls, account_id: int):
         """Find projects by account_id"""
         result = (db.session.query(AccountProject)
                   .filter(AccountProject.account_id == account_id)
-                  .join(Project)
-                  .first())
+                  .join(Project))
         return result
 
     @classmethod

submit-api/src/submit_api/resources/project.py

@@ -17,7 +17,7 @@
 
 from flask_restx import Namespace, Resource, cors
 
-from submit_api.schemas.project import AddProjectSchema, ProjectSchema
+from submit_api.schemas.project import AddProjectSchema, ProjectSchema, AccountProjectSchema
 from submit_api.services.project_service import ProjectService
 from submit_api.utils.util import cors_preflight
 
@@ -50,7 +50,7 @@ class ProjectsByAccount(Resource):
     def get(account_id):
         """Get projects by account id."""
         projects = ProjectService.get_projects_by_account_id(account_id)
-        return ProjectSchema(many=True).dump(projects), HTTPStatus.OK
+        return AccountProjectSchema(many=True).dump(projects), HTTPStatus.OK
 
     @staticmethod
     @ApiHelper.swagger_decorators(API, endpoint_description="Add projects in bulk")

submit-api/src/submit_api/schemas/project.py

@@ -7,7 +7,7 @@
 
 
 class ProjectSchema(Schema):
-    """Account schema."""
+    """project schema."""
 
     class Meta:  # pylint: disable=too-few-public-methods
         """Exclude unknown fields in the deserialized output."""
@@ -21,11 +21,24 @@ class Meta:  # pylint: disable=too-few-public-methods
 
 
 class AddProjectSchema(Schema):
-    """Account schema."""
+    """add project schema."""
 
     class Meta:  # pylint: disable=too-few-public-methods
         """Exclude unknown fields in the deserialized output."""
 
         unknown = EXCLUDE
 
     project_ids = fields.List(fields.Int(), data_key="project_ids")
+
+
+class AccountProjectSchema(Schema):
+    """Account project schema."""
+
+    class Meta:  # pylint: disable=too-few-public-methods
+        """Exclude unknown fields in the deserialized output."""
+
+        unknown = EXCLUDE
+
+    account_id = fields.Int(data_key="account_id")
+    project_id = fields.Int(data_key="project_id")
+    project = fields.Nested(ProjectSchema, data_key="project")

submit-web/package.json

@@ -23,7 +23,7 @@
     "@tanstack/router-devtools": "^1.45.7",
     "@tanstack/router-plugin": "^1.45.7",
     "axios": "^1.7.2",
-    "epic.theme": "^1.0.6",
+    "epic.theme": "^1.0.8",
     "keycloak-js": "^25.0.1",
     "oidc-client-ts": "^3.0.1",
     "react": "^18.2.0",

submit-web/src/components/Projects/Project.tsx

@@ -0,0 +1,128 @@
+import { Box, Button, Divider, Paper, styled, Typography } from "@mui/material";
+import { BCDesignTokens } from "epic.theme";
+import AddIcon from "@mui/icons-material/Add";
+import { ProjectStatus } from "../registration/addProjects/ProjectStatus";
+import { PROJECT_STATUS } from "../registration/addProjects/ProjectCard/constants";
+import SubmissionTable from "./SubmissionTable";
+import { defaultPlans } from "./constants";
+import { AccountProject } from "@/models/Project";
+
+const HEADER_HEIGHT = 54;
+
+const CardInnerBox = styled(Box)({
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "center",
+  flexDirection: "column",
+  height: "100%",
+  padding: "0 12px",
+});
+
+type ProjectParam = {
+  accountProject: AccountProject;
+};
+
+export const Project = ({ accountProject }: ProjectParam) => {
+  const plans = defaultPlans;
+  return (
+    <Paper
+      sx={{
+        width: "90%",
+        height: "100%",
+        borderRadius: "6px",
+      }}
+      elevation={2}
+    >
+      <Box
+        bgcolor={BCDesignTokens.themeBlue10}
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          borderRadius: "3px 3px 0 0",
+        }}
+        height={HEADER_HEIGHT}
+      >
+        <Typography
+          variant="h3"
+          fontWeight={600}
+          px={2}
+          color={BCDesignTokens.typographyColorPrimary}
+        >
+          {accountProject.project.name}
+        </Typography>
+        <Typography
+          variant="h4"
+          color={BCDesignTokens.themeGray70}
+          sx={{
+            mr: 2,
+            fontWeight: 400,
+          }}
+        >
+          EAC #1234567
+        </Typography>
+      </Box>
+
+      <Box
+        sx={{
+          padding: "36px 12px 12px 12px",
+        }}
+      >
+        <Box
+          sx={{
+            borderRadius: "3px",
+            border: `1px solid #F2F2F2`,
+            boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.1)",
+          }}
+        >
+          <Box
+            display={"flex"}
+            justifyContent={"space-between"}
+            sx={{ py: BCDesignTokens.layoutPaddingXlarge }}
+          >
+            <CardInnerBox>
+              <Typography variant="h4" fontWeight={400}>
+                Management Plans
+              </Typography>
+              <ProjectStatus bold status={PROJECT_STATUS.POST_DECISION} />
+            </CardInnerBox>
+            <CardInnerBox>
+              <Button>
+                <AddIcon sx={{ p: 0, mr: 0.5 }} />
+                New Submission
+              </Button>
+            </CardInnerBox>
+          </Box>
+          <Box height={"100%"} px={BCDesignTokens.layoutPaddingXsmall}>
+            <Divider sx={{ mb: 0.5 }} />
+            <Typography
+              variant="body1"
+              sx={{
+                fontWeight: "bold",
+                backgroundColor: BCDesignTokens.themeGold10,
+              }}
+            >
+              Active Submissions
+            </Typography>
+            <CardInnerBox sx={{ height: "100%", py: 2 }}>
+              <SubmissionTable plans={plans} />
+            </CardInnerBox>
+            <Divider sx={{ mb: 0.5 }} />
+            <Typography
+              variant="body1"
+              sx={{
+                fontWeight: "bold",
+                backgroundColor: BCDesignTokens.themeGold10,
+              }}
+            >
+              Past Submissions
+            </Typography>
+            <CardInnerBox sx={{ height: "100%", my: 2 }}>
+              <SubmissionTable headless plans={plans} />
+            </CardInnerBox>
+          </Box>
+        </Box>
+      </Box>
+    </Paper>
+  );
+};

submit-web/src/components/Projects/SubmissionTable.tsx

@@ -53,7 +53,7 @@ export default function SubmissionTable({
         )}
         <TableBody>
           {plans?.map((plan) => (
-            <TableRow component={Box} sx={{ my: 1 }}>
+            <TableRow key={`row-${plan.id}`} component={Box} sx={{ my: 1 }}>
               <TableCell
                 component="th"
                 scope="row"

submit-web/src/components/Projects/constants.ts

@@ -15,46 +15,4 @@ export const defaultPlans: Array<Plan> = [
     submittedBy: "Jane Doe",
     isCompleted: false,
   },
-  {
-    id: 3,
-    name: "Management Plan 123",
-    submittedDate: "2021-10-10",
-    submittedBy: "John Doe",
-    isCompleted: false,
-  },
-  {
-    id: 4,
-    name: "Management Plan 456",
-    submittedDate: "2021-10-11",
-    submittedBy: "Jane Doe",
-    isCompleted: false,
-  },
-  {
-    id: 5,
-    name: "Management Plan 123",
-    submittedDate: "2021-10-10",
-    submittedBy: "John Doe",
-    isCompleted: true,
-  },
-  {
-    id: 6,
-    name: "Management Plan 456",
-    submittedDate: "2021-10-11",
-    submittedBy: "Jane Doe",
-    isCompleted: true,
-  },
-  {
-    id: 7,
-    name: "Management Plan 123",
-    submittedDate: "2021-10-10",
-    submittedBy: "John Doe",
-    isCompleted: true,
-  },
-  {
-    id: 8,
-    name: "Management Plan 456",
-    submittedDate: "2021-10-11",
-    submittedBy: "Jane Doe",
-    isCompleted: false,
-  },
 ];

submit-web/src/components/Projects/index.tsx

@@ -0,0 +1,26 @@
+import { AccountProject } from "@/models/Project";
+import { Skeleton, Stack } from "@mui/material";
+import { Project } from "./Project";
+
+type ProjectsParams = {
+  accountProjects: AccountProject[];
+};
+export const Projects = ({ accountProjects }: ProjectsParams) => {
+  return (
+    <Stack spacing={2} direction={"column"}>
+      {accountProjects.map((accountProject) => (
+        <Project key={accountProject.id} accountProject={accountProject} />
+      ))}
+    </Stack>
+  );
+};
+
+export const ProjectsSkeleton = () => {
+  return (
+    <Stack spacing={2} direction={"column"}>
+      <Skeleton variant="rectangular" height={690} width={1334} />
+      <Skeleton variant="rectangular" height={690} width={1334} />
+      <Skeleton variant="rectangular" height={690} width={1334} />
+    </Stack>
+  );
+};

submit-web/src/components/Shared/Modals/UpdateModal.tsx

@@ -28,7 +28,7 @@ const UpdateModal = ({ header, subText }: UpdateModalProps) => {
       </Grid>
       <Grid container direction="row" item xs={12}>
         {subText.map((subtext) => (
-          <Grid item xs={12}>
+          <Grid key={subtext.text} item xs={12}>
             <Typography variant="body1" sx={{ mb: 1 }}>
               {subtext.text}
             </Typography>

submit-web/src/components/Shared/YellowBar.tsx

@@ -1,13 +1,13 @@
 import { Box } from "@mui/material";
-import React from "react";
+import { BCDesignTokens } from "epic.theme";
 
 export const YellowBar = () => {
   return (
     <Box
       sx={{
         height: "5px",
         width: "50px",
-        backgroundColor: "#FCBA19",
+        backgroundColor: BCDesignTokens.themeGold100,
       }}
     />
   );

submit-web/src/components/Shared/layout/Footer/index.tsx

@@ -5,12 +5,7 @@ import { theme } from "@/styles/theme";
 
 const Footer = () => {
   return (
-    <Grid
-      container
-      justifyContent="center"
-      alignItems="center"
-      spacing={0}
-    >
+    <Grid container justifyContent="center" alignItems="center" spacing={0}>
       <Grid
         item
         xs={12}

submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx

@@ -29,7 +29,7 @@ export default function SideNavBar() {
   };
 
   return (
-    <div>
+    <div style={{ height: "100%" }}>
       <Box
         sx={{
           overflow: "auto",

submit-web/src/components/registration/addProjects/ProjectStatus.tsx

@@ -3,6 +3,7 @@ import { Case, Default, Switch } from "react-if";
 import ModeStandbyIcon from "@mui/icons-material/ModeStandby";
 import { Stack } from "@mui/material";
 import { PROJECT_STATUS } from "./ProjectCard/constants";
+import { EAOColors } from "epic.theme";
 
 type ProjectStatusProps = {
   status: string;
@@ -16,10 +17,10 @@ export const ProjectStatus = ({ status, bold = false }: ProjectStatusProps) => {
           spacing={1}
           direction="row"
           alignItems={"center"}
-          color={"#947BB6"}
+          color={EAOColors.DecisionMain}
         >
           <ModeStandbyIcon />
-          <Caption2 color={"#947BB6"} bold={bold}>
+          <Caption2 color={EAOColors.DecisionMain} bold={bold}>
             Post-Decision
           </Caption2>
         </Stack>