Merge Fix form behaviour with defaultValue, value and setValue (#151)

closes #135 closes #147 closes #148
GeoWerkstatt · Jul 28, 2022 · 3f4b0b2 · 3f4b0b2
2 parents 183bce6 + 7d774a8
commit 3f4b0b2
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 28 deletions.
diff --git 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) => (
                   <TextField
@@ -135,10 +150,11 @@ export default function BohrprofilForm(props) {
         <Controller
           name="bemerkung"
           control={control}
+          defaultValue={currentBohrprofil?.bemerkung}
           render={({ field }) => (
             <TextField
               {...field}
-              value={field.value || currentBohrprofil?.bemerkung || ""}
+              value={field.value}
               margin="normal"
               multiline
               label="Bemerkung zum Bohrprofil"
@@ -152,10 +168,11 @@ export default function BohrprofilForm(props) {
         <Controller
           name="kote"
           control={control}
+          defaultValue={currentBohrprofil?.kote}
           render={({ field }) => (
             <TextField
               {...field}
-              value={field.value || currentBohrprofil?.kote || ""}
+              value={field.value}
               sx={{ marginRight: "6%", width: "47%" }}
               margin="normal"
               label="Terrainkote der Bohrung [m]"
@@ -168,10 +185,11 @@ export default function BohrprofilForm(props) {
         <Controller
           name="endteufe"
           control={control}
+          defaultValue={currentBohrprofil?.endteufe}
           render={({ field }) => (
             <TextField
               {...field}
-              value={field.value || currentBohrprofil?.endteufe || ""}
+              value={field.value}
               sx={{ width: "47%" }}
               margin="normal"
               label="Endtiefe der Bohrung [m]"
@@ -184,12 +202,12 @@ export default function BohrprofilForm(props) {
         <Controller
           name="tektonikId"
           control={control}
-          defaultValue={currentBohrprofil?.tektonikId || null}
+          defaultValue={currentBohrprofil?.tektonikId}
           render={({ field }) => (
             <Autocomplete
               {...field}
               options={tektonikCodes.map((c) => 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) {
         <Controller
           name="formationFelsId"
           control={control}
-          defaultValue={currentBohrprofil?.formationFelsId || null}
+          defaultValue={currentBohrprofil?.formationFelsId}
           render={({ field }) => (
             <Autocomplete
               {...field}
               options={formationFelsCodes.map((c) => 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) {
         <Controller
           name="formationEndtiefeId"
           control={control}
-          defaultValue={currentBohrprofil?.formationEndtiefeId || null}
+          defaultValue={currentBohrprofil?.formationEndtiefeId}
           render={({ field }) => (
             <Autocomplete
               {...field}
               options={formationEndtiefeCodes.map((c) => 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) {
         <Controller
           name="qualitaetId"
           control={control}
-          defaultValue={currentBohrprofil?.qualitaetId || null}
+          defaultValue={currentBohrprofil?.qualitaetId}
           render={({ field }) => (
             <Autocomplete
               {...field}
               options={qualitaetCodes.map((c) => 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) {
         <Controller
           name="qualitaetBemerkung"
           control={control}
+          defaultValue={currentBohrprofil?.qualitaetBemerkung}
           render={({ field }) => (
             <TextField
               {...field}
-              value={field.value || currentBohrprofil?.qualitaetBemerkung || ""}
+              value={field.value}
               margin="normal"
               multiline
               label="Bemerkung zur Qualitätsangabe"

diff --git a/src/ClientApp/src/components/BohrungForm.js b/src/ClientApp/src/components/BohrungForm.js
@@ -85,6 +85,20 @@ export default function BohrungForm(props) {
     }
   }, [currentBohrung, setValue]);
 
+  // Update form values if currentBohrung changes, to allow next/previous navigation
+  useEffect(() => {
+    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) {
         <Controller
           name="bezeichnung"
           control={control}
+          defaultValue={currentBohrung?.bezeichnung}
           render={({ field, fieldState: { error } }) => (
             <TextField
               {...field}
               autoFocus
-              value={field.value || currentBohrung?.bezeichnung || ""}
+              value={field.value}
               margin="normal"
               label="Bezeichnung der Bohrung"
               type="text"
@@ -220,10 +235,11 @@ export default function BohrungForm(props) {
         <Controller
           name="bemerkung"
           control={control}
+          defaultValue={currentBohrung?.bemerkung}
           render={({ field }) => (
             <TextField
               {...field}
-              value={field.value || currentBohrung?.bemerkung || ""}
+              value={field.value}
               margin="normal"
               multiline
               label="Bemerkung zur Bohrung"
@@ -244,7 +260,7 @@ export default function BohrungForm(props) {
                 label="Datum des Bohrbeginns"
                 disableFuture
                 inputFormat="dd.MM.yyyy"
-                value={field.value || currentBohrung?.datum || null}
+                value={field.value}
                 onChange={(value) => field.onChange(value)}
                 renderInput={(params) => (
                   <TextField
@@ -261,30 +277,31 @@ export default function BohrungForm(props) {
           />
         </LocalizationProvider>
         <Controller
-          name="durchmesser"
+          name="durchmesserBohrloch"
           control={control}
+          defaultValue={currentBohrung?.durchmesserBohrloch}
           render={({ field }) => (
             <TextField
               {...field}
-              value={field.value || currentBohrung?.durchmesserBohrloch || ""}
+              value={field.value}
               sx={{ width: "47%" }}
               margin="normal"
               label="Durchmesser Bohrloch"
               type="number"
               variant="standard"
-              {...register("durchmesser")}
+              {...register("durchmesserBohrloch")}
             />
           )}
         />
         <Controller
           name="ablenkungId"
           control={control}
-          defaultValue={currentBohrung?.ablenkungId || null}
+          defaultValue={currentBohrung?.ablenkungId}
           render={({ field }) => (
             <Autocomplete
               {...field}
               options={ablenkungCodes.map((c) => 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) {
         <Controller
           name="qualitaetId"
           control={control}
-          defaultValue={currentBohrung?.qualitaetId || null}
+          defaultValue={currentBohrung?.qualitaetId}
           render={({ field }) => (
             <Autocomplete
               {...field}
               options={qualitaetCodes.map((c) => 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) {
         <Controller
           name="qualitaetBemerkung"
           control={control}
+          defaultValue={currentBohrung?.qualitaetBemerkung}
           render={({ field }) => (
             <TextField
               {...field}
-              value={field.value || currentBohrung?.qualitaetBemerkung || ""}
+              value={field.value}
               sx={{ marginRight: "6%", width: "47%" }}
               margin="normal"
               multiline
@@ -344,10 +362,11 @@ export default function BohrungForm(props) {
         <Controller
           name="quelleRef"
           control={control}
+          defaultValue={currentBohrung?.quelleRef}
           render={({ field }) => (
             <TextField
               {...field}
-              value={field.value || currentBohrung?.quelleRef || ""}
+              value={field.value}
               margin="normal"
               label="Autor der geologischen Aufnahme"
               type="text"

diff --git a/src/ClientApp/src/components/StandortForm.js b/src/ClientApp/src/components/StandortForm.js
@@ -103,10 +103,11 @@ export default function StandortForm(props) {
         <Controller
           name="bezeichnung"
           control={control}
+          defaultValue={currentStandort?.bezeichnung}
           render={({ field, fieldState: { error } }) => (
             <TextField
               {...field}
-              value={field.value || currentStandort?.bezeichnung || ""}
+              value={field.value}
               autoFocus
               margin="normal"
               label="Bezeichnung des Standorts"
@@ -122,10 +123,11 @@ export default function StandortForm(props) {
         <Controller
           name="bemerkung"
           control={control}
+          defaultValue={currentStandort?.bemerkung}
           render={({ field }) => (
             <TextField
               {...field}
-              value={field.value || currentStandort?.bemerkung || ""}
+              value={field.value}
               margin="normal"
               label="Bemerkung zum Standort"
               type="text"