Fix restriction segment (#1567)

swisstopo · Oct 1, 2024 · a6b84a6 · a6b84a6
2 parents 1cba60c + 39bdf53
commit a6b84a6
Show file tree

Hide file tree

Showing 18 changed files with 176 additions and 162 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +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.
+- Updated the style of the location tab.
 
 ### Fixed
 

diff --git a/src/client/cypress/e2e/detailPage/boreholeform.cy.js b/src/client/cypress/e2e/detailPage/boreholeform.cy.js
@@ -1,4 +1,4 @@
-import { evaluateSelect, setSelect } from "../helpers/formHelpers";
+import { evaluateSelect, isDisabled, setSelect } from "../helpers/formHelpers";
 import { createBorehole, goToRouteAndAcceptTerms, newEditableBorehole } from "../helpers/testHelpers";
 
 describe("Test for the borehole form.", () => {
@@ -8,7 +8,7 @@ describe("Test for the borehole form.", () => {
 
     // fill all legacy dropdowns on location tab
     cy.get('[data-cy="domain-dropdown"]')
-      .should("have.length", 2)
+      .should("have.length", 1)
       .each(el => cy.wrap(el).click().find('[role="option"]').last().click());
 
     const locationDropdownValues = [];
@@ -18,16 +18,23 @@ describe("Test for the borehole form.", () => {
         locationDropdownValues.push(value);
       })
       .then(() => {
-        expect(locationDropdownValues).to.deep.eq(["ID Kernlager", "not specified"]);
+        expect(locationDropdownValues).to.deep.eq(["ID Kernlager"]);
       });
 
     // fills and evaluates all mui dropdowns on location tab
+    setSelect("restriction", 2);
+    isDisabled("restriction_until", true);
+    setSelect("restriction", 3);
+    isDisabled("restriction_until", false);
+    setSelect("national_interest", 2);
     setSelect("spatial_reference_system", 0);
     setSelect("location_precision", 2);
     setSelect("elevation_precision", 2);
     setSelect("qt_reference_elevation", 2);
     setSelect("reference_elevation_type", 4);
 
+    evaluateSelect("restriction", "20111003");
+    evaluateSelect("national_interest", "2");
     evaluateSelect("spatial_reference_system", "20104001");
     evaluateSelect("location_precision", "20113002");
     evaluateSelect("elevation_precision", "20114002");

diff --git a/src/client/cypress/e2e/helpers/formHelpers.js b/src/client/cypress/e2e/helpers/formHelpers.js
@@ -1,5 +1,20 @@
 import { createBaseSelector } from "./testHelpers";
 
+/**
+ * Checks if a form element is disabled.
+ * @param {string} fieldName The name of the form element.
+ * @param {boolean} isDisabled The expected disabled state.
+ * @param {string} parent (optional) The parent of the form element.
+ */
+export const isDisabled = (fieldName, isDisabled = true, parent) => {
+  const selector = createBaseSelector(parent) + `[data-cy^="${fieldName}-form"] .Mui-disabled`;
+  if (isDisabled) {
+    cy.get(selector).should("exist");
+  } else {
+    cy.get(selector).should("not.exist");
+  }
+};
+
 /**
  * Sets the value for an input form element.
  * @param {string} fieldName The name of the input field.

diff --git a/src/client/src/api-lib/ReduxStateInterfaces.ts b/src/client/src/api-lib/ReduxStateInterfaces.ts
@@ -57,6 +57,9 @@ interface Workflow {
 }
 
 interface BoreholeAttributes {
+  national_interest: boolean;
+  restriction_until: Date;
+  restriction: number;
   workgroup: Workgroup;
   workflow: Workflow;
   id: number;

diff --git a/src/client/src/components/form/formBooleanSelect.tsx b/src/client/src/components/form/formBooleanSelect.tsx
@@ -0,0 +1,29 @@
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { FormSelect } from "./form";
+import { FormSelectProps } from "./formSelect.tsx";
+
+export interface FormBooleanSelectProps extends FormSelectProps {
+  label: string;
+  selected?: boolean | undefined;
+}
+
+export const FormBooleanSelect: FC<FormBooleanSelectProps> = props => {
+  const { label, selected, onUpdate } = props;
+  const { t } = useTranslation();
+  const value = selected === true ? 1 : selected === false ? 0 : 2;
+
+  return (
+    <FormSelect
+      {...props}
+      label={label}
+      selected={value}
+      onUpdate={e => (onUpdate ? onUpdate(e === 1 ? true : e === 0 ? false : null) : null)}
+      values={[
+        { key: 1, name: t("yes") },
+        { key: 0, name: t("no") },
+        { key: 2, name: t("np") },
+      ]}
+    />
+  );
+};
diff --git a/src/client/src/components/form/formInput.tsx b/src/client/src/components/form/formInput.tsx
@@ -16,7 +16,7 @@ export interface FormInputProps {
   type?: FormValueType;
   multiline?: boolean;
   rows?: number;
-  value?: string | number;
+  value?: string | number | Date;
   sx?: SxProps;
   className?: string;
   inputProps?: InputProps;
@@ -43,7 +43,7 @@ export const FormInput: FC<FormInputProps> = ({
   const { t } = useTranslation();
   const { formState, register, setValue } = useFormContext();
 
-  const getDefaultValue = (value: string | number | undefined) => {
+  const getDefaultValue = (value: string | number | Date | undefined) => {
     if (value == undefined) {
       return "";
     } else if (type === FormValueType.DateTime) {

diff --git a/src/client/src/components/form/formSelect.tsx b/src/client/src/components/form/formSelect.tsx
@@ -11,11 +11,11 @@ export interface FormSelectProps {
   required?: boolean;
   disabled?: boolean;
   readonly?: boolean;
-  selected?: number;
+  selected?: number | boolean;
   values?: FormSelectValue[];
   sx?: SxProps;
   className?: string;
-  onUpdate?: (value: number) => void;
+  onUpdate?: (value: number | boolean | null) => void;
 }
 
 export interface FormSelectValue {

diff --git a/src/client/src/components/legacyComponents/bulkedit/bulkEditForm.tsx b/src/client/src/components/legacyComponents/bulkedit/bulkEditForm.tsx
@@ -22,9 +22,9 @@ import WorkgroupSelect from "../../../pages/overview/sidePanelContent/commons/wo
 import { AlertContext } from "../../alert/alertContext.tsx";
 import { CancelButton, SaveButton } from "../../buttons/buttons";
 import { FormValueType } from "../../form/form.ts";
+import { FormBooleanSelect } from "../../form/formBooleanSelect.tsx";
 import { FormDomainSelect } from "../../form/formDomainSelect.tsx";
 import { FormInput } from "../../form/formInput.tsx";
-import { FormSelect } from "../../form/formSelect.tsx";
 import { StackFullWidth } from "../../styledComponents.ts";
 import { BulkEditFormField, BulkEditFormProps, BulkEditFormValue } from "./BulkEditFormProps.ts";
 
@@ -168,15 +168,10 @@ export const BulkEditForm = ({ selected, loadBoreholes }: BulkEditFormProps) =>
 
       if (field.type === FormValueType.Boolean) {
         return (
-          <FormSelect
-            required
+          <FormBooleanSelect
             fieldName={field.api ?? field.fieldName}
             label={field.fieldName}
-            values={[
-              { key: 1, name: t("yes") },
-              { key: 0, name: t("no") },
-              { key: 2, name: t("np") },
-            ]}
+            required
             onUpdate={e => {
               onFieldValueChange(field, e);
             }}
@@ -194,7 +189,7 @@ export const BulkEditForm = ({ selected, loadBoreholes }: BulkEditFormProps) =>
         />
       );
     },
-    [onFieldValueChange, t],
+    [onFieldValueChange],
   );
 
   return (

diff --git a/src/client/src/components/styledComponents.ts b/src/client/src/components/styledComponents.ts
@@ -42,7 +42,7 @@ export const MainContentBox = styled(Box)({
 });
 
 export const FormSegmentBox = styled(Box)({
-  padding: theme.spacing(2),
+  padding: theme.spacing(3),
 });
 
 export const DialogHeaderContainer = styled(Box)({

diff --git a/src/client/src/pages/detail/detailPageContent.jsx b/src/client/src/pages/detail/detailPageContent.jsx
@@ -19,7 +19,7 @@ import WaterIngress from "./form/hydrogeology/waterIngress.jsx";
 import IdentifierSegment from "./form/location/indentifierSegment.jsx";
 import LocationSegment from "./form/location/locationSegment.tsx";
 import NameSegment from "./form/location/nameSegment.tsx";
-import RestrictionSegment from "./form/location/restrictionSegment.jsx";
+import RestrictionSegment from "./form/location/restrictionSegment.tsx";
 import ChronostratigraphyPanel from "./form/stratigraphy/chronostratigraphy/chronostratigraphyPanel.jsx";
 import Lithology from "./form/stratigraphy/lithology";
 import LithostratigraphyPanel from "./form/stratigraphy/lithostratigraphy/lithostratigraphyPanel.jsx";
@@ -296,11 +296,10 @@ class DetailPageContent extends React.Component {
                       <RestrictionSegment
                         borehole={borehole}
                         updateChange={this.updateChange}
-                        user={user}></RestrictionSegment>
+                        editingEnabled={editingEnabled}></RestrictionSegment>
                       <LocationSegment
                         showLabeling={this.props.showLabeling}
                         borehole={borehole}
-                        user={user}
                         editingEnabled={editingEnabled}
                         updateChange={this.updateChange}
                         updateNumber={this.updateNumber}

diff --git a/src/client/src/pages/detail/form/location/cantonMunicipalitySegment.tsx b/src/client/src/pages/detail/form/location/cantonMunicipalitySegment.tsx
@@ -10,10 +10,15 @@ interface CantonMunicipalitySegmentProps {
   country: string;
   canton: string;
   municipality: string;
-  isEditable: boolean;
+  editingEnabled: boolean;
 }
 
-const CantonMunicipalitySegment = ({ country, canton, municipality, isEditable }: CantonMunicipalitySegmentProps) => {
+const CantonMunicipalitySegment = ({
+  country,
+  canton,
+  municipality,
+  editingEnabled,
+}: CantonMunicipalitySegmentProps) => {
   const formMethods = useForm({
     mode: "all",
   });
@@ -47,7 +52,7 @@ const CantonMunicipalitySegment = ({ country, canton, municipality, isEditable }
                   </InputAdornment>
                 ),
               }}
-              readonly={!isEditable}
+              readonly={!editingEnabled}
             />
 
             <FormInput
@@ -62,7 +67,7 @@ const CantonMunicipalitySegment = ({ country, canton, municipality, isEditable }
                   </InputAdornment>
                 ),
               }}
-              readonly={!isEditable}
+              readonly={!editingEnabled}
             />
 
             <FormInput
@@ -77,7 +82,7 @@ const CantonMunicipalitySegment = ({ country, canton, municipality, isEditable }
                   </InputAdornment>
                 ),
               }}
-              readonly={!isEditable}
+              readonly={!editingEnabled}
             />
           </FormContainer>
         </CardContent>

diff --git a/src/client/src/pages/detail/form/location/coordinateSegmentInterfaces.ts b/src/client/src/pages/detail/form/location/coordinateSegmentInterfaces.ts
@@ -1,4 +1,5 @@
 import { Borehole } from "../../../../api-lib/ReduxStateInterfaces.ts";
+import { SegmentProps } from "./segmentInterface.ts";
 
 export enum ReferenceSystemCode {
   LV95 = 20104001,
@@ -66,18 +67,11 @@ export interface FormValues {
   location_precision: string;
 }
 
-export interface CoordinatesSegmentProps {
-  borehole: Borehole;
-  updateChange: (
-    fieldName: keyof Borehole["data"] | "location",
-    value: string | number | null | (number | string | null)[],
-    to?: boolean,
-  ) => void;
+export interface CoordinatesSegmentProps extends SegmentProps {
   updateNumber: (fieldName: keyof Borehole["data"], value: number | null) => void;
   mapPointChange: boolean;
   setMapPointChange: React.Dispatch<React.SetStateAction<boolean>>;
   showLabeling: boolean;
-  editingEnabled: boolean;
 }
 
 export interface Location {

diff --git a/src/client/src/pages/detail/form/location/coordinatesSegment.tsx b/src/client/src/pages/detail/form/location/coordinatesSegment.tsx
@@ -418,7 +418,7 @@ const CoordinatesSegment: React.FC<CoordinatesSegmentProps> = ({
                   selected={currentReferenceSystem ?? referenceSystems.LV95.code}
                   readonly={!editingEnabled}
                   className={isCoordinateExtraction ? "ai" : ""}
-                  onUpdate={e => onReferenceSystemChange(e)}
+                  onUpdate={e => onReferenceSystemChange(e as number)}
                   values={Object.entries(referenceSystems).map(([, value]) => ({
                     key: value.code,
                     name: value.name,

diff --git a/src/client/src/pages/detail/form/location/elevationSegment.tsx b/src/client/src/pages/detail/form/location/elevationSegment.tsx
@@ -1,34 +1,24 @@
 import { FC, useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
-import { Borehole, User } from "../../../../api-lib/ReduxStateInterfaces.ts";
+import { Borehole } from "../../../../api-lib/ReduxStateInterfaces.ts";
 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";
+import { SegmentProps } from "./segmentInterface.ts";
 
-interface ElevationSegmentProps {
-  borehole: Borehole;
-  user: User;
-  updateChange: (
-    fieldName: keyof Borehole["data"] | "location",
-    value: string | number | null | (number | string | null)[],
-    to?: boolean,
-  ) => void;
+interface ElevationSegmentProps extends SegmentProps {
   updateNumber: (fieldName: keyof Borehole["data"], value: number | null) => void;
 }
-
-const ElevationSegment: FC<ElevationSegmentProps> = ({ borehole, user, updateChange, updateNumber }) => {
+const ElevationSegment: FC<ElevationSegmentProps> = ({ borehole, updateChange, updateNumber, editingEnabled }) => {
   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);
@@ -44,15 +34,15 @@ const ElevationSegment: FC<ElevationSegmentProps> = ({ borehole, user, updateCha
               label="elevation_z"
               value={borehole.data.elevation_z ?? ""}
               type={FormValueType.Text}
-              readonly={!isEditable}
+              readonly={!editingEnabled}
               withThousandSeparator={true}
               onUpdate={e => updateNumber("elevation_z", e === "" ? null : parseFloatWithThousandsSeparator(e))}
             />
             <FormDomainSelect
               fieldName={"elevation_precision"}
               label={"elevation_precision"}
               schemaName={"elevation_precision"}
-              readonly={!isEditable}
+              readonly={!editingEnabled}
               selected={borehole.data.elevation_precision}
               onUpdate={e => {
                 updateChange("elevation_precision", e ?? null, false);
@@ -65,14 +55,14 @@ const ElevationSegment: FC<ElevationSegmentProps> = ({ borehole, user, updateCha
               label="reference_elevation"
               value={borehole.data.reference_elevation ?? ""}
               type={FormValueType.Text}
-              readonly={!isEditable}
+              readonly={!editingEnabled}
               withThousandSeparator={true}
               onUpdate={e => updateNumber("reference_elevation", e === "" ? null : parseFloatWithThousandsSeparator(e))}
             />
             <FormDomainSelect
               fieldName={"qt_reference_elevation"}
               label={"reference_elevation_qt"}
-              readonly={!isEditable}
+              readonly={!editingEnabled}
               schemaName={"elevation_precision"}
               selected={borehole.data.qt_reference_elevation}
               onUpdate={e => {
@@ -84,7 +74,7 @@ const ElevationSegment: FC<ElevationSegmentProps> = ({ borehole, user, updateCha
             <FormDomainSelect
               fieldName={"reference_elevation_type"}
               label={"reference_elevation_type"}
-              readonly={!isEditable}
+              readonly={!editingEnabled}
               schemaName={"reference_elevation_type"}
               selected={borehole.data.reference_elevation_type}
               onUpdate={e => {