Merge Thousand seperators

Resolves #223
swisstopo · Jan 3, 2023 · d806ba2 · d806ba2
2 parents fed561f + 304ef0e
commit d806ba2
Show file tree

Hide file tree

Showing 9 changed files with 211 additions and 83 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@
 - Migrate existing LV95 coordinates into LV03 coordinates using 'shift' method. Preserve original LV95 coordinates for some selected boreholes (e.g. Bülach-1-1, ...). These changes are not yet visible in the web client.
 - Points on the overview map are now displayed as clusters depending on zoom level.
 - Order codelists in translation UI by `order` column instead of by `geolcode`.
+- Coordinates and elevations in inputs and texts are now displayed with thousand separators.
 
 ### Fixed
 

diff --git a/src/client/cypress/e2e/editor/coordinates.cy.js b/src/client/cypress/e2e/editor/coordinates.cy.js
@@ -18,10 +18,10 @@ describe("Tests for editing coordinates of a borehole.", () => {
     cy.wait("@edit_list");
     newEditableBorehole().as("borehole_id");
 
-    cy.get('[data-cy="LV95X"]').children().first().as("LV95X-input");
-    cy.get('[data-cy="LV95Y"]').children().first().as("LV95Y-input");
-    cy.get('[data-cy="LV03X"]').children().first().as("LV03X-input");
-    cy.get('[data-cy="LV03Y"]').children().first().as("LV03Y-input");
+    cy.get('[data-cy="LV95X"]').as("LV95X-input");
+    cy.get('[data-cy="LV95Y"]').as("LV95Y-input");
+    cy.get('[data-cy="LV03X"]').as("LV03X-input");
+    cy.get('[data-cy="LV03Y"]').as("LV03Y-input");
   });
 
   afterEach(() => {
@@ -44,9 +44,9 @@ describe("Tests for editing coordinates of a borehole.", () => {
       "@edit_patch",
     ]);
     // verify automatically filled inputs for LV03
-    cy.get("@LV95Y-input").should("have.value", 1245794);
-    cy.get("@LV03Y-input").should("have.value", 245794);
-    cy.get("@LV03X-input").should("have.value", 645122);
+    cy.get("@LV95Y-input").should("have.value", "1'245'794");
+    cy.get("@LV03Y-input").should("have.value", "245'794");
+    cy.get("@LV03X-input").should("have.value", "645'122");
 
     //switch reference system
     cy.get("input[value=20104002]").click();

diff --git a/src/client/cypress/e2e/srsFilter.cy.js b/src/client/cypress/e2e/srsFilter.cy.js
@@ -83,8 +83,8 @@ describe("Tests for filtering data by reference system.", () => {
   it("can filter by reference system", () => {
     login("/editor");
     newEditableBorehole().as("borehole_id");
-    cy.get('[data-cy="LV03X"]').children().first().as("LV03X-input");
-    cy.get('[data-cy="LV03Y"]').children().first().as("LV03Y-input");
+    cy.get('[data-cy="LV03X"]').as("LV03X-input");
+    cy.get('[data-cy="LV03Y"]').as("LV03Y-input");
 
     cy.get("input[value=20104002]").click();
 

diff --git a/src/client/package-lock.json b/src/client/package-lock.json
diff --git a/src/client/package.json b/src/client/package.json
@@ -42,6 +42,7 @@
     "react-hook-form": "^7.39.1",
     "react-i18next": "^11.3.1",
     "react-mentions": "^4.1.0",
+    "react-number-format": "^5.1.2",
     "react-query": "^3.39.2",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",

diff --git a/src/client/src/commons/detail/detailsComponent.js b/src/client/src/commons/detail/detailsComponent.js
@@ -9,6 +9,7 @@ import DateText from "../form/dateText";
 import TranslationText from "../form/translationText";
 import ExportLink from "../exportlink";
 import { Icon } from "semantic-ui-react";
+import { NumericFormat } from "react-number-format";
 
 class DetailsComponent extends React.Component {
   render() {
@@ -195,7 +196,12 @@ class DetailsComponent extends React.Component {
                       fontWeight: "bold",
                       fontSize: "1.1em",
                     }}>
-                    {detail.borehole.elevation_z} m
+                    <NumericFormat
+                      value={detail.borehole.elevation_z}
+                      thousandSeparator="'"
+                      suffix=" m"
+                      displayType="text"
+                    />
                   </div>
                   <div
                     style={{

diff --git a/src/client/src/commons/detail/meta/metaComponent.js b/src/client/src/commons/detail/meta/metaComponent.js
@@ -6,8 +6,10 @@ import DateText from "../../form/dateText";
 import MunicipalityText from "../../form/municipality/municipalityText";
 import CantonText from "../../form/cantons/cantonText";
 import TranslationText from "../../form/translationText";
+import { NumericFormat } from "react-number-format";
 
 // if it's text: this.getTextRow(translationId, data)
+// if it's numeric with thousand separators: this.getNumericTextRow(translationId, data)
 // if it's dropdown :  this.getDomainRow(schema,data,translationId)
 // if it's date : this.getTextRow(translationId, data)
 class MetaComponent extends React.Component {
@@ -35,6 +37,54 @@ class MetaComponent extends React.Component {
     );
   }
 
+  getNumericTextRow(schema, ...values) {
+    let coordinates;
+    if (values?.length === 2) {
+      coordinates = (
+        <>
+          <NumericFormat
+            value={values[0]}
+            thousandSeparator="'"
+            displayType="text"
+            suffix=", "
+          />
+          <NumericFormat
+            value={values[1]}
+            thousandSeparator="'"
+            displayType="text"
+          />
+        </>
+      );
+    } else {
+      coordinates = (
+        <NumericFormat
+          value={values[0]}
+          thousandSeparator="'"
+          displayType="text"
+        />
+      );
+    }
+
+    return (
+      <div key={schema}>
+        <div
+          style={{
+            fontSize: "0.8em",
+            color: "#787878",
+            lineHeight: "1em",
+          }}>
+          <TranslationText id={schema} />
+        </div>
+        <div
+          style={{
+            marginBottom: "0.4em",
+          }}>
+          {coordinates}
+        </div>
+      </div>
+    );
+  }
+
   getTextRow(schema, text, key = Math.random().toString(16).substring(2, 8)) {
     return (
       <div key={key}>
@@ -269,16 +319,21 @@ class MetaComponent extends React.Component {
             style={{
               flex: "1 1 100%",
             }}>
-            {this.getTextRow(
+            {this.getNumericTextRow(
               "coordinatesLV95",
-              data.location_x + ", " + data.location_y,
+              data.location_x,
+              data.location_y,
             )}
-            {this.getTextRow(
+            {this.getNumericTextRow(
               "coordinatesLV03",
-              data.location_x_lv03 + ", " + data.location_y_lv03,
+              data.location_x_lv03,
+              data.location_y_lv03,
+            )}
+            {this.getNumericTextRow("elevation_z", data.elevation_z)}
+            {this.getNumericTextRow(
+              "reference_elevation",
+              data.reference_elevation,
             )}
-            {this.getTextRow("elevation_z", data.elevation_z)}
-            {this.getTextRow("reference_elevation", data.reference_elevation)}
             {this.getDomainRow(
               "ibor117",
               data.reference_elevation_type,