Style elevation segment (#1559)

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Updated the style of bulk edit form.
 - Hide the `help` button in the navigation bar in read-only mode.
 - Hide the `original_name` field in the borehole detail view in read-only mode.
+- Updated the style of the coordinates and elevation segment in the location tab.
 
 ### Fixed
 

src/client/cypress/e2e/editor/boreholeform.cy.js

@@ -1,13 +1,14 @@
+import { evaluateSelect, setSelect } from "../helpers/formHelpers";
 import { createBorehole, goToRouteAndAcceptTerms, newEditableBorehole } from "../helpers/testHelpers";
 
 describe("Test for the borehole form.", () => {
   it("Creates a borehole and fills dropdowns.", () => {
     // create boreholes
     newEditableBorehole().as("borehole_id");
 
-    // fill all dropdowns on location tab
+    // fill all legacy dropdowns on location tab
     cy.get('[data-cy="domain-dropdown"]')
-      .should("have.length", 5)
+      .should("have.length", 2)
       .each(el => cy.wrap(el).click().find('[role="option"]').last().click());
 
     const locationDropdownValues = [];
@@ -17,15 +18,22 @@ describe("Test for the borehole form.", () => {
         locationDropdownValues.push(value);
       })
       .then(() => {
-        expect(locationDropdownValues).to.deep.eq([
-          "ID Kernlager",
-          "not specified",
-          "not specified",
-          "not specified",
-          "kelly bushing",
-        ]);
+        expect(locationDropdownValues).to.deep.eq(["ID Kernlager", "not specified"]);
       });
 
+    // fills and evaluates all mui dropdowns on location tab
+    setSelect("spatial_reference_system", 0);
+    setSelect("location_precision", 2);
+    setSelect("elevation_precision", 2);
+    setSelect("qt_reference_elevation", 2);
+    setSelect("reference_elevation_type", 4);
+
+    evaluateSelect("spatial_reference_system", "20104001");
+    evaluateSelect("location_precision", "20113002");
+    evaluateSelect("elevation_precision", "20114002");
+    evaluateSelect("qt_reference_elevation", "20114002");
+    evaluateSelect("reference_elevation_type", "20117004");
+
     // fill all dropdowns on borehole tab
     cy.get('[data-cy="borehole-menu-item"]').click();
     cy.get('[data-cy="domain-dropdown"]')

src/client/src/components/form/formContainer.tsx

@@ -9,7 +9,7 @@ interface FormContainerProps extends StackProps {
 export const FormContainer = forwardRef<ReactNode, FormContainerProps>((props, ref) => {
   const width = props.width || "100%";
   return (
-    <Stack component={props.component || "div"} ref={ref} {...props} spacing={1} gap={1} sx={{ width: width }}>
+    <Stack component={props.component || "div"} ref={ref} {...props} rowGap={3} columnGap={2} sx={{ width: width }}>
       {props.children}
     </Stack>
   );

src/client/src/components/form/formCoordinate.tsx

@@ -5,9 +5,9 @@ import { SxProps } from "@mui/material";
 import { TextField } from "@mui/material/";
 import { boundingBox } from "../../pages/detail/form/location/coordinateSegmentConstants.ts";
 import { Direction, ReferenceSystemKey } from "../../pages/detail/form/location/coordinateSegmentInterfaces.ts";
-import { NumericFormatForCoordinates } from "../../pages/detail/form/location/NumericFormatForCoordinates.tsx";
 import { parseFloatWithThousandsSeparator } from "../legacyComponents/formUtils.ts";
 import { getFormFieldError } from "./form";
+import { NumericFormatWithThousandSeparator } from "./numericFormatWithThousandSeparator.tsx";
 
 const inLV95XBounds = (value: string): boolean => {
   const coordinate = parseFloatWithThousandsSeparator(value);
@@ -84,7 +84,7 @@ export const FormCoordinate: FC<FormCoordinateProps> = ({
       data-cy={fieldName + "-formCoordinate"}
       InputProps={{
         /* eslint-disable  @typescript-eslint/no-explicit-any */
-        inputComponent: NumericFormatForCoordinates as any,
+        inputComponent: NumericFormatWithThousandSeparator as any,
         readOnly: readonly,
         disabled: disabled,
       }}

src/client/src/components/form/formInput.tsx

@@ -5,6 +5,7 @@ import { InputProps, SxProps } from "@mui/material";
 import { TextField } from "@mui/material/";
 import { isValid } from "date-fns";
 import { FormValueType, getFormFieldError } from "./form";
+import { NumericFormatWithThousandSeparator } from "./numericFormatWithThousandSeparator.tsx";
 
 export interface FormInputProps {
   fieldName: string;
@@ -20,6 +21,7 @@ export interface FormInputProps {
   className?: string;
   inputProps?: InputProps;
   onUpdate?: (value: string) => void;
+  withThousandSeparator?: boolean;
 }
 
 export const FormInput: FC<FormInputProps> = ({
@@ -36,6 +38,7 @@ export const FormInput: FC<FormInputProps> = ({
   className,
   inputProps,
   onUpdate,
+  withThousandSeparator,
 }) => {
   const { t } = useTranslation();
   const { formState, register, setValue } = useFormContext();
@@ -84,7 +87,12 @@ export const FormInput: FC<FormInputProps> = ({
       defaultValue={getDefaultValue(value)}
       disabled={disabled || false}
       data-cy={fieldName + "-formInput"}
-      InputProps={{ ...inputProps, readOnly: readonly, disabled: disabled }}
+      InputProps={{
+        ...inputProps /* eslint-disable  @typescript-eslint/no-explicit-any */,
+        ...(withThousandSeparator && { inputComponent: NumericFormatWithThousandSeparator as any }),
+        readOnly: readonly,
+        disabled: disabled,
+      }}
     />
   );
 };

src/client/src/components/form/formSelect.tsx

@@ -11,7 +11,7 @@ export interface FormSelectProps {
   required?: boolean;
   disabled?: boolean;
   readonly?: boolean;
-  selected?: number[];
+  selected?: number;
   values?: FormSelectValue[];
   sx?: SxProps;
   className?: string;

src/client/src/pages/detail/form/location/NumericFormatForCoordinates.tsx → src/client/src/components/form/numericFormatWithThousandSeparator.tsx

@@ -7,8 +7,8 @@ interface CustomProps {
   value: number | string;
 }
 
-export const NumericFormatForCoordinates = React.forwardRef<NumericFormatProps, CustomProps>(
-  function NumericFormatForCoordinates(props, ref) {
+export const NumericFormatWithThousandSeparator = React.forwardRef<NumericFormatProps, CustomProps>(
+  function NumericFormatWithThousandSeparator(props, ref) {
     const { onChange, value, ...other } = props;
 
     return (

src/client/src/components/map/pointComponent.jsx

@@ -309,11 +309,11 @@ class PointComponent extends React.Component {
           style={{
             padding: "0px",
             flex: "1 1 100%",
-            height: 670,
+            height: 579,
           }}
         />
         <MapControls onZoomIn={this.onZoomIn} onZoomOut={this.onZoomOut} onFitToExtent={this.onFitToExtent} />
-        <Box sx={{ position: "absolute", right: 0, top: 645 }}>
+        <Box sx={{ position: "absolute", right: 0, top: 554 }}>
           <BasemapSelector marginBottom="0px" />
         </Box>
         <Box

src/client/src/pages/detail/form/location/coordinatesSegment.tsx

@@ -409,13 +409,13 @@ const CoordinatesSegment: React.FC<CoordinatesSegmentProps> = ({
                 )
               }
             />
-            <CardContent sx={{ pl: 4, pr: 4 }}>
+            <CardContent sx={{ pt: 4, px: 3 }}>
               <FormContainer>
                 <FormSelect
                   required={true}
                   fieldName={`spatial_reference_system`}
                   label="spatial_reference_system"
-                  selected={[currentReferenceSystem ?? referenceSystems.LV95.code]}
+                  selected={currentReferenceSystem ?? referenceSystems.LV95.code}
                   readonly={!editingEnabled}
                   className={isCoordinateExtraction ? "ai" : ""}
                   onUpdate={e => onReferenceSystemChange(e)}
@@ -478,8 +478,8 @@ const CoordinatesSegment: React.FC<CoordinatesSegmentProps> = ({
                   fieldName={`location_precision`}
                   label="location_precision"
                   readonly={!editingEnabled}
-                  onUpdate={e => updateChange("location_precision", e, false)}
-                  selected={[borehole.data.location_precision]}
+                  onUpdate={e => updateChange("location_precision", e ?? null, false)}
+                  selected={borehole.data.location_precision}
                   schemaName={"location_precision"}
                 />
               </FormContainer>

src/client/src/pages/detail/form/location/elevationSegment.tsx

@@ -1,10 +1,12 @@
-import { FC } from "react";
-import { useTranslation } from "react-i18next";
-import { NumericFormat } from "react-number-format";
-import { Form } from "semantic-ui-react";
+import { FC, useEffect } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { Card } from "@mui/material";
+import { CardContent } from "@mui/material/";
 import { Borehole, User } from "../../../../api-lib/ReduxStateInterfaces.ts";
-import DomainText from "../../../../components/legacyComponents/domain/domainText.jsx";
-import DomainDropdown from "../../../../components/legacyComponents/domain/dropdown/domainDropdown.jsx";
+import { useDomains } from "../../../../api/fetchApiV2";
+import { FormContainer, FormInput, FormValueType } from "../../../../components/form/form.ts";
+import { FormDomainSelect } from "../../../../components/form/formDomainSelect.tsx";
+import { Codelist } from "../../../../components/legacyComponents/domain/domainInterface.ts";
 import { parseFloatWithThousandsSeparator } from "../../../../components/legacyComponents/formUtils.js";
 import { FormSegmentBox } from "../../../../components/styledComponents.ts";
 
@@ -20,107 +22,93 @@ interface ElevationSegmentProps {
 }
 
 const ElevationSegment: FC<ElevationSegmentProps> = ({ borehole, user, updateChange, updateNumber }) => {
-  const { t } = useTranslation();
+  const { data: domains } = useDomains();
 
+  const formMethods = useForm({
+    mode: "all",
+    defaultValues: borehole.data,
+  });
   // --- Derived states ---
   const isEditable: boolean =
     borehole?.data.role === "EDIT" && borehole?.data.lock !== null && borehole?.data.lock?.id === user?.data.id;
 
+  useEffect(() => {
+    formMethods.reset(borehole.data);
+  }, [borehole, formMethods]);
+
   return (
     <FormSegmentBox>
-      <Form>
-        <Form.Group widths="equal">
-          <Form.Field error={borehole.data.elevation_z == null} required>
-            <label>{t("elevation_z")}</label>
-            <NumericFormat
-              type="text"
-              autoCapitalize="off"
-              autoComplete="off"
-              autoCorrect="off"
-              onChange={e => {
-                updateNumber(
-                  "elevation_z",
-                  e.target.value === "" ? null : parseFloatWithThousandsSeparator(e.target.value),
-                );
-              }}
-              fixedDecimalScale
-              spellCheck="false"
-              value={borehole.data.elevation_z ?? ""}
-              thousandSeparator="'"
-              readOnly={!isEditable}
-            />
-          </Form.Field>
-          <Form.Field required>
-            <label>{t("elevation_precision")}</label>
-            <DomainDropdown
-              onSelected={(selected: { id: string }) => {
-                updateChange("elevation_precision", selected.id, false);
-              }}
-              schema="elevation_precision"
-              selected={borehole.data.elevation_precision}
-              readOnly={!isEditable}
-            />
-          </Form.Field>
-        </Form.Group>
-        <Form.Group widths="equal">
-          <Form.Field error={borehole.data.reference_elevation == null} required>
-            <label>{t("reference_elevation")}</label>
-            <NumericFormat
-              autoCapitalize="off"
-              type="text"
-              autoComplete="off"
-              autoCorrect="off"
-              onChange={e => {
-                updateNumber(
-                  "reference_elevation",
-                  e.target.value === "" ? null : parseFloatWithThousandsSeparator(e.target.value),
-                );
-              }}
-              spellCheck="false"
-              value={borehole.data.reference_elevation ?? ""}
-              thousandSeparator="'"
-              readOnly={!isEditable}
-            />
-          </Form.Field>
-          <Form.Field required>
-            <label>{t("reference_elevation_qt")}</label>
-            <DomainDropdown
-              onSelected={(selected: { id: string | number }) => {
-                updateChange("qt_reference_elevation", selected.id, false);
-              }}
-              schema="elevation_precision"
-              selected={borehole.data.qt_reference_elevation}
-              readOnly={!isEditable}
-            />
-          </Form.Field>
-        </Form.Group>
-        <Form.Group widths="equal">
-          <Form.Field error={borehole.data.reference_elevation_type === null} required>
-            <label>{t("reference_elevation_type")}</label>
-            <DomainDropdown
-              onSelected={(selected: { id: string }) => {
-                updateChange("reference_elevation_type", selected.id, false);
-              }}
-              schema="reference_elevation_type"
-              selected={borehole.data.reference_elevation_type}
-              readOnly={!isEditable}
-            />
-          </Form.Field>
-          <Form.Field required>
-            <label>{t("height_reference_system")}</label>
-            <div
-              style={{
-                height: "36px",
-                display: "flex",
-                alignItems: "center",
-              }}>
-              <div>
-                <DomainText id={borehole.data.height_reference_system} schema="height_reference_system" />
-              </div>
-            </div>
-          </Form.Field>
-        </Form.Group>
-      </Form>
+      <FormProvider {...formMethods}>
+        <Card>
+          <CardContent sx={{ pt: 4, px: 3 }}>
+            <FormContainer>
+              <FormContainer direction="row">
+                <FormInput
+                  fieldName={"elevation_z"}
+                  label="elevation_z"
+                  value={borehole.data.elevation_z ?? ""}
+                  type={FormValueType.Text}
+                  readonly={!isEditable}
+                  withThousandSeparator={true}
+                  onUpdate={e => updateNumber("elevation_z", e === "" ? null : parseFloatWithThousandsSeparator(e))}
+                />
+                <FormDomainSelect
+                  fieldName={"elevation_precision"}
+                  label={"elevation_precision"}
+                  schemaName={"elevation_precision"}
+                  readonly={!isEditable}
+                  selected={borehole.data.elevation_precision}
+                  onUpdate={e => {
+                    updateChange("elevation_precision", e ?? null, false);
+                  }}
+                />
+              </FormContainer>
+              <FormContainer direction="row">
+                <FormInput
+                  fieldName={"reference_elevation"}
+                  label="reference_elevation"
+                  value={borehole.data.reference_elevation ?? ""}
+                  type={FormValueType.Text}
+                  readonly={!isEditable}
+                  withThousandSeparator={true}
+                  onUpdate={e =>
+                    updateNumber("reference_elevation", e === "" ? null : parseFloatWithThousandsSeparator(e))
+                  }
+                />
+                <FormDomainSelect
+                  fieldName={"qt_reference_elevation"}
+                  label={"reference_elevation_qt"}
+                  readonly={!isEditable}
+                  schemaName={"elevation_precision"}
+                  selected={borehole.data.qt_reference_elevation}
+                  onUpdate={e => {
+                    updateChange("qt_reference_elevation", e ?? null, false);
+                  }}
+                />
+              </FormContainer>
+              <FormContainer direction="row">
+                <FormDomainSelect
+                  fieldName={"reference_elevation_type"}
+                  label={"reference_elevation_type"}
+                  readonly={!isEditable}
+                  schemaName={"reference_elevation_type"}
+                  selected={borehole.data.reference_elevation_type}
+                  onUpdate={e => {
+                    updateChange("reference_elevation_type", e ?? null, false);
+                  }}
+                />
+                <FormInput
+                  readonly={true}
+                  fieldName={`height_reference_system`}
+                  label="height_reference_system"
+                  value={domains?.find((d: Codelist) => d.id === borehole.data.height_reference_system)?.code}
+                  type={FormValueType.Text}
+                />
+              </FormContainer>
+            </FormContainer>
+          </CardContent>
+        </Card>
+      </FormProvider>
     </FormSegmentBox>
   );
 };