diff --git a/src/ClientApp/src/components/BohrprofilForm.js b/src/ClientApp/src/components/BohrprofilForm.js index dc0db18..391289d 100644 --- a/src/ClientApp/src/components/BohrprofilForm.js +++ b/src/ClientApp/src/components/BohrprofilForm.js @@ -38,7 +38,7 @@ export default function BohrprofilForm(props) { addBohrprofil, editBohrprofil, } = props; - const { control, handleSubmit, formState, reset, register } = useForm({ + const { control, handleSubmit, formState, reset, register, setValue } = useForm({ reValidateMode: "onChange", }); const { isDirty } = formState; @@ -72,6 +72,21 @@ export default function BohrprofilForm(props) { getCodes(); }, []); + // Update form values if currentBohrprofil changes, to allow next/previous navigation + useEffect(() => { + if (currentBohrprofil) { + setValue("datum", currentBohrprofil?.datum); + setValue("bemerkung", currentBohrprofil?.bemerkung); + setValue("kote", currentBohrprofil?.kote); + setValue("endteufe", currentBohrprofil?.endteufe); + setValue("tektonikId", currentBohrprofil?.tektonikId); + setValue("formationFelsId", currentBohrprofil?.formationFelsId); + setValue("formationEndtiefeId", currentBohrprofil?.formationEndtiefeId); + setValue("qualitaetId", currentBohrprofil?.qualitaetId); + setValue("qualitaetBemerkung", currentBohrprofil?.qualitaetBemerkung); + } + }, [currentBohrprofil, setValue]); + const currentInteraction = currentBohrprofil?.id ? "edit" : currentBohrprofil?.bezeichnung ? "copy" : "add"; const onSubmit = (formData) => { @@ -117,7 +132,7 @@ export default function BohrprofilForm(props) { label="Datum des Bohrprofils" disableFuture inputFormat="dd.MM.yyyy" - value={field.value || currentBohrprofil?.datum || null} + value={field.value} onChange={(value) => field.onChange(value)} renderInput={(params) => ( ( ( ( ( c.id)} - value={field.value || currentBohrprofil?.tektonikId} + value={field.value} getOptionLabel={(option) => tektonikCodes.find((c) => c.id === option)?.kurztext} onChange={(_, data) => field.onChange(data)} renderInput={(params) => ( @@ -208,12 +226,12 @@ export default function BohrprofilForm(props) { ( c.id)} - value={field.value || currentBohrprofil?.formationFelsId} + value={field.value} getOptionLabel={(option) => formationFelsCodes.find((c) => c.id === option)?.kurztext} onChange={(_, data) => field.onChange(data)} renderInput={(params) => ( @@ -232,12 +250,12 @@ export default function BohrprofilForm(props) { ( c.id)} - value={field.value || currentBohrprofil?.formationEndtiefeId} + value={field.value} getOptionLabel={(option) => formationEndtiefeCodes.find((c) => c.id === option)?.kurztext} onChange={(_, data) => field.onChange(data)} renderInput={(params) => ( @@ -256,12 +274,12 @@ export default function BohrprofilForm(props) { ( c.id)} - value={field.value || currentBohrprofil?.qualitaetId} + value={field.value} getOptionLabel={(option) => qualitaetCodes.find((c) => c.id === option)?.kurztext} onChange={(_, data) => field.onChange(data)} renderInput={(params) => ( @@ -280,10 +298,11 @@ export default function BohrprofilForm(props) { ( { + if (currentBohrung) { + setValue("bezeichnung", currentBohrung?.bezeichnung); + setValue("bemerkung", currentBohrung?.bemerkung); + setValue("datum", currentBohrung?.datum); + setValue("durchmesserBohrloch", currentBohrung?.durchmesserBohrloch); + setValue("ablenkungId", currentBohrung?.ablenkungId); + setValue("qualitaetId", currentBohrung?.qualitaetId); + setValue("qualitaetBemerkung", currentBohrung?.qualitaetBemerkung); + setValue("quelleRef", currentBohrung?.quelleRef); + } + }, [currentBohrung, setValue]); + // Register projection for distance validation useEffect(() => { proj4.defs( @@ -201,11 +215,12 @@ export default function BohrungForm(props) { ( ( field.onChange(value)} renderInput={(params) => ( ( )} /> ( c.id)} - value={field.value || currentBohrung?.ablenkungId || null} + value={field.value} onChange={(_, data) => field.onChange(data)} getOptionLabel={(option) => ablenkungCodes.find((c) => c.id === option)?.kurztext} renderInput={(params) => ( @@ -303,12 +320,12 @@ export default function BohrungForm(props) { ( c.id)} - value={field.value || currentBohrung?.qualitaetId || null} + value={field.value} getOptionLabel={(option) => qualitaetCodes.find((c) => c.id === option)?.kurztext} onChange={(_, data) => field.onChange(data)} renderInput={(params) => ( @@ -327,10 +344,11 @@ export default function BohrungForm(props) { ( ( ( (