Status history (#1210)

* status history WIP

* status history ui

* WIP

* status history

* status

* move typography for status out of shared component

---------

Co-authored-by: Tom Chapman <tchapman000@gmail.com>

Author: TomChapmanGov

epictrack-web/package-lock.json

@@ -7,6 +7,7 @@
     "@emotion/styled": "^11.10.8",
     "@hookform/resolvers": "^3.1.0",
     "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.152",
     "@mui/material": "^5.12.2",
     "@mui/styles": "^5.12.0",
     "@mui/x-date-pickers": "^6.3.0",

epictrack-web/package.json

@@ -36,6 +36,7 @@ interface WorkplanContextProps {
   firstNations: WorkFirstNation[];
   setFirstNations: Dispatch<SetStateAction<WorkFirstNation[]>>;
   statuses: Status[];
+  setStatuses: Dispatch<SetStateAction<Status[]>>;
   getWorkStatuses: () => Promise<void>;
   issues: WorkIssue[];
   setIssues: Dispatch<SetStateAction<WorkIssue[]>>;
@@ -57,6 +58,7 @@ export const WorkplanContext = createContext<WorkplanContextProps>({
   firstNations: [],
   setFirstNations: () => ({}),
   statuses: [],
+  setStatuses: () => ({}),
   issues: [],
   setIssues: () => ({}),
   getWorkStatuses: () => new Promise((resolve) => resolve),
@@ -170,6 +172,7 @@ export const WorkplanProvider = ({
   return (
     <WorkplanContext.Provider
       value={{
+        setStatuses,
         getWorkStatuses,
         selectedWorkPhase,
         setSelectedWorkPhase,

epictrack-web/src/components/workPlan/WorkPlanContext.tsx

@@ -18,6 +18,8 @@ interface StatusContextProps {
   setStatus: Dispatch<SetStateAction<Status | undefined>>;
   onSave(data: any, callback: () => any): any;
   setShowApproveStatusDialog: Dispatch<SetStateAction<boolean>>;
+  selectedHistoryIndex?: number;
+  setSelectedHistoryIndex: Dispatch<SetStateAction<number>>;
   setIsCloning: Dispatch<SetStateAction<boolean>>;
   workId: string | null;
   isCloning: boolean;
@@ -34,6 +36,8 @@ export const StatusContext = createContext<StatusContextProps>({
   status: null,
   setStatus: () => ({}),
   onSave: (data: any, callback: () => any) => ({}),
+  selectedHistoryIndex: 0,
+  setSelectedHistoryIndex: () => ({}),
   setIsCloning: () => ({}),
   isCloning: false,
   workId: null,
@@ -50,9 +54,11 @@ export const StatusProvider = ({
     React.useState<boolean>(false);
   const [isCloning, setIsCloning] = React.useState<boolean>(false);
   const [status, setStatus] = React.useState<Status>();
+  const [selectedHistoryIndex, setSelectedHistoryIndex] =
+    React.useState<number>(0);
   const query = useSearchParams<StatusContainerRouteParams>();
   const workId = React.useMemo(() => query.get("work_id"), [query]);
-  const { getWorkStatuses } = useContext(WorkplanContext);
+  const { getWorkStatuses, setStatuses } = useContext(WorkplanContext);
   const { groups } = useAppSelector((state) => state.user.userDetail);
 
   const onDialogClose = () => {
@@ -122,6 +128,9 @@ export const StatusProvider = ({
     try {
       await statusService.approve(Number(workId), Number(status?.id));
       setShowApproveStatusDialog(false);
+      showNotification(`Status approved`, {
+        type: "success",
+      });
       setStatus(undefined);
       getWorkStatuses();
     } catch (e) {
@@ -139,6 +148,8 @@ export const StatusProvider = ({
   return (
     <StatusContext.Provider
       value={{
+        setSelectedHistoryIndex,
+        selectedHistoryIndex,
         groups,
         isCloning,
         workId,
@@ -172,7 +183,11 @@ export const StatusProvider = ({
         cancelButtonText="Cancel"
         isActionsRequired
         onCancel={closeApproveDialog}
-        onOk={approveStatus}
+        onOk={() => {
+          setStatuses([]); // Status history was not being updated so manually doing this
+          approveStatus();
+          getWorkStatuses(); // Status history was not being updated so manually doing this
+        }}
       />
     </StatusContext.Provider>
   );

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

@@ -0,0 +1,132 @@
+import TimelineConnector from "@mui/lab/TimelineConnector";
+import TimelineContent from "@mui/lab/TimelineContent";
+import TimelineDot from "@mui/lab/TimelineDot";
+import TimelineItem from "@mui/lab/TimelineItem";
+import TimelineSeparator from "@mui/lab/TimelineSeparator";
+import { Box } from "@mui/system";
+import moment from "moment";
+import { ETPreviewText } from "../../../../shared";
+import { Status } from "../../../../../models/status";
+import { Palette } from "../../../../../styles/theme";
+import { Button, Typography, styled } from "@mui/material";
+import React, { useContext, useState } from "react";
+import { IconProps } from "../../../../icons/type";
+import Icons from "../../../../icons";
+import { StatusContext } from "../../StatusContext";
+import { WorkplanContext } from "../../../WorkPlanContext";
+import { If, Then } from "react-if";
+
+const PencilEditIcon: React.FC<IconProps> = Icons["PencilEditIcon"];
+
+type HistoryItemProps = {
+  status: Status;
+};
+
+const ETStatusHistoryDate = styled(Typography)(() => ({
+  fontSize: "12px",
+  fontStyle: "normal",
+  fontWeight: "400",
+  lineHeight: "16px",
+}));
+
+const HistoryItem = ({ status }: HistoryItemProps) => {
+  const {
+    selectedHistoryIndex,
+    setSelectedHistoryIndex,
+    setShowStatusForm,
+    setStatus,
+    groups,
+  } = useContext(StatusContext);
+  const { statuses } = useContext(WorkplanContext);
+  const [statusHighlight, setStatusHighlight] = useState<number>(0);
+
+  React.useEffect(() => {
+    if (!statuses[0].is_approved) {
+      setStatusHighlight(statuses[1].id);
+    }
+    setSelectedHistoryIndex(statuses[1].id);
+  }, [statuses]);
+
+  return (
+    <Box sx={{ display: "flex", paddingTop: "16px" }}>
+      <TimelineItem sx={{ width: "30%" }}>
+        <TimelineSeparator>
+          <TimelineDot
+            sx={{
+              backgroundColor:
+                statusHighlight === status.id ? Palette.success.light : "",
+            }}
+          />
+          <TimelineConnector
+            sx={{
+              backgroundColor:
+                statusHighlight === status.id ? Palette.success.light : "",
+            }}
+          />
+        </TimelineSeparator>
+        <Box sx={{ display: "flex" }}>
+          <TimelineContent>
+            <Box>
+              <ETStatusHistoryDate>
+                {moment(status.posted_date).format("L")}
+              </ETStatusHistoryDate>
+            </Box>
+          </TimelineContent>
+        </Box>
+      </TimelineItem>
+      <Box sx={{ width: "70%" }}>
+        <Box>
+          <ETPreviewText
+            color={
+              status.id === selectedHistoryIndex
+                ? Palette.neutral.dark
+                : Palette.neutral.main
+            }
+          >
+            {status.id === selectedHistoryIndex ? (
+              <>
+                <Box>{status.description}</Box>
+                <If
+                  condition={
+                    groups.includes("Super User") &&
+                    statusHighlight === selectedHistoryIndex
+                  }
+                >
+                  <Then>
+                    <Box
+                      onClick={() => {
+                        setShowStatusForm(true);
+                        setStatus(status);
+                      }}
+                      sx={{ padding: "12px 8px" }}
+                    >
+                      <PencilEditIcon />
+                    </Box>
+                  </Then>
+                </If>
+              </>
+            ) : (
+              <Box>
+                {status.description.slice(0, 50)}...
+                <Button
+                  onClick={() => setSelectedHistoryIndex(status.id)}
+                  sx={{
+                    paddingBottom: 2,
+                    ":hover": {
+                      backgroundColor: Palette.white,
+                      borderColor: Palette.white,
+                    },
+                  }}
+                >
+                  Read More
+                </Button>
+              </Box>
+            )}
+          </ETPreviewText>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default HistoryItem;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { WorkplanContext } from "../../../WorkPlanContext";
+import { Status } from "../../../../../models/status";
+import { ETCaption1 } from "../../../../shared";
+import Timeline from "@mui/lab/Timeline";
+import HistoryItem from "./HistoryItem";
+import { If, Then } from "react-if";
+
+const StatusHistory = () => {
+  const { statuses } = React.useContext(WorkplanContext);
+
+  return (
+    <Box sx={{ width: "50%" }}>
+      <ETCaption1 bold sx={{ letterSpacing: "0.39px", paddingBottom: "16px" }}>
+        STATUS HISTORY
+      </ETCaption1>
+      <Timeline position="left" sx={{ overflowY: "scroll", flex: 1 }}>
+        {statuses.map((status: Status) => (
+          <If condition={status.is_approved && statuses[0].id !== status.id}>
+            <Then>
+              <HistoryItem status={status} />
+            </Then>
+          </If>
+        ))}
+      </Timeline>
+    </Box>
+  );
+};
+
+export default StatusHistory;

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

@@ -1,8 +1,8 @@
 import { Box } from "@mui/material";
-import { ETHeading4, ETParagraph } from "../../shared";
-import { Palette } from "../../../styles/theme";
-import Icons from "../../icons";
-import { IconProps } from "../../icons/type";
+import { ETHeading4, ETParagraph } from "../../../shared";
+import { Palette } from "../../../../styles/theme";
+import Icons from "../../../icons";
+import { IconProps } from "../../../icons/type";
 
 const NotificationWarning: React.FC<IconProps> = Icons["NotificationWarning"];
 

epictrack-web/src/components/workPlan/status/StatusOutOfDateBanner.tsx renamed to epictrack-web/src/components/workPlan/status/StatusView/StatusOutOfDateBanner.tsx

@@ -2,8 +2,11 @@ import React from "react";
 import NoDataEver from "../../../shared/NoDataEver";
 import { WorkplanContext } from "../../WorkPlanContext";
 import { StatusContext } from "../StatusContext";
-import StatusOutOfDateBanner from "../StatusOutOfDateBanner";
+import StatusOutOfDateBanner from "./StatusOutOfDateBanner";
 import RecentStatus from "./RecentStatus";
+import { Box } from "@mui/material";
+import StatusHistory from "./StatusHistory";
+import { Status } from "../../../../models/status";
 
 const StatusView = () => {
   const { statuses } = React.useContext(WorkplanContext);
@@ -13,6 +16,13 @@ const StatusView = () => {
     setShowStatusForm(true);
   };
 
+  const hasHistory = () => {
+    const approvedStatuses: Status[] = statuses.filter((status: Status) => {
+      return status.is_approved;
+    });
+    return approvedStatuses?.length > 1; // No history if only 1 status is approved
+  };
+
   return (
     <>
       {statuses.length === 0 && (
@@ -26,7 +36,10 @@ const StatusView = () => {
       {statuses.length > 0 && !statuses[0].is_approved && (
         <StatusOutOfDateBanner />
       )}
-      {statuses.length > 0 && <RecentStatus />}
+      <Box sx={{ display: "flex", gap: "24px" }}>
+        {statuses.length > 0 && <RecentStatus />}
+        {hasHistory() && <StatusHistory />}
+      </Box>
     </>
   );
 };