Merge branch 'main' into reorder-tests

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/detailPage/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/cypress/e2e/detailPage/coordinates.cy.js

@@ -1,5 +1,5 @@
 import { setSelect } from "../helpers/formHelpers";
-import { delayedType, newEditableBorehole } from "../helpers/testHelpers";
+import { delayedType, newEditableBorehole, returnToOverview } from "../helpers/testHelpers";
 
 function checkDecimalPlaces(inputAlias, expectedDecimalPlaces) {
   cy.get(inputAlias)
@@ -136,6 +136,14 @@ describe("Tests for editing coordinates of a borehole.", () => {
     checkDecimalPlaces("@LV95Y-input", 2);
     checkDecimalPlaces("@LV03X-input", 2);
     checkDecimalPlaces("@LV03Y-input", 2);
+
+    returnToOverview();
+    newEditableBorehole();
+    // verify input are cleared for new borehole
+    cy.get("@LV95X-input").should("have.value", "");
+    cy.get("@LV95Y-input").should("have.value", "");
+    cy.get("@LV03X-input").should("have.value", "");
+    cy.get("@LV03Y-input").should("have.value", "");
   });
 
   it("displays correct decimal precision", () => {

src/client/src/api-lib/ReduxStateInterfaces.ts

@@ -1,3 +1,5 @@
+import { ReferenceSystemCode } from "../pages/detail/form/location/coordinateSegmentInterfaces.ts";
+
 export interface ReduxRootState {
   filters: Filters;
   editor: EditorStore;
@@ -58,7 +60,7 @@ interface BoreholeAttributes {
   workgroup: Workgroup;
   workflow: Workflow;
   id: number;
-  spatial_reference_system: number;
+  spatial_reference_system: ReferenceSystemCode;
   role: Role;
   lock: {
     id: number;

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

@@ -118,9 +118,9 @@ const CoordinatesSegment: React.FC<CoordinatesSegmentProps> = ({
   // --- Utility functions ---
   const updateFormValues = useCallback(
     (refSystem: string, locationX: number, locationY: number, precisionX: number, precisionY: number) => {
-      if (locationX && locationY) {
-        setValuesForReferenceSystem(refSystem, locationX.toFixed(precisionX), locationY.toFixed(precisionY));
-      }
+      const locationXString = (locationX && locationX?.toFixed(precisionX)) || "";
+      const locationYString = (locationY && locationY?.toFixed(precisionY)) || "";
+      setValuesForReferenceSystem(refSystem, locationXString, locationYString);
     },
     [setValuesForReferenceSystem],
   );
@@ -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>