Fix code duplication

swisstopo · Dec 20, 2024 · ecf80c0 · ecf80c0
1 parent 6eaf727
commit ecf80c0
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 26 deletions.
diff --git a/src/client/src/components/form/formResultTableDisplay.tsx b/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>

diff --git a/src/client/src/components/form/formResultTableDisplayStyles.ts b/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%",
+};
diff --git a/src/client/src/pages/detail/form/hydrogeology/fieldMeasurementDisplay.jsx b/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";
 
@@ -34,14 +35,7 @@ const FieldMeasurementDisplay = props => {
               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] ?? ""}

diff --git a/src/client/src/pages/detail/form/hydrogeology/hydrotestDisplay.jsx b/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,14 +42,7 @@ 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] ?? ""}