out of date and hide invalid dates in date picker (#1398)

* out of date and hide invalid dates in date picker * status out of date * remove console log --------- Co-authored-by: Tom Chapman <tchapman000@gmail.com>
bcgov · Dec 6, 2023 · d05bfcd · d05bfcd
1 parent d49235c
commit d05bfcd
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 27 deletions.
diff --git a/epictrack-web/src/components/workPlan/WorkPlanContainer.tsx b/epictrack-web/src/components/workPlan/WorkPlanContainer.tsx
@@ -71,8 +71,9 @@ const WorkPlanContainer = () => {
           <ETTab
             label="Status"
             icon={
-              (ctx.statuses.length === 0 ||
-                ctx.statuses[0].is_approved === false) && <IndicatorIcon />
+              (ctx.statuses.length === 0 || ctx.isStatusOutOfDate()) && (
+                <IndicatorIcon />
+              )
             }
           />
           <ETTab label="Issues" />

diff --git a/epictrack-web/src/components/workPlan/WorkPlanContext.tsx b/epictrack-web/src/components/workPlan/WorkPlanContext.tsx
@@ -8,7 +8,7 @@ import {
 } from "react";
 import { useSearchParams } from "../../hooks/SearchParams";
 import workService from "../../services/workService/workService";
-import { Work, WorkPhase, WorkPhaseAdditionalInfo } from "../../models/work";
+import { Work, WorkPhaseAdditionalInfo } from "../../models/work";
 import { StaffWorkRole } from "../../models/staff";
 import {
   ACTIVE_STATUS,
@@ -20,6 +20,7 @@ import { Status } from "../../models/status";
 import { WorkIssue } from "../../models/Issue";
 import statusService from "../../services/statusService/statusService";
 import dateUtils from "../../utils/dateUtils";
+import moment from "moment";
 
 interface WorkplanContextProps {
   selectedWorkPhase?: WorkPhaseAdditionalInfo;
@@ -40,6 +41,7 @@ interface WorkplanContextProps {
   getWorkStatuses: () => Promise<void>;
   issues: WorkIssue[];
   setIssues: Dispatch<SetStateAction<WorkIssue[]>>;
+  isStatusOutOfDate: () => boolean;
 }
 interface WorkPlanContainerRouteParams extends URLSearchParams {
   work_id: string;
@@ -62,6 +64,7 @@ export const WorkplanContext = createContext<WorkplanContextProps>({
   issues: [],
   setIssues: () => ({}),
   getWorkStatuses: () => new Promise((resolve) => resolve),
+  isStatusOutOfDate: () => false,
 });
 
 export const WorkplanProvider = ({
@@ -169,6 +172,25 @@ export const WorkplanProvider = ({
     }
   };
 
+  const STATUS_DATE_THRESHOLD = 7;
+
+  const isStatusOutOfDate = () => {
+    const lastApprovedStatus = statuses.find((status) => status.is_approved);
+
+    if (!lastApprovedStatus) {
+      return false;
+    }
+
+    const daysAgo = moment().subtract(STATUS_DATE_THRESHOLD, "days");
+    const NDaysAgo = dateUtils.diff(
+      daysAgo.toLocaleString(),
+      lastApprovedStatus?.posted_date,
+      "days"
+    );
+
+    return NDaysAgo > 0;
+  };
+
   return (
     <WorkplanContext.Provider
       value={{
@@ -188,6 +210,7 @@ export const WorkplanProvider = ({
         statuses,
         issues,
         setIssues,
+        isStatusOutOfDate,
       }}
     >
       {children}

diff --git a/epictrack-web/src/components/workPlan/status/StatusForm.tsx b/epictrack-web/src/components/workPlan/status/StatusForm.tsx
@@ -7,7 +7,10 @@ import { ETFormLabel, ETFormLabelWithCharacterLimit } from "../../shared";
 import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import dayjs from "dayjs";
-import { DATE_FORMAT } from "../../../constants/application-constant";
+import {
+  DATE_FORMAT,
+  EARLIEST_WORK_DATE,
+} from "../../../constants/application-constant";
 import Moment from "moment";
 import { StatusContext } from "./StatusContext";
 import { WorkplanContext } from "../WorkPlanContext";
@@ -19,7 +22,21 @@ const StatusForm = () => {
   const [description, setDescription] = React.useState<string>("");
   const startDateRef = useRef();
   const { status, onSave, isCloning } = useContext(StatusContext);
-  const { getWorkStatuses } = useContext(WorkplanContext);
+  const { getWorkStatuses, statuses } = useContext(WorkplanContext);
+
+  const getPostedDateMin = () => {
+    if (isCloning) {
+      return dayjs(statuses[0].posted_date);
+    }
+    if (statuses.length === 1 && statuses[0]?.is_approved) {
+      return dayjs(EARLIEST_WORK_DATE);
+    }
+
+    return dayjs(statuses[1]?.posted_date || EARLIEST_WORK_DATE);
+  };
+
+  const postedDateMin = getPostedDateMin();
+  const postedDateMax = dayjs(new Date()).add(7, "day");
 
   React.useEffect(() => {
     if (status) {
@@ -76,6 +93,8 @@ const StatusForm = () => {
             render={({ field: { onChange, value }, fieldState: { error } }) => (
               <LocalizationProvider dateAdapter={AdapterDayjs}>
                 <DatePicker
+                  minDate={postedDateMin}
+                  maxDate={postedDateMax}
                   format={DATE_FORMAT}
                   slotProps={{
                     textField: {

diff --git a/epictrack-web/src/components/workPlan/status/StatusView/index.tsx b/epictrack-web/src/components/workPlan/status/StatusView/index.tsx
@@ -6,37 +6,16 @@ import RecentStatus from "./RecentStatus";
 import { Box, Grid } from "@mui/material";
 import StatusHistory from "./StatusHistory";
 import WarningBox from "../../../shared/warningBox";
-import { dateUtils } from "../../../../utils";
-import moment from "moment";
 import { When } from "react-if";
 
 const StatusView = () => {
-  const { statuses } = React.useContext(WorkplanContext);
+  const { statuses, isStatusOutOfDate } = React.useContext(WorkplanContext);
   const { setShowStatusForm } = React.useContext(StatusContext);
 
   const onAddButtonClickHandler = () => {
     setShowStatusForm(true);
   };
 
-  const STATUS_DATE_THRESHOLD = 7;
-
-  const isStatusOutOfDate = () => {
-    const lastApprovedStatus = statuses.find((status) => status.is_approved);
-
-    if (!lastApprovedStatus) {
-      return false;
-    }
-
-    const daysAgo = moment().subtract(STATUS_DATE_THRESHOLD, "days");
-    const NDaysAgo = dateUtils.diff(
-      daysAgo.toLocaleString(),
-      lastApprovedStatus?.approved_date,
-      "days"
-    );
-
-    return NDaysAgo > 0;
-  };
-
   return (
     <>
       <When condition={statuses.length === 0}>

diff --git a/epictrack-web/src/constants/application-constant.ts b/epictrack-web/src/constants/application-constant.ts
@@ -1,6 +1,7 @@
 export const DATE_FORMAT = "YYYY-MM-DD";
 export const DISPLAY_DATE_FORMAT = "DD MMM YYYY";
 export const MONTH_DAY_YEAR = "MMM.DD YYYY";
+export const EARLIEST_WORK_DATE = "2019-12-16";
 export const REPORT_TYPES = [
   {
     Text: "Anticipated EA Referral Schedule",