From 3b4290f66b4db100b7fa454427dbd320b67cb793 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Tue, 5 Nov 2024 16:34:00 +0100 Subject: [PATCH 01/18] Use new borehole get in boreholeGeneral form --- src/client/src/api/borehole.ts | 5 + src/client/src/pages/detail/detailPage.tsx | 18 +- .../src/pages/detail/detailPageContent.tsx | 17 +- .../detail/form/borehole/boreholeFormUtils.ts | 6 + .../form/borehole/boreholeGeneralSegment.tsx | 14 +- .../detail/form/borehole/boreholePanel.tsx | 160 ++++++++++-------- .../form/borehole/boreholePanelInterfaces.ts | 16 ++ 7 files changed, 157 insertions(+), 79 deletions(-) create mode 100644 src/client/src/pages/detail/form/borehole/boreholeFormUtils.ts diff --git a/src/client/src/api/borehole.ts b/src/client/src/api/borehole.ts index d663ed101..ab85c9f4f 100644 --- a/src/client/src/api/borehole.ts +++ b/src/client/src/api/borehole.ts @@ -16,6 +16,11 @@ export interface Identifier extends BasicIdentifier { } export interface BoreholeV2 { + purposeId: number; + typeId: number; + remarks: string; + statusId: number; + workflow: Workflow; boreholeCodelists: BasicIdentifier[]; workflows: Workflow[]; originalReferenceSystem: number; diff --git a/src/client/src/pages/detail/detailPage.tsx b/src/client/src/pages/detail/detailPage.tsx index 037050412..d1bf29d5f 100644 --- a/src/client/src/pages/detail/detailPage.tsx +++ b/src/client/src/pages/detail/detailPage.tsx @@ -10,6 +10,8 @@ import { LayoutBox, MainContentBox, SidebarBox } from "../../components/styledCo import DetailHeader from "./detailHeader.tsx"; import { DetailPageContent } from "./detailPageContent.tsx"; import { DetailSideNav } from "./detailSideNav.tsx"; +import { prepareBoreholeDataForSubmit } from "./form/borehole/boreholeFormUtils.ts"; +import { BoreholeFormInputs } from "./form/borehole/boreholePanelInterfaces.ts"; import { prepareLocationDataForSubmit } from "./form/location/locationFormUtils.ts"; import { LocationFormInputs } from "./form/location/locationPanelInterfaces.tsx"; import { useLabelingContext } from "./labeling/labelingInterfaces.tsx"; @@ -54,8 +56,18 @@ export const DetailPage: FC = () => { ); const locationPanelRef = useRef<{ submit: () => void; reset: () => void }>(null); + const boreholePanelRef = useRef<{ submit: () => void; reset: () => void }>(null); - const onFormSubmit = (formInputs: LocationFormInputs) => { + const onBoreholeFormSubmit = (formInputs: BoreholeFormInputs) => { + const boreholeSubmission = prepareBoreholeDataForSubmit(formInputs); + getBoreholeById(parseInt(id)).then(b => { + updateBorehole({ ...b, ...boreholeSubmission }).then(r => { + setBorehole(r); + }); + }); + }; + + const onLocationFormSubmit = (formInputs: LocationFormInputs) => { const boreholeSubmission = prepareLocationDataForSubmit(formInputs); getBoreholeById(parseInt(id)).then(b => { updateBorehole({ ...b, ...boreholeSubmission }).then(r => { @@ -155,8 +167,10 @@ export const DetailPage: FC = () => { void; reset: () => void }>; - onFormSubmit: (data: LocationFormInputs) => void; + boreholePanelRef: RefObject<{ submit: () => void; reset: () => void }>; + onLocationFormSubmit: (data: LocationFormInputs) => void; + onBoreholeFormSubmit: (data: BoreholeFormInputs) => void; handleDirtyChange: (isDirty: boolean) => void; borehole: BoreholeV2; setBorehole: (borehole: BoreholeV2) => void; @@ -40,7 +43,9 @@ export const DetailPageContent = ({ editingEnabled, editableByCurrentUser, locationPanelRef, - onFormSubmit, + boreholePanelRef, + onLocationFormSubmit, + onBoreholeFormSubmit, handleDirtyChange, borehole, setBorehole, @@ -184,7 +189,7 @@ export const DetailPageContent = ({ @@ -195,11 +200,15 @@ export const DetailPageContent = ({ path={"/:id/borehole"} render={() => ( )} /> diff --git a/src/client/src/pages/detail/form/borehole/boreholeFormUtils.ts b/src/client/src/pages/detail/form/borehole/boreholeFormUtils.ts new file mode 100644 index 000000000..4e9dbbad3 --- /dev/null +++ b/src/client/src/pages/detail/form/borehole/boreholeFormUtils.ts @@ -0,0 +1,6 @@ +import { BoreholeSubmission } from "../location/locationPanelInterfaces.tsx"; +import { BoreholeFormInputs } from "./boreholePanelInterfaces.ts"; + +export const prepareBoreholeDataForSubmit = (formInputs: BoreholeFormInputs) => { + return { ...formInputs } as BoreholeSubmission; +}; diff --git a/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.tsx b/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.tsx index 165c3b4e2..b86b65f6c 100644 --- a/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.tsx +++ b/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.tsx @@ -2,9 +2,9 @@ import { useTranslation } from "react-i18next"; import { Form, Segment, TextArea } from "semantic-ui-react"; import DomainDropdown from "../../../../components/legacyComponents/domain/dropdown/domainDropdown.jsx"; import { capitalizeFirstLetter } from "../../../../utils"; -import { BoreholeGeneralProps } from "./boreholePanelInterfaces.ts"; +import { Temp } from "./boreholePanelInterfaces.ts"; -const BoreholeGeneralSegment = ({ legacyBorehole, updateChange, isEditable }: BoreholeGeneralProps) => { +const BoreholeGeneralSegment = ({ borehole, updateChange, isEditable }: Temp) => { const { t } = useTranslation(); return ( @@ -21,14 +21,14 @@ const BoreholeGeneralSegment = ({ legacyBorehole, updateChange, isEditable }: Bo
{/* drilling type in Borehole */} - + { updateChange("borehole_type", selected.id, false); }} schema="borehole_type" - selected={legacyBorehole.data.borehole_type} + selected={borehole.typeId} readOnly={!isEditable} /> @@ -41,7 +41,7 @@ const BoreholeGeneralSegment = ({ legacyBorehole, updateChange, isEditable }: Bo updateChange("extended.purpose", selected.id, false); }} schema="extended.purpose" - selected={legacyBorehole.data.extended.purpose} + selected={borehole.purposeId} readOnly={!isEditable} /> @@ -54,7 +54,7 @@ const BoreholeGeneralSegment = ({ legacyBorehole, updateChange, isEditable }: Bo updateChange("extended.status", selected.id, false); }} schema="extended.status" - selected={legacyBorehole.data.extended.status} + selected={borehole.statusId} readOnly={!isEditable} /> @@ -74,7 +74,7 @@ const BoreholeGeneralSegment = ({ legacyBorehole, updateChange, isEditable }: Bo updateChange("custom.remarks", e.target.value); }} rows={14} - value={legacyBorehole.data.custom.remarks} + value={borehole.remarks} readOnly={!isEditable} /> diff --git a/src/client/src/pages/detail/form/borehole/boreholePanel.tsx b/src/client/src/pages/detail/form/borehole/boreholePanel.tsx index 2533e5a17..8cffb03a3 100644 --- a/src/client/src/pages/detail/form/borehole/boreholePanel.tsx +++ b/src/client/src/pages/detail/form/borehole/boreholePanel.tsx @@ -1,80 +1,108 @@ -import { SyntheticEvent, useEffect, useState } from "react"; +import { forwardRef, SyntheticEvent, useEffect, useImperativeHandle, useState } from "react"; +import { useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { useHistory, useLocation } from "react-router-dom"; import { BdmsTab, BdmsTabContentBox, BdmsTabs } from "../../../../components/styledTabComponents.jsx"; import BoreholeDetailSegment from "./boreholeDetailSegment"; import BoreholeGeneralSegment from "./boreholeGeneralSegment"; -import { BoreholePanelProps } from "./boreholePanelInterfaces"; +import { BoreholeFormInputs, BoreholePanelProps } from "./boreholePanelInterfaces"; import Geometry from "./geometry.jsx"; import Sections from "./sections.jsx"; -const BoreholePanel = ({ boreholeId, legacyBorehole, updateChange, updateNumber, isEditable }: BoreholePanelProps) => { - const { t } = useTranslation(); - const history = useHistory(); - const location = useLocation(); - const [activeIndex, setActiveIndex] = useState(0); - const tabs = [ - { - label: t("general"), - hash: "general", - }, - { label: t("sections"), hash: "sections" }, - { label: t("boreholeGeometry"), hash: "geometry" }, - ]; +export const BoreholePanel = forwardRef( + ( + { boreholeId, legacyBorehole, borehole, updateChange, updateNumber, isEditable, onDirtyChange }: BoreholePanelProps, + ref, + ) => { + const { t } = useTranslation(); + const history = useHistory(); + const location = useLocation(); + const [activeIndex, setActiveIndex] = useState(0); + const formMethods = useForm({ + mode: "onChange", + defaultValues: {}, + }); + const tabs = [ + { + label: t("general"), + hash: "general", + }, + { label: t("sections"), hash: "sections" }, + { label: t("boreholeGeometry"), hash: "geometry" }, + ]; - const handleIndexChange = (event: SyntheticEvent | null, index: number) => { - setActiveIndex(index); - const newLocation = location.pathname + "#" + tabs[index].hash; - if (location.pathname + location.hash !== newLocation) { - history.push(newLocation); - } - }; + const handleIndexChange = (event: SyntheticEvent | null, index: number) => { + setActiveIndex(index); + const newLocation = location.pathname + "#" + tabs[index].hash; + if (location.pathname + location.hash !== newLocation) { + history.push(newLocation); + } + }; - useEffect(() => { - const newTabIndex = tabs.findIndex(t => t.hash === location.hash.replace("#", "")); - if (newTabIndex > -1 && activeIndex !== newTabIndex) { - handleIndexChange(null, newTabIndex); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [location.hash]); + useEffect(() => { + onDirtyChange(Object.keys(formMethods.formState.dirtyFields).length > 0); + }, [ + formMethods.formState.dirtyFields, + formMethods.formState.isDirty, + formMethods, + formMethods.formState, + onDirtyChange, + ]); - useEffect(() => { - if (!location.hash) { - history.replace(location.pathname + "#" + tabs[activeIndex].hash); - } - // eslint-disable-next-line - }, []); + // expose form methods to parent component + useImperativeHandle(ref, () => ({ + submit: () => { + console.log("submit"); + }, + reset: () => { + formMethods.reset(); + }, + })); - return ( - <> - - {tabs.map(tab => { - return ; - })} - - - {activeIndex === 0 && ( - <> - - { + const newTabIndex = tabs.findIndex(t => t.hash === location.hash.replace("#", "")); + if (newTabIndex > -1 && activeIndex !== newTabIndex) { + handleIndexChange(null, newTabIndex); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [location.hash]); + + useEffect(() => { + if (!location.hash) { + history.replace(location.pathname + "#" + tabs[activeIndex].hash); + } + // eslint-disable-next-line + }, []); + + return ( + <> + + {tabs.map(tab => { + return ; + })} + + + {activeIndex === 0 && ( + <> + + + + )} + {activeIndex === 1 && } + {activeIndex === 2 && ( + - - )} - {activeIndex === 1 && } - {activeIndex === 2 && ( - - )} - - - ); -}; - -export default BoreholePanel; + )} + + + ); + }, +); diff --git a/src/client/src/pages/detail/form/borehole/boreholePanelInterfaces.ts b/src/client/src/pages/detail/form/borehole/boreholePanelInterfaces.ts index 8c7e18a0b..035d40f38 100644 --- a/src/client/src/pages/detail/form/borehole/boreholePanelInterfaces.ts +++ b/src/client/src/pages/detail/form/borehole/boreholePanelInterfaces.ts @@ -1,4 +1,5 @@ import { Borehole } from "../../../../api-lib/ReduxStateInterfaces.ts"; +import { BoreholeV2 } from "../../../../api/borehole.ts"; export interface BoreholeGeneralProps { legacyBorehole: Borehole; @@ -10,13 +11,26 @@ export interface BoreholeGeneralProps { isEditable: boolean; } +export interface Temp { + borehole: BoreholeV2; + updateChange: ( + attribute: string, + value: string | number | boolean | null | (number | string | null)[], + to?: boolean, + ) => void; + isEditable: boolean; +} + export interface BoreholeDetailProps extends BoreholeGeneralProps { updateNumber: (attribute: string, value: number | null, to?: boolean) => void; } export interface BoreholePanelProps extends BoreholeGeneralProps { boreholeId: string; + borehole: BoreholeV2; updateNumber: (attribute: string, value: number | null, to?: boolean) => void; + onSubmit: (data: BoreholeFormInputs) => void; + onDirtyChange: (isDirty: boolean) => void; } export interface DepthTVD { @@ -24,3 +38,5 @@ export interface DepthTVD { "extended.top_bedrock_fresh_md"?: number; "custom.top_bedrock_weathered_md"?: number; } + +export interface BoreholeFormInputs {} From 2273041485a42ca30241399b12d860be08503557 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Tue, 5 Nov 2024 16:48:28 +0100 Subject: [PATCH 02/18] Use new borehole get in boreholeDetail form --- src/client/src/api/borehole.ts | 8 ++++ .../src/pages/detail/detailPageContent.tsx | 1 - .../form/borehole/boreholeDetailSegment.tsx | 44 +++++++------------ .../form/borehole/boreholeGeneralSegment.tsx | 4 +- .../detail/form/borehole/boreholePanel.tsx | 13 ++---- .../form/borehole/boreholePanelInterfaces.ts | 12 ----- 6 files changed, 30 insertions(+), 52 deletions(-) diff --git a/src/client/src/api/borehole.ts b/src/client/src/api/borehole.ts index ab85c9f4f..7d8831ba8 100644 --- a/src/client/src/api/borehole.ts +++ b/src/client/src/api/borehole.ts @@ -16,6 +16,14 @@ export interface Identifier extends BasicIdentifier { } export interface BoreholeV2 { + lithologyTopBedrockId: number; + lithostratigraphyId: number; + chronostratigraphyId: number; + hasGroundwater: boolean; + topBedrockWeatheredMd: number; + topBedrockFreshMd: number; + qtDepthId: number; + totalDepth: number; purposeId: number; typeId: number; remarks: string; diff --git a/src/client/src/pages/detail/detailPageContent.tsx b/src/client/src/pages/detail/detailPageContent.tsx index 126655d79..60066f01c 100644 --- a/src/client/src/pages/detail/detailPageContent.tsx +++ b/src/client/src/pages/detail/detailPageContent.tsx @@ -203,7 +203,6 @@ export const DetailPageContent = ({ ref={boreholePanelRef} onSubmit={onBoreholeFormSubmit} boreholeId={id} - legacyBorehole={legacyBorehole} borehole={borehole} updateChange={updateChange} updateNumber={updateNumber} diff --git a/src/client/src/pages/detail/form/borehole/boreholeDetailSegment.tsx b/src/client/src/pages/detail/form/borehole/boreholeDetailSegment.tsx index 51e1e47a4..1c560b7b8 100644 --- a/src/client/src/pages/detail/form/borehole/boreholeDetailSegment.tsx +++ b/src/client/src/pages/detail/form/borehole/boreholeDetailSegment.tsx @@ -12,7 +12,7 @@ import TranslationText from "../../../../components/legacyComponents/translation import { DisabledRadio } from "../styledComponents.jsx"; import { BoreholeDetailProps, DepthTVD } from "./boreholePanelInterfaces.ts"; -const BoreholeDetailSegment = ({ legacyBorehole, updateChange, updateNumber, isEditable }: BoreholeDetailProps) => { +const BoreholeDetailSegment = ({ borehole, updateChange, updateNumber, isEditable }: BoreholeDetailProps) => { const { t } = useTranslation(); const [depthTVD, setDepthTVD] = useState(); @@ -21,7 +21,7 @@ const BoreholeDetailSegment = ({ legacyBorehole, updateChange, updateNumber, isE if (depthMD == null) { setDepthTVD(value => ({ ...value, [field]: null })); } else { - getBoreholeGeometryDepthTVD(legacyBorehole.data.id, depthMD).then(response => { + getBoreholeGeometryDepthTVD(borehole.id, depthMD).then(response => { if (response != null) { setDepthTVD(value => { return { ...value, [field]: response }; @@ -32,20 +32,20 @@ const BoreholeDetailSegment = ({ legacyBorehole, updateChange, updateNumber, isE }); } }, - [legacyBorehole.data.id], + [borehole.id], ); useEffect(() => { - updateTVD("total_depth", legacyBorehole.data.total_depth); - }, [legacyBorehole.data.total_depth, updateTVD]); + updateTVD("total_depth", borehole.totalDepth); + }, [borehole.totalDepth, updateTVD]); useEffect(() => { - updateTVD("extended.top_bedrock_fresh_md", legacyBorehole.data.extended.top_bedrock_fresh_md); - }, [legacyBorehole.data.extended.top_bedrock_fresh_md, updateTVD]); + updateTVD("extended.top_bedrock_fresh_md", borehole.topBedrockFreshMd); + }, [borehole.topBedrockFreshMd, updateTVD]); useEffect(() => { - updateTVD("custom.top_bedrock_weathered_md", legacyBorehole.data.custom.top_bedrock_weathered_md); - }, [legacyBorehole.data.custom.top_bedrock_weathered_md, updateTVD]); + updateTVD("custom.top_bedrock_weathered_md", borehole.topBedrockWeatheredMd); + }, [borehole.topBedrockWeatheredMd, updateTVD]); const updateNumericField = (fieldNameMD: string, event: ChangeEvent) => { const value = event.target.value === "" ? null : parseIfString(event.target.value); @@ -68,7 +68,7 @@ const BoreholeDetailSegment = ({ legacyBorehole, updateChange, updateNumber, isE autoCorrect="off" onChange={e => updateNumericField("total_depth", e)} spellCheck="false" - value={_.isNil(legacyBorehole.data.total_depth) ? "" : legacyBorehole.data.total_depth} + value={_.isNil(borehole.totalDepth) ? "" : borehole.totalDepth} thousandSeparator="'" readOnly={!isEditable} /> @@ -81,7 +81,7 @@ const BoreholeDetailSegment = ({ legacyBorehole, updateChange, updateNumber, isE updateChange("custom.qt_depth", selected.id, false); }} schema="depth_precision" - selected={legacyBorehole.data.custom.qt_depth} + selected={borehole.qtDepthId} readOnly={!isEditable} /> @@ -111,11 +111,7 @@ const BoreholeDetailSegment = ({ legacyBorehole, updateChange, updateNumber, isE autoCorrect="off" onChange={e => updateNumericField("extended.top_bedrock_fresh_md", e)} spellCheck="false" - value={ - _.isNil(legacyBorehole.data.extended.top_bedrock_fresh_md) - ? "" - : legacyBorehole.data.extended.top_bedrock_fresh_md - } + value={_.isNil(borehole.topBedrockFreshMd) ? "" : borehole.topBedrockFreshMd} thousandSeparator="'" readOnly={!isEditable} /> @@ -146,7 +142,7 @@ const BoreholeDetailSegment = ({ legacyBorehole, updateChange, updateNumber, isE autoCorrect="off" onChange={e => updateNumericField("custom.top_bedrock_weathered_md", e)} spellCheck="false" - value={legacyBorehole.data.custom.top_bedrock_weathered_md} + value={borehole.topBedrockWeatheredMd} thousandSeparator="'" readOnly={!isEditable} /> @@ -175,7 +171,7 @@ const BoreholeDetailSegment = ({ legacyBorehole, updateChange, updateNumber, isE updateChange("custom.lithology_top_bedrock", selected.id, false); }} schema="custom.lithology_top_bedrock" - selected={legacyBorehole.data.custom.lithology_top_bedrock} + selected={borehole.lithologyTopBedrockId} title={t("lithology_top_bedrock")} isEditable={isEditable} /> @@ -194,7 +190,7 @@ const BoreholeDetailSegment = ({ legacyBorehole, updateChange, updateNumber, isE updateChange("custom.lithostratigraphy_top_bedrock", selected.id, false); }} schema="custom.lithostratigraphy_top_bedrock" - selected={legacyBorehole.data.custom.lithostratigraphy_top_bedrock} + selected={borehole.lithostratigraphyId} title={t("lithostratigraphy_top_bedrock")} isEditable={isEditable} /> @@ -214,7 +210,7 @@ const BoreholeDetailSegment = ({ legacyBorehole, updateChange, updateNumber, isE updateChange("custom.chronostratigraphy_top_bedrock", selected.id, false); }} schema="custom.chronostratigraphy_top_bedrock" - selected={legacyBorehole.data.custom.chronostratigraphy_top_bedrock} + selected={borehole.chronostratigraphyId} title={t("chronostratigraphy_top_bedrock")} isEditable={isEditable} /> @@ -224,13 +220,7 @@ const BoreholeDetailSegment = ({ legacyBorehole, updateChange, updateNumber, isE { const value = e.target.value === "TRUE" ? true : e.target.value === "FALSE" ? false : null; updateChange("extended.groundwater", value, false); diff --git a/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.tsx b/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.tsx index b86b65f6c..fab8decf3 100644 --- a/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.tsx +++ b/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.tsx @@ -2,9 +2,9 @@ import { useTranslation } from "react-i18next"; import { Form, Segment, TextArea } from "semantic-ui-react"; import DomainDropdown from "../../../../components/legacyComponents/domain/dropdown/domainDropdown.jsx"; import { capitalizeFirstLetter } from "../../../../utils"; -import { Temp } from "./boreholePanelInterfaces.ts"; +import { BoreholeGeneralProps } from "./boreholePanelInterfaces.ts"; -const BoreholeGeneralSegment = ({ borehole, updateChange, isEditable }: Temp) => { +const BoreholeGeneralSegment = ({ borehole, updateChange, isEditable }: BoreholeGeneralProps) => { const { t } = useTranslation(); return ( diff --git a/src/client/src/pages/detail/form/borehole/boreholePanel.tsx b/src/client/src/pages/detail/form/borehole/boreholePanel.tsx index 8cffb03a3..25ed22519 100644 --- a/src/client/src/pages/detail/form/borehole/boreholePanel.tsx +++ b/src/client/src/pages/detail/form/borehole/boreholePanel.tsx @@ -10,10 +10,7 @@ import Geometry from "./geometry.jsx"; import Sections from "./sections.jsx"; export const BoreholePanel = forwardRef( - ( - { boreholeId, legacyBorehole, borehole, updateChange, updateNumber, isEditable, onDirtyChange }: BoreholePanelProps, - ref, - ) => { + ({ boreholeId, borehole, updateChange, updateNumber, isEditable, onDirtyChange }: BoreholePanelProps, ref) => { const { t } = useTranslation(); const history = useHistory(); const location = useLocation(); @@ -86,7 +83,7 @@ export const BoreholePanel = forwardRef( <> } {activeIndex === 2 && ( - + )} diff --git a/src/client/src/pages/detail/form/borehole/boreholePanelInterfaces.ts b/src/client/src/pages/detail/form/borehole/boreholePanelInterfaces.ts index 035d40f38..33f014617 100644 --- a/src/client/src/pages/detail/form/borehole/boreholePanelInterfaces.ts +++ b/src/client/src/pages/detail/form/borehole/boreholePanelInterfaces.ts @@ -1,17 +1,6 @@ -import { Borehole } from "../../../../api-lib/ReduxStateInterfaces.ts"; import { BoreholeV2 } from "../../../../api/borehole.ts"; export interface BoreholeGeneralProps { - legacyBorehole: Borehole; - updateChange: ( - attribute: string, - value: string | number | boolean | null | (number | string | null)[], - to?: boolean, - ) => void; - isEditable: boolean; -} - -export interface Temp { borehole: BoreholeV2; updateChange: ( attribute: string, @@ -27,7 +16,6 @@ export interface BoreholeDetailProps extends BoreholeGeneralProps { export interface BoreholePanelProps extends BoreholeGeneralProps { boreholeId: string; - borehole: BoreholeV2; updateNumber: (attribute: string, value: number | null, to?: boolean) => void; onSubmit: (data: BoreholeFormInputs) => void; onDirtyChange: (isDirty: boolean) => void; From 198c33c34de209155ab6f50b9c5ca00d9097aa7f Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Tue, 5 Nov 2024 16:52:09 +0100 Subject: [PATCH 03/18] Wrap boreholePanel in form --- .../detail/form/borehole/boreholePanel.tsx | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/src/client/src/pages/detail/form/borehole/boreholePanel.tsx b/src/client/src/pages/detail/form/borehole/boreholePanel.tsx index 25ed22519..9b4287137 100644 --- a/src/client/src/pages/detail/form/borehole/boreholePanel.tsx +++ b/src/client/src/pages/detail/form/borehole/boreholePanel.tsx @@ -1,7 +1,8 @@ import { forwardRef, SyntheticEvent, useEffect, useImperativeHandle, useState } from "react"; -import { useForm } from "react-hook-form"; +import { FormProvider, useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { useHistory, useLocation } from "react-router-dom"; +import { DevTool } from "../../../../../hookformDevtools.ts"; import { BdmsTab, BdmsTabContentBox, BdmsTabs } from "../../../../components/styledTabComponents.jsx"; import BoreholeDetailSegment from "./boreholeDetailSegment"; import BoreholeGeneralSegment from "./boreholeGeneralSegment"; @@ -10,7 +11,10 @@ import Geometry from "./geometry.jsx"; import Sections from "./sections.jsx"; export const BoreholePanel = forwardRef( - ({ boreholeId, borehole, updateChange, updateNumber, isEditable, onDirtyChange }: BoreholePanelProps, ref) => { + ( + { boreholeId, borehole, updateChange, updateNumber, isEditable, onDirtyChange, onSubmit }: BoreholePanelProps, + ref, + ) => { const { t } = useTranslation(); const history = useHistory(); const location = useLocation(); @@ -81,13 +85,18 @@ export const BoreholePanel = forwardRef( {activeIndex === 0 && ( <> - - + + + + + + + )} {activeIndex === 1 && } From 87c3e060942e39f8ac384a05ba37ec58fb43d047 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Tue, 5 Nov 2024 17:29:41 +0100 Subject: [PATCH 04/18] Save borehole general segment with new logic --- src/client/src/pages/detail/detailPage.tsx | 11 +- .../src/pages/detail/detailPageContent.tsx | 2 +- .../form/borehole/boreholeDetailSegment.tsx | 22 ++-- .../form/borehole/boreholeGeneralSegment.tsx | 117 ++++++------------ .../detail/form/borehole/boreholePanel.tsx | 52 ++++++-- .../form/borehole/boreholePanelInterfaces.ts | 15 ++- .../detail/form/borehole/geometryImport.jsx | 2 +- 7 files changed, 108 insertions(+), 113 deletions(-) diff --git a/src/client/src/pages/detail/detailPage.tsx b/src/client/src/pages/detail/detailPage.tsx index d1bf29d5f..13f9cae1a 100644 --- a/src/client/src/pages/detail/detailPage.tsx +++ b/src/client/src/pages/detail/detailPage.tsx @@ -81,12 +81,18 @@ export const DetailPage: FC = () => { }; const triggerSubmit = () => { + if (boreholePanelRef.current) { + boreholePanelRef.current.submit(); + } if (locationPanelRef.current) { locationPanelRef.current.submit(); } }; const triggerReset = () => { + if (boreholePanelRef.current) { + boreholePanelRef.current.reset(); + } if (locationPanelRef.current) { locationPanelRef.current.reset(); } @@ -129,6 +135,9 @@ export const DetailPage: FC = () => { ); + const shouldShowSaveBar = + location.pathname.endsWith("/location") || + (location.pathname.endsWith("/borehole") && location.hash === "#general"); return ( <> { {editingEnabled && panelOpen && } - {editingEnabled && location.pathname.endsWith("/location") && ( + {editingEnabled && shouldShowSaveBar && ( )} diff --git a/src/client/src/pages/detail/detailPageContent.tsx b/src/client/src/pages/detail/detailPageContent.tsx index 60066f01c..a9c028864 100644 --- a/src/client/src/pages/detail/detailPageContent.tsx +++ b/src/client/src/pages/detail/detailPageContent.tsx @@ -206,7 +206,7 @@ export const DetailPageContent = ({ borehole={borehole} updateChange={updateChange} updateNumber={updateNumber} - isEditable={editingEnabled} + editingEnabled={editingEnabled} onDirtyChange={handleDirtyChange} /> )} diff --git a/src/client/src/pages/detail/form/borehole/boreholeDetailSegment.tsx b/src/client/src/pages/detail/form/borehole/boreholeDetailSegment.tsx index 1c560b7b8..92f4a2585 100644 --- a/src/client/src/pages/detail/form/borehole/boreholeDetailSegment.tsx +++ b/src/client/src/pages/detail/form/borehole/boreholeDetailSegment.tsx @@ -12,7 +12,7 @@ import TranslationText from "../../../../components/legacyComponents/translation import { DisabledRadio } from "../styledComponents.jsx"; import { BoreholeDetailProps, DepthTVD } from "./boreholePanelInterfaces.ts"; -const BoreholeDetailSegment = ({ borehole, updateChange, updateNumber, isEditable }: BoreholeDetailProps) => { +const BoreholeDetailSegment = ({ borehole, updateChange, updateNumber, editingEnabled }: BoreholeDetailProps) => { const { t } = useTranslation(); const [depthTVD, setDepthTVD] = useState(); @@ -70,7 +70,7 @@ const BoreholeDetailSegment = ({ borehole, updateChange, updateNumber, isEditabl spellCheck="false" value={_.isNil(borehole.totalDepth) ? "" : borehole.totalDepth} thousandSeparator="'" - readOnly={!isEditable} + readOnly={!editingEnabled} /> @@ -82,7 +82,7 @@ const BoreholeDetailSegment = ({ borehole, updateChange, updateNumber, isEditabl }} schema="depth_precision" selected={borehole.qtDepthId} - readOnly={!isEditable} + readOnly={!editingEnabled} /> @@ -192,7 +192,7 @@ const BoreholeDetailSegment = ({ borehole, updateChange, updateNumber, isEditabl schema="custom.lithostratigraphy_top_bedrock" selected={borehole.lithostratigraphyId} title={t("lithostratigraphy_top_bedrock")} - isEditable={isEditable} + isEditable={editingEnabled} /> @@ -212,7 +212,7 @@ const BoreholeDetailSegment = ({ borehole, updateChange, updateNumber, isEditabl schema="custom.chronostratigraphy_top_bedrock" selected={borehole.chronostratigraphyId} title={t("chronostratigraphy_top_bedrock")} - isEditable={isEditable} + isEditable={editingEnabled} /> @@ -227,17 +227,17 @@ const BoreholeDetailSegment = ({ borehole, updateChange, updateNumber, isEditabl }}> } + control={} label={} /> } + control={} label={} /> } + control={} label={} /> diff --git a/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.tsx b/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.tsx index fab8decf3..df4e5663e 100644 --- a/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.tsx +++ b/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.tsx @@ -1,87 +1,42 @@ -import { useTranslation } from "react-i18next"; -import { Form, Segment, TextArea } from "semantic-ui-react"; -import DomainDropdown from "../../../../components/legacyComponents/domain/dropdown/domainDropdown.jsx"; -import { capitalizeFirstLetter } from "../../../../utils"; +import { FormContainer, FormDomainSelect, FormInput } from "../../../../components/form/form.ts"; import { BoreholeGeneralProps } from "./boreholePanelInterfaces.ts"; -const BoreholeGeneralSegment = ({ borehole, updateChange, isEditable }: BoreholeGeneralProps) => { - const { t } = useTranslation(); - +const BoreholeGeneralSegment = ({ borehole, editingEnabled }: BoreholeGeneralProps) => { return ( - -
-
-
- - {/* drilling type in Borehole */} - - - { - updateChange("borehole_type", selected.id, false); - }} - schema="borehole_type" - selected={borehole.typeId} - readOnly={!isEditable} - /> - - - - - - { - updateChange("extended.purpose", selected.id, false); - }} - schema="extended.purpose" - selected={borehole.purposeId} - readOnly={!isEditable} - /> - - - - - - { - updateChange("extended.status", selected.id, false); - }} - schema="extended.status" - selected={borehole.statusId} - readOnly={!isEditable} - /> - - -
-
-
-
- - {t("remarks")} -