Subsubsection: add calculate lengthKm button to form, update input co…

…mponent
FixMyBerlin · Jan 5, 2024 · 330fe64 · 330fe64
1 parent 57b6570
commit 330fe64
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 35 deletions.
diff --git a/src/core/components/forms/LabeledFormatNumberFieldCalculateLength.tsx b/src/core/components/forms/LabeledFormatNumberFieldCalculateLength.tsx
@@ -3,24 +3,37 @@ import { useFormContext } from "react-hook-form"
 import { blueButtonStyles } from "../links"
 import { LabeledFormatNumberField, LabeledFormatNumberFieldProps } from "./LabeledFormatNumberField"
 import { length, lineString } from "@turf/turf"
-export interface LabeledFormatNumberFieldCalculateLengthProps
-  extends LabeledFormatNumberFieldProps {
-  isCalculateButton?: boolean
-}
 
-export const LabeledFormatNumberFieldCalculateLength: React.FC<
-  LabeledFormatNumberFieldCalculateLengthProps
-> = (props) => {
+export const LabeledFormatNumberFieldCalculateLength: React.FC<LabeledFormatNumberFieldProps> = (
+  props,
+) => {
   const { setValue, getValues } = useFormContext()
 
+  function isPoint(geometry: any[]) {
+    return (
+      geometry.length === 2 && typeof geometry[0] === "number" && typeof geometry[1] === "number"
+    )
+  }
+
   const calculateLength = () => {
     const geometry = getValues("geometry")
-    if (!geometry) {
-      alert("Keine Geometrie vorhanden")
-    } else {
-      const calculatedLength = length(lineString(geometry))
-      setValue(props.name, calculatedLength)
-    }
+    const calculatedLength = length(lineString(geometry))
+    setValue(props.name, calculatedLength)
+  }
+
+  let helpText: string
+
+  if (props.readOnly) {
+    helpText =
+      "Dieser Wert wird aus den Geometrien (Felt) berechnet und kann nicht manuell editiert werden."
+  } else if (!getValues("geometry")) {
+    helpText = "Es ist keine Geometrie vorhanden"
+  } else if (isPoint(getValues("geometry"))) {
+    helpText =
+      "Die Geometrie ist ein Punkt. Die Länge kann nicht berechnet, sondern nur manuell eingetragen werden. "
+  } else {
+    helpText =
+      "Dieser Wert kann manuell eingetragen oder aus den vorhandenen Geometrien berechnet werden."
   }
 
   return (
@@ -30,16 +43,17 @@ export const LabeledFormatNumberFieldCalculateLength: React.FC<
         maxDecimalDigits={3}
         step="0.001"
         {...props}
+        help={helpText}
       />
-      {props.isCalculateButton && (
-        <button
-          type="button"
-          onClick={calculateLength}
-          className={clsx(blueButtonStyles, "!py-1 !px-2")}
-        >
-          Länge aus Geometrie berechnen
-        </button>
-      )}
+
+      <button
+        type="button"
+        disabled={isPoint(!getValues("geometry") || getValues("geometry")) || props.readOnly}
+        onClick={calculateLength}
+        className={clsx(blueButtonStyles, "!py-1 !px-2")}
+      >
+        Länge aus Geometrie berechnen
+      </button>
     </div>
   )
 }
diff --git a/src/subsections/components/SubsectionForm.tsx b/src/subsections/components/SubsectionForm.tsx
@@ -87,13 +87,7 @@ function SubsectionFormWithQuery<S extends z.ZodType<any, any>>({
         optional
         name="lengthKm"
         label="Länge"
-        help={
-          isFeltFieldsReadOnly
-            ? `Dieser Wert wird aus den Geometrien (Felt) berechnet und kann nicht manuell editiert werden.`
-            : "Dieser Wert kann manuell eingetragen oder aus den vorhandenen Geometrien berechnet werden."
-        }
         readOnly={isFeltFieldsReadOnly}
-        isCalculateButton={!isFeltFieldsReadOnly}
       />
 
       <LabeledRadiobuttonGroupLabelPos />

diff --git a/src/subsubsections/components/SubsubsectionForm.tsx b/src/subsubsections/components/SubsubsectionForm.tsx
@@ -23,6 +23,7 @@ import getSubsubsectionStatussWithCount from "src/subsubsectionStatus/queries/ge
 import getSubsubsectionTasksWithCount from "src/subsubsectionTask/queries/getSubsubsectionTasksWithCount"
 import getSubsubsectionInfrasWithCount from "src/subsubsectionInfra/queries/getSubsubsectionInfrasWithCount"
 import getSubsubsectionSpecialsWithCount from "src/subsubsectionSpecial/queries/getSubsubsectionSpecialsWithCount"
+import { LabeledFormatNumberFieldCalculateLength } from "src/core/components/forms/LabeledFormatNumberFieldCalculateLength"
 
 export { FORM_ERROR } from "src/core/components/forms"
 
@@ -80,9 +81,7 @@ export function SubsubsectionForm<S extends z.ZodType<any, any>>(props: FormProp
         )}. Primäre Auszeichnung der Führung. Wird immer in Großschreibung angezeigt aber in Kleinschreibung editiert. Nachträgliche Änderungen sorgen dafür, dass bisherige URLs (Bookmarks, in E-Mails) nicht mehr funktionieren.`}
       />
       <LabeledTextField type="text" name="subTitle" label="Title" optional />
-
       <GeometryInput />
-
       <LabeledTextField
         type="text"
         name="task"
@@ -131,14 +130,13 @@ export function SubsubsectionForm<S extends z.ZodType<any, any>>(props: FormProp
           </Link>
         </div>
       </div>
-      <LabeledFormatNumberField
-        inlineLeadingAddon="km"
-        maxDecimalDigits={3}
-        step="0.001"
+      <LabeledFormatNumberFieldCalculateLength
+        optional
         name="lengthKm"
         label="Länge"
-        optional
+        help="Dieser Wert kann manuell eingetragen oder aus den vorhandenen Geometrien berechnet werden."
       />
+
       <LabeledFormatNumberField
         inlineLeadingAddon="m"
         maxDecimalDigits={3}