Use nullish coalescing operator

CHANGELOG.md

@@ -10,6 +10,7 @@
 ### Fixed
 
 - Observations were not included in exported borehole JSON file.
+- Fixed bug where values of 0 were not displayed in numeric input fields.
 - Fixed bug where `Lithostratigraphhy Top Bedrock` and `Chronostratigraphhy Top Bedrock` were not displayed in form after updating them and navigating away.
 
 ## v2.1.993 - 2024-12-13

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

@@ -218,6 +218,34 @@ describe("Test for the borehole form.", () => {
     });
   });
 
+  it("displays 0 in input fields", () => {
+    // create borehole with 0 in all numeric inputs
+    createBorehole({
+      "extended.original_name": "AAA_RINO",
+      "custom.alternate_name": "AAA_RINO",
+      total_depth: 0,
+      "extended.top_bedrock_fresh_md": 0.0,
+      "custom.top_bedrock_weathered_md": 0.0,
+      elevation_z: 0,
+      reference_elevation: 0.0,
+    }).as("borehole_id");
+    cy.get("@borehole_id").then(id => {
+      goToRouteAndAcceptTerms(`/${id}/location`);
+      evaluateInput("elevationZ", "0");
+      evaluateInput("referenceElevation", "0");
+
+      getElementByDataCy("borehole-menu-item").click();
+
+      evaluateInput("totalDepth", "0");
+      evaluateInput("topBedrockWeatheredMd", "0");
+      evaluateInput("topBedrockFreshMd", "0");
+
+      evaluateInput("total_depth_tvd", "0");
+      evaluateInput("top_bedrock_fresh_tvd", "0");
+      evaluateInput("top_bedrock_weathered_tvd", "0");
+    });
+  });
+
   it("stops editing when going back to overview", () => {
     createBorehole({ "extended.original_name": "AAA_HIPPOPOTHAMUS", "custom.alternate_name": "AAA_HIPPOPOTHAMUS" }).as(
       "borehole_id",

src/client/src/components/buttons/buttonSelect.tsx

@@ -57,7 +57,7 @@ export const ButtonSelect: FC<ButtonSelectProps> = ({
         onClick={handleClick}
         startIcon={startIcon}
         endIcon={anchorEl ? <ChevronUp /> : <ChevronDown />}
-        className={`${isOpen ? "Mui-active" : ""} ${className || ""}`}
+        className={`${isOpen ? "Mui-active" : ""} ${className ?? ""}`}
         data-cy={`${fieldName}-button-select`}
         sx={{ ...sx }}>
         {selectedItem?.value}

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

@@ -62,7 +62,7 @@ export const FormCoordinate: FC<FormCoordinateProps> = ({
       required={required || false}
       error={!className?.includes("ai") && !disabled && getFormFieldError(fieldName, formState.errors)}
       sx={{ ...sx }}
-      className={`${readonly ? "readonly" : ""} ${className || ""}`}
+      className={`${readonly ? "readonly" : ""} ${className ?? ""}`}
       label={t(`location_${direction.toLowerCase()}_${referenceSystem}`)}
       {...register(fieldName, {
         required: required || false,

src/client/src/components/form/formDisplay.tsx

@@ -67,7 +67,7 @@ export const FormDisplay: FC<FormDisplayProps> = ({ prefix, label, value, type,
         ...sx,
       }}>
       <Typography variant="subtitle2">{t(label)}</Typography>
-      <Typography marginBottom={"1em"} variant="subtitle1" data-cy={(prefix || "") + label + "-formDisplay"}>
+      <Typography marginBottom={"1em"} variant="subtitle1" data-cy={(prefix ?? "") + label + "-formDisplay"}>
         {formatValue(value)}
       </Typography>
     </Stack>

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

@@ -61,7 +61,7 @@ export const FormInput: FC<FormInputProps> = ({
       required={required || false}
       error={getFormFieldError(fieldName, formState.errors)}
       sx={{ ...sx }}
-      className={`${readonly ? "readonly" : ""} ${className || ""}`}
+      className={`${readonly ? "readonly" : ""} ${className ?? ""}`}
       type={type || FormValueType.Text}
       multiline={multiline || false}
       rows={rows}

src/client/src/components/form/formMultiSelect.tsx

@@ -103,7 +103,7 @@ export const FormMultiSelect: FC<FormMultiSelectProps> = ({
               InputProps={{ readOnly: readonly, disabled: disabled }}
               required={required || false}
               sx={{ ...sx }}
-              className={`${readonly ? "readonly" : ""} ${className || ""}`}
+              className={`${readonly ? "readonly" : ""} ${className ?? ""}`}
               label={t(label)}
               {...register(fieldName, {
                 required: required || false,
@@ -135,7 +135,7 @@ export const FormMultiSelect: FC<FormMultiSelectProps> = ({
               required={required || false}
               error={getFormFieldError(fieldName, formState.errors)}
               sx={{ ...sx }}
-              className={`${readonly ? "readonly" : ""} ${className || ""}`}
+              className={`${readonly ? "readonly" : ""} ${className ?? ""}`}
               label={t(label)}
               {...register(fieldName, {
                 required: required || false,

src/client/src/components/form/formResultTableDisplay.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { Table, TableBody, TableContainer, TableHead, TableRow, Typography } from "@mui/material";
 import { FieldMeasurementResult } from "../../pages/detail/form/hydrogeology/FieldMeasurementInterface.ts";
 import { HydrotestResult } from "../../pages/detail/form/hydrogeology/HydrotestInterface.ts";
+import { tableCellStyles, tableHeaderStyles } from "./formResultTableDisplayStyles.ts";
 
 interface FormResultTableDisplayProps {
   title: string;
@@ -23,16 +24,6 @@ export const FormResultTableDisplay: React.FC<FormResultTableDisplayProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const tableCellStyles: React.CSSProperties = {
-    width: "20%",
-    maxWidth: "20%",
-  };
-
-  const tableHeaderStyles: React.CSSProperties = {
-    width: "20%",
-    maxWidth: "20%",
-  };
-
   return (
     <>
       <Typography sx={{ mr: 1, mt: 2, fontWeight: "bold" }}>{t(title)}</Typography>

src/client/src/components/form/formResultTableDisplayStyles.ts

@@ -0,0 +1,22 @@
+import React from "react";
+
+export const parameterTableHeaderStyles = {
+  "& .MuiFormControl-root": {
+    minWidth: "100%",
+    maxWidth: "100%",
+  },
+  pr: "3px",
+  pl: "3px",
+  maxWidth: "200px",
+  minWidth: "200px",
+};
+
+export const tableCellStyles: React.CSSProperties = {
+  width: "20%",
+  maxWidth: "20%",
+};
+
+export const tableHeaderStyles: React.CSSProperties = {
+  width: "20%",
+  maxWidth: "20%",
+};

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

@@ -82,7 +82,7 @@ export const FormSelect: FC<FormSelectProps> = ({
           required={required ?? false}
           error={getFormFieldError(fieldName, formState.errors)}
           sx={{ ...sx }}
-          className={`${readonly ? "readonly" : ""} ${className || ""}`}
+          className={`${readonly ? "readonly" : ""} ${className ?? ""}`}
           label={t(label)}
           name={field.name}
           onChange={field.onChange}

src/client/src/pages/detail/form/borehole/boreholeForm.tsx

@@ -52,6 +52,10 @@ export const BoreholeForm = forwardRef(({ borehole, editingEnabled, onSubmit }:
 
   const fetchDepthTVD = useCallback(
     async (fieldValue: number | null) => {
+      // check if fieldValue is effectively zero
+      if (fieldValue !== null && Math.abs(fieldValue) === 0) {
+        return fieldValue;
+      }
       if (!fieldValue) return null;
       const getDepthTVD = async (depthMD: number | null) => {
         if (depthMD == null) {
@@ -124,7 +128,7 @@ export const BoreholeForm = forwardRef(({ borehole, editingEnabled, onSubmit }:
                   <FormInput
                     fieldName={"totalDepth"}
                     label={"totaldepth"}
-                    value={borehole?.totalDepth || ""}
+                    value={borehole?.totalDepth}
                     withThousandSeparator={true}
                     readonly={!editingEnabled}
                   />
@@ -142,7 +146,7 @@ export const BoreholeForm = forwardRef(({ borehole, editingEnabled, onSubmit }:
                 <FormInput
                   fieldName={"topBedrockWeatheredMd"}
                   label={"top_bedrock_weathered_md"}
-                  value={borehole?.topBedrockWeatheredMd || ""}
+                  value={borehole?.topBedrockWeatheredMd}
                   withThousandSeparator={true}
                   readonly={!editingEnabled}
                 />
@@ -156,7 +160,7 @@ export const BoreholeForm = forwardRef(({ borehole, editingEnabled, onSubmit }:
                 <FormInput
                   fieldName={"topBedrockFreshMd"}
                   label={"top_bedrock_fresh_md"}
-                  value={borehole?.topBedrockFreshMd || ""}
+                  value={borehole?.topBedrockFreshMd}
                   withThousandSeparator={true}
                   readonly={!editingEnabled}
                 />
@@ -202,7 +206,7 @@ export const BoreholeForm = forwardRef(({ borehole, editingEnabled, onSubmit }:
                 fieldName={"remarks"}
                 multiline={true}
                 label={"remarks"}
-                value={borehole?.remarks || ""}
+                value={borehole?.remarks}
                 readonly={!editingEnabled}
               />
             </FormContainer>

src/client/src/pages/detail/form/completion/casingDisplay.jsx

@@ -55,10 +55,10 @@ const CasingDisplay = props => {
                   </TableCell>
                   <TableCell data-cy={`casingElements.${index}.toDepth-formDisplay`}>{element.toDepth}</TableCell>
                   <TableCell data-cy={`casingElements.${index}.kindId-formDisplay`}>
-                    {domains?.data?.find(d => d.id === element.kindId)?.[i18n.language] || ""}
+                    {domains?.data?.find(d => d.id === element.kindId)?.[i18n.language] ?? ""}
                   </TableCell>
                   <TableCell data-cy={`casingElements.${index}.materialId-formDisplay`}>
-                    {domains?.data?.find(d => d.id === element.materialId)?.[i18n.language] || ""}
+                    {domains?.data?.find(d => d.id === element.materialId)?.[i18n.language] ?? ""}
                   </TableCell>
                   <TableCell data-cy={`casingElements.${index}.innerDiameter-formDisplay`}>
                     {element.innerDiameter}

src/client/src/pages/detail/form/hydrogeology/fieldMeasurementDisplay.jsx

@@ -3,6 +3,7 @@ import { TableCell } from "@mui/material";
 import { deleteFieldMeasurement, useDomains } from "../../../../api/fetchApiV2.js";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard.jsx";
 import { FormResultTableDisplay } from "../../../../components/form/formResultTableDisplay";
+import { parameterTableHeaderStyles } from "../../../../components/form/formResultTableDisplayStyles";
 import ObservationDisplay from "./observationDisplay.tsx";
 import { getFieldMeasurementParameterUnits } from "./parameterUnits";
 
@@ -27,24 +28,17 @@ const FieldMeasurementDisplay = props => {
         renderBody={(result, index, styles) => (
           <>
             <TableCell sx={styles} data-cy={`fieldMeasurementResult.${index}.sampleType-formDisplay`}>
-              {domains?.data?.find(d => d.id === result.sampleTypeId)?.[i18n.language] || ""}
+              {domains?.data?.find(d => d.id === result.sampleTypeId)?.[i18n.language] ?? ""}
             </TableCell>
             <TableCell
               component="th"
               scope="row"
               sx={{
                 ...styles,
-                "& .MuiFormControl-root": {
-                  minWidth: "100%",
-                  maxWidth: "100%",
-                },
-                pr: "3px",
-                pl: "3px",
-                maxWidth: "200px",
-                minWidth: "200px",
+                ...parameterTableHeaderStyles,
               }}
               data-cy={`fieldMeasurementResult.${index}.parameter-formDisplay`}>
-              {domains?.data?.find(d => d.id === result.parameterId)?.[i18n.language] || ""}
+              {domains?.data?.find(d => d.id === result.parameterId)?.[i18n.language] ?? ""}
             </TableCell>
             <TableCell sx={styles} data-cy={`fieldMeasurementResult.${index}.value-formDisplay`}>
               {result?.value && (

src/client/src/pages/detail/form/hydrogeology/hydrotestDisplay.jsx

@@ -4,6 +4,7 @@ import { deleteHydrotest, useDomains } from "../../../../api/fetchApiV2.js";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard.jsx";
 import { FormContainer, FormDisplay, FormValueType } from "../../../../components/form/form";
 import { FormResultTableDisplay } from "../../../../components/form/formResultTableDisplay";
+import { parameterTableHeaderStyles } from "../../../../components/form/formResultTableDisplayStyles";
 import ObservationDisplay from "./observationDisplay.tsx";
 import { getHydrotestParameterUnits } from "./parameterUnits";
 
@@ -41,17 +42,10 @@ const HydrotestDisplay = props => {
                 scope="row"
                 sx={{
                   ...styles,
-                  "& .MuiFormControl-root": {
-                    minWidth: "100%",
-                    maxWidth: "100%",
-                  },
-                  pr: "3px",
-                  pl: "3px",
-                  maxWidth: "200px",
-                  minWidth: "200px",
+                  ...parameterTableHeaderStyles,
                 }}
                 data-cy={`hydrotestResult.${index}.parameter-formDisplay`}>
-                {domains?.data?.find(d => d.id === result.parameterId)?.[i18n.language] || ""}
+                {domains?.data?.find(d => d.id === result.parameterId)?.[i18n.language] ?? ""}
               </TableCell>
               <TableCell sx={styles} data-cy={`hydrotestResult.${index}.value-formDisplay`}>
                 {result?.value && (

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

@@ -23,7 +23,7 @@ const ElevationSegment: FC<ElevationSegmentProps> = ({ borehole, editingEnabled,
             fieldName={"elevationZ"}
             label={"elevation_z"}
             value={borehole.elevationZ}
-            controlledValue={formMethods.watch("elevationZ") || ""}
+            controlledValue={formMethods.watch("elevationZ") ?? ""}
             withThousandSeparator={true}
             readonly={!editingEnabled}
           />
@@ -39,7 +39,7 @@ const ElevationSegment: FC<ElevationSegmentProps> = ({ borehole, editingEnabled,
           <FormInput
             fieldName={"referenceElevation"}
             label={"reference_elevation"}
-            value={borehole?.referenceElevation || ""}
+            value={borehole?.referenceElevation}
             withThousandSeparator={true}
             readonly={!editingEnabled}
           />

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

@@ -74,7 +74,7 @@ const IdentifierSegment = ({ borehole, editingEnabled, formMethods }: Identifier
                 fieldName={`boreholeCodelists.${index}.value`}
                 readonly={!editingEnabled}
                 label="borehole_identifier_value"
-                value={field.value || ""}
+                value={field.value}
                 type={FormValueType.Text}
               />
             </Grid>

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

@@ -30,10 +30,10 @@ export const LocationPanel = forwardRef(
         country: borehole.country,
         canton: borehole.canton,
         municipality: borehole.municipality,
-        locationX: borehole.locationX?.toFixed(borehole.precisionLocationX) || "",
-        locationY: borehole.locationY?.toFixed(borehole.precisionLocationY) || "",
-        locationXLV03: borehole.locationXLV03?.toFixed(borehole.precisionLocationXLV03) || "",
-        locationYLV03: borehole.locationYLV03?.toFixed(borehole.precisionLocationYLV03) || "",
+        locationX: borehole.locationX?.toFixed(borehole.precisionLocationX) ?? "",
+        locationY: borehole.locationY?.toFixed(borehole.precisionLocationY) ?? "",
+        locationXLV03: borehole.locationXLV03?.toFixed(borehole.precisionLocationXLV03) ?? "",
+        locationYLV03: borehole.locationYLV03?.toFixed(borehole.precisionLocationYLV03) ?? "",
         locationPrecisionId: borehole.locationPrecisionId,
         originalReferenceSystem: borehole.originalReferenceSystem,
         boreholeCodelists: borehole?.boreholeCodelists,

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

@@ -30,7 +30,7 @@ const NameSegment = ({ borehole, editingEnabled, formMethods }: NameSegmentProps
               <FormInput
                 fieldName={"originalName"}
                 label={"original_name"}
-                value={borehole?.originalName || ""}
+                value={borehole?.originalName}
                 readonly={!editingEnabled}
               />
               <TextField
@@ -39,21 +39,16 @@ const NameSegment = ({ borehole, editingEnabled, formMethods }: NameSegmentProps
                 }}
                 className="readonly"
                 label={t("workgroup")}
-                value={borehole?.workgroup?.name || ""}
+                value={borehole?.workgroup?.name}
               />
             </FormContainer>
           )}
           <FormContainer direction="row">
-            <FormInput
-              fieldName={"name"}
-              label={"alternate_name"}
-              readonly={!editingEnabled}
-              value={borehole?.name || ""}
-            />
+            <FormInput fieldName={"name"} label={"alternate_name"} readonly={!editingEnabled} value={borehole?.name} />
             <FormInput
               fieldName={"projectName"}
               label={"project_name"}
-              value={borehole?.projectName || ""}
+              value={borehole?.projectName}
               readonly={!editingEnabled}
             />
           </FormContainer>

src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/descriptionLayers/descriptionInput.jsx

@@ -98,7 +98,7 @@ const DescriptionInput = props => {
         variant="outlined"
         size="small"
         label={t("description_quality")}
-        defaultValue={item.descriptionQualityId || ""}
+        defaultValue={item.descriptionQualityId ?? ""}
         data-cy="qt-decription-select"
         InputLabelProps={{ shrink: true }}
         onChange={e => {

src/client/src/pages/overview/sidePanelContent/commons/workgroupSelect.tsx

@@ -38,7 +38,7 @@ const WorkgroupSelect = ({ workgroupId, enabledWorkgroups, setWorkgroupId, sx, h
           data-cy="workgroup-formSelect"
           value={workgroupId}
           onChange={e => setWorkgroupId(e.target.value as string)}
-          renderValue={selected => options.find(o => o.value === selected)?.text || ""}>
+          renderValue={selected => options.find(o => o.value === selected)?.text ?? ""}>
           {options.map(o => (
             <MenuItem key={o.key} value={o.value}>
               {o.text}