Skip to content

Commit ba775be

Browse files
TomChapmanGovtom0827
TomChapmanGov
and
tom0827
authored
Statuses (#1268)
* status history beautification * remove update permission check * remove console log --------- Co-authored-by: Tom Chapman <tchapman000@gmail.com>
1 parent 71046c4 commit ba775be

File tree

3 files changed

+146
-181
lines changed

3 files changed

+146
-181
lines changed

‎epictrack-web/src/components/workPlan/status/StatusContext.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const StatusProvider = ({
6868

6969
const hasPermission = () => {
7070
const groupsWithPermission = ["Super User", "Developer", "Instance Admin"];
71-
const allowed = groups.filter((group) => {
71+
const allowed = groups.filter((group: any) => {
7272
return groupsWithPermission.includes(group);
7373
});
7474
return Boolean(allowed.length);

‎epictrack-web/src/components/workPlan/status/StatusView/StatusHistory/HistoryItem.tsx

Lines changed: 0 additions & 113 deletions
This file was deleted.

‎epictrack-web/src/components/workPlan/status/StatusView/StatusHistory/index.tsx

Lines changed: 145 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,163 @@
1-
import React from "react";
2-
import { Box, Button } from "@mui/material";
1+
import React, { useContext, useState } from "react";
32
import { WorkplanContext } from "../../../WorkPlanContext";
4-
import { Status } from "../../../../../models/status";
5-
import { ETCaption1, ETCaption2 } from "../../../../shared";
3+
import { ETCaption1, ETCaption3, ETPreviewText } from "../../../../shared";
64
import Timeline from "@mui/lab/Timeline";
7-
import HistoryItem from "./HistoryItem";
8-
import { Else, If, Then } from "react-if";
95
import { IconProps } from "../../../../icons/type";
106
import Icons from "../../../../icons";
117
import { Palette } from "../../../../../styles/theme";
8+
import {
9+
TimelineConnector,
10+
TimelineContent,
11+
TimelineDot,
12+
TimelineItem,
13+
TimelineOppositeContent,
14+
TimelineSeparator,
15+
timelineContentClasses,
16+
} from "@mui/lab";
17+
import ReadMoreText from "../../../../shared/ReadMoreText";
18+
import { MONTH_DAY_YEAR } from "../../../../../constants/application-constant";
19+
import moment from "moment";
20+
import { When } from "react-if";
21+
import { Box, Button, Collapse, Grid, useTheme } from "@mui/material";
22+
import { StatusContext } from "../../StatusContext";
1223

1324
const ExpandIcon: React.FC<IconProps> = Icons["ExpandIcon"];
14-
const CollapseIcon: React.FC<IconProps> = Icons["CollapseIcon"];
15-
16-
const HISTORY_DISPLAY_LIMIT = 3;
25+
const PencilEditIcon: React.FC<IconProps> = Icons["PencilEditIcon"];
1726

1827
const StatusHistory = () => {
1928
const { statuses } = React.useContext(WorkplanContext);
20-
const [indexLimit, setIndexLimit] = React.useState<boolean>(true);
29+
const { setShowStatusForm, setStatus, hasPermission } =
30+
useContext(StatusContext);
31+
const [expand, setExpand] = useState(false);
32+
const theme = useTheme();
33+
34+
const approvedStatuses = statuses.filter(
35+
(status) => status.is_approved && status.id != statuses[0].id
36+
);
37+
const highlightFirstInTimeLineApproved = statuses[0].is_approved
38+
? false
39+
: true;
2140

22-
const displayLimit = (index: number) => {
23-
if (indexLimit && index > HISTORY_DISPLAY_LIMIT) {
24-
return false;
25-
}
26-
return true;
27-
};
41+
const SHOW_MORE_THRESHOLD = 3;
2842

2943
return (
30-
<Box>
31-
<ETCaption1 bold sx={{ letterSpacing: "0.39px", paddingBottom: "16px" }}>
44+
<Box sx={{ paddingTop: "8px" }}>
45+
<ETCaption1 bold color={Palette.neutral.dark}>
3246
STATUS HISTORY
3347
</ETCaption1>
34-
<Timeline position="left" sx={{ overflowY: "scroll", flex: 1 }}>
35-
{statuses.map((status: Status, index: number) => (
36-
<If
37-
condition={
38-
status.is_approved &&
39-
statuses[0].id !== status.id &&
40-
displayLimit(index)
41-
}
42-
>
43-
<Then>
44-
<HistoryItem status={status} />
45-
</Then>
46-
</If>
47-
))}
48-
<Button
49-
onClick={() => setIndexLimit(!indexLimit)}
50-
sx={{
51-
gap: "8px",
52-
width: "150px",
53-
marginLeft: 12,
54-
}}
55-
>
56-
<If
57-
condition={
58-
indexLimit &&
59-
statuses.filter((status: Status) => {
60-
return status.is_approved;
61-
}).length > 4
62-
}
63-
>
64-
<Then>
65-
<ExpandIcon />
66-
<ETCaption2 bold> Show More</ETCaption2>
67-
</Then>
68-
</If>
69-
<If
70-
condition={
71-
!indexLimit &&
72-
statuses.filter((status: Status) => {
73-
return status.is_approved;
74-
}).length > 4
75-
}
76-
>
77-
<Then>
78-
<ExpandIcon />
79-
<ETCaption2 bold> Show Less</ETCaption2>
80-
</Then>
81-
</If>
82-
</Button>
48+
<Timeline
49+
position="left"
50+
sx={{
51+
[`& .${timelineContentClasses.root}`]: {
52+
flex: "initial",
53+
paddingLeft: 0,
54+
},
55+
margin: 0,
56+
paddingLeft: 0,
57+
}}
58+
>
59+
{approvedStatuses.slice(0, SHOW_MORE_THRESHOLD).map((status, index) => {
60+
const isSuccess = highlightFirstInTimeLineApproved && index === 0;
61+
return (
62+
<TimelineItem key={status.id}>
63+
<TimelineOppositeContent>
64+
<ETPreviewText
65+
color={
66+
isSuccess ? Palette.neutral.dark : Palette.neutral.main
67+
}
68+
>
69+
<ReadMoreText>{status.description}</ReadMoreText>
70+
</ETPreviewText>
71+
<When condition={isSuccess && hasPermission()}>
72+
<Button
73+
variant="text"
74+
startIcon={<PencilEditIcon />}
75+
sx={{
76+
backgroundColor: "inherit",
77+
borderColor: "transparent",
78+
}}
79+
onClick={() => {
80+
setShowStatusForm(true);
81+
setStatus(status);
82+
}}
83+
>
84+
Edit
85+
</Button>
86+
</When>
87+
</TimelineOppositeContent>
88+
<TimelineSeparator>
89+
<TimelineDot
90+
sx={[
91+
isSuccess && {
92+
bgcolor: Palette.success.light,
93+
},
94+
]}
95+
/>
96+
<TimelineConnector
97+
sx={[
98+
isSuccess && {
99+
bgcolor: Palette.success.light,
100+
},
101+
]}
102+
/>
103+
</TimelineSeparator>
104+
<TimelineContent>
105+
<ETCaption3 color={Palette.neutral.main}>
106+
{moment(status.posted_date).format(MONTH_DAY_YEAR)}
107+
</ETCaption3>
108+
</TimelineContent>
109+
</TimelineItem>
110+
);
111+
})}
112+
<When condition={approvedStatuses.length > SHOW_MORE_THRESHOLD}>
113+
<Collapse in={expand}>
114+
{approvedStatuses.slice(SHOW_MORE_THRESHOLD).map((status) => (
115+
<TimelineItem key={status.id}>
116+
<TimelineOppositeContent>
117+
<ETPreviewText color={Palette.neutral.main}>
118+
<ReadMoreText>{status.description}</ReadMoreText>
119+
</ETPreviewText>
120+
</TimelineOppositeContent>
121+
<TimelineSeparator>
122+
<TimelineDot />
123+
<TimelineConnector />
124+
</TimelineSeparator>
125+
<TimelineContent>
126+
<ETCaption3 color={Palette.neutral.main}>
127+
{moment(status.posted_date).format(MONTH_DAY_YEAR)}
128+
</ETCaption3>
129+
</TimelineContent>
130+
</TimelineItem>
131+
))}
132+
</Collapse>
133+
<TimelineItem sx={{ paddingLeft: "86px" }} key="expand-button">
134+
<Grid container>
135+
<Grid item>
136+
<Button
137+
variant="text"
138+
startIcon={
139+
<ExpandIcon
140+
style={{
141+
transform: !expand ? "rotate(0deg)" : "rotate(-180deg)",
142+
transition: theme.transitions.create("transform", {
143+
duration: theme.transitions.duration.shortest,
144+
}),
145+
fill: Palette.primary.accent.main,
146+
}}
147+
/>
148+
}
149+
sx={{
150+
backgroundColor: "inherit",
151+
borderColor: "transparent",
152+
}}
153+
onClick={() => setExpand(!expand)}
154+
>
155+
{expand ? "Show less" : "Show more"}
156+
</Button>
157+
</Grid>
158+
</Grid>
159+
</TimelineItem>
160+
</When>
83161
</Timeline>
84162
</Box>
85163
);

0 commit comments

Comments
 (0)