diff --git a/src/components/dialog/faultEvent/FaultEventCreation.tsx b/src/components/dialog/faultEvent/FaultEventCreation.tsx index 187fb544..6b09be21 100644 --- a/src/components/dialog/faultEvent/FaultEventCreation.tsx +++ b/src/components/dialog/faultEvent/FaultEventCreation.tsx @@ -1,5 +1,4 @@ import * as React from "react"; - import { FormControl, InputLabel, MenuItem, Select, TextField, Typography } from "@mui/material"; import useStyles from "@components/dialog/faultEvent/FaultEventCreation.styles"; import { Controller } from "react-hook-form"; @@ -19,7 +18,6 @@ interface Props { isEditMode?: boolean; } -// TODO: remove ts-ignores and migrate to higher version of react-hook-form const FaultEventCreation = ({ useFormMethods, isRootEvent, @@ -41,9 +39,10 @@ const FaultEventCreation = ({ } = useFormMethods; const faultEvents = useReusableFaultEvents(); - const [newEvent, setNewEvent] = useState(null); + const [newEvent, setNewEvent] = useState(null); const [selectedEvent, setSelectedEvent] = useState(null); const [showCreateEvent, setShowCreateEvent] = useState(false); + const [isCreatedEvent, setIsCreatedEvent] = useState(false); const existingEventSelected = Boolean(selectedEvent); const lastGateTypeRef = useRef(selectedEvent?.gateType); const eventTypeWatch = watch("eventType"); @@ -53,23 +52,38 @@ const FaultEventCreation = ({ if (selectedEvent) { setValue("name", selectedEvent.name); setValue("existingEvent", selectedEvent.iri ? selectedEvent : null); + if (existingEventSelected) { + setValue("eventType", selectedEvent.eventType); + } + if (isRootEvent || isCreatedEvent) { + setValue("eventType", EventType.INTERMEDIATE); + setValue("gateType", GateType.OR); + } } else { reset(); } - }, [selectedEvent]); + }, [isRootEvent, selectedEvent, setValue, existingEventSelected, isCreatedEvent, reset]); const [filteredOptions, setFilteredOptions] = useState([{}]); const updatedFHAEventTypes = updateEventsType(faultEvents, "fha-fault-event", EventType.EXTERNAL); - const handleFilterOptions = (inputValue) => { + const handleFilterOptions = (inputValue: string) => { const filtered = faultEvents.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase())); setNewEvent(inputValue); setFilteredOptions(filtered); }; const handleOnCreateEventClick = (e: MouseEvent) => { - setSelectedEvent({ name: newEvent }); + setSelectedEvent({ name: newEvent } as FaultEvent); setShowCreateEvent(true); + setIsCreatedEvent(true); + setValue("eventType", EventType.INTERMEDIATE); + setValue("gateType", GateType.OR); + }; + + const handleEventSelect = (data: any) => { + setSelectedEvent(data); + setIsCreatedEvent(false); }; function renderEventSelect() { @@ -85,7 +99,7 @@ const FaultEventCreation = ({ control={control} name="event" options={isRootEvent ? faultEvents : updatedFHAEventTypes} - onChangeCallback={(data: any) => setSelectedEvent(data)} + onChangeCallback={handleEventSelect} onInputChangeCallback={handleFilterOptions} onCreateEventClick={handleOnCreateEventClick} getOptionKey={(option) => option.iri} @@ -97,8 +111,8 @@ const FaultEventCreation = ({ disabled={disabled} /> - {!selectedEvent && !isRootEvent && ( - + {selectedEvent && ( + {t("newFtaModal.type")} { @@ -107,13 +121,15 @@ const FaultEventCreation = ({ if (e.target.value !== EventType.INTERMEDIATE && e.target.value !== EventType.CONDITIONING) { lastGateTypeRef.current = gateTypeWatch; setValue("gateType", null); - } else setValue("gateType", lastGateTypeRef.current ? lastGateTypeRef.current : GateType.OR); + } else { + setValue("gateType", lastGateTypeRef.current ? lastGateTypeRef.current : GateType.OR); + } _onChange(e); }; return (