Skip to content

Commit 3c6b40d

Browse files
tom0827tom0827
committed
about page v1
1 parent 039cd1d commit 3c6b40d

File tree

11 files changed

+522
-7
lines changed

11 files changed

+522
-7
lines changed

‎epictrack-api/src/api/schemas/response/project_response.py

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ class Meta(AutoSchemaBase.Meta):
1919
model = Project
2020
include_fk = True
2121
unknown = EXCLUDE
22+
exclude=("created_by", "updated_at", "updated_by", "is_deleted")
2223

2324
sub_type = fields.Nested(SubTypeSchema, dump_only=True, exclude=("type", "type_id"))
2425
type = fields.Nested(TypeSchema, dump_only=True)

‎epictrack-api/src/api/schemas/response/work_response.py

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,9 @@ class Meta(AutoSchemaBase.Meta):
4949
model = Work
5050
include_fk = True
5151
unknown = EXCLUDE
52+
exclude=("created_by", "updated_at", "updated_by", "is_deleted")
5253

53-
project = fields.Nested(
54-
ProjectResponseSchema(exclude=("region_env", "region_flnro", "sub_type")),
55-
dump_only=True,
56-
)
54+
project = fields.Nested(ProjectResponseSchema(exclude=("created_by", "updated_at", "updated_by", "is_deleted")), dump_only=True)
5755
ministry = fields.Nested(MinistrySchema, dump_only=True)
5856
eao_team = fields.Nested(EAOTeamSchema, dump_only=True)
5957
ea_act = fields.Nested(EAActSchema, dump_only=True)

‎epictrack-web/src/components/workPlan/WorkPlanContainer.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import Issues from "./issues";
1717
import WorkState from "./WorkState";
1818
import ComingSoon from "../../routes/ComingSoon";
1919
import { isStatusOutOfDate } from "./status/shared";
20+
import About from "./about";
2021

2122
const IndicatorIcon: React.FC<IconProps> = Icons["IndicatorIcon"];
2223

@@ -123,7 +124,8 @@ const WorkPlanContainer = () => {
123124
...tabPanel,
124125
}}
125126
>
126-
<ComingSoon />
127+
{/* <ComingSoon /> */}
128+
<About />
127129
</TabPanel>
128130
<TabPanel
129131
index={4}

