diff --git a/epictrack-web/src/components/reports/eaReferral/AnticipatedEAOSchedule.tsx b/epictrack-web/src/components/reports/eaReferral/AnticipatedEAOSchedule.tsx index 959d062f4..9c5f09ccd 100644 --- a/epictrack-web/src/components/reports/eaReferral/AnticipatedEAOSchedule.tsx +++ b/epictrack-web/src/components/reports/eaReferral/AnticipatedEAOSchedule.tsx @@ -58,7 +58,6 @@ export default function AnticipatedEAOSchedule() { ); setTypeFilter(filterTypes); }, [reports]); - console.log("TYPES", typeFilter); const fetchReportData = React.useCallback(async () => { setResultStatus(RESULT_STATUS.LOADING); try { diff --git a/epictrack-web/src/components/workPlan/event/EventForm.tsx b/epictrack-web/src/components/workPlan/event/EventForm.tsx index 1514afe3d..780319e2e 100644 --- a/epictrack-web/src/components/workPlan/event/EventForm.tsx +++ b/epictrack-web/src/components/workPlan/event/EventForm.tsx @@ -4,18 +4,14 @@ import * as yup from "yup"; import { yupResolver } from "@hookform/resolvers/yup"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers"; +import dayjs from "dayjs"; import Moment from "moment"; import { COMMON_ERROR_MESSAGE, DATE_FORMAT, } from "../../../constants/application-constant"; import { Box, FormControlLabel, Grid, TextField, Tooltip } from "@mui/material"; -import { - ETFormLabel, - ETFormLabelWithCharacterLimit, - ETParagraph, -} from "../../shared"; -import dayjs from "dayjs"; +import { ETFormLabel, ETFormLabelWithCharacterLimit } from "../../shared"; import ControlledSelectV2 from "../../shared/controlledInputComponents/ControlledSelectV2"; import { Palette } from "../../../styles/theme"; import { WorkplanContext } from "../WorkPlanContext"; @@ -35,14 +31,14 @@ import EventConfiguration from "../../../models/eventConfiguration"; import ControlledSwitch from "../../shared/controlledInputComponents/ControlledSwitch"; import MultiDaysInput from "./components/MultiDaysInput"; import { dateUtils } from "../../../utils"; -import ExtSusInput from "./components/ExtSusInput"; import PCPInput from "./components/PCPInput"; import Icons from "../../icons/index"; import { IconProps } from "../../icons/type"; import SingleDayPCPInput from "./components/SingleDayPCPInput"; -import outcomeConfigurationService from "../../../services/outcomeConfigurationService/outcomeConfigurationService"; import DecisionInput from "./components/DecisionInput"; import { POSITION_ENUM } from "../../../models/position"; +import { Else, If, Then } from "react-if"; +import ExtensionInput from "./components/ExtensionInput"; interface EventFormProps { onSave: () => void; @@ -107,10 +103,6 @@ const EventForm = ({ onSave, event, isFormFieldsLocked }: EventFormProps) => { }), [selectedConfiguration, actualAdded] ); - // const isFormFieldsLocked = React.useMemo(() => { - // const isLocked = !!event?.actual_date; - // return isLocked; - // }, [event]); const methods = useForm({ resolver: yupResolver(schema), defaultValues: event, @@ -127,7 +119,13 @@ const EventForm = ({ onSave, event, isFormFieldsLocked }: EventFormProps) => { } = methods; React.useEffect(() => { - if (selectedConfiguration && selectedConfiguration.multiple_days) { + if ( + selectedConfiguration && + selectedConfiguration.event_category_id === EventCategory.EXTENSION + ) { + setAnticipatedLabel("Anticipated Order Date"); + setActualDateLabel("Actual Order Date"); + } else if (selectedConfiguration && selectedConfiguration.multiple_days) { setAnticipatedLabel("Anticipated Start Date"); setActualDateLabel("Actual Start Date"); } else { @@ -193,8 +191,8 @@ const EventForm = ({ onSave, event, isFormFieldsLocked }: EventFormProps) => { data.notes = notes; // setSubmittedEvent(data); const showConfirmDialog = - (event === undefined && data.actual_date != "") || - (event != null && event.actual_date == null && data.actual_date != ""); + (event === undefined && !!data.actual_date) || + (event != null && event.actual_date == null && !!data.actual_date); if (!showConfirmDialog) { saveEvent(data); } @@ -466,17 +464,26 @@ const EventForm = ({ onSave, event, isFormFieldsLocked }: EventFormProps) => { borderTop: `1px solid ${Palette.neutral.bg.dark}`, }} > - {selectedConfiguration?.multiple_days && ( - - )} - {[EventCategory.EXTENSION, EventCategory.SUSPENSION].includes( - Number(selectedConfiguration?.event_category_id) - ) && } + + + + + + + + + + {selectedConfiguration?.event_category_id === EventCategory.PCP && ![EventType.OPEN_HOUSE, EventType.VIRTUAL_OPEN_HOUSE].includes( selectedConfiguration?.event_type_id diff --git a/epictrack-web/src/components/workPlan/event/EventList.tsx b/epictrack-web/src/components/workPlan/event/EventList.tsx index 5b610f1e3..14fe288eb 100644 --- a/epictrack-web/src/components/workPlan/event/EventList.tsx +++ b/epictrack-web/src/components/workPlan/event/EventList.tsx @@ -80,7 +80,6 @@ const EventList = () => { const [showTaskForm, setShowTaskForm] = React.useState(false); const [showMilestoneForm, setShowMilestoneForm] = React.useState(false); - // const [eventId, setEventId] = React.useState(); const [showTemplateConfirmation, setShowTemplateConfirmation] = React.useState(false); const [selectedTemplateId, setSelectedTemplateId] = React.useState(); @@ -274,7 +273,6 @@ const EventList = () => { const onRowClick = (event: any, row: EventsGridModel) => { event.preventDefault(); - // setEventId(row.id); if (row.type === EVENT_TYPE.MILESTONE) { getMilestoneEvent(row.id); setShowMilestoneForm(row.type === EVENT_TYPE.MILESTONE); @@ -291,11 +289,13 @@ const EventList = () => { setShowTaskForm(false); setShowTemplateForm(false); setShowMilestoneForm(false); - // setEventId(undefined); setMilestoneEvent(undefined); setTaskEvent(undefined); }; - + const onAddMilestone = () => { + setShowMilestoneForm(true); + setShowDeleteMilestoneButton(false); + }; const getMilestoneEvent = async (eventId: number) => { try { const result = await eventService.getById(eventId); @@ -574,7 +574,7 @@ const EventList = () => { - diff --git a/epictrack-web/src/components/workPlan/event/components/ExtSusInput.tsx b/epictrack-web/src/components/workPlan/event/components/ExtSusInput.tsx deleted file mode 100644 index 10e2f785c..000000000 --- a/epictrack-web/src/components/workPlan/event/components/ExtSusInput.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { Grid, TextField } from "@mui/material"; -import React from "react"; -import { ETFormLabel, ETFormLabelWithCharacterLimit } from "../../../shared"; -import ControlledSelectV2 from "../../../shared/controlledInputComponents/ControlledSelectV2"; -import { useFormContext } from "react-hook-form"; -import { ListType } from "../../../../models/code"; - -interface ExtSusInputProps { - isFormFieldsLocked: boolean; -} -const ExtSusInput = ({ isFormFieldsLocked }: ExtSusInputProps) => { - const [actSections, setActSections] = React.useState([]); - const [reasonCount, setReasonCount] = React.useState(0); - const changeReasonTextHandler = (event: any) => { - setReasonCount(event.target.value.length); - }; - const { - register, - unregister, - formState: { errors }, - } = useFormContext(); - React.useEffect(() => { - return () => { - unregister("act_section_id"); - unregister("reason"); - }; - }, []); - return ( - <> - - Act Section - o.id.toString()} - getOptionLabel={(o: ListType) => o.name} - {...register("act_section_id")} - > - - - - Reason - - - - - ); -}; -export default ExtSusInput; diff --git a/epictrack-web/src/components/workPlan/event/components/ExtensionInput.tsx b/epictrack-web/src/components/workPlan/event/components/ExtensionInput.tsx new file mode 100644 index 000000000..ee0080137 --- /dev/null +++ b/epictrack-web/src/components/workPlan/event/components/ExtensionInput.tsx @@ -0,0 +1,173 @@ +import { Grid, TextField } from "@mui/material"; +import React from "react"; +import Moment from "moment"; +import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; +import dayjs from "dayjs"; +import { ETFormLabel, ETFormLabelWithCharacterLimit } from "../../../shared"; +import ControlledSelectV2 from "../../../shared/controlledInputComponents/ControlledSelectV2"; +import { Controller, useFormContext } from "react-hook-form"; +import { ListType } from "../../../../models/code"; +import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers"; +import { DATE_FORMAT } from "../../../../constants/application-constant"; +import { WorkplanContext } from "../../WorkPlanContext"; +import { dateUtils } from "../../../../utils"; +import { SyntheticEvent } from "react-draft-wysiwyg"; + +interface ExtensionInputProps { + isFormFieldsLocked: boolean; +} +const ExtensionInput = (props: ExtensionInputProps) => { + const [actSections, setActSections] = React.useState([]); + const [reasonCount, setReasonCount] = React.useState(0); + const changeReasonTextHandler = (event: any) => { + setReasonCount(event.target.value.length); + }; + const { + register, + unregister, + formState: { errors }, + control, + setValue, + getValues, + } = useFormContext(); + const ctx = React.useContext(WorkplanContext); + React.useEffect(() => { + return () => { + unregister("act_section_id"); + unregister("reason"); + unregister("number_of_days"); + unregister("phase_end_date"); + }; + }, []); + React.useEffect(() => { + let numberOfDays = Number(getValues("number_of_days")); + if (numberOfDaysRef.current as any) { + numberOfDays = (numberOfDaysRef.current as any)["value"]; + } + setValue( + "phase_end_date", + Moment(ctx.selectedWorkPhase?.end_date).add(numberOfDays, "days").format() + ); + }, []); + const numberOfDaysRef = React.useRef(); + const endDateRef = React.useRef(); + const onDayChange = (event: SyntheticEvent) => { + if (endDateRef.current as any) { + setValue( + "phase_end_date", + Moment(ctx.selectedWorkPhase?.end_date) + .add(Number((event.target as any)["value"]), "days") + .format(DATE_FORMAT) + ); + } + }; + const onEndDateChange = (endDate: any) => { + if (numberOfDaysRef.current as any) { + setValue( + "number_of_days", + Moment(endDate).diff(Moment(ctx.selectedWorkPhase?.end_date), "days") + ); + } + }; + return ( + <> + + Current Phase End Date + + + + Number of Days + + + + End Date + ( + + { + const d = event ? event["$d"] : null; + onChange(d); + onEndDateChange(d); + }} + sx={{ display: "block" }} + /> + + )} + /> + + + + Act Section + o.id.toString()} + getOptionLabel={(o: ListType) => o.name} + {...register("act_section_id")} + > + + + + Reason + + + + + ); +}; +export default ExtensionInput; diff --git a/epictrack-web/src/components/workPlan/event/components/MultiDaysInput.tsx b/epictrack-web/src/components/workPlan/event/components/MultiDaysInput.tsx index 725900ad4..b232d0a80 100644 --- a/epictrack-web/src/components/workPlan/event/components/MultiDaysInput.tsx +++ b/epictrack-web/src/components/workPlan/event/components/MultiDaysInput.tsx @@ -21,8 +21,8 @@ const MultiDaysInput = ({ formState: { errors }, } = useFormContext(); React.useEffect(() => { + onChangeDay(); return () => { - console.log("unregistering"); unregister("number_of_days"); }; }, []);