‎epictrack-web/src/components/workPlan/about/AboutContainer.tsx

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
import { Box, Grid } from "@mui/material";
2+
import React, { useContext } from "react";
3+
import { ETHeading3, ETLink, ETParagraph } from "../../shared";
4+
import { tabPanelStyle, tabStyle, titleStyle } from "../common/styles";
5+
import { Palette } from "../../../styles/theme";
6+
import { ETTabs, ETTab } from "../../shared/tab/Tab";
7+
import TabPanel from "../../shared/tab/TabPanel";
8+
import ComingSoon from "../../../routes/ComingSoon";
9+
import AboutDetails from "./aboutDetails";
10+
import { ABOUT_RESOURCES } from "../../../constants/application-constant";
11+
import Icons from "../../icons";
12+
import { IconProps } from "../../icons/type";
13+
import { WorkplanContext } from "../WorkPlanContext";
14+
15+
const LinkIcon: React.FC<IconProps> = Icons["LinkIcon"];
16+
17+
const AboutContainer = () => {
18+
const { work } = useContext(WorkplanContext);
19+
const [selectedTabIndex, setSelectedTabIndex] = React.useState(0);
20+
21+
const handleTabSelected = (event: React.SyntheticEvent, index: number) => {
22+
setSelectedTabIndex(index);
23+
};
24+
25+
return (
26+
<Grid container columnSpacing={1.5}>
27+
<Grid item xs={8}>
28+
<ETTabs
29+
sx={{
30+
gap: "2rem",
31+
minHeight: "0px",
32+
height: "100%",
33+
}}
34+
onChange={handleTabSelected}
35+
value={selectedTabIndex}
36+
>
37+
<ETTab
38+
sx={{
39+
paddingLeft: 0,
40+
...tabStyle,
41+
}}
42+
label="Details"
43+
/>
44+
<ETTab
45+
label="Calender"
46+
sx={{
47+
...tabStyle,
48+
}}
49+
/>
50+
</ETTabs>
51+
</Grid>
52+
<Grid item xs={4}>
53+
<ETHeading3
54+
sx={{
55+
...titleStyle,
56+
}}
57+
color={Palette.primary.main}
58+
>
59+
Resources
60+
</ETHeading3>
61+
</Grid>
62+
<Grid
63+
item
64+
xs={8}
65+
sx={{
66+
pt: "2rem",
67+
}}
68+
>
69+
<TabPanel
70+
index={0}
71+
value={selectedTabIndex}
72+
sx={{
73+
...tabPanelStyle,
74+
}}
75+
>
76+
<AboutDetails />
77+
</TabPanel>
78+
<TabPanel
79+
index={1}
80+
value={selectedTabIndex}
81+
sx={{
82+
...tabPanelStyle,
83+
}}
84+
>
85+
<ComingSoon />
86+
</TabPanel>
87+
</Grid>
88+
<Grid
89+
item
90+
xs={4}
91+
sx={{
92+
pt: "2rem",
93+
}}
94+
>
95+
<Box
96+
sx={{
97+
...tabPanelStyle,
98+
display: "flex",
99+
flexDirection: "column",
100+
gap: "1rem",
101+
}}
102+
>
103+
<Box
104+
sx={{
105+
display: "flex",
106+
padding: "1rem 1.5rem",
107+
flexDirection: "column",
108+
alignItems: "flex-start",
109+
gap: ".5rem",
110+
alignSelf: "stretch",
111+
borderRadius: "4px",
112+
backgroundColor: Palette.neutral.bg.light,
113+
}}
114+
>
115+
<Box
116+
sx={{
117+
display: "flex",
118+
gap: ".5rem",
119+
alignItems: "center",
120+
}}
121+
>
122+
<LinkIcon fill={`${Palette.primary.accent.main}`} />
123+
<ETLink
124+
to={`https://projects.eao.gov.bc.ca/projects-list?keywords=${work?.project?.name}`}
125+
target="_blank"
126+
rel="noopener"
127+
style={{
128+
fontSize: "1rem",
129+
fontWeight: 700,
130+
lineHeight: "1.5rem",
131+
}}
132+
>
133+
Link to EPIC.Public
134+
</ETLink>
135+
</Box>
136+
</Box>
137+
{ABOUT_RESOURCES.map((resource) => {
138+
return (
139+
<>
140+
<Box
141+
sx={{
142+
display: "flex",
143+
padding: "1rem 1.5rem",
144+
flexDirection: "column",
145+
alignItems: "flex-start",
146+
gap: ".5rem",
147+
alignSelf: "stretch",
148+
borderRadius: "4px",
149+
backgroundColor: Palette.neutral.bg.light,
150+
}}
151+
>
152+
<Box
153+
sx={{
154+
display: "flex",
155+
gap: ".5rem",
156+
alignItems: "center",
157+
}}
158+
>
159+
<LinkIcon fill={`${Palette.primary.accent.main}`} />
160+
<ETLink
161+
to={`${resource.url}`}
162+
target="_blank"
163+
rel="noopener"
164+
style={{
165+
fontSize: "1rem",
166+
fontWeight: 700,
167+
lineHeight: "1.5rem",
168+
}}
169+
>
170+
{resource.title}
171+
</ETLink>
172+
</Box>
173+
</Box>
174+
</>
175+
);
176+
})}
177+
</Box>
178+
</Grid>
179+
</Grid>
180+
);
181+
};
182+
183+
export default AboutContainer;

‎epictrack-web/src/components/workPlan/about/AboutContext.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { createContext } from "react";
2+
import React from "react";
3+
import { useSearchParams } from "../../../hooks/SearchParams";
4+
5+
// eslint-disable-next-line @typescript-eslint/no-empty-interface
6+
interface AboutContextProps {}
7+
8+
interface StatusContainerRouteParams extends URLSearchParams {
9+
work_id: string;
10+
}
11+
12+
export const AboutContext = createContext<AboutContextProps>({});
13+
14+
export const AboutProvider = ({
15+
children,
16+
}: {
17+
children: JSX.Element | JSX.Element[];
18+
}) => {
19+
const query = useSearchParams<StatusContainerRouteParams>();
20+
const workId = React.useMemo(() => query.get("work_id"), [query]);
21+
22+
return <AboutContext.Provider value={{}}>{children}</AboutContext.Provider>;
23+
};

‎epictrack-web/src/components/workPlan/about/aboutDetails/ProjectDetails.tsx

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import { Box, Divider, Grid } from "@mui/material";
2+
import { useContext } from "react";
3+
import { WorkplanContext } from "../../WorkPlanContext";
4+
import { ETCaption1, ETCaption2, GrayBox } from "../../../shared";
5+
import { Palette } from "../../../../styles/theme";
6+
import { MONTH_DAY_YEAR } from "../../../../constants/application-constant";
7+
import dayjs from "dayjs";
8+
9+
const ProjectDetails = () => {
10+
const { work } = useContext(WorkplanContext);
11+
return (
12+
<GrayBox>
13+
<Grid
14+
container
15+
sx={{
16+
padding: "16px 24px",
17+
}}
18+
>
19+
<Grid item xs={12}>
20+
<ETCaption1 color={Palette.neutral.main}>
21+
PROJECT CREATION DATE
22+
</ETCaption1>
23+
</Grid>
24+
<Grid item xs={12}>
25+
<ETCaption2 color={Palette.neutral.dark}>
26+
{dayjs(work?.project?.created_at).format(MONTH_DAY_YEAR)}
27+
</ETCaption2>
28+
</Grid>
29+
</Grid>
30+
<Divider style={{ width: "100%" }} />
31+
<Grid
32+
container
33+
spacing={1}
34+
sx={{
35+
padding: "16px 24px",
36+
}}
37+
>
38+
<Grid item xs={12}>
39+
<ETCaption1 bold color={Palette.primary.main}>
40+
PROPONENT
41+
</ETCaption1>
42+
</Grid>
43+
<Grid item xs={12}>
44+
<ETCaption2 color={Palette.neutral.dark}>
45+
{work?.project?.proponent?.name}
46+
</ETCaption2>
47+
</Grid>
48+
<Grid item xs={12}>
49+
<ETCaption1 bold color={Palette.primary.main}>
50+
PROJECT DESCRIPTION
51+
</ETCaption1>
52+
</Grid>
53+
<Grid item xs={12}>
54+
<ETCaption2 color={Palette.neutral.dark}>
55+
{work?.project?.description}
56+
</ETCaption2>
57+
</Grid>
58+
<Grid item xs={6}>
59+
<ETCaption1 bold color={Palette.primary.main}>
60+
TYPE
61+
</ETCaption1>
62+
</Grid>
63+
<Grid item xs={6}>
64+
<ETCaption1 bold color={Palette.primary.main}>
65+
SUBTYPE
66+
</ETCaption1>
67+
</Grid>
68+
<Grid item xs={6}>
69+
<ETCaption1 color={Palette.neutral.dark}>
70+
{work?.project?.type?.name}
71+
</ETCaption1>
72+
</Grid>
73+
<Grid item xs={6}>
74+
<ETCaption1 color={Palette.neutral.dark}>
75+
{work?.project?.sub_type?.name}
76+
</ETCaption1>
77+
</Grid>
78+
<Grid item xs={12}>
79+
<ETCaption1 bold color={Palette.primary.main}>
80+
LOCATION DESCRIPTION
81+
</ETCaption1>
82+
</Grid>
83+
<Grid item xs={12}>
84+
<ETCaption2 color={Palette.neutral.dark}>
85+
{work?.project?.address}
86+
</ETCaption2>
87+
</Grid>
88+
<Grid item xs={6}>
89+
<ETCaption1 bold color={Palette.primary.main}>
90+
ENV REGION
91+
</ETCaption1>
92+
</Grid>
93+
<Grid item xs={6}>
94+
<ETCaption1 bold color={Palette.primary.main}>
95+
NRS REGION
96+
</ETCaption1>
97+
</Grid>
98+
<Grid item xs={6}>
99+
<ETCaption1 color={Palette.neutral.dark}>
100+
{work?.project?.region_env?.name}
101+
</ETCaption1>
102+
</Grid>
103+
<Grid item xs={6}>
104+
<ETCaption1 color={Palette.neutral.dark}>
105+
{work?.project?.region_flnro?.name}
106+
</ETCaption1>
107+
</Grid>
108+
<Grid item xs={12}>
109+
<ETCaption1 bold color={Palette.primary.main}>
110+
ABBREVIATION
111+
</ETCaption1>
112+
</Grid>
113+
<Grid item xs={12}>
114+
<ETCaption1 color={Palette.neutral.dark}>
115+
{work?.project?.abbreviation}
116+
</ETCaption1>
117+
</Grid>
118+
</Grid>
119+
</GrayBox>
120+
);
121+
};
122+
123+
export default ProjectDetails;

0 commit comments

Comments
 (0)