From ee8532a1756e2f77f785b3703c984a10eec65843 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Thu, 1 Feb 2024 18:15:34 +0100 Subject: [PATCH 01/44] Add datacard components --- src/client/public/locale/common.json | 4 + src/client/public/locale/de/common.json | 4 + src/client/public/locale/en/common.json | 4 + src/client/public/locale/fr/common.json | 4 + src/client/public/locale/it/common.json | 4 + .../form/borehole/completion/completion.js | 7 +- .../completion/completionContentTab.js | 98 ++-- .../borehole/completion/styledComponents.js | 39 -- .../borehole/hydrogeology/fieldMeasurement.js | 128 +++-- .../hydrogeology/fieldMeasurementDisplay.js | 14 +- .../hydrogeology/fieldMeasurementInput.js | 161 +++--- .../groundwaterLevelMeasurement.js | 146 +++--- .../groundwaterLevelMeasurementDisplay.js | 14 +- .../groundwaterLevelMeasurementInput.js | 121 +++-- .../form/borehole/hydrogeology/hydrotest.js | 123 +++-- .../borehole/hydrogeology/hydrotestDisplay.js | 15 +- .../borehole/hydrogeology/hydrotestInput.js | 457 +++++++++--------- .../borehole/hydrogeology/waterIngress.js | 122 +++-- .../hydrogeology/waterIngressDisplay.js | 15 +- .../hydrogeology/waterIngressInput.js | 125 +++-- src/client/src/components/baseComponents.js | 12 + src/client/src/components/buttons/buttons.js | 35 ++ .../src/components/dataCard/dataCard.js | 67 +++ 23 files changed, 839 insertions(+), 880 deletions(-) create mode 100644 src/client/src/components/baseComponents.js create mode 100644 src/client/src/components/buttons/buttons.js create mode 100644 src/client/src/components/dataCard/dataCard.js diff --git a/src/client/public/locale/common.json b/src/client/public/locale/common.json index 73ca34183..ca37137ce 100644 --- a/src/client/public/locale/common.json +++ b/src/client/public/locale/common.json @@ -5,6 +5,10 @@ "addCompletion": "", "addCasing": "", "addFilling": "", + "addHydrotest": "", + "addFieldmeasurement": "", + "addGroundwaterLevelMeasurement": "", + "addWaterIngress": "", "address": "", "admin": "", "afterdate": "", diff --git a/src/client/public/locale/de/common.json b/src/client/public/locale/de/common.json index 47815bb38..0a4b8ea45 100644 --- a/src/client/public/locale/de/common.json +++ b/src/client/public/locale/de/common.json @@ -5,6 +5,10 @@ "addCompletion": "Ausbau hinzufügen", "addCasing": "Verrohrung hinzufügen", "addFilling": "Hinterfüllung hinzufügen", + "addHydrotest": "Hydrotest hinzufügen", + "addFieldmeasurement": "Feldmessung hinzufügen", + "addGroundwaterLevelMeasurement": "Grundwassermessung hinzufügen", + "addWaterIngress": "Wasserzutritt hinzufügen", "admin": "Administrator", "afterdate": "von Datum", "all": "Alle", diff --git a/src/client/public/locale/en/common.json b/src/client/public/locale/en/common.json index 4d124e80a..4e2fbebc5 100644 --- a/src/client/public/locale/en/common.json +++ b/src/client/public/locale/en/common.json @@ -5,6 +5,10 @@ "addCompletion": "Add completion", "addCasing": "Add casing", "addFilling": "Add backfill", + "addHydrotest": "Add hydrotest", + "addFieldmeasurement": "Add field measurement", + "addGroundwaterLevelMeasurement": "Add groundwater measurement", + "addWaterIngress": "Add water ingress", "admin": "Administrator", "afterdate": "after this date", "all": "All", diff --git a/src/client/public/locale/fr/common.json b/src/client/public/locale/fr/common.json index d34537b51..bc79065e5 100644 --- a/src/client/public/locale/fr/common.json +++ b/src/client/public/locale/fr/common.json @@ -5,6 +5,10 @@ "addCompletion": "Ajouter un aménagement", "addCasing": "Ajouter un tubage", "addFilling": "Ajouter un remplissage", + "addHydrotest": "Ajouter un hydro-test", + "addFieldmeasurement": "Ajouter une mesure de terrain", + "addGroundwaterLevelMeasurement": "Ajouter une mesure des eaux souterraines", + "addWaterIngress": "Ajouter une venue d'eau", "admin": "Administrateur", "afterdate": "À partir de cette date", "all": "Tout", diff --git a/src/client/public/locale/it/common.json b/src/client/public/locale/it/common.json index cc370ea20..dc9f27e40 100644 --- a/src/client/public/locale/it/common.json +++ b/src/client/public/locale/it/common.json @@ -5,6 +5,10 @@ "addCompletion": "Aggiungere un'installazione", "addCasing": "Aggiungere una tubazione", "addFilling": "Aggiungere un'riempimento", + "addHydrotest": "Aggiungere un test idrico", + "addFieldmeasurement": "Aggiungere una misurazione in campo", + "addGroundwaterLevelMeasurement": "Aggiungere una misurazione delle acque sotterranee", + "addWaterIngress": "Aggiungere un ingresso d'acqua", "admin": "Amministratore", "afterdate": "a partire da questa data", "all": "Tutto", diff --git a/src/client/src/commons/form/borehole/completion/completion.js b/src/client/src/commons/form/borehole/completion/completion.js index df1469233..3c547e85f 100644 --- a/src/client/src/commons/form/borehole/completion/completion.js +++ b/src/client/src/commons/form/borehole/completion/completion.js @@ -3,7 +3,6 @@ import { useHistory, useLocation, useParams } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { CircularProgress, Stack, Tooltip, Typography } from "@mui/material"; import { - AddButton, CompletionBox, CompletionTabs, CompletionTab, @@ -19,6 +18,8 @@ import CompletionContent from "./completionContent"; import CompletionHeaderInput from "./completionHeaderInput"; import CompletionHeaderDisplay from "./completionHeaderDisplay"; import Prompt from "../../../../components/prompt/prompt"; +import { AddButton } from "../../../../components/buttons/buttons"; +import { FullPage } from "../../../../components/baseComponents"; const Completion = props => { const { isEditable } = props; @@ -243,7 +244,7 @@ const Completion = props => { return ( <> - + { ) )} - + { const { @@ -98,64 +101,43 @@ export const CompletionContentTab = props => { }, [displayed, dataRefs]); return ( - - - - {isEditable && ( - - { - e.stopPropagation(); - if (!selected) { - const temp = { id: 0 }; - setDisplayed([...state.data, temp]); - setSelected(temp); - } - }}> - {t(addLabel)} - - - )} - - + + + {isEditable && ( + + { + e.stopPropagation(); + if (!selected) { + const temp = { id: 0 }; + setDisplayed([...state.data, temp]); + setSelected(temp); + } + }}> + {t(addLabel)} + + + )} + {state.isLoadingData ? ( ) : displayed?.length > 0 ? ( - + {displayed .sort((a, b) => a.fromDepthM - b.fromDepthM) .map((item, index) => { const isSelected = selected?.id === item.id; const isTemp = item.id === 0; return ( - - + {isEditable && isSelected ? renderInput({ item: item, @@ -184,16 +166,16 @@ export const CompletionContentTab = props => { }); }, })} - - + + ); })} - + ) : ( - + {t(emptyLabel)} - + )} - + ); }; diff --git a/src/client/src/commons/form/borehole/completion/styledComponents.js b/src/client/src/commons/form/borehole/completion/styledComponents.js index 3bc8d2f4c..f82d4cd48 100644 --- a/src/client/src/commons/form/borehole/completion/styledComponents.js +++ b/src/client/src/commons/form/borehole/completion/styledComponents.js @@ -64,29 +64,6 @@ export const IconButtonWithMargin = styled(IconButton)({ }, }); -export const BdmsButton = styled(Button)({ - fontFamily: "Lato", - textTransform: "none", - color: "rgba(0, 0, 0, 0.8)", - borderColor: "rgba(0, 0, 0, 0.8)", - marginBottom: "6px", - "&:hover, &.Mui-focusVisible, &:active, &:focus, &:focus-visible": { - borderColor: "rgba(0, 0, 0, 0.8)", - backgroundColor: "rgba(0, 0, 0, 0.05)", - }, - "& .MuiTouchRipple-root": { - display: "none", - }, -}); - -export const AddButton = forwardRef((props, ref) => { - return ( - }> - {props.children} - - ); -}); - export const CompletionBox = styled(Box)(() => ({ backgroundColor: "rgb(242,242,242)", borderRadius: "3px", @@ -122,19 +99,3 @@ export const CompletionTab = styled(props => )( }, }), ); - -export const CompletionCard = forwardRef((props, ref) => { - const StyledCard = styled(Card)(() => ({ - width: "100%", - border: "1px solid lightgrey", - borderRadius: "3px", - padding: "12px 12px 16px 12px", - marginBottom: "8px", - })); - - return ( - - {props.children} - - ); -}); diff --git a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js index 6a47e4e42..40a4c5eee 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js +++ b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js @@ -1,13 +1,17 @@ import React, { useState, useEffect, useMemo, createRef } from "react"; import { useTranslation } from "react-i18next"; +import { CircularProgress, Typography } from "@mui/material"; +import { AddButton } from "../../../../components/buttons/buttons"; import { - CircularProgress, - Grid, - Stack, - Tooltip, - Typography, -} from "@mui/material"; -import AddCircleIcon from "@mui/icons-material/AddCircle"; + DataCard, + DataCardItem, + DataCardContainer, + DataCardButtonContainer, +} from "../../../../components/dataCard/dataCard"; +import { + FullPage, + FullPageCentered, +} from "../../../../components/baseComponents"; import { useFieldMeasurementMutations, @@ -70,44 +74,34 @@ const FieldMeasurement = props => { }; return ( - - - - {t("field_measurement")} - - { - e.stopPropagation(); - if (selectedFieldMeasurement === null) { - const tempFieldMeasurement = { id: 0 }; - setDisplayedFieldMeasurements([ - ...fieldMeasurements, - tempFieldMeasurement, - ]); - setSelectedFieldMeasurement(tempFieldMeasurement); - } - }} - /> - - - + + + {isEditable && ( + { + e.stopPropagation(); + if (selectedFieldMeasurement === null) { + const tempFieldMeasurement = { id: 0 }; + setDisplayedFieldMeasurements([ + ...fieldMeasurements, + tempFieldMeasurement, + ]); + setSelectedFieldMeasurement(tempFieldMeasurement); + } + }}> + {t("addFieldmeasurement")} + + )} + {displayedFieldMeasurements?.length === 0 && ( - + {t("msgFieldMeasurementsEmpty")} - + )} - + {displayedFieldMeasurements?.length > 0 && displayedFieldMeasurements ?.sort((a, b) => a.fromDepthM - b.fromDepthM) @@ -115,47 +109,43 @@ const FieldMeasurement = props => { const isSelected = selectedFieldMeasurement?.id === gwlm.id; const isTempGwlm = gwlm.id === 0; return ( - + {isSuccess ? ( - isEditable && isSelected ? ( - - ) : ( - !isTempGwlm && ( - + {isEditable && isSelected ? ( + - ) - ) + ) : ( + !isTempGwlm && ( + + ) + )} + ) : ( )} - + ); })} - - + + ); }; export default FieldMeasurement; diff --git a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js index 31e08b173..28fa448bf 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js @@ -1,5 +1,5 @@ import React from "react"; -import { Card, Stack, Tooltip, Typography } from "@mui/material"; +import { Stack, Tooltip, Typography } from "@mui/material"; import { StackFullWidth } from "./styledComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; @@ -19,15 +19,7 @@ const FieldMeasurementDisplay = props => { const { t } = useTranslation(); return ( - + <> @@ -94,7 +86,7 @@ const FieldMeasurementDisplay = props => { - + ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js index 5c31f5b1d..4f64e43fe 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js @@ -1,6 +1,6 @@ import React, { useEffect, useContext } from "react"; import { useForm, FormProvider } from "react-hook-form"; -import { Box, Card, InputAdornment, Stack, Tooltip } from "@mui/material"; +import { Box, InputAdornment, Stack, Tooltip } from "@mui/material"; import { FormInput, FormSelect } from "../../../../components/form/form"; import { useDomains } from "../../../../api/fetchApiV2"; import CheckIcon from "@mui/icons-material/Check"; @@ -88,93 +88,84 @@ const FieldMeasurementInput = props => { const currentParameterId = formMethods.getValues("parameterId"); return ( - - -
- - - + + + + + + + d.schema === + hydrogeologySchemaConstants.fieldMeasurementSampleType, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + d.schema === + hydrogeologySchemaConstants.fieldMeasurementParameter, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + + + {currentParameterId && + getParameterUnit(currentParameterId)} + + ), + }} /> - - - d.schema === - hydrogeologySchemaConstants.fieldMeasurementSampleType, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - d.schema === - hydrogeologySchemaConstants.fieldMeasurementParameter, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - - - {currentParameterId && - getParameterUnit(currentParameterId)} - - ), - }} - /> - - - - closeFormIfCompleted()} - /> - - - -
-
+ + + closeFormIfCompleted()} + /> + + + + + ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurement.js b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurement.js index 6e8679c3e..3e443f9e8 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurement.js +++ b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurement.js @@ -1,13 +1,17 @@ import React, { useState, useEffect, useMemo, createRef } from "react"; import { useTranslation } from "react-i18next"; +import { CircularProgress, Typography } from "@mui/material"; +import { AddButton } from "../../../../components/buttons/buttons"; import { - CircularProgress, - Grid, - Stack, - Tooltip, - Typography, -} from "@mui/material"; -import AddCircleIcon from "@mui/icons-material/AddCircle"; + DataCard, + DataCardItem, + DataCardContainer, + DataCardButtonContainer, +} from "../../../../components/dataCard/dataCard"; +import { + FullPage, + FullPageCentered, +} from "../../../../components/baseComponents"; import { useGroundwaterLevelMeasurementMutations, @@ -67,52 +71,36 @@ const GroundwaterLevelMeasurement = props => { }, [displayedGroundwaterLevelMeasurements, groundwaterLevelMeasurementRefs]); return ( - - - - - {t("groundwater_level_measurement")} - - - + + {isEditable && ( + { + e.stopPropagation(); + if (selectedGroundwaterLevelMeasurement === null) { + const tempGroundwaterLevelMeasurement = { id: 0 }; + setDisplayedGroundwaterLevelMeasurements([ + ...groundwaterLevelMeasurements, + tempGroundwaterLevelMeasurement, + ]); + setSelectedGroundwaterLevelMeasurement( + tempGroundwaterLevelMeasurement, + ); } - onClick={e => { - e.stopPropagation(); - if (selectedGroundwaterLevelMeasurement === null) { - const tempGroundwaterLevelMeasurement = { id: 0 }; - setDisplayedGroundwaterLevelMeasurements([ - ...groundwaterLevelMeasurements, - tempGroundwaterLevelMeasurement, - ]); - setSelectedGroundwaterLevelMeasurement( - tempGroundwaterLevelMeasurement, - ); - } - }} - /> - - - + }}> + {t("addGroundwaterLevelMeasurement")} + + )} + {displayedGroundwaterLevelMeasurements?.length === 0 && ( - + {t("msgGroundwaterLevelMeasurementsEmpty")} - + )} - + {displayedGroundwaterLevelMeasurements?.length > 0 && displayedGroundwaterLevelMeasurements ?.sort((a, b) => a.fromDepthM - b.fromDepthM) @@ -121,53 +109,51 @@ const GroundwaterLevelMeasurement = props => { selectedGroundwaterLevelMeasurement?.id === gwlm.id; const isTempGwlm = gwlm.id === 0; return ( - {isSuccess ? ( - isEditable && isSelected ? ( - - ) : ( - !isTempGwlm && ( - + {isEditable && isSelected ? ( + - ) - ) + ) : ( + !isTempGwlm && ( + + ) + )} + ) : ( )} - + ); })} - - + + ); }; export default GroundwaterLevelMeasurement; diff --git a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js index 9ebb18c5c..3c7e6e17e 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js @@ -1,5 +1,5 @@ import React from "react"; -import { Card, Stack, Tooltip, Typography } from "@mui/material"; +import { Stack, Tooltip, Typography } from "@mui/material"; import { StackFullWidth } from "./styledComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; @@ -18,15 +18,7 @@ const GroundwaterLevelMeasurementDisplay = props => { const { t } = useTranslation(); return ( - + <> @@ -91,7 +83,7 @@ const GroundwaterLevelMeasurementDisplay = props => { - + ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js index f9b47e151..22a500f79 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js @@ -1,6 +1,6 @@ import React, { useEffect, useContext } from "react"; import { useForm, FormProvider } from "react-hook-form"; -import { Box, Card, Stack, Tooltip } from "@mui/material"; +import { Box, Stack, Tooltip } from "@mui/material"; import { FormInput, FormSelect } from "../../../../components/form/form"; import { useDomains } from "../../../../api/fetchApiV2"; import CheckIcon from "@mui/icons-material/Check"; @@ -76,73 +76,64 @@ const GroundwaterLevelMeasurementInput = props => { }; return ( - - -
- - - + + + + + + + d.schema === + hydrogeologySchemaConstants.groundwaterLevelMeasurementKind, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + + + - - - d.schema === - hydrogeologySchemaConstants.groundwaterLevelMeasurementKind, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - - - - - - - closeFormIfCompleted()} - /> - - - -
-
+ + + closeFormIfCompleted()} + /> + + + + + ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotest.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotest.js index 3c16c4492..55e473d27 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotest.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotest.js @@ -1,14 +1,17 @@ import React, { useState, useEffect, useMemo, createRef } from "react"; import { useTranslation } from "react-i18next"; +import { CircularProgress, Typography } from "@mui/material"; +import { AddButton } from "../../../../components/buttons/buttons"; import { - Box, - CircularProgress, - Grid, - Stack, - Tooltip, - Typography, -} from "@mui/material"; -import AddCircleIcon from "@mui/icons-material/AddCircle"; + DataCard, + DataCardItem, + DataCardContainer, + DataCardButtonContainer, +} from "../../../../components/dataCard/dataCard"; +import { + FullPage, + FullPageCentered, +} from "../../../../components/baseComponents"; import { useHydrotestMutations, @@ -67,41 +70,31 @@ const Hydrotest = ({ isEditable, boreholeId }) => { }, [displayedHydrotests, hydrotestRefs]); return ( - - - - {t("hydrotest")} - - { - e.stopPropagation(); - if (!selectedHydrotest) { - const tempHydrotest = { id: 0 }; - setDisplayedHydrotests([...hydrotests, tempHydrotest]); - setSelectedHydrotest(tempHydrotest); - } - }} - /> - - - + + + {isEditable && ( + { + e.stopPropagation(); + if (!selectedHydrotest) { + const tempHydrotest = { id: 0 }; + setDisplayedHydrotests([...hydrotests, tempHydrotest]); + setSelectedHydrotest(tempHydrotest); + } + }}> + {t("addHydrotest")} + + )} + {displayedHydrotests?.length === 0 && ( - + {t("msgHydrotestEmpty")} - + )} - + {displayedHydrotests?.length > 0 && displayedHydrotests ?.sort((a, b) => a.fromDepthM - b.fromDepthM) @@ -109,44 +102,40 @@ const Hydrotest = ({ isEditable, boreholeId }) => { const isSelected = selectedHydrotest?.id === hydrotest.id; const isTempHydrotest = hydrotest.id === 0; return ( - + {isSuccess ? ( - isEditable && isSelected ? ( - - ) : ( - !isTempHydrotest && ( - + {isEditable && isSelected ? ( + - ) - ) + ) : ( + !isTempHydrotest && ( + + ) + )} + ) : ( )} - + ); })} - - + + ); }; export default React.memo(Hydrotest); diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js index 8e2d50551..d00aaba28 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js @@ -1,5 +1,5 @@ import React from "react"; -import { Card, Stack, Tooltip, Typography } from "@mui/material"; +import { Stack, Tooltip, Typography } from "@mui/material"; import { TypographyWithBottomMargin, StackFullWidth, @@ -23,15 +23,7 @@ const HydrotestDisplay = props => { const { t, i18n } = useTranslation(); return ( - + <> @@ -127,8 +119,7 @@ const HydrotestDisplay = props => { - - + ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js index a54a4a8a9..6c21e54b7 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js @@ -2,7 +2,6 @@ import React, { useEffect, useContext, useState } from "react"; import { useForm, FormProvider, Controller } from "react-hook-form"; import { Box, - Card, Chip, FormControl, IconButton, @@ -277,252 +276,240 @@ const HydrotestInput = ({ filteredTestKindDomains?.data?.length !== 0; return ( - - -
- - - - {t("hydrotest")} - - - - - + + + + + {t("hydrotest")} + + + + + + c.schema === + hydrogeologySchemaConstants.hydrotestKind, + ) + .map(c => c.id) || [] + } + rules={{ required: true }} + render={({ field }) => ( + ChipBox(selection, field), + }} + sx={{ + backgroundColor: getInputFieldBackgroundColor( + formMethods.formState.errors.testKindId, + ), + }} + onChange={e => { + e.stopPropagation(); + field.onChange(e.target.value); + if (e.target.value.length === 0) { + resetRelatedFormValues(); + } + formMethods.trigger(); + setHydrotestKindIds(e.target.value); + }}> + {domains?.data ?.filter( - c => - c.schema === + d => + d.schema === hydrogeologySchemaConstants.hydrotestKind, ) - .map(c => c.id) || [] - } - rules={{ required: true }} - render={({ field }) => ( - ChipBox(selection, field), - }} - sx={{ - backgroundColor: getInputFieldBackgroundColor( - formMethods.formState.errors.testKindId, - ), - }} - onChange={e => { - e.stopPropagation(); - field.onChange(e.target.value); - if (e.target.value.length === 0) { - resetRelatedFormValues(); - } - formMethods.trigger(); - setHydrotestKindIds(e.target.value); - }}> - {domains?.data - ?.filter( - d => - d.schema === - hydrogeologySchemaConstants.hydrotestKind, - ) - .sort((a, b) => a.order - b.order) - .map(d => ( - - {d[i18n.language]} - - ))} - - )} - /> - - - a.order - b.order) + .map(d => ( + + {d[i18n.language]} + + ))} + + )} + /> + + + + c.schema === + hydrogeologySchemaConstants.hydrotestFlowDirection, + ) + .map(c => c.id) || [] + } + render={({ field }) => ( + + d.schema === + hydrogeologySchemaConstants.hydrotestFlowDirection, + ).length > 0 + } + label={t("flowDirection")} + variant="outlined" + size="small" + value={field.value || ""} + data-cy="flow-direction-select" + InputLabelProps={{ shrink: true }} + SelectProps={{ + multiple: true, + renderValue: selection => ChipBox(selection, field), + }} + onChange={e => { + e.stopPropagation(); + field.onChange(e.target.value); + }}> + {filteredTestKindDomains?.data ?.filter( - c => - c.schema === + d => + d.schema === hydrogeologySchemaConstants.hydrotestFlowDirection, ) - .map(c => c.id) || [] - } - render={({ field }) => ( - - d.schema === - hydrogeologySchemaConstants.hydrotestFlowDirection, - ).length > 0 - } - label={t("flowDirection")} - variant="outlined" - size="small" - value={field.value || ""} - data-cy="flow-direction-select" - InputLabelProps={{ shrink: true }} - SelectProps={{ - multiple: true, - renderValue: selection => ChipBox(selection, field), - }} - onChange={e => { - e.stopPropagation(); - field.onChange(e.target.value); - }}> - {filteredTestKindDomains?.data - ?.filter( - d => - d.schema === - hydrogeologySchemaConstants.hydrotestFlowDirection, - ) - .map(d => ( - - {d[i18n.language]} - - ))} - - )} - /> - - - - - ( + + {d[i18n.language]} + + ))} + + )} + /> + + + + + + c.schema === + hydrogeologySchemaConstants.hydrotestEvaluationMethod, + ) + .map(c => c.id) || [] + } + render={({ field }) => ( + + d.schema === + hydrogeologySchemaConstants.hydrotestEvaluationMethod, + ).length > 0 + } + label={t("evaluationMethod")} + variant="outlined" + size="small" + value={field.value || ""} + data-cy="evaluation-method-select" + InputLabelProps={{ shrink: true }} + SelectProps={{ + multiple: true, + renderValue: selection => ChipBox(selection, field), + }} + onChange={e => { + e.stopPropagation(); + field.onChange(e.target.value); + }}> + {filteredTestKindDomains?.data ?.filter( - c => - c.schema === + d => + d.schema === hydrogeologySchemaConstants.hydrotestEvaluationMethod, ) - .map(c => c.id) || [] - } - render={({ field }) => ( - - d.schema === - hydrogeologySchemaConstants.hydrotestEvaluationMethod, - ).length > 0 - } - label={t("evaluationMethod")} - variant="outlined" - size="small" - value={field.value || ""} - data-cy="evaluation-method-select" - InputLabelProps={{ shrink: true }} - SelectProps={{ - multiple: true, - renderValue: selection => ChipBox(selection, field), - }} - onChange={e => { - e.stopPropagation(); - field.onChange(e.target.value); - }}> - {filteredTestKindDomains?.data - ?.filter( - d => - d.schema === - hydrogeologySchemaConstants.hydrotestEvaluationMethod, - ) - .map(d => ( - - {d[i18n.language]} - - ))} - - )} - /> - - - - - {t("hydrotestResult")} - - - - { - formMethods.formState.isValid && - setIsAddingHydrotestResult(true); - !formMethods.formState.isValid && - alertContext.error(t("hydrotestRequiredFieldsAlert")); - }} - /> - - - - - - - - closeFormIfCompleted()} + .map(d => ( + + {d[i18n.language]} + + ))} + + )} /> + + + + + {t("hydrotestResult")} + + + + { + formMethods.formState.isValid && + setIsAddingHydrotestResult(true); + !formMethods.formState.isValid && + alertContext.error(t("hydrotestRequiredFieldsAlert")); + }} + /> + - + + - -
-
+ + + closeFormIfCompleted()} + /> + + + + + ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/waterIngress.js b/src/client/src/commons/form/borehole/hydrogeology/waterIngress.js index bbd1ac4f7..3820a4027 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/waterIngress.js +++ b/src/client/src/commons/form/borehole/hydrogeology/waterIngress.js @@ -1,13 +1,17 @@ import React, { useState, useEffect, useMemo, createRef } from "react"; import { useTranslation } from "react-i18next"; +import { CircularProgress, Typography } from "@mui/material"; +import { AddButton } from "../../../../components/buttons/buttons"; import { - CircularProgress, - Grid, - Stack, - Tooltip, - Typography, -} from "@mui/material"; -import AddCircleIcon from "@mui/icons-material/AddCircle"; + DataCard, + DataCardItem, + DataCardContainer, + DataCardButtonContainer, +} from "../../../../components/dataCard/dataCard"; +import { + FullPage, + FullPageCentered, +} from "../../../../components/baseComponents"; import { useWaterIngressMutations, @@ -54,44 +58,34 @@ const WaterIngress = props => { }, [displayedWaterIngresses, waterIngressRefs]); return ( - - - - {t("water_ingress")} - - { - e.stopPropagation(); - if (selectedWaterIngress === null) { - const tempWaterIngress = { id: 0 }; - setDisplayedWaterIngresses([ - ...waterIngresses, - tempWaterIngress, - ]); - setSelectedWaterIngress(tempWaterIngress); - } - }} - /> - - - + + + {isEditable && ( + { + e.stopPropagation(); + if (selectedWaterIngress === null) { + const tempWaterIngress = { id: 0 }; + setDisplayedWaterIngresses([ + ...waterIngresses, + tempWaterIngress, + ]); + setSelectedWaterIngress(tempWaterIngress); + } + }}> + {t("addWaterIngress")} + + )} + {displayedWaterIngresses?.length === 0 && ( - + {t("msgWateringressesEmpty")} - + )} - + {displayedWaterIngresses?.length > 0 && displayedWaterIngresses ?.sort((a, b) => a.fromDepthM - b.fromDepthM) @@ -99,41 +93,37 @@ const WaterIngress = props => { const isSelected = selectedWaterIngress?.id === waterIngress.id; const isTempWateringress = waterIngress.id === 0; return ( - + {isSuccess ? ( - isEditable && isSelected ? ( - - ) : ( - !isTempWateringress && ( - + {isEditable && isSelected ? ( + - ) - ) + ) : ( + !isTempWateringress && ( + + ) + )} + ) : ( )} - + ); })} - - + + ); }; export default WaterIngress; diff --git a/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js index ae47bf485..882042ef2 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js @@ -1,5 +1,5 @@ import React from "react"; -import { Card, Stack, Tooltip, Typography } from "@mui/material"; +import { Stack, Tooltip, Typography } from "@mui/material"; import { StackFullWidth } from "./styledComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; @@ -18,15 +18,7 @@ const WaterIngressDisplay = props => { const { t } = useTranslation(); return ( - + <> @@ -77,8 +69,7 @@ const WaterIngressDisplay = props => { - - + ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js b/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js index f71e52167..dd3604e0e 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js @@ -1,6 +1,6 @@ import React, { useEffect, useContext } from "react"; import { useForm, FormProvider } from "react-hook-form"; -import { Box, Card, Stack, Tooltip } from "@mui/material"; +import { Box, Stack, Tooltip } from "@mui/material"; import { FormSelect } from "../../../../components/form/form"; import { useDomains } from "../../../../api/fetchApiV2"; import CheckIcon from "@mui/icons-material/Check"; @@ -73,75 +73,66 @@ const WaterIngressInput = props => { }; return ( - - -
- - - + + + + + + + d.schema === + hydrogeologySchemaConstants.waterIngressQuantity, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + d.schema === + hydrogeologySchemaConstants.waterIngressConditions, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} /> - - - d.schema === - hydrogeologySchemaConstants.waterIngressQuantity, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - d.schema === - hydrogeologySchemaConstants.waterIngressConditions, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - - - closeFormIfCompleted()} - /> - - - -
-
+ + + closeFormIfCompleted()} + /> + + + + + ); }; diff --git a/src/client/src/components/baseComponents.js b/src/client/src/components/baseComponents.js new file mode 100644 index 000000000..b13aac1da --- /dev/null +++ b/src/client/src/components/baseComponents.js @@ -0,0 +1,12 @@ +import { Stack } from "@mui/material"; +import { styled } from "@mui/system"; + +export const FullPage = styled(Stack)({ + flex: "1 0 0", +}); + +export const FullPageCentered = styled(Stack)({ + flex: "1 0 0", + justifyContent: "center", + alignItems: "center", +}); diff --git a/src/client/src/components/buttons/buttons.js b/src/client/src/components/buttons/buttons.js new file mode 100644 index 000000000..77ed8f313 --- /dev/null +++ b/src/client/src/components/buttons/buttons.js @@ -0,0 +1,35 @@ +import React, { forwardRef } from "react"; +import { useTranslation } from "react-i18next"; +import { Button, Tooltip } from "@mui/material"; +import { styled } from "@mui/system"; +import AddIcon from "@mui/icons-material/Add"; + +export const BaseButton = styled(Button)({ + fontFamily: "Lato", + textTransform: "none", + color: "rgba(0, 0, 0, 0.8)", + borderColor: "rgba(0, 0, 0, 0.8)", + marginBottom: "6px", + "&:hover, &.Mui-focusVisible, &:active, &:focus, &:focus-visible": { + borderColor: "rgba(0, 0, 0, 0.8)", + backgroundColor: "rgba(0, 0, 0, 0.05)", + }, + "& .MuiTouchRipple-root": { + display: "none", + }, +}); + +export const AddButton = forwardRef((props, ref) => { + const { t } = useTranslation(); + return ( + + }> + {props.children} + + + ); +}); diff --git a/src/client/src/components/dataCard/dataCard.js b/src/client/src/components/dataCard/dataCard.js new file mode 100644 index 000000000..fda13b14a --- /dev/null +++ b/src/client/src/components/dataCard/dataCard.js @@ -0,0 +1,67 @@ +import React, { forwardRef } from "react"; +import { Box, Card, Grid, Stack } from "@mui/material"; +import { styled } from "@mui/system"; + +export const DataCardContainer = forwardRef((props, ref) => { + const StyledTextField = styled(Grid)(() => ({ + flex: "1 0 0", + alignContent: "flex-start", + width: "100% !important", + borderWidth: "1px", + borderColor: "black", + padding: "0", + marginBottom: "10px", + marginTop: "10px !important", + marginLeft: "0 !important", + overflow: "auto", + })); + + return ( + + {props.children} + + ); +}); + +export const DataCardItem = forwardRef((props, ref) => { + const StyledCard = styled(Grid)(() => ({ + padding: "0 8px 8px 8px !important", + })); + + return ( + + {props.children} + + ); +}); + +export const DataCard = forwardRef((props, ref) => { + const StyledCard = styled(Card)(() => ({ + width: "100%", + border: "1px solid lightgrey", + borderRadius: "3px", + padding: "12px 12px 16px 12px", + marginBottom: "8px", + })); + + return ( + + {props.children} + + ); +}); + +export const DataCardButtonContainer = forwardRef((props, ref) => { + return ( + + + {props.children} + + + ); +}); From 152a7381e905d398ef04b90851ecc8b525178dff Mon Sep 17 00:00:00 2001 From: tschumpr Date: Fri, 2 Feb 2024 08:00:33 +0100 Subject: [PATCH 02/44] Fix imports --- .../src/commons/form/borehole/completion/styledComponents.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/client/src/commons/form/borehole/completion/styledComponents.js b/src/client/src/commons/form/borehole/completion/styledComponents.js index f82d4cd48..661fac821 100644 --- a/src/client/src/commons/form/borehole/completion/styledComponents.js +++ b/src/client/src/commons/form/borehole/completion/styledComponents.js @@ -1,8 +1,6 @@ import React, { forwardRef } from "react"; import { Box, - Button, - Card, IconButton, Stack, Tabs, @@ -11,7 +9,6 @@ import { TextField, } from "@mui/material"; import { styled } from "@mui/system"; -import AddIcon from "@mui/icons-material/Add"; export const TypographyWithBottomMargin = styled(Typography)(() => ({ marginBottom: "1em", From 735642d219375a41e113f4ec1df2aab231e41a1d Mon Sep 17 00:00:00 2001 From: tschumpr Date: Fri, 2 Feb 2024 08:38:34 +0100 Subject: [PATCH 03/44] Apply completion style to hydro --- .../completion/completionContentTab.js | 37 ++++++++----------- .../borehole/hydrogeology/fieldMeasurement.js | 30 ++++++++------- .../groundwaterLevelMeasurement.js | 30 ++++++++------- .../form/borehole/hydrogeology/hydrotest.js | 28 +++++++------- .../borehole/hydrogeology/waterIngress.js | 28 +++++++------- 5 files changed, 78 insertions(+), 75 deletions(-) diff --git a/src/client/src/commons/form/borehole/completion/completionContentTab.js b/src/client/src/commons/form/borehole/completion/completionContentTab.js index 566cacc24..369fbf2c5 100644 --- a/src/client/src/commons/form/borehole/completion/completionContentTab.js +++ b/src/client/src/commons/form/borehole/completion/completionContentTab.js @@ -104,27 +104,25 @@ export const CompletionContentTab = props => { {isEditable && ( - - { - e.stopPropagation(); - if (!selected) { - const temp = { id: 0 }; - setDisplayed([...state.data, temp]); - setSelected(temp); - } - }}> - {t(addLabel)} - - + { + e.stopPropagation(); + if (!selected) { + const temp = { id: 0 }; + setDisplayed([...state.data, temp]); + setSelected(temp); + } + }}> + {t(addLabel)} + )} {state.isLoadingData ? ( - + - + ) : displayed?.length > 0 ? ( {displayed @@ -133,10 +131,7 @@ export const CompletionContentTab = props => { const isSelected = selected?.id === item.id; const isTemp = item.id === 0; return ( - + {isEditable && isSelected ? renderInput({ diff --git a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js index 40a4c5eee..ae9562618 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js +++ b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js @@ -94,22 +94,15 @@ const FieldMeasurement = props => { )} - {displayedFieldMeasurements?.length === 0 && ( - - - {t("msgFieldMeasurementsEmpty")} - - - )} - - {displayedFieldMeasurements?.length > 0 && - displayedFieldMeasurements - ?.sort((a, b) => a.fromDepthM - b.fromDepthM) + {displayedFieldMeasurements?.length > 0 ? ( + + {displayedFieldMeasurements + .sort((a, b) => a.fromDepthM - b.fromDepthM) .map((gwlm, index) => { const isSelected = selectedFieldMeasurement?.id === gwlm.id; const isTempGwlm = gwlm.id === 0; return ( - + {isSuccess ? ( {isEditable && isSelected ? ( @@ -139,12 +132,21 @@ const FieldMeasurement = props => { )} ) : ( - + + + )} ); })} - + + ) : ( + + + {t("msgFieldMeasurementsEmpty")} + + + )} ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurement.js b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurement.js index 3e443f9e8..b242b869e 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurement.js +++ b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurement.js @@ -93,24 +93,17 @@ const GroundwaterLevelMeasurement = props => { )} - {displayedGroundwaterLevelMeasurements?.length === 0 && ( - - - {t("msgGroundwaterLevelMeasurementsEmpty")} - - - )} - - {displayedGroundwaterLevelMeasurements?.length > 0 && - displayedGroundwaterLevelMeasurements - ?.sort((a, b) => a.fromDepthM - b.fromDepthM) + {displayedGroundwaterLevelMeasurements?.length > 0 ? ( + + {displayedGroundwaterLevelMeasurements + .sort((a, b) => a.fromDepthM - b.fromDepthM) .map((gwlm, index) => { const isSelected = selectedGroundwaterLevelMeasurement?.id === gwlm.id; const isTempGwlm = gwlm.id === 0; return ( {isSuccess ? ( @@ -147,12 +140,21 @@ const GroundwaterLevelMeasurement = props => { )} ) : ( - + + + )} ); })} - + + ) : ( + + + {t("msgGroundwaterLevelMeasurementsEmpty")} + + + )} ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotest.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotest.js index 55e473d27..e4720e505 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotest.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotest.js @@ -87,17 +87,10 @@ const Hydrotest = ({ isEditable, boreholeId }) => { )} - {displayedHydrotests?.length === 0 && ( - - - {t("msgHydrotestEmpty")} - - - )} - - {displayedHydrotests?.length > 0 && - displayedHydrotests - ?.sort((a, b) => a.fromDepthM - b.fromDepthM) + {displayedHydrotests?.length > 0 ? ( + + {displayedHydrotests + .sort((a, b) => a.fromDepthM - b.fromDepthM) .map((hydrotest, index) => { const isSelected = selectedHydrotest?.id === hydrotest.id; const isTempHydrotest = hydrotest.id === 0; @@ -129,12 +122,21 @@ const Hydrotest = ({ isEditable, boreholeId }) => { )} ) : ( - + + + )} ); })} - + + ) : ( + + + {t("msgHydrotestEmpty")} + + + )} ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/waterIngress.js b/src/client/src/commons/form/borehole/hydrogeology/waterIngress.js index 3820a4027..00e1116b0 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/waterIngress.js +++ b/src/client/src/commons/form/borehole/hydrogeology/waterIngress.js @@ -78,17 +78,10 @@ const WaterIngress = props => { )} - {displayedWaterIngresses?.length === 0 && ( - - - {t("msgWateringressesEmpty")} - - - )} - - {displayedWaterIngresses?.length > 0 && - displayedWaterIngresses - ?.sort((a, b) => a.fromDepthM - b.fromDepthM) + {displayedWaterIngresses?.length > 0 ? ( + + {displayedWaterIngresses + .sort((a, b) => a.fromDepthM - b.fromDepthM) .map((waterIngress, index) => { const isSelected = selectedWaterIngress?.id === waterIngress.id; const isTempWateringress = waterIngress.id === 0; @@ -117,12 +110,21 @@ const WaterIngress = props => { )} ) : ( - + + + )} ); })} - + + ) : ( + + + {t("msgWateringressesEmpty")} + + + )} ); }; From 6e6b973f3d0ea9ea7273616844cb69c63b8ec0d4 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Fri, 2 Feb 2024 08:55:27 +0100 Subject: [PATCH 04/44] Condition is required --- .../src/commons/form/borehole/hydrogeology/waterIngressInput.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js b/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js index dd3604e0e..0e957e783 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js @@ -103,6 +103,7 @@ const WaterIngressInput = props => { fieldName="conditionsId" label="conditions" selected={waterIngress.conditionsId} + required={true} values={domains?.data ?.filter( d => From 524d8525f0cde6b63560e9a22141e3bb80da42c7 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Fri, 2 Feb 2024 08:55:39 +0100 Subject: [PATCH 05/44] Clean up code --- .../commons/form/borehole/completion/completionContentTab.js | 2 +- .../src/commons/form/borehole/hydrogeology/fieldMeasurement.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/client/src/commons/form/borehole/completion/completionContentTab.js b/src/client/src/commons/form/borehole/completion/completionContentTab.js index 369fbf2c5..d06669747 100644 --- a/src/client/src/commons/form/borehole/completion/completionContentTab.js +++ b/src/client/src/commons/form/borehole/completion/completionContentTab.js @@ -1,6 +1,6 @@ import React, { useState, useEffect, useMemo, createRef, useRef } from "react"; import { useTranslation } from "react-i18next"; -import { CircularProgress, Stack, Tooltip, Typography } from "@mui/material"; +import { CircularProgress, Typography } from "@mui/material"; import { DataCard, DataCardItem, diff --git a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js index ae9562618..da84c0b88 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js +++ b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js @@ -102,7 +102,7 @@ const FieldMeasurement = props => { const isSelected = selectedFieldMeasurement?.id === gwlm.id; const isTempGwlm = gwlm.id === 0; return ( - + {isSuccess ? ( {isEditable && isSelected ? ( From ef8e8f4bd37d5ad5ae6eabef340fb5a0d9c6968c Mon Sep 17 00:00:00 2001 From: tschumpr Date: Fri, 2 Feb 2024 10:00:53 +0100 Subject: [PATCH 06/44] Use completionContentTab for Hydro --- .../cypress/e2e/editor/fieldMeasurement.cy.js | 2 +- .../editor/groundwaterLevelMeasurement.cy.js | 2 +- .../cypress/e2e/editor/waterIngress.cy.js | 2 +- src/client/src/api/fetchApiV2.js | 219 ++++-------------- .../form/borehole/completion/backfill.js | 6 +- .../form/borehole/completion/backfillInput.js | 4 +- .../form/borehole/completion/casing.js | 6 +- .../form/borehole/completion/casingInput.js | 10 +- .../borehole/completion/instrumentation.js | 6 +- .../completion/instrumentationInput.js | 10 +- .../borehole/hydrogeology/fieldMeasurement.js | 163 ++----------- .../hydrogeology/fieldMeasurementDisplay.js | 40 ++-- .../hydrogeology/fieldMeasurementInput.js | 49 ++-- .../groundwaterLevelMeasurement.js | 171 ++------------ .../groundwaterLevelMeasurementDisplay.js | 38 +-- .../groundwaterLevelMeasurementInput.js | 39 ++-- .../borehole/hydrogeology/waterIngress.js | 141 ++--------- .../hydrogeology/waterIngressDisplay.js | 22 +- .../hydrogeology/waterIngressInput.js | 35 ++- .../dataCard/dataCards.js} | 23 +- 20 files changed, 222 insertions(+), 766 deletions(-) rename src/client/src/{commons/form/borehole/completion/completionContentTab.js => components/dataCard/dataCards.js} (90%) diff --git a/src/client/cypress/e2e/editor/fieldMeasurement.cy.js b/src/client/cypress/e2e/editor/fieldMeasurement.cy.js index 208b14223..ec6c83c97 100644 --- a/src/client/cypress/e2e/editor/fieldMeasurement.cy.js +++ b/src/client/cypress/e2e/editor/fieldMeasurement.cy.js @@ -36,7 +36,7 @@ describe("Tests for the field measurement editor.", () => { cy.contains("span", "DE").click({ force: true }); // create field measurement - cy.get('[data-cy="add-fieldmeasurement-button"]').click({ + cy.get('[data-cy="addFieldmeasurement-button"]').click({ force: true, }); cy.wait("@fieldmeasurement_GET"); diff --git a/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js b/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js index d6b61ce5f..a5603d15d 100644 --- a/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js +++ b/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js @@ -36,7 +36,7 @@ describe("Tests for the groundwater level measurement editor.", () => { cy.contains("span", "DE").click({ force: true }); // create groundwater level measurement - cy.get('[data-cy="add-groundwaterlevelmeasurement-button"]').click({ + cy.get('[data-cy="addGroundwaterLevelMeasurement-button"]').click({ force: true, }); cy.wait("@groundwaterlevelmeasurement_GET"); diff --git a/src/client/cypress/e2e/editor/waterIngress.cy.js b/src/client/cypress/e2e/editor/waterIngress.cy.js index 4add7bdeb..31ca8c576 100644 --- a/src/client/cypress/e2e/editor/waterIngress.cy.js +++ b/src/client/cypress/e2e/editor/waterIngress.cy.js @@ -77,7 +77,7 @@ describe("Tests for the wateringress editor.", () => { cy.contains("span", "DE").click({ force: true }); // create wateringress - cy.get('[data-cy="add-wateringress-button"]').click({ force: true }); + cy.get('[data-cy="addWaterIngress-button"]').click({ force: true }); cy.wait("@casing_GET"); setSelect("quantityId", 2); diff --git a/src/client/src/api/fetchApiV2.js b/src/client/src/api/fetchApiV2.js index 033c9b5cd..10f77b0d8 100644 --- a/src/client/src/api/fetchApiV2.js +++ b/src/client/src/api/fetchApiV2.js @@ -394,192 +394,65 @@ export const useLithostratigraphyMutations = () => { }; }; -export const waterIngressQueryKey = "wateringresses"; - -export const useWaterIngresses = boreholeId => - useQuery({ - queryKey: [waterIngressQueryKey, boreholeId], - queryFn: async () => { - return await fetchApiV2(`wateringress?boreholeId=${boreholeId}`, "GET"); - }, - }); +export const getWaterIngress = async boreholeId => { + return await fetchApiV2(`wateringress?boreholeId=${boreholeId}`, "GET"); +}; -export const useWaterIngressMutations = () => { - const queryClient = useQueryClient(); - const useAddWaterIngress = useMutation( - async waterIngress => { - return await fetchApiV2("wateringress", "POST", waterIngress); - }, - { - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [waterIngressQueryKey], - }); - }, - }, - ); - const useUpdateWaterIngress = useMutation( - async waterIngress => { - return await fetchApiV2("wateringress", "PUT", waterIngress); - }, - { - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [waterIngressQueryKey], - }); - }, - }, - ); - const useDeleteWaterIngress = useMutation( - async waterIngressId => { - return await fetchApiV2(`wateringress?id=${waterIngressId}`, "DELETE"); - }, - { - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [waterIngressQueryKey], - }); - }, - }, - ); - return { - add: useAddWaterIngress, - update: useUpdateWaterIngress, - delete: useDeleteWaterIngress, - }; +export const addWaterIngress = async wateringress => { + return await fetchApiV2("wateringress", "POST", wateringress); }; -export const groundwaterLevelMeasurementsQueryKey = - "groundwaterLevelMeasurements"; +export const updateWaterIngress = async wateringress => { + return await fetchApiV2("wateringress", "PUT", wateringress); +}; -export const useGroundwaterLevelMeasurements = boreholeId => - useQuery({ - queryKey: [groundwaterLevelMeasurementsQueryKey, boreholeId], - queryFn: async () => { - return await fetchApiV2( - `groundwaterlevelmeasurement?boreholeId=${boreholeId}`, - "GET", - ); - }, - }); +export const deleteWaterIngress = async id => { + return await fetchApiV2(`wateringress?id=${id}`, "DELETE"); +}; -export const useGroundwaterLevelMeasurementMutations = () => { - const queryClient = useQueryClient(); - const useAddGroundwaterLevelMeasurement = useMutation( - async groundwaterLevelMeasurement => { - return await fetchApiV2( - "groundwaterlevelmeasurement", - "POST", - groundwaterLevelMeasurement, - ); - }, - { - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [groundwaterLevelMeasurementsQueryKey], - }); - }, - }, - ); - const useUpdateGroundwaterLevelMeasurement = useMutation( - async groundwaterLevelMeasurement => { - return await fetchApiV2( - "groundwaterlevelmeasurement", - "PUT", - groundwaterLevelMeasurement, - ); - }, - { - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [groundwaterLevelMeasurementsQueryKey], - }); - }, - }, - ); - const useDeleteGroundwaterLevelMeasurement = useMutation( - async groundwaterLevelMeasurementId => { - return await fetchApiV2( - `groundwaterlevelmeasurement?id=${groundwaterLevelMeasurementId}`, - "DELETE", - ); - }, - { - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [groundwaterLevelMeasurementsQueryKey], - }); - }, - }, +export const getGroundwaterLevelMeasurements = async boreholeId => { + return await fetchApiV2( + `groundwaterlevelmeasurement?boreholeId=${boreholeId}`, + "GET", ); +}; - return { - add: useAddGroundwaterLevelMeasurement, - update: useUpdateGroundwaterLevelMeasurement, - delete: useDeleteGroundwaterLevelMeasurement, +export const addGroundwaterLevelMeasurement = + async groundwaterLevelMeasurement => { + return await fetchApiV2( + "groundwaterlevelmeasurement", + "POST", + groundwaterLevelMeasurement, + ); + }; + +export const updateGroundwaterLevelMeasurement = + async groundwaterLevelMeasurement => { + return await fetchApiV2( + "groundwaterlevelmeasurement", + "PUT", + groundwaterLevelMeasurement, + ); }; + +export const deleteGroundwaterLevelMeasurement = async id => { + return await fetchApiV2(`groundwaterlevelmeasurement?id=${id}`, "DELETE"); }; -export const fieldMeasurementsQueryKey = "fieldMeasurements"; +export const getFieldMeasurements = async boreholeId => { + return await fetchApiV2(`fieldmeasurement?boreholeId=${boreholeId}`, "GET"); +}; -export const useFieldMeasurements = boreholeId => - useQuery({ - queryKey: [fieldMeasurementsQueryKey, boreholeId], - queryFn: async () => { - return await fetchApiV2( - `fieldmeasurement?boreholeId=${boreholeId}`, - "GET", - ); - }, - }); +export const addFieldMeasurement = async fieldmeasurement => { + return await fetchApiV2("fieldmeasurement", "POST", fieldmeasurement); +}; -export const useFieldMeasurementMutations = () => { - const queryClient = useQueryClient(); - const useAddFieldMeasurement = useMutation( - async fieldMeasurement => { - return await fetchApiV2("fieldmeasurement", "POST", fieldMeasurement); - }, - { - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [fieldMeasurementsQueryKey], - }); - }, - }, - ); - const useUpdateFieldMeasurement = useMutation( - async fieldMeasurement => { - return await fetchApiV2("fieldmeasurement", "PUT", fieldMeasurement); - }, - { - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [fieldMeasurementsQueryKey], - }); - }, - }, - ); - const useDeleteFieldMeasurement = useMutation( - async fieldMeasurementId => { - return await fetchApiV2( - `fieldmeasurement?id=${fieldMeasurementId}`, - "DELETE", - ); - }, - { - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [fieldMeasurementsQueryKey], - }); - }, - }, - ); +export const updateFieldMeasurement = async fieldmeasurement => { + return await fetchApiV2("fieldmeasurement", "PUT", fieldmeasurement); +}; - return { - add: useAddFieldMeasurement, - update: useUpdateFieldMeasurement, - delete: useDeleteFieldMeasurement, - }; +export const deleteFieldMeasurement = async id => { + return await fetchApiV2(`fieldmeasurement?id=${id}`, "DELETE"); }; // Upload borehole attachment diff --git a/src/client/src/commons/form/borehole/completion/backfill.js b/src/client/src/commons/form/borehole/completion/backfill.js index beadfc6d5..1d97b6736 100644 --- a/src/client/src/commons/form/borehole/completion/backfill.js +++ b/src/client/src/commons/form/borehole/completion/backfill.js @@ -5,15 +5,15 @@ import { updateBackfill, deleteBackfill, } from "../../../../api/fetchApiV2"; -import { CompletionContentTab } from "./completionContentTab"; +import { DataCards } from "../../../../components/dataCard/dataCards"; import BackfillInput from "./backfillInput"; import BackfillDisplay from "./backfillDisplay"; const Backfill = ({ isEditable, completionId }) => { return ( - { @@ -32,7 +32,7 @@ const BackfillInput = ({ }; const prepareFormDataForSubmit = data => { - data.completionId = completionId; + data.completionId = parentId; return data; }; diff --git a/src/client/src/commons/form/borehole/completion/casing.js b/src/client/src/commons/form/borehole/completion/casing.js index a8e35b3a5..76d14b6ea 100644 --- a/src/client/src/commons/form/borehole/completion/casing.js +++ b/src/client/src/commons/form/borehole/completion/casing.js @@ -5,15 +5,15 @@ import { updateCasing, deleteCasing, } from "../../../../api/fetchApiV2"; -import { CompletionContentTab } from "./completionContentTab"; +import { DataCards } from "../../../../components/dataCard/dataCards"; import CasingInput from "./casingInput"; import CasingDisplay from "./casingDisplay"; const Casing = ({ isEditable, completionId }) => { return ( - { +const CasingInput = ({ item, setSelected, parentId, addData, updateData }) => { const domains = useDomains(); const { t, i18n } = useTranslation(); const formMethods = useForm({ mode: "all" }); @@ -38,7 +32,7 @@ const CasingInput = ({ if (data?.dateFinish === "") { data.dateFinish = null; } - data.completionId = completionId; + data.completionId = parentId; return data; }; diff --git a/src/client/src/commons/form/borehole/completion/instrumentation.js b/src/client/src/commons/form/borehole/completion/instrumentation.js index 8b65fca9e..70b8be993 100644 --- a/src/client/src/commons/form/borehole/completion/instrumentation.js +++ b/src/client/src/commons/form/borehole/completion/instrumentation.js @@ -5,15 +5,15 @@ import { updateInstrumentation, deleteInstrumentation, } from "../../../../api/fetchApiV2"; -import { CompletionContentTab } from "./completionContentTab"; +import { DataCards } from "../../../../components/dataCard/dataCards"; import InstrumentationInput from "./instrumentationInput"; import InstrumentationDisplay from "./instrumentationDisplay"; const Instrumentation = ({ isEditable, completionId }) => { return ( - { @@ -37,7 +37,7 @@ const InstrumentationInput = ({ if (data.casingId === "") { data.casingId = null; } - data.completionId = completionId; + data.completionId = parentId; return data; }; @@ -56,12 +56,12 @@ const InstrumentationInput = ({ }; useEffect(() => { - if (completionId) { - getCasings(completionId).then(casings => { + if (parentId) { + getCasings(parentId).then(casings => { setCasings(casings); }); } - }, [completionId]); + }, [parentId]); return ( diff --git a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js index da84c0b88..1611e6bbc 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js +++ b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurement.js @@ -1,153 +1,28 @@ -import React, { useState, useEffect, useMemo, createRef } from "react"; -import { useTranslation } from "react-i18next"; -import { CircularProgress, Typography } from "@mui/material"; -import { AddButton } from "../../../../components/buttons/buttons"; +import React from "react"; import { - DataCard, - DataCardItem, - DataCardContainer, - DataCardButtonContainer, -} from "../../../../components/dataCard/dataCard"; -import { - FullPage, - FullPageCentered, -} from "../../../../components/baseComponents"; - -import { - useFieldMeasurementMutations, - useFieldMeasurements, - useDomains, + getFieldMeasurements, + addFieldMeasurement, + updateFieldMeasurement, + deleteFieldMeasurement, } from "../../../../api/fetchApiV2"; import FieldMeasurementInput from "./fieldMeasurementInput"; import FieldMeasurementDisplay from "./fieldMeasurementDisplay"; -import { FieldMeasurementParameterUnits } from "./parameterUnits"; - -const FieldMeasurement = props => { - const { isEditable, boreholeId } = props; - const { data: fieldMeasurements, isSuccess } = - useFieldMeasurements(boreholeId); - const { data: domains } = useDomains(); - const { t } = useTranslation(); - const { - add: { mutate: addFieldMeasurement }, - update: { mutate: updateFieldMeasurement }, - delete: { mutate: deleteFieldMeasurement }, - } = useFieldMeasurementMutations(); - const [selectedFieldMeasurement, setSelectedFieldMeasurement] = - useState(null); - const [displayedFieldMeasurements, setDisplayedFieldMeasurements] = useState( - [], - ); - - useEffect(() => { - setDisplayedFieldMeasurements(fieldMeasurements); - }, [fieldMeasurements]); - - // scroll to newly added item - const fieldMeasurementRefs = useMemo( - () => - Array(displayedFieldMeasurements?.length) - .fill(null) - .map(() => createRef(null)), - [displayedFieldMeasurements], - ); - - useEffect(() => { - if (displayedFieldMeasurements?.length > 0) { - const lastFieldMeasurementRef = - fieldMeasurementRefs[displayedFieldMeasurements?.length - 1]; - if ( - displayedFieldMeasurements[displayedFieldMeasurements?.length - 1] - .id === 0 - ) - lastFieldMeasurementRef.current.scrollIntoView({ - behavior: "smooth", - block: "center", - }); - } - }, [displayedFieldMeasurements, fieldMeasurementRefs]); - - const getParameterUnit = parameterId => { - return FieldMeasurementParameterUnits[ - domains?.find(d => d.id === parameterId)?.geolcode - ]; - }; +import { DataCards } from "../../../../components/dataCard/dataCards"; +const FieldMeasurement = ({ isEditable, boreholeId }) => { return ( - - - {isEditable && ( - { - e.stopPropagation(); - if (selectedFieldMeasurement === null) { - const tempFieldMeasurement = { id: 0 }; - setDisplayedFieldMeasurements([ - ...fieldMeasurements, - tempFieldMeasurement, - ]); - setSelectedFieldMeasurement(tempFieldMeasurement); - } - }}> - {t("addFieldmeasurement")} - - )} - - {displayedFieldMeasurements?.length > 0 ? ( - - {displayedFieldMeasurements - .sort((a, b) => a.fromDepthM - b.fromDepthM) - .map((gwlm, index) => { - const isSelected = selectedFieldMeasurement?.id === gwlm.id; - const isTempGwlm = gwlm.id === 0; - return ( - - {isSuccess ? ( - - {isEditable && isSelected ? ( - - ) : ( - !isTempGwlm && ( - - ) - )} - - ) : ( - - - - )} - - ); - })} - - ) : ( - - - {t("msgFieldMeasurementsEmpty")} - - - )} - + } + renderDisplay={props => } + /> ); }; export default FieldMeasurement; diff --git a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js index 28fa448bf..0507bac3e 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js @@ -6,17 +6,19 @@ import ModeEditIcon from "@mui/icons-material/ModeEdit"; import DeleteIcon from "@mui/icons-material/Delete"; import { useTranslation } from "react-i18next"; import ObservationDisplay from "./observationDisplay"; +import { FieldMeasurementParameterUnits } from "./parameterUnits"; +import { useDomains } from "../../../../api/fetchApiV2"; const FieldMeasurementDisplay = props => { - const { - fieldMeasurement, - selectedFieldMeasurement, - setSelectedFieldMeasurement, - isEditable, - deleteFieldMeasurement, - getParameterUnit, - } = props; + const { item, selected, setSelected, isEditable, deleteData } = props; const { t } = useTranslation(); + const domains = useDomains(); + + const getParameterUnit = parameterId => { + return FieldMeasurementParameterUnits[ + domains.data?.find(d => d.id === parameterId)?.geolcode + ]; + }; return ( <> @@ -25,16 +27,16 @@ const FieldMeasurementDisplay = props => { {t("field_measurement")} - + @@ -42,10 +44,10 @@ const FieldMeasurementDisplay = props => { - {fieldMeasurement?.value + " "} - {getParameterUnit(fieldMeasurement.parameterId)} + {item?.value + " "} + {getParameterUnit(item.parameterId)} ) } @@ -60,12 +62,11 @@ const FieldMeasurementDisplay = props => { }}> { e.stopPropagation(); - !selectedFieldMeasurement && - setSelectedFieldMeasurement(fieldMeasurement); + !selected && setSelected(item); }} /> @@ -73,13 +74,12 @@ const FieldMeasurementDisplay = props => { { e.stopPropagation(); - !selectedFieldMeasurement && - deleteFieldMeasurement(fieldMeasurement.id); + !selected && deleteData(item.id); }} /> diff --git a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js index 4f64e43fe..1c8cba184 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js @@ -9,16 +9,10 @@ import { AlertContext } from "../../../../components/alert/alertContext"; import ObservationInput from "./observationInput"; import { ObservationType } from "./observationType"; import { hydrogeologySchemaConstants } from "./hydrogeologySchemaConstants"; +import { FieldMeasurementParameterUnits } from "./parameterUnits"; const FieldMeasurementInput = props => { - const { - fieldMeasurement, - setSelectedFieldMeasurement, - boreholeId, - addFieldMeasurement, - updateFieldMeasurement, - getParameterUnit, - } = props; + const { item, setSelected, parentId, addData, updateData } = props; const domains = useDomains(); const { t, i18n } = useTranslation(); const formMethods = useForm(); @@ -49,24 +43,24 @@ const FieldMeasurementInput = props => { data.value && data.reliabilityId ) { - if (fieldMeasurement.id === 0) { - addFieldMeasurement({ + if (item.id === 0) { + addData({ ...data, type: ObservationType.fieldMeasurement, - boreholeId: boreholeId, + boreholeId: parentId, }); } else { - delete fieldMeasurement.casing; - delete fieldMeasurement.sampeType; - delete fieldMeasurement.parameter; - delete fieldMeasurement.reliability; - updateFieldMeasurement({ - ...fieldMeasurement, + delete item.casing; + delete item.sampeType; + delete item.parameter; + delete item.reliability; + updateData({ + ...item, ...data, }); } } else { - setSelectedFieldMeasurement(null); + setSelected(null); } }; @@ -81,10 +75,16 @@ const FieldMeasurementInput = props => { ) { alertContext.error(t("fieldMeasurementRequiredFieldsAlert")); } else { - setSelectedFieldMeasurement(null); + setSelected(null); } }; + const getParameterUnit = parameterId => { + return FieldMeasurementParameterUnits[ + domains.data?.find(d => d.id === parameterId)?.geolcode + ]; + }; + const currentParameterId = formMethods.getValues("parameterId"); return ( @@ -92,15 +92,12 @@ const FieldMeasurementInput = props => {
- + { { { - const { isEditable, boreholeId } = props; - const { data: groundwaterLevelMeasurements, isSuccess } = - useGroundwaterLevelMeasurements(boreholeId); - const { t } = useTranslation(); - const { - add: { mutate: addGroundwaterLevelMeasurement }, - update: { mutate: updateGroundwaterLevelMeasurement }, - delete: { mutate: deleteGroundwaterLevelMeasurement }, - } = useGroundwaterLevelMeasurementMutations(); - const [ - selectedGroundwaterLevelMeasurement, - setSelectedGroundwaterLevelMeasurement, - ] = useState(null); - const [ - displayedGroundwaterLevelMeasurements, - setDisplayedGroundwaterLevelMeasurements, - ] = useState([]); - - useEffect(() => { - setDisplayedGroundwaterLevelMeasurements(groundwaterLevelMeasurements); - }, [groundwaterLevelMeasurements]); - - // scroll to newly added item - const groundwaterLevelMeasurementRefs = useMemo( - () => - Array(displayedGroundwaterLevelMeasurements?.length) - .fill(null) - .map(() => createRef(null)), - [displayedGroundwaterLevelMeasurements], - ); - - useEffect(() => { - if (displayedGroundwaterLevelMeasurements?.length > 0) { - const lastGroundwaterLevelMeasurementRef = - groundwaterLevelMeasurementRefs[ - displayedGroundwaterLevelMeasurements?.length - 1 - ]; - if ( - displayedGroundwaterLevelMeasurements[ - displayedGroundwaterLevelMeasurements?.length - 1 - ].id === 0 - ) - lastGroundwaterLevelMeasurementRef.current.scrollIntoView({ - behavior: "smooth", - block: "center", - }); - } - }, [displayedGroundwaterLevelMeasurements, groundwaterLevelMeasurementRefs]); - +const GroundwaterLevelMeasurement = ({ isEditable, boreholeId }) => { return ( - - - {isEditable && ( - { - e.stopPropagation(); - if (selectedGroundwaterLevelMeasurement === null) { - const tempGroundwaterLevelMeasurement = { id: 0 }; - setDisplayedGroundwaterLevelMeasurements([ - ...groundwaterLevelMeasurements, - tempGroundwaterLevelMeasurement, - ]); - setSelectedGroundwaterLevelMeasurement( - tempGroundwaterLevelMeasurement, - ); - } - }}> - {t("addGroundwaterLevelMeasurement")} - - )} - - {displayedGroundwaterLevelMeasurements?.length > 0 ? ( - - {displayedGroundwaterLevelMeasurements - .sort((a, b) => a.fromDepthM - b.fromDepthM) - .map((gwlm, index) => { - const isSelected = - selectedGroundwaterLevelMeasurement?.id === gwlm.id; - const isTempGwlm = gwlm.id === 0; - return ( - - {isSuccess ? ( - - {isEditable && isSelected ? ( - - ) : ( - !isTempGwlm && ( - - ) - )} - - ) : ( - - - - )} - - ); - })} - - ) : ( - - - {t("msgGroundwaterLevelMeasurementsEmpty")} - - - )} - + } + renderDisplay={props => } + /> ); }; export default GroundwaterLevelMeasurement; diff --git a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js index 3c7e6e17e..b8428cfe5 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js @@ -8,13 +8,7 @@ import { useTranslation } from "react-i18next"; import ObservationDisplay from "./observationDisplay"; const GroundwaterLevelMeasurementDisplay = props => { - const { - groundwaterLevelMeasurement, - selectedGroundwaterLevelMeasurement, - setSelectedGroundwaterLevelMeasurement, - isEditable, - deleteGroundwaterLevelMeasurement, - } = props; + const { item, selected, setSelected, isEditable, deleteData } = props; const { t } = useTranslation(); return ( @@ -24,23 +18,17 @@ const GroundwaterLevelMeasurementDisplay = props => { {t("groundwater_level_measurement")} - + - - + + { }}> { e.stopPropagation(); - !selectedGroundwaterLevelMeasurement && - setSelectedGroundwaterLevelMeasurement( - groundwaterLevelMeasurement, - ); + !selected && setSelected(item); }} /> @@ -66,17 +51,12 @@ const GroundwaterLevelMeasurementDisplay = props => { { e.stopPropagation(); - !selectedGroundwaterLevelMeasurement && - deleteGroundwaterLevelMeasurement( - groundwaterLevelMeasurement.id, - ); + !selected && deleteData(item.id); }} /> diff --git a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js index 22a500f79..cbcae4295 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js @@ -11,13 +11,7 @@ import { ObservationType } from "./observationType"; import { hydrogeologySchemaConstants } from "./hydrogeologySchemaConstants"; const GroundwaterLevelMeasurementInput = props => { - const { - groundwaterLevelMeasurement, - setSelectedGroundwaterLevelMeasurement, - boreholeId, - addGroundwaterLevelMeasurement, - updateGroundwaterLevelMeasurement, - } = props; + const { item, setSelected, parentId, addData, updateData } = props; const domains = useDomains(); const { t, i18n } = useTranslation(); const formMethods = useForm(); @@ -42,23 +36,23 @@ const GroundwaterLevelMeasurementInput = props => { data?.startTime ? (data.startTime += ":00.000Z") : (data.startTime = null); data?.endTime ? (data.endTime += ":00.000Z") : (data.endTime = null); if (data.startTime && data.kindId && data.reliabilityId) { - if (groundwaterLevelMeasurement.id === 0) { - addGroundwaterLevelMeasurement({ + if (item.id === 0) { + addData({ ...data, type: ObservationType.groundwaterLevelMeasurement, - boreholeId: boreholeId, + boreholeId: parentId, }); } else { - delete groundwaterLevelMeasurement.casing; - delete groundwaterLevelMeasurement.kind; - delete groundwaterLevelMeasurement.reliability; - updateGroundwaterLevelMeasurement({ - ...groundwaterLevelMeasurement, + delete item.casing; + delete item.kind; + delete item.reliability; + updateData({ + ...item, ...data, }); } } else { - setSelectedGroundwaterLevelMeasurement(null); + setSelected(null); } }; @@ -71,7 +65,7 @@ const GroundwaterLevelMeasurementInput = props => { ) { alertContext.error(t("gwlmRequiredFieldsAlert")); } else { - setSelectedGroundwaterLevelMeasurement(null); + setSelected(null); } }; @@ -80,15 +74,12 @@ const GroundwaterLevelMeasurementInput = props => { - + { diff --git a/src/client/src/commons/form/borehole/hydrogeology/waterIngress.js b/src/client/src/commons/form/borehole/hydrogeology/waterIngress.js index 00e1116b0..5a8dffd72 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/waterIngress.js +++ b/src/client/src/commons/form/borehole/hydrogeology/waterIngress.js @@ -1,131 +1,28 @@ -import React, { useState, useEffect, useMemo, createRef } from "react"; -import { useTranslation } from "react-i18next"; -import { CircularProgress, Typography } from "@mui/material"; -import { AddButton } from "../../../../components/buttons/buttons"; +import React from "react"; import { - DataCard, - DataCardItem, - DataCardContainer, - DataCardButtonContainer, -} from "../../../../components/dataCard/dataCard"; -import { - FullPage, - FullPageCentered, -} from "../../../../components/baseComponents"; - -import { - useWaterIngressMutations, - useWaterIngresses, + getWaterIngress, + addWaterIngress, + updateWaterIngress, + deleteWaterIngress, } from "../../../../api/fetchApiV2"; import WaterIngressInput from "./waterIngressInput"; import WaterIngressDisplay from "./waterIngressDisplay"; +import { DataCards } from "../../../../components/dataCard/dataCards"; -const WaterIngress = props => { - const { isEditable, boreholeId } = props; - const { data: waterIngresses, isSuccess } = useWaterIngresses(boreholeId); - const { t } = useTranslation(); - const { - add: { mutate: addWaterIngress }, - update: { mutate: updateWaterIngress }, - delete: { mutate: deleteWaterIngress }, - } = useWaterIngressMutations(); - const [selectedWaterIngress, setSelectedWaterIngress] = useState(null); - const [displayedWaterIngresses, setDisplayedWaterIngresses] = useState([]); - - useEffect(() => { - setDisplayedWaterIngresses(waterIngresses); - }, [waterIngresses]); - - // scroll to newly added item - const waterIngressRefs = useMemo( - () => - Array(displayedWaterIngresses?.length) - .fill(null) - .map(() => createRef(null)), - [displayedWaterIngresses], - ); - - useEffect(() => { - if (displayedWaterIngresses?.length > 0) { - const lastWaterIngressRef = - waterIngressRefs[displayedWaterIngresses?.length - 1]; - if (displayedWaterIngresses[displayedWaterIngresses?.length - 1].id === 0) - lastWaterIngressRef.current.scrollIntoView({ - behavior: "smooth", - block: "center", - }); - } - }, [displayedWaterIngresses, waterIngressRefs]); - +const WaterIngress = ({ isEditable, boreholeId }) => { return ( - - - {isEditable && ( - { - e.stopPropagation(); - if (selectedWaterIngress === null) { - const tempWaterIngress = { id: 0 }; - setDisplayedWaterIngresses([ - ...waterIngresses, - tempWaterIngress, - ]); - setSelectedWaterIngress(tempWaterIngress); - } - }}> - {t("addWaterIngress")} - - )} - - {displayedWaterIngresses?.length > 0 ? ( - - {displayedWaterIngresses - .sort((a, b) => a.fromDepthM - b.fromDepthM) - .map((waterIngress, index) => { - const isSelected = selectedWaterIngress?.id === waterIngress.id; - const isTempWateringress = waterIngress.id === 0; - return ( - - {isSuccess ? ( - - {isEditable && isSelected ? ( - - ) : ( - !isTempWateringress && ( - - ) - )} - - ) : ( - - - - )} - - ); - })} - - ) : ( - - - {t("msgWateringressesEmpty")} - - - )} - + } + renderDisplay={props => } + /> ); }; export default WaterIngress; diff --git a/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js index 882042ef2..fba19f9cc 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js @@ -8,13 +8,7 @@ import { useTranslation } from "react-i18next"; import ObservationDisplay from "./observationDisplay"; const WaterIngressDisplay = props => { - const { - waterIngress, - selectedWaterIngress, - setSelectedWaterIngress, - isEditable, - deleteWaterIngress, - } = props; + const { item, selected, setSelected, isEditable, deleteData } = props; const { t } = useTranslation(); return ( @@ -24,16 +18,16 @@ const WaterIngressDisplay = props => { {t("water_ingress")} - + @@ -46,11 +40,11 @@ const WaterIngressDisplay = props => { }}> { e.stopPropagation(); - !selectedWaterIngress && setSelectedWaterIngress(waterIngress); + !selected && setSelected(item); }} /> @@ -58,12 +52,12 @@ const WaterIngressDisplay = props => { { e.stopPropagation(); - !selectedWaterIngress && deleteWaterIngress(waterIngress.id); + !selected && deleteData(item.id); }} /> diff --git a/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js b/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js index 0e957e783..86ac157b0 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js @@ -11,13 +11,7 @@ import { ObservationType } from "./observationType"; import { hydrogeologySchemaConstants } from "./hydrogeologySchemaConstants"; const WaterIngressInput = props => { - const { - waterIngress, - setSelectedWaterIngress, - boreholeId, - addWaterIngress, - updateWaterIngress, - } = props; + const { item, setSelected, parentId, addData, updateData } = props; const domains = useDomains(); const { t, i18n } = useTranslation(); const formMethods = useForm(); @@ -42,20 +36,20 @@ const WaterIngressInput = props => { data?.startTime ? (data.startTime += ":00.000Z") : (data.startTime = null); data?.endTime ? (data.endTime += ":00.000Z") : (data.endTime = null); if (data.startTime && data.quantityId && data.reliabilityId) { - if (waterIngress.id === 0) { - addWaterIngress({ + if (item.id === 0) { + addData({ ...data, type: ObservationType.waterIngress, - boreholeId: boreholeId, + boreholeId: parentId, }); } else { - delete waterIngress.casing; - delete waterIngress.quantity; - delete waterIngress.reliability; - updateWaterIngress({ ...waterIngress, ...data }); + delete item.casing; + delete item.quantity; + delete item.reliability; + updateData({ ...item, ...data }); } } else { - setSelectedWaterIngress(null); + setSelected(null); } }; @@ -68,7 +62,7 @@ const WaterIngressInput = props => { ) { alertContext.error(t("waterIngressRequiredFieldsAlert")); } else { - setSelectedWaterIngress(null); + setSelected(null); } }; @@ -77,15 +71,12 @@ const WaterIngressInput = props => { - + { { +export const DataCards = props => { const { isEditable, - completionId, + parentId, getData, addData, updateData, @@ -38,8 +35,8 @@ export const CompletionContentTab = props => { const loadData = index => { setState({ ...state, isLoadingData: true }); - if (completionId && mounted.current) { - getData(completionId).then(response => { + if (parentId && mounted.current) { + getData(parentId).then(response => { if (response?.length > 0) { setState({ index: index, @@ -54,7 +51,7 @@ export const CompletionContentTab = props => { }); } }); - } else if (completionId === null) { + } else if (parentId === null) { setState({ index: 0, data: [], @@ -74,7 +71,7 @@ export const CompletionContentTab = props => { mounted.current = false; }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [completionId]); + }, [parentId]); useEffect(() => { setDisplayed(state.data); @@ -137,7 +134,7 @@ export const CompletionContentTab = props => { ? renderInput({ item: item, setSelected: setSelected, - completionId: completionId, + parentId: parentId, updateData: (item, data) => { updateData(item, data).then(() => { handleDataChange(); From 6c8abd1cfadfa2a37ab9630bfb23fa8dbb3e3e23 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Fri, 2 Feb 2024 10:23:11 +0100 Subject: [PATCH 07/44] Use common styling --- .../borehole/completion/backfillDisplay.js | 2 +- .../form/borehole/completion/casingDisplay.js | 2 +- .../completion/instrumentationDisplay.js | 2 +- .../borehole/completion/styledComponents.js | 52 +------------------ .../hydrogeology/fieldMeasurementDisplay.js | 2 +- .../groundwaterLevelMeasurementDisplay.js | 2 +- .../borehole/hydrogeology/hydrotestDisplay.js | 2 +- .../borehole/hydrogeology/hydrotestInput.js | 2 +- .../hydrogeology/observationDisplay.js | 2 +- .../borehole/hydrogeology/observationInput.js | 2 +- .../borehole/hydrogeology/styledComponents.js | 14 ----- .../hydrogeology/waterIngressDisplay.js | 2 +- src/client/src/components/baseComponents.js | 14 ++++- 13 files changed, 25 insertions(+), 75 deletions(-) delete mode 100644 src/client/src/commons/form/borehole/hydrogeology/styledComponents.js diff --git a/src/client/src/commons/form/borehole/completion/backfillDisplay.js b/src/client/src/commons/form/borehole/completion/backfillDisplay.js index e0379ed56..afd097cb1 100644 --- a/src/client/src/commons/form/borehole/completion/backfillDisplay.js +++ b/src/client/src/commons/form/borehole/completion/backfillDisplay.js @@ -1,6 +1,6 @@ import React from "react"; import { Stack, Tooltip } from "@mui/material"; -import { StackFullWidth } from "./styledComponents"; +import { StackFullWidth } from "../../../../components/baseComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; import DeleteIcon from "@mui/icons-material/Delete"; diff --git a/src/client/src/commons/form/borehole/completion/casingDisplay.js b/src/client/src/commons/form/borehole/completion/casingDisplay.js index 9be1e06f1..79439d798 100644 --- a/src/client/src/commons/form/borehole/completion/casingDisplay.js +++ b/src/client/src/commons/form/borehole/completion/casingDisplay.js @@ -1,6 +1,6 @@ import React from "react"; import { Stack, Tooltip } from "@mui/material"; -import { StackFullWidth } from "./styledComponents"; +import { StackFullWidth } from "../../../../components/baseComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; import DeleteIcon from "@mui/icons-material/Delete"; diff --git a/src/client/src/commons/form/borehole/completion/instrumentationDisplay.js b/src/client/src/commons/form/borehole/completion/instrumentationDisplay.js index 70446714e..f00eb6e52 100644 --- a/src/client/src/commons/form/borehole/completion/instrumentationDisplay.js +++ b/src/client/src/commons/form/borehole/completion/instrumentationDisplay.js @@ -1,6 +1,6 @@ import React from "react"; import { Stack, Tooltip } from "@mui/material"; -import { StackFullWidth } from "./styledComponents"; +import { StackFullWidth } from "../../../../components/baseComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; import DeleteIcon from "@mui/icons-material/Delete"; diff --git a/src/client/src/commons/form/borehole/completion/styledComponents.js b/src/client/src/commons/form/borehole/completion/styledComponents.js index 661fac821..1ffb2c866 100644 --- a/src/client/src/commons/form/borehole/completion/styledComponents.js +++ b/src/client/src/commons/form/borehole/completion/styledComponents.js @@ -1,55 +1,7 @@ -import React, { forwardRef } from "react"; -import { - Box, - IconButton, - Stack, - Tabs, - Tab, - Typography, - TextField, -} from "@mui/material"; +import React from "react"; +import { Box, IconButton, Tabs, Tab } from "@mui/material"; import { styled } from "@mui/system"; -export const TypographyWithBottomMargin = styled(Typography)(() => ({ - marginBottom: "1em", -})); - -export const StackFullWidth = styled(Stack)(() => ({ - width: "100%", -})); - -export const StackHalfWidth = styled(Stack)(() => ({ - width: "50%", -})); - -export const TextfieldWithMarginRight = forwardRef((props, ref) => { - const StyledTextField = styled(TextField)(() => ({ - flex: "1", - marginTop: "10px !important", - marginRight: "10px !important", - })); - - return ( - - {props.children} - - ); -}); - -export const TextfieldNoMargin = forwardRef((props, ref) => { - // the ref and children needs to be manually forwarded with custom components, the native TextField component would handle the forwarding internally. - const StyledTextField = styled(TextField)(() => ({ - flex: "1", - marginTop: "10px", - })); - - return ( - - {props.children} - - ); -}); - export const IconButtonWithMargin = styled(IconButton)({ color: "rgba(0, 0, 0, 0.8)", marginLeft: "5px", diff --git a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js index 0507bac3e..432d0649a 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js @@ -1,6 +1,6 @@ import React from "react"; import { Stack, Tooltip, Typography } from "@mui/material"; -import { StackFullWidth } from "./styledComponents"; +import { StackFullWidth } from "../../../../components/baseComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; import DeleteIcon from "@mui/icons-material/Delete"; diff --git a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js index b8428cfe5..0ea0f7592 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js @@ -1,6 +1,6 @@ import React from "react"; import { Stack, Tooltip, Typography } from "@mui/material"; -import { StackFullWidth } from "./styledComponents"; +import { StackFullWidth } from "../../../../components/baseComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; import DeleteIcon from "@mui/icons-material/Delete"; diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js index d00aaba28..9b207f695 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js @@ -4,7 +4,7 @@ import { TypographyWithBottomMargin, StackFullWidth, StackHalfWidth, -} from "./styledComponents"; +} from "../../../../components/baseComponents"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; import DeleteIcon from "@mui/icons-material/Delete"; import { useTranslation } from "react-i18next"; diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js index 6c21e54b7..a5b5c2bd6 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js @@ -24,7 +24,7 @@ import { FormField, getInputFieldBackgroundColor, } from "../../../../components/form/form"; -import { StackHalfWidth } from "./styledComponents"; +import { StackHalfWidth } from "../../../../components/baseComponents"; const HydrotestInput = ({ hydrotest, diff --git a/src/client/src/commons/form/borehole/hydrogeology/observationDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/observationDisplay.js index 8610a4ee8..1aa7c9a84 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/observationDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/observationDisplay.js @@ -1,6 +1,6 @@ import React from "react"; import { useTranslation } from "react-i18next"; -import { StackFullWidth } from "./styledComponents"; +import { StackFullWidth } from "../../../../components/baseComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; const ObservationDisplay = props => { diff --git a/src/client/src/commons/form/borehole/hydrogeology/observationInput.js b/src/client/src/commons/form/borehole/hydrogeology/observationInput.js index 8ef32583a..dd3c91dd8 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/observationInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/observationInput.js @@ -8,7 +8,7 @@ import { import { useDomains, getCasingsByBoreholeId } from "../../../../api/fetchApiV2"; import { useTranslation } from "react-i18next"; import { hydrogeologySchemaConstants } from "./hydrogeologySchemaConstants"; -import { StackHalfWidth } from "../completion/styledComponents"; +import { StackHalfWidth } from "../../../../components/baseComponents"; const ObservationInput = props => { const { observation, boreholeId } = props; diff --git a/src/client/src/commons/form/borehole/hydrogeology/styledComponents.js b/src/client/src/commons/form/borehole/hydrogeology/styledComponents.js deleted file mode 100644 index c529a0be0..000000000 --- a/src/client/src/commons/form/borehole/hydrogeology/styledComponents.js +++ /dev/null @@ -1,14 +0,0 @@ -import { Stack, Typography } from "@mui/material"; -import { styled } from "@mui/system"; - -export const TypographyWithBottomMargin = styled(Typography)(() => ({ - marginBottom: "1em", -})); - -export const StackFullWidth = styled(Stack)(() => ({ - width: "100%", -})); - -export const StackHalfWidth = styled(Stack)(() => ({ - width: "50%", -})); diff --git a/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js index fba19f9cc..a129775b6 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js @@ -1,6 +1,6 @@ import React from "react"; import { Stack, Tooltip, Typography } from "@mui/material"; -import { StackFullWidth } from "./styledComponents"; +import { StackFullWidth } from "../../../../components/baseComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; import DeleteIcon from "@mui/icons-material/Delete"; diff --git a/src/client/src/components/baseComponents.js b/src/client/src/components/baseComponents.js index b13aac1da..83c8a14d2 100644 --- a/src/client/src/components/baseComponents.js +++ b/src/client/src/components/baseComponents.js @@ -1,4 +1,4 @@ -import { Stack } from "@mui/material"; +import { Stack, Typography } from "@mui/material"; import { styled } from "@mui/system"; export const FullPage = styled(Stack)({ @@ -10,3 +10,15 @@ export const FullPageCentered = styled(Stack)({ justifyContent: "center", alignItems: "center", }); + +export const StackFullWidth = styled(Stack)(() => ({ + width: "100%", +})); + +export const StackHalfWidth = styled(Stack)(() => ({ + width: "50%", +})); + +export const TypographyWithBottomMargin = styled(Typography)(() => ({ + marginBottom: "1em", +})); From 01bf75ee9eb92b2e0cfbbfadc2f9ec4eeb59834a Mon Sep 17 00:00:00 2001 From: tschumpr Date: Fri, 2 Feb 2024 10:35:24 +0100 Subject: [PATCH 08/44] Fix test --- src/client/cypress/e2e/editor/waterIngress.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/cypress/e2e/editor/waterIngress.cy.js b/src/client/cypress/e2e/editor/waterIngress.cy.js index 31ca8c576..89431a407 100644 --- a/src/client/cypress/e2e/editor/waterIngress.cy.js +++ b/src/client/cypress/e2e/editor/waterIngress.cy.js @@ -81,7 +81,7 @@ describe("Tests for the wateringress editor.", () => { cy.wait("@casing_GET"); setSelect("quantityId", 2); - setSelect("conditionsId", 3); + setSelect("conditionsId", 2); setSelect("reliabilityId", 1); setSelect("casingId", 1); setInput("startTime", "2012-11-14T12:06"); From fb015042facf35194f4b0727dcc7d43fedc03824 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Fri, 2 Feb 2024 14:13:38 +0100 Subject: [PATCH 09/44] Move button to common file --- .../completion/completionHeaderDisplay.js | 2 +- .../completion/completionHeaderInput.js | 2 +- .../borehole/completion/styledComponents.js | 13 +-------- src/client/src/components/buttons/buttons.js | 28 ++++++++++++++++--- 4 files changed, 27 insertions(+), 18 deletions(-) diff --git a/src/client/src/commons/form/borehole/completion/completionHeaderDisplay.js b/src/client/src/commons/form/borehole/completion/completionHeaderDisplay.js index 50980ecda..e9ab1f998 100644 --- a/src/client/src/commons/form/borehole/completion/completionHeaderDisplay.js +++ b/src/client/src/commons/form/borehole/completion/completionHeaderDisplay.js @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { Stack, Tooltip } from "@mui/material"; -import { IconButtonWithMargin } from "./styledComponents"; +import { IconButtonWithMargin } from "../../../../components/buttons/buttons"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ExpandLessIcon from "@mui/icons-material/ExpandLess"; diff --git a/src/client/src/commons/form/borehole/completion/completionHeaderInput.js b/src/client/src/commons/form/borehole/completion/completionHeaderInput.js index 9a6fd9a3a..7e9d06b93 100644 --- a/src/client/src/commons/form/borehole/completion/completionHeaderInput.js +++ b/src/client/src/commons/form/borehole/completion/completionHeaderInput.js @@ -6,7 +6,7 @@ import CloseIcon from "@mui/icons-material/Close"; import SaveIcon from "@mui/icons-material/Save"; import { useDomains } from "../../../../api/fetchApiV2"; import { completionSchemaConstants } from "./completionSchemaConstants"; -import { IconButtonWithMargin } from "./styledComponents"; +import { IconButtonWithMargin } from "../../../../components/buttons/buttons"; import { FormInput, FormSelect, diff --git a/src/client/src/commons/form/borehole/completion/styledComponents.js b/src/client/src/commons/form/borehole/completion/styledComponents.js index 1ffb2c866..c94f0eb67 100644 --- a/src/client/src/commons/form/borehole/completion/styledComponents.js +++ b/src/client/src/commons/form/borehole/completion/styledComponents.js @@ -1,18 +1,7 @@ import React from "react"; -import { Box, IconButton, Tabs, Tab } from "@mui/material"; +import { Box, Tabs, Tab } from "@mui/material"; import { styled } from "@mui/system"; -export const IconButtonWithMargin = styled(IconButton)({ - color: "rgba(0, 0, 0, 0.8)", - marginLeft: "5px", - "&:hover, &.Mui-focusVisible, &:active, &:focus, &:focus-visible": { - backgroundColor: "rgba(0, 0, 0, 0.0)", - }, - "& .MuiTouchRipple-root": { - display: "none", - }, -}); - export const CompletionBox = styled(Box)(() => ({ backgroundColor: "rgb(242,242,242)", borderRadius: "3px", diff --git a/src/client/src/components/buttons/buttons.js b/src/client/src/components/buttons/buttons.js index 77ed8f313..a9a337db8 100644 --- a/src/client/src/components/buttons/buttons.js +++ b/src/client/src/components/buttons/buttons.js @@ -1,17 +1,23 @@ import React, { forwardRef } from "react"; import { useTranslation } from "react-i18next"; -import { Button, Tooltip } from "@mui/material"; +import { Button, IconButton, Tooltip } from "@mui/material"; import { styled } from "@mui/system"; import AddIcon from "@mui/icons-material/Add"; +export const ButtonColor = { + default: "rgba(0, 0, 0, 0.8)", + success: "rgba(0, 128, 0, 0.8)", + error: "rgba(255, 0, 0, 0.8)", +}; + export const BaseButton = styled(Button)({ fontFamily: "Lato", textTransform: "none", - color: "rgba(0, 0, 0, 0.8)", - borderColor: "rgba(0, 0, 0, 0.8)", + color: ButtonColor.default, + borderColor: ButtonColor.default, marginBottom: "6px", "&:hover, &.Mui-focusVisible, &:active, &:focus, &:focus-visible": { - borderColor: "rgba(0, 0, 0, 0.8)", + borderColor: ButtonColor.default, backgroundColor: "rgba(0, 0, 0, 0.05)", }, "& .MuiTouchRipple-root": { @@ -33,3 +39,17 @@ export const AddButton = forwardRef((props, ref) => { ); }); + +export const BaseIconButton = styled(IconButton)({ + color: ButtonColor.default, + "&:hover, &.Mui-focusVisible, &:active, &:focus, &:focus-visible": { + backgroundColor: "rgba(0, 0, 0, 0.0)", + }, + "& .MuiTouchRipple-root": { + display: "none", + }, +}); + +export const IconButtonWithMargin = styled(BaseIconButton)({ + marginLeft: "5px", +}); From 65fb54eddd2e115974288cddf2e3bb59bc22a50d Mon Sep 17 00:00:00 2001 From: tschumpr Date: Fri, 2 Feb 2024 15:10:36 +0100 Subject: [PATCH 10/44] Unify dataCard logic --- src/client/cypress/e2e/editor/backfill.cy.js | 8 +- src/client/cypress/e2e/editor/casing.cy.js | 10 +- .../cypress/e2e/editor/fieldMeasurement.cy.js | 8 +- .../editor/groundwaterLevelMeasurement.cy.js | 8 +- .../cypress/e2e/editor/instrumentation.cy.js | 10 +- .../cypress/e2e/editor/waterIngress.cy.js | 8 +- .../borehole/completion/backfillDisplay.js | 83 ++---- .../form/borehole/completion/backfillInput.js | 177 +++++-------- .../form/borehole/completion/casingDisplay.js | 129 ++++----- .../form/borehole/completion/casingInput.js | 250 +++++++----------- .../completion/instrumentationDisplay.js | 97 +++---- .../completion/instrumentationInput.js | 215 ++++++--------- .../hydrogeology/fieldMeasurementDisplay.js | 103 +++----- .../hydrogeology/fieldMeasurementInput.js | 208 +++++---------- .../groundwaterLevelMeasurementDisplay.js | 75 ++---- .../groundwaterLevelMeasurementInput.js | 160 ++++------- .../hydrogeology/waterIngressDisplay.js | 76 ++---- .../hydrogeology/waterIngressInput.js | 161 ++++------- src/client/src/components/buttons/buttons.js | 24 ++ .../components/dataCard/dataDisplayCard.js | 41 +++ .../src/components/dataCard/dataInputCard.js | 68 +++++ 21 files changed, 750 insertions(+), 1169 deletions(-) create mode 100644 src/client/src/components/dataCard/dataDisplayCard.js create mode 100644 src/client/src/components/dataCard/dataInputCard.js diff --git a/src/client/cypress/e2e/editor/backfill.cy.js b/src/client/cypress/e2e/editor/backfill.cy.js index 1104b1ef0..ea9e6b7bd 100644 --- a/src/client/cypress/e2e/editor/backfill.cy.js +++ b/src/client/cypress/e2e/editor/backfill.cy.js @@ -42,7 +42,7 @@ describe("Backfill crud tests", () => { setSelect("materialId", 1); // save backfill - cy.get('[data-cy="save-icon"]').click(); + cy.get('[data-cy="save-button"]').click(); // check if backfill is saved cy.contains("123456"); @@ -52,18 +52,18 @@ describe("Backfill crud tests", () => { cy.contains("filter gravel"); // edit backfill - cy.get('[data-cy="edit-icon"]').click({ force: true }); + cy.get('[data-cy="edit-button"]').click({ force: true }); cy.wait("@codelist_GET"); setInput("fromDepth", "222"); // close editing mask - cy.get('[data-cy="save-icon"]').click({ force: true }); + cy.get('[data-cy="save-button"]').click({ force: true }); cy.contains("222"); cy.contains("inactive"); // delete backfill - cy.get('[data-cy="delete-icon"]').click({ force: true }); + cy.get('[data-cy="delete-button"]').click({ force: true }); cy.contains("From depth").should("not.exist"); }); }); diff --git a/src/client/cypress/e2e/editor/casing.cy.js b/src/client/cypress/e2e/editor/casing.cy.js index f07265db0..7a8343483 100644 --- a/src/client/cypress/e2e/editor/casing.cy.js +++ b/src/client/cypress/e2e/editor/casing.cy.js @@ -49,7 +49,7 @@ describe("Casing crud tests", () => { setInput("outerDiameter", "4"); setInput("notes", "Lorem."); - cy.get('[data-cy="save-icon"]').click(); + cy.get('[data-cy="save-button"]').click(); cy.wait("@casing_GET"); evaluateDisplayValue("name", "casing-1"); @@ -64,13 +64,13 @@ describe("Casing crud tests", () => { evaluateDisplayValue("notes", "Lorem."); // update casing - cy.get('[data-cy="edit-icon"]').click(); + cy.get('[data-cy="edit-button"]').click(); cy.wait("@codelist_GET"); setInput("name", "casing-1 updated"); setSelect("materialId", 5); - cy.get('[data-cy="save-icon"]').click({ force: true }); + cy.get('[data-cy="save-button"]').click({ force: true }); evaluateDisplayValue("name", "casing-1 updated"); evaluateDisplayValue("materialCasingLayer", "concrete"); evaluateDisplayValue("casing_inner_diameter", "3"); @@ -90,12 +90,12 @@ describe("Casing crud tests", () => { setSelect("kindId", 2); setSelect("statusId", 1); setSelect("casingId", 1); - cy.get('[data-cy="save-icon"]').click({ force: true }); + cy.get('[data-cy="save-button"]').click({ force: true }); cy.get("[data-cy=completion-content-header-tab-Casing]").click(); cy.wait("@casing_GET"); - cy.get('[data-cy="delete-icon"]').click({ force: true }); + cy.get('[data-cy="delete-button"]').click({ force: true }); cy.wait("@casing_DELETE"); cy.contains("casing-1 updated").should("not.exist"); diff --git a/src/client/cypress/e2e/editor/fieldMeasurement.cy.js b/src/client/cypress/e2e/editor/fieldMeasurement.cy.js index ec6c83c97..60efef7d2 100644 --- a/src/client/cypress/e2e/editor/fieldMeasurement.cy.js +++ b/src/client/cypress/e2e/editor/fieldMeasurement.cy.js @@ -48,7 +48,7 @@ describe("Tests for the field measurement editor.", () => { setInput("value", "77.1045"); // close editing mask - cy.get('[data-cy="close-icon"]').click({ force: true }); + cy.get('[data-cy="save-button"]').click({ force: true }); //assert field measurementis displayed evaluateDisplayValue("field_measurement_sample_type", "Schöpfprobe"); @@ -56,13 +56,13 @@ describe("Tests for the field measurement editor.", () => { evaluateDisplayValue("value", "77.1045 %"); // edit field measurement - cy.get('[data-cy="edit-icon"]').click({ force: true }); + cy.get('[data-cy="edit-button"]').click({ force: true }); setSelect("sampleTypeId", 0); - cy.get('[data-cy="close-icon"]').click({ force: true }); + cy.get('[data-cy="save-button"]').click({ force: true }); evaluateDisplayValue("field_measurement_sample_type", "Pumpprobe"); // delete field measurement - cy.get('[data-cy="delete-icon"]').click({ force: true }); + cy.get('[data-cy="delete-button"]').click({ force: true }); cy.wait("@fieldmeasurement_DELETE"); cy.get("body").should("not.contain", "Pumpprobe"); }); diff --git a/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js b/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js index a5603d15d..f5aec087b 100644 --- a/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js +++ b/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js @@ -48,7 +48,7 @@ describe("Tests for the groundwater level measurement editor.", () => { setInput("levelMasl", "5.4567"); // close editing mask - cy.get('[data-cy="close-icon"]').click({ force: true }); + cy.get('[data-cy="save-button"]').click({ force: true }); evaluateDisplayValue("gwlm_kind", "Manometer"); evaluateDisplayValue("gwlm_levelm", "789.12"); @@ -56,13 +56,13 @@ describe("Tests for the groundwater level measurement editor.", () => { evaluateDisplayValue("reliability", "fraglich"); // edit groundwater level measurement - cy.get('[data-cy="edit-icon"]').click({ force: true }); + cy.get('[data-cy="edit-button"]').click({ force: true }); setSelect("kindId", 1); - cy.get('[data-cy="close-icon"]').click({ force: true }); + cy.get('[data-cy="save-button"]').click({ force: true }); evaluateDisplayValue("gwlm_kind", "Drucksonde"); // delete groundwater level measurement - cy.get('[data-cy="delete-icon"]').click({ force: true }); + cy.get('[data-cy="delete-button"]').click({ force: true }); cy.wait("@groundwaterlevelmeasurement_DELETE"); cy.get("body").should("not.contain", "Drucksonde"); }); diff --git a/src/client/cypress/e2e/editor/instrumentation.cy.js b/src/client/cypress/e2e/editor/instrumentation.cy.js index e0db8d99a..376a00c84 100644 --- a/src/client/cypress/e2e/editor/instrumentation.cy.js +++ b/src/client/cypress/e2e/editor/instrumentation.cy.js @@ -43,7 +43,7 @@ describe("Instrumentation crud tests", () => { setInput("innerDiameter", "3"); setInput("outerDiameter", "4"); - cy.get('[data-cy="save-icon"]').click(); + cy.get('[data-cy="save-button"]').click(); cy.wait("@casing_GET"); cy.get("[data-cy=completion-content-header-tab-Instrumentation]").click(); @@ -62,7 +62,7 @@ describe("Instrumentation crud tests", () => { setSelect("statusId", 1); // save instrumentation - cy.get('[data-cy="save-icon"]').click(); + cy.get('[data-cy="save-button"]').click(); // check if instrumentation is saved cy.contains("123456"); @@ -73,7 +73,7 @@ describe("Instrumentation crud tests", () => { cy.contains("inactive"); // edit instrumentation - cy.get('[data-cy="edit-icon"]').click({ force: true }); + cy.get('[data-cy="edit-button"]').click({ force: true }); // We need the casings for the casing name dropdown cy.wait("@casing_GET"); @@ -81,13 +81,13 @@ describe("Instrumentation crud tests", () => { setSelect("casingId", 1); // close editing mask - cy.get('[data-cy="save-icon"]').click({ force: true }); + cy.get('[data-cy="save-button"]').click({ force: true }); cy.contains("casing-1"); cy.contains("222"); cy.contains("inactive"); // delete instrumentation - cy.get('[data-cy="delete-icon"]').click({ force: true }); + cy.get('[data-cy="delete-button"]').click({ force: true }); cy.contains("From depth").should("not.exist"); }); }); diff --git a/src/client/cypress/e2e/editor/waterIngress.cy.js b/src/client/cypress/e2e/editor/waterIngress.cy.js index 89431a407..22b29e05a 100644 --- a/src/client/cypress/e2e/editor/waterIngress.cy.js +++ b/src/client/cypress/e2e/editor/waterIngress.cy.js @@ -64,7 +64,7 @@ describe("Tests for the wateringress editor.", () => { setInput("innerDiameter", "3"); setInput("outerDiameter", "4"); - cy.get('[data-cy="save-icon"]').click(); + cy.get('[data-cy="save-button"]').click(); cy.wait("@casing_GET"); cy.get('[data-cy="hydrogeology-menu-item"]').click({ force: true }); @@ -87,7 +87,7 @@ describe("Tests for the wateringress editor.", () => { setInput("startTime", "2012-11-14T12:06"); // close editing mask - cy.get('[data-cy="close-icon"]').click({ force: true }); + cy.get('[data-cy="save-button"]').click({ force: true }); evaluateDisplayValue("quantity", "viel (> 120 l/min)"); evaluateDisplayValue("conditions", "frei/ungespannt"); @@ -95,13 +95,13 @@ describe("Tests for the wateringress editor.", () => { evaluateDisplayValue("casingName", "casing-1"); // edit wateringress - cy.get('[data-cy="edit-icon"]').click({ force: true }); + cy.get('[data-cy="edit-button"]').click({ force: true }); setSelect("quantityId", 1); cy.get('[data-cy="close-icon"]').click({ force: true }); evaluateDisplayValue("quantity", "mittel (30 - 120 l/min)"); // delete wateringress - cy.get('[data-cy="delete-icon"]').click({ force: true }); + cy.get('[data-cy="delete-button"]').click({ force: true }); cy.wait("@wateringress_DELETE"); cy.get("body").should("not.contain", "mittel (30 - 120 l/min)"); }); diff --git a/src/client/src/commons/form/borehole/completion/backfillDisplay.js b/src/client/src/commons/form/borehole/completion/backfillDisplay.js index afd097cb1..1d7a39e36 100644 --- a/src/client/src/commons/form/borehole/completion/backfillDisplay.js +++ b/src/client/src/commons/form/borehole/completion/backfillDisplay.js @@ -1,71 +1,36 @@ import React from "react"; -import { Stack, Tooltip } from "@mui/material"; import { StackFullWidth } from "../../../../components/baseComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; -import ModeEditIcon from "@mui/icons-material/ModeEdit"; -import DeleteIcon from "@mui/icons-material/Delete"; -import { useTranslation } from "react-i18next"; +import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard"; const BackfillDisplay = props => { const { item, selected, setSelected, isEditable, deleteData } = props; - const { t } = useTranslation(); return ( - - - - - - - - - - - + + + + - - - { - e.stopPropagation(); - !selected && setSelected(item); - }} - /> - - - { - e.stopPropagation(); - !selected && deleteData(item.id); - }} - /> - - - + + + + + + ); }; diff --git a/src/client/src/commons/form/borehole/completion/backfillInput.js b/src/client/src/commons/form/borehole/completion/backfillInput.js index d696137f2..e03ededce 100644 --- a/src/client/src/commons/form/borehole/completion/backfillInput.js +++ b/src/client/src/commons/form/borehole/completion/backfillInput.js @@ -1,11 +1,10 @@ -import React, { useEffect } from "react"; -import { useForm, FormProvider } from "react-hook-form"; -import { Box, Stack, Tooltip } from "@mui/material"; -import CheckIcon from "@mui/icons-material/Check"; +import React from "react"; +import { Stack } from "@mui/material"; import { useTranslation } from "react-i18next"; import { useDomains } from "../../../../api/fetchApiV2"; import { completionSchemaConstants } from "./completionSchemaConstants"; import { FormInput, FormSelect } from "../../../../components/form/form"; +import { DataInputCard } from "../../../../components/dataCard/dataInputCard"; const BackfillInput = ({ item, @@ -15,121 +14,75 @@ const BackfillInput = ({ updateData, }) => { const domains = useDomains(); - const { t, i18n } = useTranslation(); - const formMethods = useForm({ mode: "all" }); - - // trigger form validation on mount - useEffect(() => { - formMethods.trigger(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [formMethods.trigger]); - - const closeFormIfCompleted = () => { - if (formMethods.formState.isValid) { - formMethods.handleSubmit(submitForm)(); - setSelected(null); - } - }; + const { i18n } = useTranslation(); const prepareFormDataForSubmit = data => { data.completionId = parentId; return data; }; - const submitForm = data => { - data = prepareFormDataForSubmit(data); - if (item.id === 0) { - addData({ - ...data, - }); - } else { - updateData({ - ...item, - ...data, - }); - } - }; - return ( - - - - - - - - - - d.schema === completionSchemaConstants.backfillKind, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - d.schema === completionSchemaConstants.backfillMaterial, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - - - - - - - closeFormIfCompleted()} - /> - - - - - + + + + + + + d.schema === completionSchemaConstants.backfillKind) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + d.schema === completionSchemaConstants.backfillMaterial, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + + + + ); }; diff --git a/src/client/src/commons/form/borehole/completion/casingDisplay.js b/src/client/src/commons/form/borehole/completion/casingDisplay.js index 79439d798..3724b4f10 100644 --- a/src/client/src/commons/form/borehole/completion/casingDisplay.js +++ b/src/client/src/commons/form/borehole/completion/casingDisplay.js @@ -1,94 +1,59 @@ import React from "react"; -import { Stack, Tooltip } from "@mui/material"; import { StackFullWidth } from "../../../../components/baseComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; -import ModeEditIcon from "@mui/icons-material/ModeEdit"; -import DeleteIcon from "@mui/icons-material/Delete"; -import { useTranslation } from "react-i18next"; +import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard"; const CasingDisplay = props => { const { item, selected, setSelected, isEditable, deleteData } = props; - const { t } = useTranslation(); return ( - - - - - - - - - - - - - - - - - - - - + + + + + - - - { - e.stopPropagation(); - !selected && setSelected(item); - }} - /> - - - { - e.stopPropagation(); - !selected && deleteData(item.id); - }} - /> - - - + + + + + + + + + + + + + + ); }; diff --git a/src/client/src/commons/form/borehole/completion/casingInput.js b/src/client/src/commons/form/borehole/completion/casingInput.js index b564691a2..2d5f574f6 100644 --- a/src/client/src/commons/form/borehole/completion/casingInput.js +++ b/src/client/src/commons/form/borehole/completion/casingInput.js @@ -1,29 +1,14 @@ -import React, { useEffect } from "react"; -import { useForm, FormProvider } from "react-hook-form"; -import { Box, Stack, Tooltip } from "@mui/material"; -import CheckIcon from "@mui/icons-material/Check"; +import React from "react"; +import { Stack } from "@mui/material"; import { useTranslation } from "react-i18next"; import { useDomains } from "../../../../api/fetchApiV2"; import { completionSchemaConstants } from "./completionSchemaConstants"; import { FormInput, FormSelect } from "../../../../components/form/form"; +import { DataInputCard } from "../../../../components/dataCard/dataInputCard"; const CasingInput = ({ item, setSelected, parentId, addData, updateData }) => { const domains = useDomains(); - const { t, i18n } = useTranslation(); - const formMethods = useForm({ mode: "all" }); - - // trigger form validation on mount - useEffect(() => { - formMethods.trigger(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [formMethods.trigger]); - - const closeFormIfCompleted = () => { - if (formMethods.formState.isValid) { - formMethods.handleSubmit(submitForm)(); - setSelected(null); - } - }; + const { i18n } = useTranslation(); const prepareFormDataForSubmit = data => { if (data?.dateStart === "") { @@ -36,137 +21,104 @@ const CasingInput = ({ item, setSelected, parentId, addData, updateData }) => { return data; }; - const submitForm = data => { - data = prepareFormDataForSubmit(data); - if (item.id === 0) { - addData({ - ...data, - }); - } else { - updateData({ - ...item, - ...data, - }); - } - }; - return ( - -
- - - - - - - - - d.schema === completionSchemaConstants.casingKind, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - d.schema === completionSchemaConstants.casingMaterial, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - - - - - - - - - - - - - - - closeFormIfCompleted()} - /> - - - -
-
+ + + + + + + + d.schema === completionSchemaConstants.casingKind) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + d.schema === completionSchemaConstants.casingMaterial) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + + + + + + + + + + + + ); }; diff --git a/src/client/src/commons/form/borehole/completion/instrumentationDisplay.js b/src/client/src/commons/form/borehole/completion/instrumentationDisplay.js index f00eb6e52..c4250da14 100644 --- a/src/client/src/commons/form/borehole/completion/instrumentationDisplay.js +++ b/src/client/src/commons/form/borehole/completion/instrumentationDisplay.js @@ -1,78 +1,43 @@ import React from "react"; -import { Stack, Tooltip } from "@mui/material"; import { StackFullWidth } from "../../../../components/baseComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; -import ModeEditIcon from "@mui/icons-material/ModeEdit"; -import DeleteIcon from "@mui/icons-material/Delete"; -import { useTranslation } from "react-i18next"; +import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard"; const InstrumentationDisplay = props => { const { item, selected, setSelected, isEditable, deleteData } = props; - const { t } = useTranslation(); return ( - - - - - - - - - - - - - - - + + + + - - - { - e.stopPropagation(); - !selected && setSelected(item); - }} - /> - - - { - e.stopPropagation(); - !selected && deleteData(item.id); - }} - /> - - - + + + + + + + + + + ); }; diff --git a/src/client/src/commons/form/borehole/completion/instrumentationInput.js b/src/client/src/commons/form/borehole/completion/instrumentationInput.js index 8c6c70277..f57959c7f 100644 --- a/src/client/src/commons/form/borehole/completion/instrumentationInput.js +++ b/src/client/src/commons/form/borehole/completion/instrumentationInput.js @@ -1,11 +1,10 @@ import React, { useEffect, useState } from "react"; -import { useForm, FormProvider } from "react-hook-form"; -import { Box, Stack, Tooltip } from "@mui/material"; -import CheckIcon from "@mui/icons-material/Check"; +import { Stack } from "@mui/material"; import { useTranslation } from "react-i18next"; import { useDomains, getCasings } from "../../../../api/fetchApiV2"; import { completionSchemaConstants } from "./completionSchemaConstants"; import { FormInput, FormSelect } from "../../../../components/form/form"; +import { DataInputCard } from "../../../../components/dataCard/dataInputCard"; const InstrumentationInput = ({ item, @@ -15,24 +14,9 @@ const InstrumentationInput = ({ updateData, }) => { const domains = useDomains(); - const { t, i18n } = useTranslation(); - const formMethods = useForm({ mode: "all" }); - + const { i18n } = useTranslation(); const [casings, setCasings] = useState([]); - // trigger form validation on mount - useEffect(() => { - formMethods.trigger(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [formMethods.trigger]); - - const closeFormIfCompleted = () => { - if (formMethods.formState.isValid) { - formMethods.handleSubmit(submitForm)(); - setSelected(null); - } - }; - const prepareFormDataForSubmit = data => { if (data.casingId === "") { data.casingId = null; @@ -41,20 +25,6 @@ const InstrumentationInput = ({ return data; }; - const submitForm = data => { - data = prepareFormDataForSubmit(data); - if (item.id === 0) { - addData({ - ...data, - }); - } else { - updateData({ - ...item, - ...data, - }); - } - }; - useEffect(() => { if (parentId) { getCasings(parentId).then(casings => { @@ -64,105 +34,86 @@ const InstrumentationInput = ({ }, [parentId]); return ( - -
- - - - - - - - - ({ - key: casing.id, - name: casing.name, - }))} - /> - - - - d.schema === - completionSchemaConstants.instrumentationKind, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - d.schema === - completionSchemaConstants.instrumentationStatus, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - - - - - - - closeFormIfCompleted()} - /> - - - -
-
+ + + + + + + + ({ + key: casing.id, + name: casing.name, + }))} + /> + + + d.schema === completionSchemaConstants.instrumentationKind, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + d.schema === completionSchemaConstants.instrumentationStatus, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + + + + ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js index 432d0649a..f497a3b2b 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementDisplay.js @@ -1,17 +1,13 @@ import React from "react"; -import { Stack, Tooltip, Typography } from "@mui/material"; import { StackFullWidth } from "../../../../components/baseComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; -import ModeEditIcon from "@mui/icons-material/ModeEdit"; -import DeleteIcon from "@mui/icons-material/Delete"; -import { useTranslation } from "react-i18next"; +import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard"; import ObservationDisplay from "./observationDisplay"; import { FieldMeasurementParameterUnits } from "./parameterUnits"; import { useDomains } from "../../../../api/fetchApiV2"; const FieldMeasurementDisplay = props => { const { item, selected, setSelected, isEditable, deleteData } = props; - const { t } = useTranslation(); const domains = useDomains(); const getParameterUnit = parameterId => { @@ -21,72 +17,39 @@ const FieldMeasurementDisplay = props => { }; return ( - <> - - - - {t("field_measurement")} - - - - - - - - - {item?.value + " "} - {getParameterUnit(item.parameterId)} - - ) - } - /> - - - - - { - e.stopPropagation(); - !selected && setSelected(item); - }} - /> - - - { - e.stopPropagation(); - !selected && deleteData(item.id); - }} - /> - - + + + + + - - + + + {item?.value + " "} + {getParameterUnit(item.parameterId)} + + ) + } + /> + + ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js index 1c8cba184..02ccd13b4 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js @@ -1,11 +1,10 @@ -import React, { useEffect, useContext } from "react"; -import { useForm, FormProvider } from "react-hook-form"; -import { Box, InputAdornment, Stack, Tooltip } from "@mui/material"; +import React from "react"; +import { useForm } from "react-hook-form"; +import { InputAdornment, Stack } from "@mui/material"; import { FormInput, FormSelect } from "../../../../components/form/form"; +import { DataInputCard } from "../../../../components/dataCard/dataInputCard"; import { useDomains } from "../../../../api/fetchApiV2"; -import CheckIcon from "@mui/icons-material/Check"; import { useTranslation } from "react-i18next"; -import { AlertContext } from "../../../../components/alert/alertContext"; import ObservationInput from "./observationInput"; import { ObservationType } from "./observationType"; import { hydrogeologySchemaConstants } from "./hydrogeologySchemaConstants"; @@ -14,69 +13,15 @@ import { FieldMeasurementParameterUnits } from "./parameterUnits"; const FieldMeasurementInput = props => { const { item, setSelected, parentId, addData, updateData } = props; const domains = useDomains(); - const { t, i18n } = useTranslation(); + const { i18n } = useTranslation(); const formMethods = useForm(); - const alertContext = useContext(AlertContext); - // submit values on unmount with useEffect clean up function. - useEffect(() => { - return () => { - formMethods.handleSubmit(submitForm)(); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [formMethods.handleSubmit]); - - // trigger form validation on mount - useEffect(() => { - formMethods.trigger(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [formMethods.trigger]); - - const submitForm = data => { - //convert dates to IsoStrings + const prepareFormDataForSubmit = data => { data?.startTime ? (data.startTime += ":00.000Z") : (data.startTime = null); data?.endTime ? (data.endTime += ":00.000Z") : (data.endTime = null); - if ( - data.startTime && - data.parameterId && - data.sampleTypeId && - data.value && - data.reliabilityId - ) { - if (item.id === 0) { - addData({ - ...data, - type: ObservationType.fieldMeasurement, - boreholeId: parentId, - }); - } else { - delete item.casing; - delete item.sampeType; - delete item.parameter; - delete item.reliability; - updateData({ - ...item, - ...data, - }); - } - } else { - setSelected(null); - } - }; - - const closeFormIfCompleted = () => { - const formValues = formMethods.getValues(); - if ( - !formValues.reliabilityId || - !formValues.startTime || - !formValues.sampleTypeId || - !formValues.parameterId || - !formValues.value - ) { - alertContext.error(t("fieldMeasurementRequiredFieldsAlert")); - } else { - setSelected(null); - } + data.type = ObservationType.fieldMeasurement; + data.boreholeId = parentId; + return data; }; const getParameterUnit = parameterId => { @@ -88,81 +33,66 @@ const FieldMeasurementInput = props => { const currentParameterId = formMethods.getValues("parameterId"); return ( - -
- - - - - - d.schema === - hydrogeologySchemaConstants.fieldMeasurementSampleType, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - d.schema === - hydrogeologySchemaConstants.fieldMeasurementParameter, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - - - {currentParameterId && - getParameterUnit(currentParameterId)} - - ), - }} - /> - - - - - closeFormIfCompleted()} - /> - - - -
-
+ + + + + d.schema === + hydrogeologySchemaConstants.fieldMeasurementSampleType, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + d.schema === + hydrogeologySchemaConstants.fieldMeasurementParameter, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + + + {currentParameterId && getParameterUnit(currentParameterId)} + + ), + }} + /> + + ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js index 0ea0f7592..546abcf23 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.js @@ -1,69 +1,32 @@ import React from "react"; -import { Stack, Tooltip, Typography } from "@mui/material"; import { StackFullWidth } from "../../../../components/baseComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; -import ModeEditIcon from "@mui/icons-material/ModeEdit"; -import DeleteIcon from "@mui/icons-material/Delete"; -import { useTranslation } from "react-i18next"; +import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard"; import ObservationDisplay from "./observationDisplay"; const GroundwaterLevelMeasurementDisplay = props => { const { item, selected, setSelected, isEditable, deleteData } = props; - const { t } = useTranslation(); return ( - <> - - - - {t("groundwater_level_measurement")} - - - - - - - - - - - - - { - e.stopPropagation(); - !selected && setSelected(item); - }} - /> - - - { - e.stopPropagation(); - !selected && deleteData(item.id); - }} - /> - - + + + + - - + + + + + ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js index cbcae4295..31e9d40cd 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js @@ -1,11 +1,9 @@ -import React, { useEffect, useContext } from "react"; -import { useForm, FormProvider } from "react-hook-form"; -import { Box, Stack, Tooltip } from "@mui/material"; +import React from "react"; +import { Stack } from "@mui/material"; import { FormInput, FormSelect } from "../../../../components/form/form"; +import { DataInputCard } from "../../../../components/dataCard/dataInputCard"; import { useDomains } from "../../../../api/fetchApiV2"; -import CheckIcon from "@mui/icons-material/Check"; import { useTranslation } from "react-i18next"; -import { AlertContext } from "../../../../components/alert/alertContext"; import ObservationInput from "./observationInput"; import { ObservationType } from "./observationType"; import { hydrogeologySchemaConstants } from "./hydrogeologySchemaConstants"; @@ -13,118 +11,58 @@ import { hydrogeologySchemaConstants } from "./hydrogeologySchemaConstants"; const GroundwaterLevelMeasurementInput = props => { const { item, setSelected, parentId, addData, updateData } = props; const domains = useDomains(); - const { t, i18n } = useTranslation(); - const formMethods = useForm(); - const alertContext = useContext(AlertContext); + const { i18n } = useTranslation(); - // submit values on unmount with useEffect clean up function. - useEffect(() => { - return () => { - formMethods.handleSubmit(submitForm)(); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [formMethods.handleSubmit]); - - // trigger form validation on mount - useEffect(() => { - formMethods.trigger(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [formMethods.trigger]); - - const submitForm = data => { - //convert dates to IsoStrings + const prepareFormDataForSubmit = data => { data?.startTime ? (data.startTime += ":00.000Z") : (data.startTime = null); data?.endTime ? (data.endTime += ":00.000Z") : (data.endTime = null); - if (data.startTime && data.kindId && data.reliabilityId) { - if (item.id === 0) { - addData({ - ...data, - type: ObservationType.groundwaterLevelMeasurement, - boreholeId: parentId, - }); - } else { - delete item.casing; - delete item.kind; - delete item.reliability; - updateData({ - ...item, - ...data, - }); - } - } else { - setSelected(null); - } - }; - - const closeFormIfCompleted = () => { - const formValues = formMethods.getValues(); - if ( - !formValues.reliabilityId || - !formValues.kindId || - !formValues.startTime - ) { - alertContext.error(t("gwlmRequiredFieldsAlert")); - } else { - setSelected(null); - } + data.type = ObservationType.groundwaterLevelMeasurement; + data.boreholeId = parentId; + return data; }; return ( - -
- - - - - - d.schema === - hydrogeologySchemaConstants.groundwaterLevelMeasurementKind, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - - - - - - - - closeFormIfCompleted()} - /> - - - -
-
+ + + + + d.schema === + hydrogeologySchemaConstants.groundwaterLevelMeasurementKind, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + + + + + ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js index a129775b6..6084f39aa 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.js @@ -1,69 +1,33 @@ import React from "react"; -import { Stack, Tooltip, Typography } from "@mui/material"; import { StackFullWidth } from "../../../../components/baseComponents"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; -import ModeEditIcon from "@mui/icons-material/ModeEdit"; -import DeleteIcon from "@mui/icons-material/Delete"; -import { useTranslation } from "react-i18next"; +import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard"; import ObservationDisplay from "./observationDisplay"; const WaterIngressDisplay = props => { const { item, selected, setSelected, isEditable, deleteData } = props; - const { t } = useTranslation(); return ( - <> - - - - {t("water_ingress")} - - - - - - - - - - { - e.stopPropagation(); - !selected && setSelected(item); - }} - /> - - - { - e.stopPropagation(); - !selected && deleteData(item.id); - }} - /> - - + + + + + - + ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js b/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js index 86ac157b0..f856a85be 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js @@ -1,11 +1,9 @@ -import React, { useEffect, useContext } from "react"; -import { useForm, FormProvider } from "react-hook-form"; -import { Box, Stack, Tooltip } from "@mui/material"; +import React from "react"; +import { Stack } from "@mui/material"; import { FormSelect } from "../../../../components/form/form"; +import { DataInputCard } from "../../../../components/dataCard/dataInputCard"; import { useDomains } from "../../../../api/fetchApiV2"; -import CheckIcon from "@mui/icons-material/Check"; import { useTranslation } from "react-i18next"; -import { AlertContext } from "../../../../components/alert/alertContext"; import ObservationInput from "./observationInput"; import { ObservationType } from "./observationType"; import { hydrogeologySchemaConstants } from "./hydrogeologySchemaConstants"; @@ -13,118 +11,59 @@ import { hydrogeologySchemaConstants } from "./hydrogeologySchemaConstants"; const WaterIngressInput = props => { const { item, setSelected, parentId, addData, updateData } = props; const domains = useDomains(); - const { t, i18n } = useTranslation(); - const formMethods = useForm(); - const alertContext = useContext(AlertContext); + const { i18n } = useTranslation(); - // submit values on unmount with useEffect clean up function. - useEffect(() => { - return () => { - formMethods.handleSubmit(submitForm)(); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [formMethods.handleSubmit]); - - // trigger form validation on mount - useEffect(() => { - formMethods.trigger(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [formMethods.trigger]); - - const submitForm = data => { - //convert dates to IsoStrings + const prepareFormDataForSubmit = data => { data?.startTime ? (data.startTime += ":00.000Z") : (data.startTime = null); data?.endTime ? (data.endTime += ":00.000Z") : (data.endTime = null); - if (data.startTime && data.quantityId && data.reliabilityId) { - if (item.id === 0) { - addData({ - ...data, - type: ObservationType.waterIngress, - boreholeId: parentId, - }); - } else { - delete item.casing; - delete item.quantity; - delete item.reliability; - updateData({ ...item, ...data }); - } - } else { - setSelected(null); - } - }; - - const closeFormIfCompleted = () => { - const formValues = formMethods.getValues(); - if ( - !formValues.reliabilityId || - !formValues.quantityId || - !formValues.startTime - ) { - alertContext.error(t("waterIngressRequiredFieldsAlert")); - } else { - setSelected(null); - } + data.type = ObservationType.waterIngress; + data.boreholeId = parentId; + return data; }; return ( - -
- - - - - - d.schema === - hydrogeologySchemaConstants.waterIngressQuantity, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - d.schema === - hydrogeologySchemaConstants.waterIngressConditions, - ) - .sort((a, b) => a.order - b.order) - .map(d => ({ - key: d.id, - name: d[i18n.language], - }))} - /> - - - - - closeFormIfCompleted()} - /> - - - -
-
+ + + + + d.schema === hydrogeologySchemaConstants.waterIngressQuantity, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + d.schema === hydrogeologySchemaConstants.waterIngressConditions, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + ); }; diff --git a/src/client/src/components/buttons/buttons.js b/src/client/src/components/buttons/buttons.js index a9a337db8..4c1cc74ec 100644 --- a/src/client/src/components/buttons/buttons.js +++ b/src/client/src/components/buttons/buttons.js @@ -53,3 +53,27 @@ export const BaseIconButton = styled(IconButton)({ export const IconButtonWithMargin = styled(BaseIconButton)({ marginLeft: "5px", }); + +export const BdmsIconButton = ({ + icon, + tooltipLabel, + color, + disabled, + onClick, +}) => { + const { t } = useTranslation(); + var colorToUse = color ? color : ButtonColor.default; + return ( + + + + {icon} + + + + ); +}; diff --git a/src/client/src/components/dataCard/dataDisplayCard.js b/src/client/src/components/dataCard/dataDisplayCard.js new file mode 100644 index 000000000..0413452af --- /dev/null +++ b/src/client/src/components/dataCard/dataDisplayCard.js @@ -0,0 +1,41 @@ +import React from "react"; +import { Stack } from "@mui/material"; +import ModeEditIcon from "@mui/icons-material/ModeEdit"; +import DeleteIcon from "@mui/icons-material/Delete"; +import { DataCardButtonContainer } from "../dataCard/dataCard"; +import { BdmsIconButton, ButtonColor } from "../buttons/buttons"; + +export const DataDisplayCard = props => { + const { item, selected, setSelected, deleteData, isEditable } = props; + + return ( + <> + + {props.children} + + {isEditable && ( + + } + tooltipLabel={"edit"} + onClick={e => { + e.stopPropagation(); + !selected && setSelected(item); + }} + /> + } + tooltipLabel={"delete"} + color={ButtonColor.error} + onClick={e => { + e.stopPropagation(); + !selected && deleteData(item.id); + }} + /> + + )} + + ); +}; + +export default DataDisplayCard; diff --git a/src/client/src/components/dataCard/dataInputCard.js b/src/client/src/components/dataCard/dataInputCard.js new file mode 100644 index 000000000..0832e827a --- /dev/null +++ b/src/client/src/components/dataCard/dataInputCard.js @@ -0,0 +1,68 @@ +import React, { useEffect } from "react"; +import { useForm, FormProvider } from "react-hook-form"; +import { Stack } from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; +import SaveIcon from "@mui/icons-material/Save"; +import { DataCardButtonContainer } from "../dataCard/dataCard"; +import { BdmsIconButton } from "../buttons/buttons"; + +export const DataInputCard = props => { + const { item, setSelected, addData, updateData, prepareFormDataForSubmit } = + props; + const formMethods = useForm(); + + // trigger form validation on mount + useEffect(() => { + formMethods.trigger(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [formMethods.trigger]); + + const submitForm = data => { + data = prepareFormDataForSubmit(data); + if (item.id === 0) { + addData({ + ...data, + }); + } else { + updateData({ + ...item, + ...data, + }); + } + }; + + const closeFormIfCompleted = () => { + if (formMethods.formState.isValid) { + formMethods.handleSubmit(submitForm)(); + setSelected(null); + } + }; + + return ( + +
+ + {props.children} + + + } + tooltipLabel={"cancel"} + onClick={() => { + formMethods.reset(); + setSelected(null); + }} + /> + } + tooltipLabel={"save"} + disabled={!formMethods.formState.isValid} + onClick={() => closeFormIfCompleted()} + /> + +
+
+ ); +}; + +export default DataInputCard; From d4093de001a7f8d420cce057350ed613e8038da5 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Fri, 2 Feb 2024 15:11:25 +0100 Subject: [PATCH 11/44] Fix cypress label --- src/client/cypress/e2e/editor/waterIngress.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/cypress/e2e/editor/waterIngress.cy.js b/src/client/cypress/e2e/editor/waterIngress.cy.js index 22b29e05a..10cffad75 100644 --- a/src/client/cypress/e2e/editor/waterIngress.cy.js +++ b/src/client/cypress/e2e/editor/waterIngress.cy.js @@ -97,7 +97,7 @@ describe("Tests for the wateringress editor.", () => { // edit wateringress cy.get('[data-cy="edit-button"]').click({ force: true }); setSelect("quantityId", 1); - cy.get('[data-cy="close-icon"]').click({ force: true }); + cy.get('[data-cy="close-button"]').click({ force: true }); evaluateDisplayValue("quantity", "mittel (30 - 120 l/min)"); // delete wateringress From 6a1b7e4318811f6ea3bbb8e142d2616363289e92 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Mon, 5 Feb 2024 09:02:55 +0100 Subject: [PATCH 12/44] Fix test --- src/client/cypress/e2e/editor/waterIngress.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/cypress/e2e/editor/waterIngress.cy.js b/src/client/cypress/e2e/editor/waterIngress.cy.js index 10cffad75..b774752bd 100644 --- a/src/client/cypress/e2e/editor/waterIngress.cy.js +++ b/src/client/cypress/e2e/editor/waterIngress.cy.js @@ -97,7 +97,7 @@ describe("Tests for the wateringress editor.", () => { // edit wateringress cy.get('[data-cy="edit-button"]').click({ force: true }); setSelect("quantityId", 1); - cy.get('[data-cy="close-button"]').click({ force: true }); + cy.get('[data-cy="save-button"]').click({ force: true }); evaluateDisplayValue("quantity", "mittel (30 - 120 l/min)"); // delete wateringress From 686c6e5b021e2024881b92ac8623c2faa97ef30b Mon Sep 17 00:00:00 2001 From: tschumpr Date: Mon, 5 Feb 2024 09:36:18 +0100 Subject: [PATCH 13/44] Fix parameter unit endAdornment --- .../borehole/hydrogeology/fieldMeasurementInput.js | 12 ++++++------ src/client/src/components/form/formSelect.js | 14 +++++++++++++- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js index 02ccd13b4..943f17277 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js @@ -1,5 +1,4 @@ -import React from "react"; -import { useForm } from "react-hook-form"; +import React, { useState } from "react"; import { InputAdornment, Stack } from "@mui/material"; import { FormInput, FormSelect } from "../../../../components/form/form"; import { DataInputCard } from "../../../../components/dataCard/dataInputCard"; @@ -14,7 +13,7 @@ const FieldMeasurementInput = props => { const { item, setSelected, parentId, addData, updateData } = props; const domains = useDomains(); const { i18n } = useTranslation(); - const formMethods = useForm(); + const [parameterId, setParameterId] = useState(null); const prepareFormDataForSubmit = data => { data?.startTime ? (data.startTime += ":00.000Z") : (data.startTime = null); @@ -30,8 +29,6 @@ const FieldMeasurementInput = props => { ]; }; - const currentParameterId = formMethods.getValues("parameterId"); - return ( { key: d.id, name: d[i18n.language], }))} + onUpdate={value => { + setParameterId(value); + }} />
@@ -86,7 +86,7 @@ const FieldMeasurementInput = props => { inputProps={{ endAdornment: ( - {currentParameterId && getParameterUnit(currentParameterId)} + {parameterId && getParameterUnit(parameterId)} ), }} diff --git a/src/client/src/components/form/formSelect.js b/src/client/src/components/form/formSelect.js index 3fe4f46bc..972f50e8c 100644 --- a/src/client/src/components/form/formSelect.js +++ b/src/client/src/components/form/formSelect.js @@ -4,7 +4,16 @@ import { useFormContext } from "react-hook-form"; import { FormField, getInputFieldBackgroundColor } from "./form"; export const FormSelect = props => { - const { fieldName, label, required, disabled, selected, values, sx } = props; + const { + fieldName, + label, + required, + disabled, + selected, + values, + sx, + onUpdate, + } = props; const { t } = useTranslation(); const { formState, register, setValue } = useFormContext(); @@ -40,6 +49,9 @@ export const FormSelect = props => { required: required || false, onChange: e => { setValue(fieldName, e.target.value, { shouldValidate: true }); + if (onUpdate) { + onUpdate(e.target.value); + } }, })} defaultValue={selected || ""} From c33c828646d0fbb1d90d9bdf74f2942bfa00f35e Mon Sep 17 00:00:00 2001 From: tschumpr Date: Mon, 5 Feb 2024 14:51:48 +0100 Subject: [PATCH 14/44] Remove temp card on cancel --- src/client/src/components/dataCard/dataCards.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/client/src/components/dataCard/dataCards.js b/src/client/src/components/dataCard/dataCards.js index 47a1cb9f4..3fa2edc57 100644 --- a/src/client/src/components/dataCard/dataCards.js +++ b/src/client/src/components/dataCard/dataCards.js @@ -64,6 +64,13 @@ export const DataCards = props => { loadData(state.index); }; + useEffect(() => { + if (selected === null) { + setDisplayed(state.data); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selected]); + useEffect(() => { mounted.current = true; loadData(0); From b3edf7c0f6881d8762d6195bd1ad7222ee03c615 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Tue, 6 Feb 2024 16:14:13 +0100 Subject: [PATCH 15/44] Use dataCard and multiSelect form --- src/client/public/locale/common.json | 1 + src/client/public/locale/de/common.json | 1 + src/client/public/locale/en/common.json | 1 + src/client/public/locale/fr/common.json | 1 + src/client/public/locale/it/common.json | 1 + src/client/src/api/fetchApiV2.js | 62 +- .../form/borehole/hydrogeology/hydrotest.js | 153 +--- .../borehole/hydrogeology/hydrotestDisplay.js | 252 +++--- .../borehole/hydrogeology/hydrotestInput.js | 735 +++++++----------- .../hydrogeology/hydrotestResultTable.js | 402 ---------- src/client/src/components/form/form.js | 1 + src/client/src/components/form/formDisplay.js | 56 +- .../src/components/form/formMultiSelect.js | 126 +++ 13 files changed, 635 insertions(+), 1157 deletions(-) delete mode 100644 src/client/src/commons/form/borehole/hydrogeology/hydrotestResultTable.js create mode 100644 src/client/src/components/form/formMultiSelect.js diff --git a/src/client/public/locale/common.json b/src/client/public/locale/common.json index ca37137ce..dde62ed63 100644 --- a/src/client/public/locale/common.json +++ b/src/client/public/locale/common.json @@ -6,6 +6,7 @@ "addCasing": "", "addFilling": "", "addHydrotest": "", + "addHydrotestResult": "", "addFieldmeasurement": "", "addGroundwaterLevelMeasurement": "", "addWaterIngress": "", diff --git a/src/client/public/locale/de/common.json b/src/client/public/locale/de/common.json index 0a4b8ea45..fc62f9420 100644 --- a/src/client/public/locale/de/common.json +++ b/src/client/public/locale/de/common.json @@ -6,6 +6,7 @@ "addCasing": "Verrohrung hinzufügen", "addFilling": "Hinterfüllung hinzufügen", "addHydrotest": "Hydrotest hinzufügen", + "addHydrotestResult": "Resultat hinzufügen", "addFieldmeasurement": "Feldmessung hinzufügen", "addGroundwaterLevelMeasurement": "Grundwassermessung hinzufügen", "addWaterIngress": "Wasserzutritt hinzufügen", diff --git a/src/client/public/locale/en/common.json b/src/client/public/locale/en/common.json index 4e2fbebc5..874366559 100644 --- a/src/client/public/locale/en/common.json +++ b/src/client/public/locale/en/common.json @@ -6,6 +6,7 @@ "addCasing": "Add casing", "addFilling": "Add backfill", "addHydrotest": "Add hydrotest", + "addHydrotestResult": "Add result", "addFieldmeasurement": "Add field measurement", "addGroundwaterLevelMeasurement": "Add groundwater measurement", "addWaterIngress": "Add water ingress", diff --git a/src/client/public/locale/fr/common.json b/src/client/public/locale/fr/common.json index bc79065e5..e920ca22b 100644 --- a/src/client/public/locale/fr/common.json +++ b/src/client/public/locale/fr/common.json @@ -6,6 +6,7 @@ "addCasing": "Ajouter un tubage", "addFilling": "Ajouter un remplissage", "addHydrotest": "Ajouter un hydro-test", + "addHydrotestResult": "Ajouter un résultat", "addFieldmeasurement": "Ajouter une mesure de terrain", "addGroundwaterLevelMeasurement": "Ajouter une mesure des eaux souterraines", "addWaterIngress": "Ajouter une venue d'eau", diff --git a/src/client/public/locale/it/common.json b/src/client/public/locale/it/common.json index dc9f27e40..42d30fda6 100644 --- a/src/client/public/locale/it/common.json +++ b/src/client/public/locale/it/common.json @@ -6,6 +6,7 @@ "addCasing": "Aggiungere una tubazione", "addFilling": "Aggiungere un'riempimento", "addHydrotest": "Aggiungere un test idrico", + "addHydrotestResult": "Aggiungere un risultato", "addFieldmeasurement": "Aggiungere una misurazione in campo", "addGroundwaterLevelMeasurement": "Aggiungere una misurazione delle acque sotterranee", "addWaterIngress": "Aggiungere un ingresso d'acqua", diff --git a/src/client/src/api/fetchApiV2.js b/src/client/src/api/fetchApiV2.js index 10f77b0d8..814eeba52 100644 --- a/src/client/src/api/fetchApiV2.js +++ b/src/client/src/api/fetchApiV2.js @@ -530,60 +530,20 @@ export const deleteCompletion = async id => { return await fetchApiV2(`completion?id=${id}`, "DELETE"); }; -export const hydrotestQueryKey = "hydrotests"; +export const getHydrotests = async boreholeId => { + return await fetchApiV2(`hydrotest?boreholeId=${boreholeId}`, "GET"); +}; -export const useHydrotests = boreholeId => - useQuery({ - queryKey: [hydrotestQueryKey, boreholeId], - queryFn: async () => { - return await fetchApiV2(`hydrotest?boreholeId=${boreholeId}`, "GET"); - }, - }); +export const addHydrotest = async hydrotest => { + return await fetchApiV2("hydrotest", "POST", hydrotest); +}; -export const useHydrotestMutations = () => { - const queryClient = useQueryClient(); - const useAddHydrotests = useMutation( - async hydrotest => { - return await fetchApiV2("hydrotest", "POST", hydrotest); - }, - { - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [hydrotestQueryKey], - }); - }, - }, - ); - const useUpdateHydrotests = useMutation( - async hydrotest => { - return await fetchApiV2("hydrotest", "PUT", hydrotest); - }, - { - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [hydrotestQueryKey], - }); - }, - }, - ); - const useDeleteHydrotests = useMutation( - async hydrotestId => { - return await fetchApiV2(`hydrotest?id=${hydrotestId}`, "DELETE"); - }, - { - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [hydrotestQueryKey], - }); - }, - }, - ); +export const updateHydrotest = async hydrotest => { + return await fetchApiV2("hydrotest", "PUT", hydrotest); +}; - return { - add: useAddHydrotests, - update: useUpdateHydrotests, - delete: useDeleteHydrotests, - }; +export const deleteHydrotest = async id => { + return await fetchApiV2(`hydrotest?id=${id}`, "DELETE"); }; export const getInstrumentation = async completionId => { diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotest.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotest.js index e4720e505..2b243be7d 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotest.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotest.js @@ -1,143 +1,28 @@ -import React, { useState, useEffect, useMemo, createRef } from "react"; -import { useTranslation } from "react-i18next"; -import { CircularProgress, Typography } from "@mui/material"; -import { AddButton } from "../../../../components/buttons/buttons"; +import React from "react"; import { - DataCard, - DataCardItem, - DataCardContainer, - DataCardButtonContainer, -} from "../../../../components/dataCard/dataCard"; -import { - FullPage, - FullPageCentered, -} from "../../../../components/baseComponents"; - -import { - useHydrotestMutations, - useHydrotests, + getHydrotests, + addHydrotest, + updateHydrotest, + deleteHydrotest, } from "../../../../api/fetchApiV2"; import HydrotestInput from "./hydrotestInput"; import HydrotestDisplay from "./hydrotestDisplay"; +import { DataCards } from "../../../../components/dataCard/dataCards"; const Hydrotest = ({ isEditable, boreholeId }) => { - const { data: hydrotests, isSuccess } = useHydrotests(boreholeId); - const { t } = useTranslation(); - const { - add: { mutate: addHydrotest }, - update: { mutate: updateHydrotest }, - delete: { mutate: deleteHydrotest }, - } = useHydrotestMutations(); - const [selectedHydrotest, setSelectedHydrotest] = useState(null); - const [displayedHydrotests, setDisplayedHydrotests] = useState([]); - const [addedHydrotestFromResultTable, setAddedHydrotestFromResultTable] = - useState(false); - - useEffect(() => { - setDisplayedHydrotests(hydrotests); - }, [hydrotests]); - - // scroll to newly added item - const hydrotestRefs = useMemo( - () => - Array(displayedHydrotests?.length) - .fill(null) - .map(() => createRef(null)), - [displayedHydrotests], - ); - - // keep form open if hydrotest was saved when adding a test result. - useEffect(() => { - if (addedHydrotestFromResultTable) { - const sortedtests = hydrotests?.sort( - (a, b) => new Date(b.updated) - new Date(a.updated), - ); - setSelectedHydrotest(sortedtests[0]); - setAddedHydrotestFromResultTable(false); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [hydrotests]); - - useEffect(() => { - if (displayedHydrotests?.length > 0) { - const lastHydrotestRef = hydrotestRefs[displayedHydrotests?.length - 1]; - if (displayedHydrotests[displayedHydrotests?.length - 1].id === 0) - lastHydrotestRef.current.scrollIntoView({ - behavior: "smooth", - block: "center", - }); - } - }, [displayedHydrotests, hydrotestRefs]); - return ( - - - {isEditable && ( - { - e.stopPropagation(); - if (!selectedHydrotest) { - const tempHydrotest = { id: 0 }; - setDisplayedHydrotests([...hydrotests, tempHydrotest]); - setSelectedHydrotest(tempHydrotest); - } - }}> - {t("addHydrotest")} - - )} - - {displayedHydrotests?.length > 0 ? ( - - {displayedHydrotests - .sort((a, b) => a.fromDepthM - b.fromDepthM) - .map((hydrotest, index) => { - const isSelected = selectedHydrotest?.id === hydrotest.id; - const isTempHydrotest = hydrotest.id === 0; - return ( - - {isSuccess ? ( - - {isEditable && isSelected ? ( - - ) : ( - !isTempHydrotest && ( - - ) - )} - - ) : ( - - - - )} - - ); - })} - - ) : ( - - - {t("msgHydrotestEmpty")} - - - )} - + } + renderDisplay={props => } + /> ); }; -export default React.memo(Hydrotest); +export default Hydrotest; diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js index 9b207f695..aff89fc44 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js @@ -1,125 +1,155 @@ import React from "react"; -import { Stack, Tooltip, Typography } from "@mui/material"; -import { - TypographyWithBottomMargin, - StackFullWidth, - StackHalfWidth, -} from "../../../../components/baseComponents"; -import ModeEditIcon from "@mui/icons-material/ModeEdit"; -import DeleteIcon from "@mui/icons-material/Delete"; import { useTranslation } from "react-i18next"; +import { + Table, + TableHead, + TableBody, + TableContainer, + TableRow, + TableCell, +} from "@mui/material"; +import { StackFullWidth } from "../../../../components/baseComponents"; +import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; +import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard"; import ObservationDisplay from "./observationDisplay"; -import HydrotestResultTable from "./hydrotestResultTable"; import { hydrogeologySchemaConstants } from "./hydrogeologySchemaConstants"; +import { TestResultParameterUnits } from "./parameterUnits"; +import { useDomains } from "../../../../api/fetchApiV2"; const HydrotestDisplay = props => { - const { - hydrotest, - selectedHydrotest, - setSelectedHydrotest, - isEditable, - deleteHydrotest, - } = props; + const { item, selected, setSelected, isEditable, deleteData } = props; const { t, i18n } = useTranslation(); + const domains = useDomains(); + + const getParameterUnit = parameterId => { + return TestResultParameterUnits[ + domains?.data?.find(d => d.id === parameterId).geolcode + ]; + }; + + const tableCellStyles = { + paddingRight: "3px", + paddingLeft: "3px", + flex: 1, + width: "20%", + maxWidth: "20%", + fontSize: "13px", + }; + + const tableHeaderStyles = { + fontWeight: 900, + padding: "3px", + flex: 1, + width: "20%", + maxWidth: "20%", + }; return ( - <> - - - - {t("hydrotest")} - - - - - {t("hydrotestKind")} - - {hydrotest.codelists - .filter( - c => c.schema === hydrogeologySchemaConstants.hydrotestKind, - ) - .map(c => c[i18n.language]) - .join(", ") || "-"} - - - - {t("flowDirection")} - - {hydrotest.codelists - .filter( - c => - c.schema === - hydrogeologySchemaConstants.hydrotestFlowDirection, - ) - .map(c => c[i18n.language]) - .join(", ") || "-"} - - - - - - - {t("evaluationMethod")} - - - {hydrotest.codelists - .filter( - c => - c.schema === - hydrogeologySchemaConstants.hydrotestEvaluationMethod, - ) - .map(c => c[i18n.language]) - .join(", ") || "-"} - - - - {hydrotest.hydrotestResults?.length > 0 && ( - <> - - {t("hydrotestResult")} - - {}} - editingId={null} - /> - + + + + c.schema === hydrogeologySchemaConstants.hydrotestKind, + )} + type={FormDisplayType.Domain} + /> + + c.schema === hydrogeologySchemaConstants.hydrotestFlowDirection, + )} + type={FormDisplayType.Domain} + /> + + + + c.schema === + hydrogeologySchemaConstants.hydrotestEvaluationMethod, )} - - - - { - e.stopPropagation(); - !selectedHydrotest && setSelectedHydrotest(hydrotest); - }} - /> - - - { - e.stopPropagation(); - !selectedHydrotest && deleteHydrotest(hydrotest.id); - }} - /> - - + type={FormDisplayType.Domain} + /> - + {item?.hydrotestResults?.length > 0 && ( + + + + + + {t("parameter")} + + {t("value")} + {t("minValue")} + {t("maxValue")} + {isEditable && ( + + )} + + + + {item?.hydrotestResults?.map((result, index) => ( + + + {domains?.data?.find(d => d.id === result.parameterId)?.[ + i18n.language + ] || ""} + + + {result?.value && ( + <> + {result?.value + " "} + {getParameterUnit(result.parameterId)} + + )} + + + {result?.minValue && ( + <> + {result?.value + " "} + {getParameterUnit(result.parameterId)} + + )} + + + {result?.maxValue && ( + <> + {result?.value + " "} + {getParameterUnit(result.parameterId)} + + )} + + + ))} + +
+
+ )} + ); }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js index a5b5c2bd6..e56edb07b 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js @@ -1,52 +1,49 @@ -import React, { useEffect, useContext, useState } from "react"; -import { useForm, FormProvider, Controller } from "react-hook-form"; +import React, { useEffect, useState } from "react"; +import { FormProvider, useFieldArray, useForm } from "react-hook-form"; +import { Box, InputAdornment, Stack, Typography } from "@mui/material"; import { - Box, - Chip, - FormControl, - IconButton, - MenuItem, - Stack, - Tooltip, - Typography, -} from "@mui/material"; + FormInput, + FormMultiSelect, + FormSelect, +} from "../../../../components/form/form"; +import { StackHalfWidth } from "../../../../components/baseComponents"; +import CloseIcon from "@mui/icons-material/Close"; +import SaveIcon from "@mui/icons-material/Save"; +import { DataCardButtonContainer } from "../../../../components/dataCard/dataCard"; +import { + AddButton, + BaseIconButton, + BdmsIconButton, + ButtonColor, +} from "../../../../components/buttons/buttons"; import ObservationInput from "./observationInput"; -import HydrotestResultTable from "./hydrotestResultTable"; -import CheckIcon from "@mui/icons-material/Check"; -import AddCircleIcon from "@mui/icons-material/AddCircle"; -import CancelIcon from "@mui/icons-material/Cancel"; import { useTranslation } from "react-i18next"; import { useHydrotestDomains, useDomains } from "../../../../api/fetchApiV2"; -import { AlertContext } from "../../../../components/alert/alertContext"; import { ObservationType } from "./observationType"; import { hydrogeologySchemaConstants } from "./hydrogeologySchemaConstants"; -import { - FormField, - getInputFieldBackgroundColor, -} from "../../../../components/form/form"; -import { StackHalfWidth } from "../../../../components/baseComponents"; +import { TestResultParameterUnits } from "./parameterUnits"; +import Delete from "@mui/icons-material/Delete"; + +const HydrotestInput = props => { + const { item, setSelected, parentId, addData, updateData } = props; + const domains = useDomains(); + const { t, i18n } = useTranslation(); + const formMethods = useForm({ + defaultValues: { + hydrotestResults: item?.hydrotestResults || [], + }, + }); + const { fields, append, remove } = useFieldArray({ + name: "hydrotestResults", + control: formMethods.control, + }); -const HydrotestInput = ({ - hydrotest, - setSelectedHydrotest, - boreholeId, - addHydrotest, - updateHydrotest, - setAddedHydrotestFromResultTable, -}) => { - const [isAddingHydrotestResult, setIsAddingHydrotestResult] = useState(false); - const [editingHydrotestResultId, setEditingHydrotestResultId] = - useState(null); const [hydrotestKindIds, setHydrotestKindIds] = useState( - hydrotest?.codelists + item?.codelists ?.filter(c => c.schema === hydrogeologySchemaConstants.hydrotestKind) .map(c => c.id) || [], ); - const domains = useDomains(); const filteredTestKindDomains = useHydrotestDomains(hydrotestKindIds); - const { t, i18n } = useTranslation(); - const formMethods = useForm(); - const alertContext = useContext(AlertContext); // trigger form validation on mount useEffect(() => { @@ -61,96 +58,69 @@ const HydrotestInput = ({ formValues?.filter(c => allowedIds?.includes(c)) || []; useEffect(() => { - // check the compatibility of codelists (flowdirection, evaluationMethod, hydrotestResultParameter) when the hydrotestKinds (and therefore the filteredTestKindDomains) change. - if (filteredTestKindDomains.data?.length > 0) { - const formValues = formMethods.getValues(); - // delete flowDirections, evaluationMethods that are not longer compatible with the selected hydrotestKinds. - const allowedEvalutationMethodId = getFilteredDomains( - hydrogeologySchemaConstants.hydrotestEvaluationMethod, - filteredTestKindDomains.data, - ); - const allowedFlowDirectionIds = getFilteredDomains( - hydrogeologySchemaConstants.hydrotestFlowDirection, - filteredTestKindDomains.data, - ); - - const compatibleEvaluationMethods = getCompatibleValues( - allowedEvalutationMethodId, - formValues.evaluationMethodId, - ); - const compatibleFlowDirections = getCompatibleValues( - allowedFlowDirectionIds, - formValues.flowDirectionId, - ); + if (hydrotestKindIds.length > 0) { + // check the compatibility of codelists (flowdirection, evaluationMethod, hydrotestResultParameter) when the hydrotestKinds (and therefore the filteredTestKindDomains) change. + if (filteredTestKindDomains.data?.length > 0) { + const formValues = formMethods.getValues(); - // set form values - formMethods.setValue("evaluationMethodId", compatibleEvaluationMethods); - formMethods.setValue("flowDirectionId", compatibleFlowDirections); + // delete flowDirections, evaluationMethods that are not longer compatible with the selected hydrotestKinds. + const allowedEvalutationMethodId = getFilteredDomains( + hydrogeologySchemaConstants.hydrotestEvaluationMethod, + filteredTestKindDomains.data, + ); + const allowedFlowDirectionIds = getFilteredDomains( + hydrogeologySchemaConstants.hydrotestFlowDirection, + filteredTestKindDomains.data, + ); - // delete hydrotestResults that are not longer compatible with the selected hydrotestKinds. - const allowedHydrotestResultParameterIds = getFilteredDomains( - hydrogeologySchemaConstants.hydrotestResultParameter, - filteredTestKindDomains.data, - ); + const compatibleEvaluationMethods = getCompatibleValues( + allowedEvalutationMethodId, + formValues.evaluationMethodId, + ); + const compatibleFlowDirections = getCompatibleValues( + allowedFlowDirectionIds, + formValues.flowDirectionId, + ); - const compatibleHydrotestParameterIds = getCompatibleValues( - allowedHydrotestResultParameterIds, - hydrotest.hydrotestResults?.map(h => h.parameterId), - ); + // set form values + formMethods.setValue("evaluationMethodId", compatibleEvaluationMethods); + formMethods.setValue("flowDirectionId", compatibleFlowDirections); - if (!(hydrotest?.hydrotestResults?.length > 0)) return; - const filteredHydrotestResults = hydrotest.hydrotestResults - .filter(h => compatibleHydrotestParameterIds.includes(h.parameterId)) - .map(r => { - delete r.parameter; - return r; - }); + // delete hydrotestResults that are not longer compatible with the selected hydrotestKinds. + const allowedHydrotestResultParameterIds = getFilteredDomains( + hydrogeologySchemaConstants.hydrotestResultParameter, + filteredTestKindDomains.data, + ); - if (filteredHydrotestResults.length >= hydrotest.hydrotestResults.length) - return; + const compatibleHydrotestResults = formValues.hydrotestResults?.filter( + r => allowedHydrotestResultParameterIds.includes(r.parameterId) || [], + ); - updateHydrotest({ - ...hydrotest, - codelistIds: - hydrotest?.codelists?.length > 0 - ? [...hydrotest?.codelists?.map(c => c.id)] - : [], - hydrotestResults: filteredHydrotestResults, - }); + formMethods.setValue("hydrotestResults", compatibleHydrotestResults); + } + } else { + formMethods.setValue("flowDirectionId", []); + formMethods.setValue("evaluationMethodId", []); + formMethods.setValue("hydrotestResults", []); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ - filteredTestKindDomains, - formMethods.getValues, - hydrotest, - formMethods.setValue, - updateHydrotest, - ]); + }, [hydrotestKindIds]); - const closeFormIfCompleted = () => { - const formValues = formMethods.getValues(); + useEffect(() => { + var currentValues = formMethods.getValues(); if ( - !formValues.reliabilityId || - !formValues.startTime || - formValues.testKindId?.length < 1 + currentValues?.testKindId?.toString() !== hydrotestKindIds?.toString() ) { - alertContext.error(t("hydrotestRequiredFieldsAlert")); - } else { - if (editingHydrotestResultId) { - alertContext.error(t("saveHydrotestResultAlert")); - } else { - formMethods.handleSubmit(submitForm)(); - setSelectedHydrotest(null); - } + setHydrotestKindIds(currentValues?.testKindId); } - }; - - const convertDateToIsoString = dateTime => - dateTime ? dateTime + ":00.000Z" : null; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [item, formMethods.getValues()["testKindId"]]); const prepareFormDataForSubmit = data => { - data.startTime = convertDateToIsoString(data?.startTime); - data.endTime = convertDateToIsoString(data?.endTime); + data?.startTime ? (data.startTime += ":00.000Z") : (data.startTime = null); + data?.endTime ? (data.endTime += ":00.000Z") : (data.endTime = null); + data.type = ObservationType.fieldMeasurement; + data.boreholeId = parentId; // add codelists data.codelistIds = [ @@ -167,347 +137,242 @@ const HydrotestInput = ({ const submitForm = data => { data = prepareFormDataForSubmit(data); - const hydrotestResults = - hydrotest.hydrotestResults?.map(h => { - delete h.hydrotestId; - delete h.parameter; - return h; - }) || []; - - if (data.startTime && data.reliabilityId) { - if (hydrotest.id === 0) { - addHydrotest({ - ...data, - type: ObservationType.hydrotest, - boreholeId: boreholeId, - hydrotestResults: hydrotestResults, - }); - } else { - delete hydrotest.casing; - delete hydrotest.reliability; - updateHydrotest({ - ...hydrotest, - ...data, - }); - } + if (item.id === 0) { + addData({ + ...data, + }); } else { - setSelectedHydrotest(null); - } - }; - - const deleteHydrotestResults = () => { - if (hydrotest?.hydrotestResults?.length > 0) { - updateHydrotest({ - ...hydrotest, - codelistIds: [...hydrotest.codelistIds, ...hydrotestKindIds], - hydrotestResults: [], + updateData({ + ...item, + ...data, }); } }; - const resetRelatedFormValues = () => { - formMethods.setValue("flowDirectionId", []); - formMethods.setValue("evaluationMethodId", []); - deleteHydrotestResults(); - }; - - const handleDeleteHover = field => { - if ( - field.name === "testKindId" && - hydrotest?.hydrotestResults?.length > 0 - ) { - alertContext.error(t("hydrotestResultsWillBeDeleted")); + const closeFormIfCompleted = () => { + if (formMethods.formState.isValid) { + formMethods.handleSubmit(submitForm)(); + setSelected(null); } }; - const ChipBox = (selection, field) => { - const handleDelete = valueToDelete => { - const updatedValues = field.value.filter( - value => value !== valueToDelete, - ); - field.onChange(updatedValues); - setHydrotestKindIds(updatedValues); - - if (updatedValues.length === 0) { - resetRelatedFormValues(); - formMethods.trigger(); - } - }; - return ( - - {selection.map(selectedValue => { - const selectedOption = domains?.data?.find( - option => option.id === selectedValue, - ); - return ( - e.stopPropagation()} - onMouseOver={() => handleDeleteHover(field)} - /> - } - onClick={e => e.stopPropagation()} - onDelete={e => { - e.stopPropagation(); - handleDelete(selectedValue); - }} - /> - ); - })} - - ); + const getParameterUnit = parameterId => { + return TestResultParameterUnits[ + domains?.data?.find(d => d.id === parameterId).geolcode + ]; }; - const canAddHydrotestResults = - formMethods.formState.isValid && - !isAddingHydrotestResult && - !editingHydrotestResultId && - filteredTestKindDomains?.data?.length !== 0; - return (
- - - - {t("hydrotest")} - - - - - - c.schema === - hydrogeologySchemaConstants.hydrotestKind, - ) - .map(c => c.id) || [] - } - rules={{ required: true }} - render={({ field }) => ( - ChipBox(selection, field), - }} - sx={{ - backgroundColor: getInputFieldBackgroundColor( - formMethods.formState.errors.testKindId, - ), - }} - onChange={e => { - e.stopPropagation(); - field.onChange(e.target.value); - if (e.target.value.length === 0) { - resetRelatedFormValues(); - } - formMethods.trigger(); - setHydrotestKindIds(e.target.value); - }}> - {domains?.data - ?.filter( - d => - d.schema === - hydrogeologySchemaConstants.hydrotestKind, - ) - .sort((a, b) => a.order - b.order) - .map(d => ( - - {d[i18n.language]} - - ))} - - )} - /> - - - - c.schema === - hydrogeologySchemaConstants.hydrotestFlowDirection, - ) - .map(c => c.id) || [] - } - render={({ field }) => ( - - d.schema === - hydrogeologySchemaConstants.hydrotestFlowDirection, - ).length > 0 - } - label={t("flowDirection")} - variant="outlined" - size="small" - value={field.value || ""} - data-cy="flow-direction-select" - InputLabelProps={{ shrink: true }} - SelectProps={{ - multiple: true, - renderValue: selection => ChipBox(selection, field), - }} - onChange={e => { - e.stopPropagation(); - field.onChange(e.target.value); - }}> - {filteredTestKindDomains?.data - ?.filter( - d => - d.schema === - hydrogeologySchemaConstants.hydrotestFlowDirection, - ) - .map(d => ( - - {d[i18n.language]} - - ))} - - )} - /> - - - - - + + + c.schema === hydrogeologySchemaConstants.hydrotestKind, + ) + .map(c => c.id) || [] + } + values={domains?.data + ?.filter( + d => d.schema === hydrogeologySchemaConstants.hydrotestKind, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + c.schema === + hydrogeologySchemaConstants.hydrotestFlowDirection, + ) + .map(c => c.id) || [] + } + disabled={ + !!formMethods.errors?.testKindId || + !filteredTestKindDomains?.data?.filter( + d => + d.schema === + hydrogeologySchemaConstants.hydrotestFlowDirection, + ).length > 0 + } + values={filteredTestKindDomains?.data + ?.filter( + d => + d.schema === + hydrogeologySchemaConstants.hydrotestFlowDirection, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + + + c.schema === + hydrogeologySchemaConstants.hydrotestEvaluationMethod, + ) + .map(c => c.id) || [] + } + disabled={ + !!formMethods?.errors?.testKindId || + !filteredTestKindDomains?.data?.filter( + d => + d.schema === + hydrogeologySchemaConstants.hydrotestEvaluationMethod, + ).length > 0 + } + values={filteredTestKindDomains?.data + ?.filter( + d => + d.schema === + hydrogeologySchemaConstants.hydrotestEvaluationMethod, + ) + .sort((a, b) => a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + {formMethods.getValues().testKindId?.length > 0 && ( + + + + {t("hydrotestResult")} + + { + append({ + parameterId: null, + value: null, + minValue: null, + maxValue: null, + }); + }}> + {t("addHydrotestResult")} + + + {fields.map((field, index) => ( + + - c.schema === - hydrogeologySchemaConstants.hydrotestEvaluationMethod, + d => + d.schema === + hydrogeologySchemaConstants.hydrotestResultParameter, ) - .map(c => c.id) || [] - } - render={({ field }) => ( - - d.schema === - hydrogeologySchemaConstants.hydrotestEvaluationMethod, - ).length > 0 - } - label={t("evaluationMethod")} - variant="outlined" - size="small" - value={field.value || ""} - data-cy="evaluation-method-select" - InputLabelProps={{ shrink: true }} - SelectProps={{ - multiple: true, - renderValue: selection => ChipBox(selection, field), - }} - onChange={e => { - e.stopPropagation(); - field.onChange(e.target.value); - }}> - {filteredTestKindDomains?.data - ?.filter( - d => - d.schema === - hydrogeologySchemaConstants.hydrotestEvaluationMethod, - ) - .map(d => ( - - {d[i18n.language]} - - ))} - - )} - /> - - - - - {t("hydrotestResult")} - - - - a.order - b.order) + .map(d => ({ + key: d.id, + name: d[i18n.language], + }))} + /> + + {field.parameterId && + getParameterUnit(field.parameterId)} + + ), }} - data-cy="add-hydrotestresult-button" - onClick={e => { - formMethods.formState.isValid && - setIsAddingHydrotestResult(true); - !formMethods.formState.isValid && - alertContext.error(t("hydrotestRequiredFieldsAlert")); + /> + + {field.parameterId && + getParameterUnit(field.parameterId)} + + ), }} /> - - - - - - - - closeFormIfCompleted()} - /> - - + + {field.parameterId && + getParameterUnit(field.parameterId)} + + ), + }} + /> + + remove(index)} /> + + + ))} + + )} + + } + tooltipLabel={"cancel"} + onClick={() => { + formMethods.reset(); + setSelected(null); + }} + /> + } + tooltipLabel={"save"} + disabled={!formMethods.formState.isValid} + onClick={() => closeFormIfCompleted()} + /> +
); diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestResultTable.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestResultTable.js deleted file mode 100644 index 9d2bf0f68..000000000 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestResultTable.js +++ /dev/null @@ -1,402 +0,0 @@ -import React, { useState, useEffect, useContext } from "react"; -import { useTranslation } from "react-i18next"; -import { - InputAdornment, - MenuItem, - Stack, - Table, - TableHead, - TableBody, - TableContainer, - TableRow, - TableCell, - TextField, - Tooltip, -} from "@mui/material"; -import ModeEditIcon from "@mui/icons-material/ModeEdit"; -import DeleteIcon from "@mui/icons-material/Delete"; -import CheckIcon from "@mui/icons-material/Check"; -import { useDomains } from "../../../../api/fetchApiV2"; -import { TestResultParameterUnits } from "./parameterUnits"; -import { AlertContext } from "../../../../components/alert/alertContext"; -import { hydrogeologySchemaConstants } from "./hydrogeologySchemaConstants"; - -const HydrotestResultTable = ({ - isEditable, - hydrotest, - isAddingHydrotestResult, - setIsAddingHydrotestResult, - updateHydrotest, - handleSubmit, - submitForm, - setAddedHydrotestFromResultTable, - filteredTestKindDomains, - hydrotestKindIds, - editingId, - setEditingId, -}) => { - const [formValues, setFormValues] = useState({ - parameterId: null, - value: null, - minValue: null, - maxValue: null, - }); - const [displayedHydrotestResults, setDisplayedHydrotestResults] = useState( - [], - ); - const { t, i18n } = useTranslation(); - const alertContext = useContext(AlertContext); - const domains = useDomains(); - - const handleChange = field => e => { - setFormValues({ - ...formValues, - [field]: e.target.value, - }); - }; - - const removeParameter = results => { - return results.map(r => { - delete r.parameter; - return r; - }); - }; - - const addHydrotestResult = newTestResult => { - if (hydrotest.id === 0) { - hydrotest.hydrotestResults = [newTestResult]; - handleSubmit(submitForm)(); - setAddedHydrotestFromResultTable(true); - } else { - const existingResults = removeParameter(hydrotest.hydrotestResults || []); - updateHydrotest({ - ...hydrotest, - codelistIds: [...hydrotest.codelistIds, ...hydrotestKindIds], - hydrotestResults: [...existingResults, newTestResult], - }); - } - }; - - const updateHydrotestResult = (id, updatedTestResult) => { - const unchangedResults = removeParameter( - hydrotest?.hydrotestResults.filter(r => r.id !== id), - ); - updateHydrotest({ - ...hydrotest, - codelistIds: [...hydrotest.codelistIds, ...hydrotestKindIds], - hydrotestResults: [...unchangedResults, updatedTestResult], - }); - }; - - const deleteHydrotestResult = id => { - const remainingResults = removeParameter( - hydrotest?.hydrotestResults.filter(r => r.id !== id), - ); - updateHydrotest({ - ...hydrotest, - codelistIds: [...hydrotest.codelistIds, ...hydrotestKindIds], - hydrotestResults: [...remainingResults], - }); - }; - - const handleClose = id => { - if (!formValues.parameterId) { - alertContext.error(t("hydrotestResultRequiredFieldsAlert")); - } else { - if (id === 0) { - addHydrotestResult({ - ...formValues, - hydrotestId: hydrotest.Id, - }); - } else { - updateHydrotestResult(id, { - ...formValues, - hydrotestId: hydrotest.Id, - }); - } - setEditingId(null); - resetForm(); - setIsAddingHydrotestResult(false); - } - }; - - const resetForm = () => { - setFormValues({ - parameterId: null, - value: null, - minValue: null, - maxValue: null, - }); - }; - - // set form values when editing a result - useEffect(() => { - if (editingId) { - const editingHydrotestResult = hydrotest.hydrotestResults?.find( - r => r.id === editingId || r.tempId === editingId, - ); - setFormValues({ - parameterId: editingHydrotestResult?.parameterId, - value: editingHydrotestResult?.value, - minValue: editingHydrotestResult?.minValue, - maxValue: editingHydrotestResult?.maxValue, - }); - } - }, [ - editingId, - hydrotest.hydrotestResults, - hydrotest.hydrotestResults?.length, - ]); - - // update hydrotestResults when adding a result - useEffect(() => { - const baseHydrotestResults = - hydrotest?.hydrotestResults?.length > 0 ? hydrotest.hydrotestResults : []; - const newResults = isAddingHydrotestResult - ? [...baseHydrotestResults, { tempId: 0 }] - : baseHydrotestResults; - setDisplayedHydrotestResults(newResults); - }, [isAddingHydrotestResult, hydrotest]); - - const tableCellStyles = { - paddingRight: "3px", - paddingLeft: "3px", - flex: 1, - width: "20%", - maxWidth: "20%", - }; - - const tableHeaderStyles = { - fontWeight: 900, - padding: "3px", - flex: 1, - width: "20%", - maxWidth: "20%", - }; - - const getParameterUnit = parameterId => { - return TestResultParameterUnits[ - domains?.data?.find(d => d.id === parameterId).geolcode - ]; - }; - - return ( - - - - - - {t("parameter")} - - {t("value")} - {t("minValue")} - {t("maxValue")} - {isEditable && ( - - )} - - - - {displayedHydrotestResults?.length > 0 && - displayedHydrotestResults?.map((result, index) => { - const isEditing = - result.id === editingId || result.tempId === editingId; - const isAdding = result.tempId === 0; - const id = result.id || result.tempId || 0; - return ( - - - {isEditing || isAdding ? ( - - {filteredTestKindDomains?.data - ?.filter( - d => - d.schema === - hydrogeologySchemaConstants.hydrotestResultParameter, - ) - .map(d => ( - - {d[i18n.language]} - - ))} - - ) : ( - domains?.data?.find(d => d.id === result.parameterId)?.[ - i18n.language - ] || "" - )} - - - {isEditing || isAdding ? ( - - {formValues.parameterId && - getParameterUnit(formValues.parameterId)} - - ), - }} - onChange={handleChange("value")} - /> - ) : ( - result?.value && ( - <> - {result?.value + " "} - {getParameterUnit(result.parameterId)} - - ) - )} - - - {isEditing || isAdding ? ( - - {formValues.parameterId && - getParameterUnit(formValues.parameterId)}{" "} - - ), - }} - onChange={handleChange("minValue")} - /> - ) : ( - result?.minValue && ( - <> - {result?.minValue + " "} - {getParameterUnit(result.parameterId)} - - ) - )} - - - {isEditing || isAdding ? ( - - {formValues.parameterId && - getParameterUnit(formValues.parameterId)} - - ), - }} - onChange={handleChange("maxValue")} - /> - ) : ( - result?.maxValue && ( - <> - {result?.maxValue + " "} - {getParameterUnit(result.parameterId)} - - ) - )} - - {isEditable && ( - - - {isEditing || isAdding ? ( - - { - e.stopPropagation(); - handleClose(id); - }} - /> - - ) : ( - <> - - { - e.stopPropagation(); - setEditingId(id); - }} - /> - - - { - e.stopPropagation(); - deleteHydrotestResult(id); - }} - /> - - - )} - - - )} - - ); - })} - -
-
- ); -}; - -export default React.memo(HydrotestResultTable); diff --git a/src/client/src/components/form/form.js b/src/client/src/components/form/form.js index 515bb5dfc..67bdd0f4e 100644 --- a/src/client/src/components/form/form.js +++ b/src/client/src/components/form/form.js @@ -16,5 +16,6 @@ export const FormField = styled(TextField)(() => ({ export { FormInput } from "./formInput"; export { FormSelect } from "./formSelect"; +export { FormMultiSelect } from "./formMultiSelect"; export { FormCheckbox } from "./formCheckbox"; export { FormDisplay, FormDisplayType } from "./formDisplay"; diff --git a/src/client/src/components/form/formDisplay.js b/src/client/src/components/form/formDisplay.js index 854f8bdd6..b93cb1ab5 100644 --- a/src/client/src/components/form/formDisplay.js +++ b/src/client/src/components/form/formDisplay.js @@ -12,33 +12,41 @@ export const FormDisplay = props => { const { label, value, type, sx } = props; const { t, i18n } = useTranslation(); + const convert = value => { + if (type === FormDisplayType.Date) { + const date = new Date(value); + const dateTimeFormat = new Intl.DateTimeFormat("de-CH", { + year: "numeric", + month: "short", + day: "2-digit", + }); + return dateTimeFormat.format(date); + } else if (type === FormDisplayType.DateTime) { + const date = new Date(value); + const dateTimeFormat = new Intl.DateTimeFormat("de-CH", { + year: "numeric", + month: "short", + day: "2-digit", + hour: "2-digit", + minute: "2-digit", + timeZone: "UTC", + }); + return dateTimeFormat.format(date); + } else if (type === FormDisplayType.Boolean) { + return value ? t("yes") : t("no"); + } else if (type === FormDisplayType.Domain) { + return value?.[i18n.language]; + } else { + return value; + } + }; + const formatValue = value => { if (value != null || value === 0) { - if (type === FormDisplayType.Date) { - const date = new Date(value); - const dateTimeFormat = new Intl.DateTimeFormat("de-CH", { - year: "numeric", - month: "short", - day: "2-digit", - }); - return dateTimeFormat.format(date); - } else if (type === FormDisplayType.DateTime) { - const date = new Date(value); - const dateTimeFormat = new Intl.DateTimeFormat("de-CH", { - year: "numeric", - month: "short", - day: "2-digit", - hour: "2-digit", - minute: "2-digit", - timeZone: "UTC", - }); - return dateTimeFormat.format(date); - } else if (type === FormDisplayType.Boolean) { - return value ? t("yes") : t("no"); - } else if (type === FormDisplayType.Domain) { - return value?.[i18n.language] || "-"; + if (Array.isArray(value)) { + return value.map(v => convert(v)).join(", "); } else { - return value; + return convert(value); } } else { return "-"; diff --git a/src/client/src/components/form/formMultiSelect.js b/src/client/src/components/form/formMultiSelect.js new file mode 100644 index 000000000..1bab80048 --- /dev/null +++ b/src/client/src/components/form/formMultiSelect.js @@ -0,0 +1,126 @@ +import { Box, Chip, MenuItem } from "@mui/material"; +import CancelIcon from "@mui/icons-material/Cancel"; +import { useTranslation } from "react-i18next"; +import { useFormContext, Controller } from "react-hook-form"; +import { FormField, getInputFieldBackgroundColor } from "./form"; + +export const FormMultiSelect = props => { + const { + fieldName, + label, + tooltipLabel, + required, + disabled, + selected, + values, + sx, + } = props; + const { t } = useTranslation(); + const { formState, register, setValue, getValues, control } = + useFormContext(); + + const ChipBox = selection => { + return ( + + {selection.map(selectedValue => { + const selectedOption = values?.find( + value => value.key === selectedValue, + ); + return ( + e.stopPropagation()} />} + onClick={e => e.stopPropagation()} + onDelete={e => { + e.stopPropagation(); + var selectedValues = getValues()[fieldName]; + var updatedValues = selectedValues.filter( + value => value !== selectedValue, + ); + setValue(fieldName, updatedValues, { shouldValidate: true }); + }} + /> + ); + })} + + ); + }; + + // Without the controller the textfield is not updated when a value is removed by clicking the delete icon on the chip. + // Check value length to avoid MUI console error: `children` must be passed when using the `TextField` component with `select`. + return ( + ( + <> + {values?.length > 0 ? ( + ChipBox(selection), + }} + required={required || false} + sx={{ + backgroundColor: getInputFieldBackgroundColor( + formState.errors[fieldName], + ), + ...sx, + }} + size="small" + label={t(label)} + variant="outlined" + {...register(fieldName, { + required: required || false, + onChange: e => { + setValue(fieldName, e.target.value, { shouldValidate: true }); + }, + })} + value={field.value || []} + disabled={disabled || false} + data-cy={fieldName + "-formMultiSelect"} + InputLabelProps={{ shrink: true }}> + {values?.map(item => ( + + {item.name} + + ))} + + ) : ( + + )} + + )} + /> + ); +}; From 6d05256372b8f71fdb955770e7b35f59650ae68a Mon Sep 17 00:00:00 2001 From: tschumpr Date: Wed, 7 Feb 2024 08:43:40 +0100 Subject: [PATCH 16/44] Update parameter unit onchange --- .../borehole/hydrogeology/hydrotestInput.js | 28 +++++++++++++++---- 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js index e56edb07b..fda92bc0a 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js @@ -37,6 +37,7 @@ const HydrotestInput = props => { name: "hydrotestResults", control: formMethods.control, }); + const [units, setUnits] = useState({}); const [hydrotestKindIds, setHydrotestKindIds] = useState( item?.codelists @@ -106,6 +107,18 @@ const HydrotestInput = props => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [hydrotestKindIds]); + useEffect(() => { + var currentUnits = {}; + formMethods.getValues()["hydrotestResults"].forEach((element, index) => { + currentUnits = { + ...currentUnits, + [index]: getParameterUnit(element.parameterId), + }; + }); + setUnits(currentUnits); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [formMethods.getValues()["hydrotestResults"]]); + useEffect(() => { var currentValues = formMethods.getValues(); if ( @@ -157,6 +170,9 @@ const HydrotestInput = props => { }; const getParameterUnit = parameterId => { + if (!parameterId) { + return null; + } return TestResultParameterUnits[ domains?.data?.find(d => d.id === parameterId).geolcode ]; @@ -302,6 +318,9 @@ const HydrotestInput = props => { key: d.id, name: d[i18n.language], }))} + onUpdate={value => { + setUnits({ ...units, [index]: getParameterUnit(value) }); + }} /> { inputProps={{ endAdornment: ( - {field.parameterId && - getParameterUnit(field.parameterId)} + {units[index] ? units[index] : ""} ), }} @@ -325,8 +343,7 @@ const HydrotestInput = props => { inputProps={{ endAdornment: ( - {field.parameterId && - getParameterUnit(field.parameterId)} + {units[index] ? units[index] : ""} ), }} @@ -339,8 +356,7 @@ const HydrotestInput = props => { inputProps={{ endAdornment: ( - {field.parameterId && - getParameterUnit(field.parameterId)} + {units[index] ? units[index] : ""} ), }} From 42c18433cb467d88c37f8bbfb6ee8c812675f0c9 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Wed, 7 Feb 2024 09:55:37 +0100 Subject: [PATCH 17/44] Fix data-cy labels --- src/client/src/commons/menu/editor/menuEditorForm.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/client/src/commons/menu/editor/menuEditorForm.js b/src/client/src/commons/menu/editor/menuEditorForm.js index 2901512e6..7538068c9 100644 --- a/src/client/src/commons/menu/editor/menuEditorForm.js +++ b/src/client/src/commons/menu/editor/menuEditorForm.js @@ -435,7 +435,9 @@ class MenuEditorForm extends React.Component { }} /> - + - + From 4491cb6d795f9038b93de5384c97c59444a8ae6a Mon Sep 17 00:00:00 2001 From: tschumpr Date: Wed, 7 Feb 2024 09:56:03 +0100 Subject: [PATCH 18/44] Only show supported parameters --- .../src/commons/form/borehole/hydrogeology/hydrotestInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js index fda92bc0a..13ed9b813 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js @@ -307,7 +307,7 @@ const HydrotestInput = props => { label="parameter" selected={field.parameterId} required={true} - values={domains?.data + values={filteredTestKindDomains?.data ?.filter( d => d.schema === From 8d87b84857981b47d27b6542e43dd62803a79504 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Wed, 7 Feb 2024 11:09:48 +0100 Subject: [PATCH 19/44] Show correct value --- .../commons/form/borehole/hydrogeology/hydrotestDisplay.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js index aff89fc44..1bad054e1 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js @@ -130,7 +130,7 @@ const HydrotestDisplay = props => { {result?.minValue && ( <> - {result?.value + " "} + {result?.minValue + " "} {getParameterUnit(result.parameterId)} )} @@ -138,7 +138,7 @@ const HydrotestDisplay = props => { {result?.maxValue && ( <> - {result?.value + " "} + {result?.maxValue + " "} {getParameterUnit(result.parameterId)} )} From 2c3526930e63a8f6ea1baac2a47852ccab917fd4 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Wed, 7 Feb 2024 11:17:46 +0100 Subject: [PATCH 20/44] Re-use code --- .../cypress/e2e/editor/waterIngress.cy.js | 27 ++++--------------- 1 file changed, 5 insertions(+), 22 deletions(-) diff --git a/src/client/cypress/e2e/editor/waterIngress.cy.js b/src/client/cypress/e2e/editor/waterIngress.cy.js index b774752bd..f72b25459 100644 --- a/src/client/cypress/e2e/editor/waterIngress.cy.js +++ b/src/client/cypress/e2e/editor/waterIngress.cy.js @@ -1,6 +1,6 @@ import { createBorehole, - bearerAuth, + createCompletion, startBoreholeEditing, loginAsAdmin, } from "../helpers/testHelpers"; @@ -15,27 +15,10 @@ describe("Tests for the wateringress editor.", () => { // Precondition: Create casing to later link in observation createBorehole({ "extended.original_name": "INTEADAL" }) .as("borehole_id") - .then(id => - cy.get("@id_token").then(token => { - cy.request({ - method: "POST", - url: "/api/v2/completion", - cache: "no-cache", - credentials: "same-origin", - headers: { - "Content-Type": "application/json", - }, - body: { - boreholeId: id, - isPrimary: true, - kindId: 16000002, - }, - auth: bearerAuth(token), - }).then(response => { - expect(response).to.have.property("status", 200); - }); - }), - ); + .then(id => createCompletion("test wateringress", id, 16000002, true)) + .then(response => { + expect(response).to.have.property("status", 200); + }); // open completion editor cy.get("@borehole_id").then(id => { From e3fc0e2a9bdbd91d659d02e0b2f88cf3e176070f Mon Sep 17 00:00:00 2001 From: tschumpr Date: Wed, 7 Feb 2024 11:19:35 +0100 Subject: [PATCH 21/44] Check if codelist entries are arrays The e2e tests are sometime so fast, that the value in data is still an empty string instead of an array. In this case the test will fail. --- .../borehole/hydrogeology/hydrotestInput.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js index 13ed9b813..254722b8f 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js @@ -135,16 +135,20 @@ const HydrotestInput = props => { data.type = ObservationType.fieldMeasurement; data.boreholeId = parentId; - // add codelists - data.codelistIds = [ - ...data.flowDirectionId, - ...data.evaluationMethodId, - ...data.testKindId, - ]; + data.codelistIds = []; + if (Array.isArray(data.testKindId)) { + data.codelistIds = [...data.codelistIds, ...data.testKindId]; + } + if (Array.isArray(data.flowDirectionId)) { + data.codelistIds = [...data.codelistIds, ...data.flowDirectionId]; + } + if (Array.isArray(data.evaluationMethodId)) { + data.codelistIds = [...data.codelistIds, ...data.evaluationMethodId]; + } + delete data.testKindId; delete data.flowDirectionId; delete data.evaluationMethodId; - delete data.testKindId; return data; }; From 45a0cd08a2efdd251642f24a32499cffced208f8 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Wed, 7 Feb 2024 11:20:21 +0100 Subject: [PATCH 22/44] Update test --- src/client/cypress/e2e/editor/hydrotest.cy.js | 148 +++++++++--------- src/client/cypress/e2e/helpers/formHelpers.js | 82 ++++++++-- .../borehole/hydrogeology/hydrotestDisplay.js | 17 +- .../borehole/hydrogeology/hydrotestInput.js | 7 +- 4 files changed, 159 insertions(+), 95 deletions(-) diff --git a/src/client/cypress/e2e/editor/hydrotest.cy.js b/src/client/cypress/e2e/editor/hydrotest.cy.js index dab0a84c2..8ef670b9a 100644 --- a/src/client/cypress/e2e/editor/hydrotest.cy.js +++ b/src/client/cypress/e2e/editor/hydrotest.cy.js @@ -1,115 +1,107 @@ import { createBorehole, - createStratigraphy, + createCompletion, loginAsAdmin, + startBoreholeEditing, } from "../helpers/testHelpers"; import { evaluateDisplayValue, setInput, setSelect, + toggleMultiSelect, + evaluateMultiSelect, } from "../helpers/formHelpers"; -const openDropdown = dataCy => { - cy.get(`[data-cy="${dataCy}"]`) - .find('[role="combobox"]') - .click({ force: true }); -}; - -const closeDropdown = () => { - cy.get("body").click(); -}; - -const checkDropdownOptionsLength = length => { - cy.get('.MuiPaper-elevation [role="listbox"]').should($listbox => { - expect($listbox.find('[role="option"]')).to.have.length(length); - }); -}; - -const selectDropdownOption = index => { - cy.get('.MuiPaper-elevation [role="listbox"]') - .find('[role="option"]') - .eq(index) - .click(); -}; - describe("Tests for the hydrotest editor.", () => { - beforeEach(function () { - // add new borehole + it("Creates, updates and deletes hydrotests", () => { createBorehole({ "extended.original_name": "INTEADAL" }) .as("borehole_id") - .then(id => createStratigraphy(id, 3000)) + .then(id => createCompletion("test hydrotest", id, 16000002, true)) .then(response => { expect(response).to.have.property("status", 200); }); - - // open hydrotest editor cy.get("@borehole_id").then(id => { loginAsAdmin(); - cy.visit(`editor/${id}/hydrogeology/hydrotest`); + cy.visit(`/editor/${id}/completion`); }); + startBoreholeEditing(); + cy.get("[data-cy=completion-content-header-tab-Casing]").click(); + cy.wait("@casing_GET"); - // start editing session - cy.contains("a", "Start editing").click(); - cy.wait("@edit_lock"); - }); + cy.get('[data-cy="addCasing-button"]').click({ force: true }); + cy.wait("@codelist_GET"); + + setInput("name", "casing-1"); + setInput("fromDepth", "0"); + setInput("toDepth", "10"); + setSelect("kindId", 2); + setSelect("materialId", 3); + setInput("dateStart", "2021-01-01"); + setInput("dateFinish", "2021-01-02"); + setInput("innerDiameter", "3"); + setInput("outerDiameter", "4"); + + cy.get('[data-cy="save-button"]').click(); + cy.wait("@casing_GET"); + + cy.get('[data-cy="hydrogeology-menu-item"]').click({ force: true }); + cy.get('[data-cy="hydrotest-menu-item"]').click({ force: true }); - it("Creates, updates and deletes hydrotests", () => { // switch to german cy.get('[data-cy="menu"]').click({ force: true }); cy.contains("span", "DE").click({ force: true }); // create hydrotest - cy.get('[data-cy="add-hydrotest-button"]').click({ force: true }); - cy.wait("@hydrotest_GET"); - - // fill hydrotest kind dropdown - openDropdown("hydrotest-kind-select"); - selectDropdownOption(2); - cy.wait("@codelist_GET"); - closeDropdown(); + cy.get('[data-cy="addHydrotest-button"]').click({ force: true }); + cy.wait("@casing_GET"); setSelect("reliabilityId", 1); setInput("startTime", "2012-11-14T12:06"); + setSelect("casingId", 1); + toggleMultiSelect("testKindId", [2]); - // close editing mask - cy.get('[data-cy="save-icon"]').click({ force: true }); - - //assert hydrotest is displayed - cy.contains("Pump-/Injektionsversuch, variable Rate"); + cy.get('[data-cy="save-button"]').click({ force: true }); + cy.wait("@hydrotest_GET"); evaluateDisplayValue("reliability", "fraglich"); + evaluateDisplayValue("casingName", "casing-1"); + evaluateDisplayValue("testKind", "Pump-/Injektionsversuch, variable Rate"); + + // update hydrotest + cy.get('[data-cy="edit-button"]').click({ force: true }); + + toggleMultiSelect("flowDirectionId", [1, 0], 3); + toggleMultiSelect("evaluationMethodId", [1, 0], 4); + + cy.get('[data-cy="addHydrotestResult-button"]').click({ force: true }); + setSelect("hydrotestResults.0.parameterId", 0); + + toggleMultiSelect("testKindId", [2]); + evaluateMultiSelect("flowDirectionId", []); + evaluateMultiSelect("evaluationMethodId", []); + cy.get('[data-cy="hydrotestResult-0"]').should("not.exist"); + + toggleMultiSelect("testKindId", [2]); + toggleMultiSelect("flowDirectionId", [1, 0], 3); + toggleMultiSelect("evaluationMethodId", [1, 0], 4); + cy.get('[data-cy="addHydrotestResult-button"]').click({ force: true }); + setSelect("hydrotestResults.0.parameterId", 0, 6); + setInput("hydrotestResults.0.value", "10"); + setInput("hydrotestResults.0.minValue", "5"); + setInput("hydrotestResults.0.maxValue", "15"); + cy.get('[data-cy="save-button"]').click({ force: true }); + cy.wait("@hydrotest_GET"); - cy.get('[data-cy="edit-icon"]').click({ force: true }); - - // check flow direction options - openDropdown("flow-direction-select"); - checkDropdownOptionsLength(3); - selectDropdownOption(1); - selectDropdownOption(0); - closeDropdown(); - - // check evaluation method options - openDropdown("evaluation-method-select"); - checkDropdownOptionsLength(4); - selectDropdownOption(1); - selectDropdownOption(0); - closeDropdown(); - - // check hydrotest parameter options - cy.get('[data-cy="add-hydrotestresult-button"]').click({ force: true }); - openDropdown("parameter-select"); - selectDropdownOption(0); - closeDropdown(); - - // check if everything is displayed - cy.get('[data-cy="save-hydrotest-result-icon"]').click({ force: true }); - cy.get('[data-cy="save-icon"]').click({ force: true }); - cy.contains("Pump-/Injektionsversuch, variable Rate"); - cy.contains("Injektion, Entnahme"); - cy.contains("stationär, instationär"); + evaluateDisplayValue("testKind", "Pump-/Injektionsversuch, variable Rate"); + evaluateDisplayValue("flowDirection", ["Entnahme", "Injektion"]); + evaluateDisplayValue("evaluationMethod", ["stationär", "instationär"]); + evaluateDisplayValue("hydrotestResult.0.parameter", "kf-Wert (gesättigt)"); + evaluateDisplayValue("hydrotestResult.0.value", "10 m/s"); + evaluateDisplayValue("hydrotestResult.0.minValue", "5 m/s"); + evaluateDisplayValue("hydrotestResult.0.maxValue", "15 m/s"); // delete hydrotest - cy.get('[data-cy="delete-icon"]').click({ force: true }); - cy.wait("@hydrotest_DELETE"); + cy.get('[data-cy="delete-button"]').click({ force: true }); + cy.wait("@hydrotest_GET"); cy.get("body").should( "not.contain", "Pump-/Injektionsversuch, variable Rate", diff --git a/src/client/cypress/e2e/helpers/formHelpers.js b/src/client/cypress/e2e/helpers/formHelpers.js index 5b7b26b3d..26e0ba158 100644 --- a/src/client/cypress/e2e/helpers/formHelpers.js +++ b/src/client/cypress/e2e/helpers/formHelpers.js @@ -15,7 +15,6 @@ export const setInput = (fieldName, value) => { }); }); }; - export const evaluateInput = (fieldName, expectedValue) => { var selector = `[data-cy="${fieldName}-formInput"] input`; cy.get(selector) @@ -24,7 +23,6 @@ export const evaluateInput = (fieldName, expectedValue) => { }) .should("have.length", 1); }; - export const evaluateTextarea = (fieldName, expectedValue) => { var selector = `[data-cy="${fieldName}-formInput"] textarea`; cy.get(selector) @@ -34,18 +32,40 @@ export const evaluateTextarea = (fieldName, expectedValue) => { .should("have.length", 1); }; +export const openDropdown = selector => { + cy.get(selector).find('[role="combobox"]').click(); +}; + +export const selectDropdownOption = index => { + cy.get('.MuiPaper-elevation [role="listbox"]') + .find('[role="option"]') + .eq(index) + .click(); +}; + +export const evaluateDropdownOptionsLength = length => { + cy.get('.MuiPaper-elevation [role="listbox"]').should($listbox => { + expect($listbox.find('[role="option"]')).to.have.length(length); + }); +}; + +export const closeDropdown = () => { + cy.get("body").click(); +}; + /** * Sets the value for a select form element. * @param {string} fieldName The name of the select field. * @param {number} index The index of the option to select. */ -export const setSelect = (fieldName, index) => { +export const setSelect = (fieldName, index, expected) => { var selector = `[data-cy="${fieldName}-formSelect"]`; - cy.get(selector).find('[role="combobox"]').click(); - cy.get('.MuiPaper-elevation [role="listbox"]') - .find('[role="option"]') - .eq(index) - .click(); + openDropdown(selector); + if (expected != null) { + // cy.wait("@codelist_GET"); + evaluateDropdownOptionsLength(expected); + } + selectDropdownOption(index); }; export const evaluateSelect = (fieldName, expectedValue) => { @@ -57,6 +77,42 @@ export const evaluateSelect = (fieldName, expectedValue) => { .should("have.length", 1); }; +/** + * Sets the value for a select form element. + * @param {string} fieldName The name of the select field. + * @param {number[]} indices The indices of the options to select. + * @param {number} expected The expected number of options in the dropdown. + */ +export const toggleMultiSelect = (fieldName, indices, expected) => { + var selector = `[data-cy="${fieldName}-formMultiSelect"]`; + openDropdown(selector); + if (expected != null) { + // cy.wait("@codelist_GET"); + evaluateDropdownOptionsLength(expected); + } + indices.forEach(index => { + selectDropdownOption(index); + }); + closeDropdown(); +}; + +export const evaluateMultiSelect = (fieldName, expectedValues) => { + var selector = `[data-cy="${fieldName}-formMultiSelect"] input`; + cy.get(selector) + .filter((k, input) => { + if (expectedValues.length === 0) { + return input.value === ""; + } else { + var values = input.value.split(","); + return ( + values.length === expectedValues.length && + values.every(v => expectedValues.includes(v)) + ); + } + }) + .should("have.length", 1); +}; + /** * Toggles the checkbox for a checkbox form element. * @param {string} fieldName The name of the checkbox field. @@ -65,7 +121,6 @@ export const toggleCheckbox = fieldName => { var selector = `[data-cy="${fieldName}-formCheckbox"]`; cy.get(selector).click(); }; - /** * Sets the value for a select form element. * @param {string} fieldName The name of the checkbox field. @@ -76,7 +131,12 @@ export const evaluateCheckbox = (fieldName, expectedChecked) => { var selector = `[data-cy="${fieldName}-formCheckbox"]`; cy.get(selector).invoke("attr", "aria-disabled").should("eq", checked); }; - export const evaluateDisplayValue = (fieldName, expectedValue) => { - cy.get(`[data-cy="${fieldName}-formDisplay"]`).contains(expectedValue); + if (Array.isArray(expectedValue)) { + expectedValue.forEach(value => { + cy.get(`[data-cy="${fieldName}-formDisplay"]`).contains(value); + }); + } else { + cy.get(`[data-cy="${fieldName}-formDisplay"]`).contains(expectedValue); + } }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js index 1bad054e1..471ab188e 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.js @@ -54,7 +54,7 @@ const HydrotestDisplay = props => { c.schema === hydrogeologySchemaConstants.hydrotestKind, )} @@ -114,12 +114,15 @@ const HydrotestDisplay = props => { pl: "3px", maxWidth: "200px", minWidth: "200px", - }}> + }} + data-cy={`hydrotestResult.${index}.parameter-formDisplay`}> {domains?.data?.find(d => d.id === result.parameterId)?.[ i18n.language ] || ""} - + {result?.value && ( <> {result?.value + " "} @@ -127,7 +130,9 @@ const HydrotestDisplay = props => { )} - + {result?.minValue && ( <> {result?.minValue + " "} @@ -135,7 +140,9 @@ const HydrotestDisplay = props => { )} - + {result?.maxValue && ( <> {result?.maxValue + " "} diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js index 254722b8f..60798af28 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js @@ -293,6 +293,7 @@ const HydrotestInput = props => { {t("hydrotestResult")} { append({ parameterId: null, @@ -305,7 +306,11 @@ const HydrotestInput = props => {
{fields.map((field, index) => ( - + Date: Wed, 7 Feb 2024 11:27:28 +0100 Subject: [PATCH 23/44] Fix disabled check --- .../src/commons/form/borehole/hydrogeology/hydrotestInput.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js index 60798af28..95873bca8 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js @@ -223,7 +223,7 @@ const HydrotestInput = props => { .map(c => c.id) || [] } disabled={ - !!formMethods.errors?.testKindId || + !!formMethods.formState.errors?.testKindId || !filteredTestKindDomains?.data?.filter( d => d.schema === @@ -257,7 +257,7 @@ const HydrotestInput = props => { .map(c => c.id) || [] } disabled={ - !!formMethods?.errors?.testKindId || + !!formMethods.formState.errors?.testKindId || !filteredTestKindDomains?.data?.filter( d => d.schema === From 2d902ecbd09860aec07689520d263dba6f43e3d9 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Wed, 7 Feb 2024 11:34:01 +0100 Subject: [PATCH 24/44] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 323400acd..e62bfd23d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ - Link hydrogeology observations to new completion casing. - Use always _m MD_ as unit for borehole depth. - Use reusable form components for hydrogeology. +- Use reusable card components for hydrogeology. ### Fixed From 83efb8fe4d3e88a930e728e9338bb22d098d1838 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Wed, 7 Feb 2024 11:42:50 +0100 Subject: [PATCH 25/44] Fix console warning --- .../src/commons/form/borehole/hydrogeology/hydrotestInput.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js index 95873bca8..17b05db26 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js @@ -371,11 +371,12 @@ const HydrotestInput = props => { }} /> remove(index)} sx={{ color: ButtonColor.error, marginTop: "10px !important", }}> - remove(index)} /> + ))} From f53f6acc0c855560f5882144f84f64df05a09686 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Wed, 7 Feb 2024 12:17:34 +0100 Subject: [PATCH 26/44] Simplify code --- .../commons/form/borehole/hydrogeology/hydrotestInput.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js index 17b05db26..4e1bc71bc 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js @@ -295,12 +295,7 @@ const HydrotestInput = props => { { - append({ - parameterId: null, - value: null, - minValue: null, - maxValue: null, - }); + append(); }}> {t("addHydrotestResult")} From 2052ed91f39675a01a649aa408876805f870642f Mon Sep 17 00:00:00 2001 From: tschumpr Date: Wed, 7 Feb 2024 13:18:37 +0100 Subject: [PATCH 27/44] Remove unused code --- src/client/cypress/e2e/helpers/formHelpers.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/client/cypress/e2e/helpers/formHelpers.js b/src/client/cypress/e2e/helpers/formHelpers.js index 26e0ba158..545315c55 100644 --- a/src/client/cypress/e2e/helpers/formHelpers.js +++ b/src/client/cypress/e2e/helpers/formHelpers.js @@ -62,7 +62,6 @@ export const setSelect = (fieldName, index, expected) => { var selector = `[data-cy="${fieldName}-formSelect"]`; openDropdown(selector); if (expected != null) { - // cy.wait("@codelist_GET"); evaluateDropdownOptionsLength(expected); } selectDropdownOption(index); @@ -87,7 +86,6 @@ export const toggleMultiSelect = (fieldName, indices, expected) => { var selector = `[data-cy="${fieldName}-formMultiSelect"]`; openDropdown(selector); if (expected != null) { - // cy.wait("@codelist_GET"); evaluateDropdownOptionsLength(expected); } indices.forEach(index => { From 69650381bb5e4479b0973e178034a126e4c9c7dd Mon Sep 17 00:00:00 2001 From: tschumpr Date: Mon, 12 Feb 2024 09:08:55 +0100 Subject: [PATCH 28/44] Update cancel icon --- .../src/commons/form/borehole/hydrogeology/hydrotestInput.js | 4 ++-- src/client/src/components/dataCard/dataInputCard.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js index 4e1bc71bc..287af0de6 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js @@ -7,7 +7,7 @@ import { FormSelect, } from "../../../../components/form/form"; import { StackHalfWidth } from "../../../../components/baseComponents"; -import CloseIcon from "@mui/icons-material/Close"; +import CancelIcon from "@mui/icons-material/Cancel"; import SaveIcon from "@mui/icons-material/Save"; import { DataCardButtonContainer } from "../../../../components/dataCard/dataCard"; import { @@ -380,7 +380,7 @@ const HydrotestInput = props => { } + icon={} tooltipLabel={"cancel"} onClick={() => { formMethods.reset(); diff --git a/src/client/src/components/dataCard/dataInputCard.js b/src/client/src/components/dataCard/dataInputCard.js index 0832e827a..bd0bc3c61 100644 --- a/src/client/src/components/dataCard/dataInputCard.js +++ b/src/client/src/components/dataCard/dataInputCard.js @@ -1,7 +1,7 @@ import React, { useEffect } from "react"; import { useForm, FormProvider } from "react-hook-form"; import { Stack } from "@mui/material"; -import CloseIcon from "@mui/icons-material/Close"; +import CancelIcon from "@mui/icons-material/Cancel"; import SaveIcon from "@mui/icons-material/Save"; import { DataCardButtonContainer } from "../dataCard/dataCard"; import { BdmsIconButton } from "../buttons/buttons"; @@ -46,7 +46,7 @@ export const DataInputCard = props => {
} + icon={} tooltipLabel={"cancel"} onClick={() => { formMethods.reset(); From b3e93815d8137663509238d70d5481323b1536ab Mon Sep 17 00:00:00 2001 From: tschumpr Date: Mon, 12 Feb 2024 09:10:49 +0100 Subject: [PATCH 29/44] Set id if not defined in form --- .../src/commons/form/borehole/hydrogeology/hydrotestInput.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js index 287af0de6..9c87791a4 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js @@ -146,6 +146,10 @@ const HydrotestInput = props => { data.codelistIds = [...data.codelistIds, ...data.evaluationMethodId]; } + if (data.casingId == null) { + data.casingId = item.casingId; + } + delete data.testKindId; delete data.flowDirectionId; delete data.evaluationMethodId; From 9896035281f695721e582139bbdbb79ffd3c3eb4 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Mon, 12 Feb 2024 09:11:59 +0100 Subject: [PATCH 30/44] Check casing after re-save --- src/client/cypress/e2e/editor/hydrotest.cy.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/client/cypress/e2e/editor/hydrotest.cy.js b/src/client/cypress/e2e/editor/hydrotest.cy.js index 8ef670b9a..1d6bc4ff9 100644 --- a/src/client/cypress/e2e/editor/hydrotest.cy.js +++ b/src/client/cypress/e2e/editor/hydrotest.cy.js @@ -91,6 +91,7 @@ describe("Tests for the hydrotest editor.", () => { cy.get('[data-cy="save-button"]').click({ force: true }); cy.wait("@hydrotest_GET"); + evaluateDisplayValue("casingName", "casing-1"); evaluateDisplayValue("testKind", "Pump-/Injektionsversuch, variable Rate"); evaluateDisplayValue("flowDirection", ["Entnahme", "Injektion"]); evaluateDisplayValue("evaluationMethod", ["stationär", "instationär"]); From 0391b7b45f3fed7ed7e54462f19f25a49fa5cd22 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Mon, 12 Feb 2024 11:32:52 +0100 Subject: [PATCH 31/44] Use tab hash for cy labels --- src/client/cypress/e2e/editor/backfill.cy.js | 2 +- src/client/cypress/e2e/editor/casing.cy.js | 8 ++++---- src/client/cypress/e2e/editor/completion.cy.js | 4 ++-- src/client/cypress/e2e/editor/hydrotest.cy.js | 2 +- src/client/cypress/e2e/editor/instrumentation.cy.js | 4 ++-- src/client/cypress/e2e/editor/waterIngress.cy.js | 2 +- .../commons/form/borehole/completion/completionContent.js | 2 +- 7 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/client/cypress/e2e/editor/backfill.cy.js b/src/client/cypress/e2e/editor/backfill.cy.js index ea9e6b7bd..06057d2ae 100644 --- a/src/client/cypress/e2e/editor/backfill.cy.js +++ b/src/client/cypress/e2e/editor/backfill.cy.js @@ -27,7 +27,7 @@ describe("Backfill crud tests", () => { startBoreholeEditing(); // select backfill tab - cy.get("[data-cy=completion-content-header-tab-Backfill]").click(); + cy.get("[data-cy=completion-content-header-tab-backfill]").click(); cy.wait("@backfill_GET"); // add new backfill card diff --git a/src/client/cypress/e2e/editor/casing.cy.js b/src/client/cypress/e2e/editor/casing.cy.js index 7a8343483..d6916af68 100644 --- a/src/client/cypress/e2e/editor/casing.cy.js +++ b/src/client/cypress/e2e/editor/casing.cy.js @@ -31,7 +31,7 @@ describe("Casing crud tests", () => { startBoreholeEditing(); // select casing tab - cy.get("[data-cy=completion-content-header-tab-Casing]").click(); + cy.get("[data-cy=completion-content-header-tab-casing]").click(); cy.wait("@casing_GET"); // create casing @@ -77,7 +77,7 @@ describe("Casing crud tests", () => { // delete casing // Precondition: instrumentation with reference to casing - cy.get("[data-cy=completion-content-header-tab-Instrumentation]").click(); + cy.get("[data-cy=completion-content-header-tab-instrumentation]").click(); cy.wait("@instrumentation_GET"); cy.get('[data-cy="addInstrument-button"]').click({ force: true }); @@ -92,14 +92,14 @@ describe("Casing crud tests", () => { setSelect("casingId", 1); cy.get('[data-cy="save-button"]').click({ force: true }); - cy.get("[data-cy=completion-content-header-tab-Casing]").click(); + cy.get("[data-cy=completion-content-header-tab-casing]").click(); cy.wait("@casing_GET"); cy.get('[data-cy="delete-button"]').click({ force: true }); cy.wait("@casing_DELETE"); cy.contains("casing-1 updated").should("not.exist"); - cy.get("[data-cy=completion-content-header-tab-Instrumentation]").click(); + cy.get("[data-cy=completion-content-header-tab-instrumentation]").click(); cy.wait("@instrumentation_GET"); evaluateDisplayValue("casingName", "-"); }); diff --git a/src/client/cypress/e2e/editor/completion.cy.js b/src/client/cypress/e2e/editor/completion.cy.js index c3dfc11e9..10f754c4b 100644 --- a/src/client/cypress/e2e/editor/completion.cy.js +++ b/src/client/cypress/e2e/editor/completion.cy.js @@ -197,14 +197,14 @@ describe("completion crud tests", () => { isTabSelected(1); // check hash updates on tab switch - cy.get("[data-cy=completion-content-header-tab-Instrumentation]").click(); + cy.get("[data-cy=completion-content-header-tab-instrumentation]").click(); cy.location().should(location => { expect(location.pathname).to.eq( `/editor/${boreholeId}/completion/${completion2Id}`, ); expect(location.hash).to.eq("#instrumentation"); }); - cy.get("[data-cy=completion-content-header-tab-Backfill]").click(); + cy.get("[data-cy=completion-content-header-tab-backfill]").click(); cy.location().should(location => { expect(location.pathname).to.eq( `/editor/${boreholeId}/completion/${completion2Id}`, diff --git a/src/client/cypress/e2e/editor/hydrotest.cy.js b/src/client/cypress/e2e/editor/hydrotest.cy.js index 8ef670b9a..31d3b637b 100644 --- a/src/client/cypress/e2e/editor/hydrotest.cy.js +++ b/src/client/cypress/e2e/editor/hydrotest.cy.js @@ -25,7 +25,7 @@ describe("Tests for the hydrotest editor.", () => { cy.visit(`/editor/${id}/completion`); }); startBoreholeEditing(); - cy.get("[data-cy=completion-content-header-tab-Casing]").click(); + cy.get("[data-cy=completion-content-header-tab-casing]").click(); cy.wait("@casing_GET"); cy.get('[data-cy="addCasing-button"]').click({ force: true }); diff --git a/src/client/cypress/e2e/editor/instrumentation.cy.js b/src/client/cypress/e2e/editor/instrumentation.cy.js index 376a00c84..1490590af 100644 --- a/src/client/cypress/e2e/editor/instrumentation.cy.js +++ b/src/client/cypress/e2e/editor/instrumentation.cy.js @@ -27,7 +27,7 @@ describe("Instrumentation crud tests", () => { startBoreholeEditing(); // Precondition: Create casing to later link in instrumentation - cy.get("[data-cy=completion-content-header-tab-Casing]").click(); + cy.get("[data-cy=completion-content-header-tab-casing]").click(); cy.wait("@casing_GET"); cy.get('[data-cy="addCasing-button"]').click({ force: true }); @@ -46,7 +46,7 @@ describe("Instrumentation crud tests", () => { cy.get('[data-cy="save-button"]').click(); cy.wait("@casing_GET"); - cy.get("[data-cy=completion-content-header-tab-Instrumentation]").click(); + cy.get("[data-cy=completion-content-header-tab-instrumentation]").click(); cy.wait("@instrumentation_GET"); // create instrumentation diff --git a/src/client/cypress/e2e/editor/waterIngress.cy.js b/src/client/cypress/e2e/editor/waterIngress.cy.js index f72b25459..1a4bae6de 100644 --- a/src/client/cypress/e2e/editor/waterIngress.cy.js +++ b/src/client/cypress/e2e/editor/waterIngress.cy.js @@ -31,7 +31,7 @@ describe("Tests for the wateringress editor.", () => { // start editing session startBoreholeEditing(); - cy.get("[data-cy=completion-content-header-tab-Casing]").click(); + cy.get("[data-cy=completion-content-header-tab-casing]").click(); cy.wait("@casing_GET"); cy.get('[data-cy="addCasing-button"]').click({ force: true }); diff --git a/src/client/src/commons/form/borehole/completion/completionContent.js b/src/client/src/commons/form/borehole/completion/completionContent.js index 2d4f6f310..caeb5cdb6 100644 --- a/src/client/src/commons/form/borehole/completion/completionContent.js +++ b/src/client/src/commons/form/borehole/completion/completionContent.js @@ -59,7 +59,7 @@ const CompletionContent = ({ completion, isEditable }) => { {tabs.map((tab, index) => { return ( Date: Mon, 12 Feb 2024 11:43:56 +0100 Subject: [PATCH 32/44] Reuse style --- src/client/src/components/dataCard/dataDisplayCard.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/client/src/components/dataCard/dataDisplayCard.js b/src/client/src/components/dataCard/dataDisplayCard.js index 0413452af..0ca10176b 100644 --- a/src/client/src/components/dataCard/dataDisplayCard.js +++ b/src/client/src/components/dataCard/dataDisplayCard.js @@ -1,18 +1,16 @@ import React from "react"; -import { Stack } from "@mui/material"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; import DeleteIcon from "@mui/icons-material/Delete"; import { DataCardButtonContainer } from "../dataCard/dataCard"; import { BdmsIconButton, ButtonColor } from "../buttons/buttons"; +import { StackFullWidth } from "../baseComponents"; export const DataDisplayCard = props => { const { item, selected, setSelected, deleteData, isEditable } = props; return ( <> - - {props.children} - + {props.children} {isEditable && ( Date: Mon, 12 Feb 2024 11:45:03 +0100 Subject: [PATCH 33/44] Reuse style --- src/client/src/components/dataCard/dataInputCard.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/client/src/components/dataCard/dataInputCard.js b/src/client/src/components/dataCard/dataInputCard.js index bd0bc3c61..fdad27e9f 100644 --- a/src/client/src/components/dataCard/dataInputCard.js +++ b/src/client/src/components/dataCard/dataInputCard.js @@ -1,10 +1,10 @@ import React, { useEffect } from "react"; import { useForm, FormProvider } from "react-hook-form"; -import { Stack } from "@mui/material"; import CancelIcon from "@mui/icons-material/Cancel"; import SaveIcon from "@mui/icons-material/Save"; import { DataCardButtonContainer } from "../dataCard/dataCard"; import { BdmsIconButton } from "../buttons/buttons"; +import { StackFullWidth } from "../baseComponents"; export const DataInputCard = props => { const { item, setSelected, addData, updateData, prepareFormDataForSubmit } = @@ -41,9 +41,7 @@ export const DataInputCard = props => { return (
- - {props.children} - + {props.children} } From 35a099d9c2785a82a6cafecbca9f3380f896304a Mon Sep 17 00:00:00 2001 From: tschumpr Date: Mon, 12 Feb 2024 11:58:49 +0100 Subject: [PATCH 34/44] Use error background color from theme --- src/client/src/App.js | 2 +- src/client/src/components/form/form.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/client/src/App.js b/src/client/src/App.js index 1b0c7def3..d3ae1f7fe 100644 --- a/src/client/src/App.js +++ b/src/client/src/App.js @@ -19,7 +19,7 @@ import { AlertBanner } from "./components/alert/alertBanner"; const queryClient = new QueryClient(); -const theme = createTheme({ +export const theme = createTheme({ palette: { primary: { main: "#007CC3", diff --git a/src/client/src/components/form/form.js b/src/client/src/components/form/form.js index 67bdd0f4e..8401ef475 100644 --- a/src/client/src/components/form/form.js +++ b/src/client/src/components/form/form.js @@ -1,8 +1,9 @@ import { TextField } from "@mui/material"; import { styled } from "@mui/system"; +import { theme } from "../../App"; export const getInputFieldBackgroundColor = errorFieldName => - Boolean(errorFieldName) ? "#fff6f6" : "transparent"; + Boolean(errorFieldName) ? theme.palette.error.background : "transparent"; export const FormField = styled(TextField)(() => ({ borderRadius: "4px", From 7ba51f2b8fe2d9bbbb4edf147ffda6083b88fc5f Mon Sep 17 00:00:00 2001 From: tschumpr Date: Mon, 12 Feb 2024 12:18:34 +0100 Subject: [PATCH 35/44] Update labels to camel case --- src/client/cypress/e2e/editor/casing.cy.js | 6 +++--- src/client/public/locale/de/common.json | 4 ++-- src/client/public/locale/en/common.json | 4 ++-- src/client/public/locale/fr/common.json | 4 ++-- src/client/public/locale/it/common.json | 4 ++-- .../commons/form/borehole/completion/casingDisplay.js | 10 ++-------- .../commons/form/borehole/completion/casingInput.js | 4 ++-- 7 files changed, 15 insertions(+), 21 deletions(-) diff --git a/src/client/cypress/e2e/editor/casing.cy.js b/src/client/cypress/e2e/editor/casing.cy.js index d6916af68..2d6949642 100644 --- a/src/client/cypress/e2e/editor/casing.cy.js +++ b/src/client/cypress/e2e/editor/casing.cy.js @@ -59,8 +59,8 @@ describe("Casing crud tests", () => { evaluateDisplayValue("materialCasingLayer", "steel"); evaluateDisplayValue("dateStartCasing", "01. Jan. 2021"); evaluateDisplayValue("dateFinishCasing", "02. Jan. 2021"); - evaluateDisplayValue("casing_inner_diameter", "3"); - evaluateDisplayValue("casing_outer_diameter", "4"); + evaluateDisplayValue("casingInnerDiameter", "3"); + evaluateDisplayValue("casingOuterDiameter", "4"); evaluateDisplayValue("notes", "Lorem."); // update casing @@ -73,7 +73,7 @@ describe("Casing crud tests", () => { cy.get('[data-cy="save-button"]').click({ force: true }); evaluateDisplayValue("name", "casing-1 updated"); evaluateDisplayValue("materialCasingLayer", "concrete"); - evaluateDisplayValue("casing_inner_diameter", "3"); + evaluateDisplayValue("casingInnerDiameter", "3"); // delete casing // Precondition: instrumentation with reference to casing diff --git a/src/client/public/locale/de/common.json b/src/client/public/locale/de/common.json index 5568c905e..9f97eec36 100644 --- a/src/client/public/locale/de/common.json +++ b/src/client/public/locale/de/common.json @@ -39,8 +39,8 @@ "cancel": "Abbrechen", "canton": "Kanton", "casing": "Verrohrung", - "casing_inner_diameter": "Verrohrung Innendurchmesser [mm]", - "casing_outer_diameter": "Verrohrung Aussendurchmesser [mm]", + "casingInnerDiameter": "Verrohrung Innendurchmesser [mm]", + "casingOuterDiameter": "Verrohrung Aussendurchmesser [mm]", "casingName": "Name Verrohrung", "centerselected": "auf Auswahl zentrieren", "chronostratigraphy_top_bedrock": "Chronostratigraphie Top Fels", diff --git a/src/client/public/locale/en/common.json b/src/client/public/locale/en/common.json index bdffe6f95..a0077cbdf 100644 --- a/src/client/public/locale/en/common.json +++ b/src/client/public/locale/en/common.json @@ -39,8 +39,8 @@ "cancel": "Cancel", "canton": "Canton", "casing": "Casing", - "casing_inner_diameter": "Casing inner diameter [mm]", - "casing_outer_diameter": "Casing outer diameter [mm]", + "casingInnerDiameter": "Casing inner diameter [mm]", + "casingOuterDiameter": "Casing outer diameter [mm]", "casingName": "Casing name", "centerselected": "Centre to selected", "chronostratigraphy_top_bedrock": "Chronostratigraphy top bedrock", diff --git a/src/client/public/locale/fr/common.json b/src/client/public/locale/fr/common.json index 4ae5d4574..6914ffe85 100644 --- a/src/client/public/locale/fr/common.json +++ b/src/client/public/locale/fr/common.json @@ -39,8 +39,8 @@ "cancel": "Annuler", "canton": "Canton", "casing": "Tubage", - "casing_inner_diameter": "Diamètre intérieur du tubage [mm]", - "casing_outer_diameter": "Diamètre extérieur du tubage [mm]", + "casingInnerDiameter": "Diamètre intérieur du tubage [mm]", + "casingOuterDiameter": "Diamètre extérieur du tubage [mm]", "casingName": "Nom tubage", "centerselected": "Centrer sur la sélection", "chronostratigraphy_top_bedrock": "Chronostratigraphie du toit du rocher", diff --git a/src/client/public/locale/it/common.json b/src/client/public/locale/it/common.json index 026987c60..9393873ed 100644 --- a/src/client/public/locale/it/common.json +++ b/src/client/public/locale/it/common.json @@ -39,8 +39,8 @@ "cancel": "Annulla", "canton": "Cantone", "casing": "Tubazione", - "casing_inner_diameter": "Diametro interno della tubatura [mm]", - "casing_outer_diameter": "Diametro esterno della tubatura [mm]", + "casingInnerDiameter": "Diametro interno della tubatura [mm]", + "casingOuterDiameter": "Diametro esterno della tubatura [mm]", "casingName": "Nome tubazione", "centerselected": "Centra sulla selezione", "chronostratigraphy_top_bedrock": "Cronostratigrafia del substrato roccioso", diff --git a/src/client/src/commons/form/borehole/completion/casingDisplay.js b/src/client/src/commons/form/borehole/completion/casingDisplay.js index 3724b4f10..a762e6165 100644 --- a/src/client/src/commons/form/borehole/completion/casingDisplay.js +++ b/src/client/src/commons/form/borehole/completion/casingDisplay.js @@ -43,14 +43,8 @@ const CasingDisplay = props => { /> - - + + diff --git a/src/client/src/commons/form/borehole/completion/casingInput.js b/src/client/src/commons/form/borehole/completion/casingInput.js index 2d5f574f6..713ac25b5 100644 --- a/src/client/src/commons/form/borehole/completion/casingInput.js +++ b/src/client/src/commons/form/borehole/completion/casingInput.js @@ -97,14 +97,14 @@ const CasingInput = ({ item, setSelected, parentId, addData, updateData }) => { Date: Mon, 12 Feb 2024 16:36:42 +0100 Subject: [PATCH 36/44] Set casingId for all hydrogeo modules --- .../cypress/e2e/editor/fieldMeasurement.cy.js | 41 ++++++++++++----- .../editor/groundwaterLevelMeasurement.cy.js | 44 +++++++++++++------ .../cypress/e2e/editor/waterIngress.cy.js | 1 + .../hydrogeology/fieldMeasurementInput.js | 3 ++ .../groundwaterLevelMeasurementInput.js | 3 ++ .../hydrogeology/waterIngressInput.js | 3 ++ 6 files changed, 70 insertions(+), 25 deletions(-) diff --git a/src/client/cypress/e2e/editor/fieldMeasurement.cy.js b/src/client/cypress/e2e/editor/fieldMeasurement.cy.js index 60efef7d2..35cade17c 100644 --- a/src/client/cypress/e2e/editor/fieldMeasurement.cy.js +++ b/src/client/cypress/e2e/editor/fieldMeasurement.cy.js @@ -1,7 +1,8 @@ import { createBorehole, - createStratigraphy, loginAsAdmin, + startBoreholeEditing, + createCompletion, } from "../helpers/testHelpers"; import { evaluateDisplayValue, @@ -10,27 +11,40 @@ import { } from "../helpers/formHelpers"; describe("Tests for the field measurement editor.", () => { - beforeEach(function () { - // add new borehole + it("Creates, updates and deletes field measurement", () => { createBorehole({ "extended.original_name": "INTEADAL" }) .as("borehole_id") - .then(id => createStratigraphy(id, 3000)) + .then(id => createCompletion("test hydrotest", id, 16000002, true)) .then(response => { expect(response).to.have.property("status", 200); }); - - // open field measurement editor cy.get("@borehole_id").then(id => { loginAsAdmin(); - cy.visit(`editor/${id}/hydrogeology/fieldmeasurement`); + cy.visit(`/editor/${id}/completion`); }); + startBoreholeEditing(); + cy.get("[data-cy=completion-content-header-tab-Casing]").click(); + cy.wait("@casing_GET"); - // start editing session - cy.contains("a", "Start editing").click(); - cy.wait("@edit_lock"); - }); + cy.get('[data-cy="addCasing-button"]').click({ force: true }); + cy.wait("@codelist_GET"); + + setInput("name", "casing-1"); + setInput("fromDepth", "0"); + setInput("toDepth", "10"); + setSelect("kindId", 2); + setSelect("materialId", 3); + setInput("dateStart", "2021-01-01"); + setInput("dateFinish", "2021-01-02"); + setInput("innerDiameter", "3"); + setInput("outerDiameter", "4"); + + cy.get('[data-cy="save-button"]').click(); + cy.wait("@casing_GET"); + + cy.get('[data-cy="hydrogeology-menu-item"]').click({ force: true }); + cy.get('[data-cy="fieldmeasurement-menu-item"]').click({ force: true }); - it("Creates, updates and deletes field measurement", () => { // switch to german cy.get('[data-cy="menu"]').click({ force: true }); cy.contains("span", "DE").click({ force: true }); @@ -43,6 +57,7 @@ describe("Tests for the field measurement editor.", () => { setSelect("reliabilityId", 1); setInput("startTime", "2012-11-14T12:06"); + setSelect("casingId", 1); setSelect("sampleTypeId", 1); setSelect("parameterId", 5); setInput("value", "77.1045"); @@ -51,6 +66,7 @@ describe("Tests for the field measurement editor.", () => { cy.get('[data-cy="save-button"]').click({ force: true }); //assert field measurementis displayed + evaluateDisplayValue("casingName", "casing-1"); evaluateDisplayValue("field_measurement_sample_type", "Schöpfprobe"); evaluateDisplayValue("parameter", "Sauerstoffsättigung"); evaluateDisplayValue("value", "77.1045 %"); @@ -60,6 +76,7 @@ describe("Tests for the field measurement editor.", () => { setSelect("sampleTypeId", 0); cy.get('[data-cy="save-button"]').click({ force: true }); evaluateDisplayValue("field_measurement_sample_type", "Pumpprobe"); + evaluateDisplayValue("casingName", "casing-1"); // delete field measurement cy.get('[data-cy="delete-button"]').click({ force: true }); diff --git a/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js b/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js index f5aec087b..7e8192d85 100644 --- a/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js +++ b/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js @@ -1,7 +1,8 @@ import { createBorehole, - createStratigraphy, loginAsAdmin, + startBoreholeEditing, + createCompletion, } from "../helpers/testHelpers"; import { evaluateDisplayValue, @@ -10,27 +11,42 @@ import { } from "../helpers/formHelpers"; describe("Tests for the groundwater level measurement editor.", () => { - beforeEach(function () { - // add new borehole + it("Creates, updates and deletes groundwater level measurement", () => { createBorehole({ "extended.original_name": "INTEADAL" }) .as("borehole_id") - .then(id => createStratigraphy(id, 3000)) + .then(id => createCompletion("test hydrotest", id, 16000002, true)) .then(response => { expect(response).to.have.property("status", 200); }); - - // open groundwater level measurement editor cy.get("@borehole_id").then(id => { loginAsAdmin(); - cy.visit(`editor/${id}/hydrogeology/groundwaterlevelmeasurement`); + cy.visit(`/editor/${id}/completion`); }); + startBoreholeEditing(); + cy.get("[data-cy=completion-content-header-tab-Casing]").click(); + cy.wait("@casing_GET"); - // start editing session - cy.contains("a", "Start editing").click(); - cy.wait("@edit_lock"); - }); + cy.get('[data-cy="addCasing-button"]').click({ force: true }); + cy.wait("@codelist_GET"); + + setInput("name", "casing-1"); + setInput("fromDepth", "0"); + setInput("toDepth", "10"); + setSelect("kindId", 2); + setSelect("materialId", 3); + setInput("dateStart", "2021-01-01"); + setInput("dateFinish", "2021-01-02"); + setInput("innerDiameter", "3"); + setInput("outerDiameter", "4"); + + cy.get('[data-cy="save-button"]').click(); + cy.wait("@casing_GET"); + + cy.get('[data-cy="hydrogeology-menu-item"]').click({ force: true }); + cy.get('[data-cy="groundwaterlevelmeasurement-menu-item"]').click({ + force: true, + }); - it("Creates, updates and deletes groundwater level measurement", () => { // switch to german cy.get('[data-cy="menu"]').click({ force: true }); cy.contains("span", "DE").click({ force: true }); @@ -43,13 +59,14 @@ describe("Tests for the groundwater level measurement editor.", () => { setSelect("kindId", 2); setSelect("reliabilityId", 1); + setSelect("casingId", 1); setInput("startTime", "2012-11-14T12:06"); setInput("levelM", "789.12"); setInput("levelMasl", "5.4567"); // close editing mask cy.get('[data-cy="save-button"]').click({ force: true }); - + evaluateDisplayValue("casingName", "casing-1"); evaluateDisplayValue("gwlm_kind", "Manometer"); evaluateDisplayValue("gwlm_levelm", "789.12"); evaluateDisplayValue("gwlm_levelmasl", "5.4567"); @@ -60,6 +77,7 @@ describe("Tests for the groundwater level measurement editor.", () => { setSelect("kindId", 1); cy.get('[data-cy="save-button"]').click({ force: true }); evaluateDisplayValue("gwlm_kind", "Drucksonde"); + evaluateDisplayValue("casingName", "casing-1"); // delete groundwater level measurement cy.get('[data-cy="delete-button"]').click({ force: true }); diff --git a/src/client/cypress/e2e/editor/waterIngress.cy.js b/src/client/cypress/e2e/editor/waterIngress.cy.js index f72b25459..fee6abd28 100644 --- a/src/client/cypress/e2e/editor/waterIngress.cy.js +++ b/src/client/cypress/e2e/editor/waterIngress.cy.js @@ -82,6 +82,7 @@ describe("Tests for the wateringress editor.", () => { setSelect("quantityId", 1); cy.get('[data-cy="save-button"]').click({ force: true }); evaluateDisplayValue("quantity", "mittel (30 - 120 l/min)"); + evaluateDisplayValue("casingName", "casing-1"); // delete wateringress cy.get('[data-cy="delete-button"]').click({ force: true }); diff --git a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js index 943f17277..8c47a774c 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/fieldMeasurementInput.js @@ -20,6 +20,9 @@ const FieldMeasurementInput = props => { data?.endTime ? (data.endTime += ":00.000Z") : (data.endTime = null); data.type = ObservationType.fieldMeasurement; data.boreholeId = parentId; + if (data.casingId == null) { + data.casingId = item.casingId; + } return data; }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js index 31e9d40cd..8f41e9afb 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementInput.js @@ -18,6 +18,9 @@ const GroundwaterLevelMeasurementInput = props => { data?.endTime ? (data.endTime += ":00.000Z") : (data.endTime = null); data.type = ObservationType.groundwaterLevelMeasurement; data.boreholeId = parentId; + if (data.casingId == null) { + data.casingId = item.casingId; + } return data; }; diff --git a/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js b/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js index f856a85be..6777fe6a8 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/waterIngressInput.js @@ -18,6 +18,9 @@ const WaterIngressInput = props => { data?.endTime ? (data.endTime += ":00.000Z") : (data.endTime = null); data.type = ObservationType.waterIngress; data.boreholeId = parentId; + if (data.casingId == null) { + data.casingId = item.casingId; + } return data; }; From 540ebde8033e4ce7925948e3375820d8ddd00cc8 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Mon, 12 Feb 2024 16:55:11 +0100 Subject: [PATCH 37/44] Fix label --- src/client/cypress/e2e/editor/fieldMeasurement.cy.js | 2 +- src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/client/cypress/e2e/editor/fieldMeasurement.cy.js b/src/client/cypress/e2e/editor/fieldMeasurement.cy.js index 35cade17c..d7d61460e 100644 --- a/src/client/cypress/e2e/editor/fieldMeasurement.cy.js +++ b/src/client/cypress/e2e/editor/fieldMeasurement.cy.js @@ -23,7 +23,7 @@ describe("Tests for the field measurement editor.", () => { cy.visit(`/editor/${id}/completion`); }); startBoreholeEditing(); - cy.get("[data-cy=completion-content-header-tab-Casing]").click(); + cy.get("[data-cy=completion-content-header-tab-casing]").click(); cy.wait("@casing_GET"); cy.get('[data-cy="addCasing-button"]').click({ force: true }); diff --git a/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js b/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js index 7e8192d85..28d89726f 100644 --- a/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js +++ b/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js @@ -23,7 +23,7 @@ describe("Tests for the groundwater level measurement editor.", () => { cy.visit(`/editor/${id}/completion`); }); startBoreholeEditing(); - cy.get("[data-cy=completion-content-header-tab-Casing]").click(); + cy.get("[data-cy=completion-content-header-tab-casing]").click(); cy.wait("@casing_GET"); cy.get('[data-cy="addCasing-button"]').click({ force: true }); From 3fee60ba83e0baa8ff2629cc85c0bd7b7aaaac51 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Tue, 13 Feb 2024 09:54:16 +0100 Subject: [PATCH 38/44] Use theme for styling --- src/client/src/App.js | 86 +++++++++++-------- .../form/borehole/completion/completion.js | 2 +- .../borehole/completion/styledComponents.js | 11 +-- .../borehole/hydrogeology/hydrotestInput.js | 16 ++-- .../descriptionLayers/actionButtons.js | 2 +- .../descriptionDeleteDialog.js | 9 +- .../profileLayersList/profileLayersList.js | 2 +- src/client/src/components/buttons/buttons.js | 49 ++--------- .../src/components/dataCard/dataCards.js | 2 +- .../components/dataCard/dataDisplayCard.js | 4 +- 10 files changed, 81 insertions(+), 102 deletions(-) diff --git a/src/client/src/App.js b/src/client/src/App.js index d3ae1f7fe..41856f2a7 100644 --- a/src/client/src/App.js +++ b/src/client/src/App.js @@ -22,22 +22,30 @@ const queryClient = new QueryClient(); export const theme = createTheme({ palette: { primary: { - main: "#007CC3", - contrastText: "#fff", + main: "#212121", + contrastText: "#ffffff", + }, + secondary: { + main: "#424242", + contrastText: "#ffffff", + background: "#eeeeee", }, error: { - main: "#9f3a38", - background: "#fff6f6", + main: "#f44336", + dark: "#d32f2f", + contrastText: "#ffffff", + background: "#ffebee", }, neutral: { main: "#d8d8d8", + contrastText: "#000000", }, }, typography: { fontFamily: "Lato", subtitle1: { fontSize: "13px", - color: "black", + color: "#000000", lineHeight: "1.4em", }, subtitle2: { @@ -47,7 +55,7 @@ export const theme = createTheme({ }, fullPageMessage: { fontSize: "23px", - color: "black", + color: "#000000", }, }, breakpoints: { @@ -60,42 +68,46 @@ export const theme = createTheme({ }, }, components: { + MuiButtonBase: { + defaultProps: { + disableRipple: true, + }, + }, MuiButton: { - variants: [ - { - props: { variant: "delete" }, - style: { - backgroundColor: "rgb(219, 40, 40)", - color: "white", - textTransform: "none", - fontWeight: "bold", - fontSize: "0.8em", - height: "2.5em", - marginRight: "0.5em", - marginBottom: "0.5em", - "&:hover": { - backgroundColor: "rgba(219, 40, 40, 0.6)", - }, + styleOverrides: { + root: { + fontFamily: "Lato", + fontWeight: "bold", + textTransform: "none", + marginLeft: "0.5em", + boxShadow: "none", + "&:hover": { + boxShadow: "none", }, }, - { - props: { variant: "cancel" }, - style: { - color: "rgba(0, 0, 0, 0.6)", - borderColor: "rgba(0, 0, 0, 0.6)", - textTransform: "none", - fontWeight: "bold", - fontSize: "0.8em", - height: "2.5em", - marginRight: "0.5em", - marginBottom: "0.5em", - border: "1px solid rgba(0, 0, 0, 0.6)", - "&:hover": { - backgroundColor: "white", - }, + }, + }, + MuiIconButton: { + styleOverrides: { + root: { + "&:hover, &.Mui-focusVisible, &:active, &:focus, &:focus-visible": { + backgroundColor: "rgba(0, 0, 0, 0.0)", }, + "& .MuiTouchRipple-root": { + display: "none", + }, + }, + }, + }, + MuiTab: { + styleOverrides: { + root: { + fontFamily: "Lato", + fontWeight: "bold", + textTransform: "none", + fontSize: "16px", }, - ], + }, }, }, }); diff --git a/src/client/src/commons/form/borehole/completion/completion.js b/src/client/src/commons/form/borehole/completion/completion.js index 3c547e85f..8c0084a59 100644 --- a/src/client/src/commons/form/borehole/completion/completion.js +++ b/src/client/src/commons/form/borehole/completion/completion.js @@ -316,7 +316,7 @@ const Completion = props => { alignItems="center" justifyContent="center" sx={{ flexGrow: 1 }}> - + ) : state.selected === null ? ( ({ - backgroundColor: "rgb(242,242,242)", + backgroundColor: theme.palette.secondary.background, borderRadius: "3px", padding: "10px 10px 5px 10px", margin: "0 5px 10px 5px", @@ -22,14 +23,8 @@ export const CompletionTabs = styled(Tabs)({ export const CompletionTab = styled(props => )( () => ({ - color: "rgba(0, 0, 0, 0.6)", - fontFamily: "Lato", - fontWeight: "bold", - textTransform: "none", - fontSize: "16px", "&.Mui-selected": { - color: "rgba(0, 0, 0, 1) !important", - backgroundColor: "rgb(242,242,242)", + backgroundColor: theme.palette.secondary.background, borderRadius: "3px", }, "&.Mui-focusVisible": { diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js index 9c87791a4..64c11d6c2 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js @@ -1,6 +1,12 @@ import React, { useEffect, useState } from "react"; import { FormProvider, useFieldArray, useForm } from "react-hook-form"; -import { Box, InputAdornment, Stack, Typography } from "@mui/material"; +import { + Box, + IconButton, + InputAdornment, + Stack, + Typography, +} from "@mui/material"; import { FormInput, FormMultiSelect, @@ -12,9 +18,7 @@ import SaveIcon from "@mui/icons-material/Save"; import { DataCardButtonContainer } from "../../../../components/dataCard/dataCard"; import { AddButton, - BaseIconButton, BdmsIconButton, - ButtonColor, } from "../../../../components/buttons/buttons"; import ObservationInput from "./observationInput"; import { useTranslation } from "react-i18next"; @@ -369,14 +373,14 @@ const HydrotestInput = props => { ), }} /> - remove(index)} + color="error" sx={{ - color: ButtonColor.error, marginTop: "10px !important", }}> - + ))} diff --git a/src/client/src/commons/form/profile/components/profileLayers/components/descriptionLayers/actionButtons.js b/src/client/src/commons/form/profile/components/profileLayers/components/descriptionLayers/actionButtons.js index 7acd7afa9..9b8833333 100644 --- a/src/client/src/commons/form/profile/components/profileLayers/components/descriptionLayers/actionButtons.js +++ b/src/client/src/commons/form/profile/components/profileLayers/components/descriptionLayers/actionButtons.js @@ -28,7 +28,7 @@ const ActionButtons = props => { { e.stopPropagation(); setDescriptionIdSelectedForDelete(item.id); diff --git a/src/client/src/commons/form/profile/components/profileLayers/components/descriptionLayers/descriptionDeleteDialog.js b/src/client/src/commons/form/profile/components/profileLayers/components/descriptionLayers/descriptionDeleteDialog.js index 541895ceb..c1ea55388 100644 --- a/src/client/src/commons/form/profile/components/profileLayers/components/descriptionLayers/descriptionDeleteDialog.js +++ b/src/client/src/commons/form/profile/components/profileLayers/components/descriptionLayers/descriptionDeleteDialog.js @@ -27,9 +27,11 @@ const DescriptionDeleteDialog = props => { {t("deletelayerconfirmation")} - + ); }); -export const BaseIconButton = styled(IconButton)({ - color: ButtonColor.default, - "&:hover, &.Mui-focusVisible, &:active, &:focus, &:focus-visible": { - backgroundColor: "rgba(0, 0, 0, 0.0)", - }, - "& .MuiTouchRipple-root": { - display: "none", - }, -}); - -export const IconButtonWithMargin = styled(BaseIconButton)({ +export const IconButtonWithMargin = styled(IconButton)({ marginLeft: "5px", }); @@ -62,17 +27,17 @@ export const BdmsIconButton = ({ onClick, }) => { const { t } = useTranslation(); - var colorToUse = color ? color : ButtonColor.default; + var colorToUse = color ? color : "primary"; return ( - {icon} - + ); diff --git a/src/client/src/components/dataCard/dataCards.js b/src/client/src/components/dataCard/dataCards.js index 3fa2edc57..afe586252 100644 --- a/src/client/src/components/dataCard/dataCards.js +++ b/src/client/src/components/dataCard/dataCards.js @@ -125,7 +125,7 @@ export const DataCards = props => { {state.isLoadingData ? ( - + ) : displayed?.length > 0 ? ( diff --git a/src/client/src/components/dataCard/dataDisplayCard.js b/src/client/src/components/dataCard/dataDisplayCard.js index 0ca10176b..eb4a850ee 100644 --- a/src/client/src/components/dataCard/dataDisplayCard.js +++ b/src/client/src/components/dataCard/dataDisplayCard.js @@ -2,7 +2,7 @@ import React from "react"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; import DeleteIcon from "@mui/icons-material/Delete"; import { DataCardButtonContainer } from "../dataCard/dataCard"; -import { BdmsIconButton, ButtonColor } from "../buttons/buttons"; +import { BdmsIconButton } from "../buttons/buttons"; import { StackFullWidth } from "../baseComponents"; export const DataDisplayCard = props => { @@ -24,7 +24,7 @@ export const DataDisplayCard = props => { } tooltipLabel={"delete"} - color={ButtonColor.error} + color="error" onClick={e => { e.stopPropagation(); !selected && deleteData(item.id); From 8b2e367eec07801864a48fd8cd17fe63041d458f Mon Sep 17 00:00:00 2001 From: tschumpr Date: Tue, 13 Feb 2024 10:13:47 +0100 Subject: [PATCH 39/44] Use same cancel icon in completion --- .../commons/form/borehole/completion/completionHeaderInput.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/client/src/commons/form/borehole/completion/completionHeaderInput.js b/src/client/src/commons/form/borehole/completion/completionHeaderInput.js index 0086273fb..375d2e19b 100644 --- a/src/client/src/commons/form/borehole/completion/completionHeaderInput.js +++ b/src/client/src/commons/form/borehole/completion/completionHeaderInput.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { useForm, FormProvider } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { Stack, Tooltip } from "@mui/material"; -import CloseIcon from "@mui/icons-material/Close"; +import CancelIcon from "@mui/icons-material/Cancel"; import SaveIcon from "@mui/icons-material/Save"; import { useDomains } from "../../../../api/fetchApiV2"; import { completionSchemaConstants } from "./completionSchemaConstants"; @@ -139,7 +139,7 @@ const CompletionHeaderInput = props => { formMethods.reset(selectedCompletion); cancelChanges(); }}> - + From 6315d205d71b0525cced6f33d41ac407a65417b1 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Tue, 13 Feb 2024 10:25:29 +0100 Subject: [PATCH 40/44] Re-use icon button in completion --- .../completion/completionHeaderDisplay.js | 65 +++++++++---------- .../completion/completionHeaderInput.js | 48 ++++++-------- 2 files changed, 51 insertions(+), 62 deletions(-) diff --git a/src/client/src/commons/form/borehole/completion/completionHeaderDisplay.js b/src/client/src/commons/form/borehole/completion/completionHeaderDisplay.js index e9ab1f998..6fb2949df 100644 --- a/src/client/src/commons/form/borehole/completion/completionHeaderDisplay.js +++ b/src/client/src/commons/form/borehole/completion/completionHeaderDisplay.js @@ -1,7 +1,9 @@ import React, { useState } from "react"; -import { useTranslation } from "react-i18next"; -import { Stack, Tooltip } from "@mui/material"; -import { IconButtonWithMargin } from "../../../../components/buttons/buttons"; +import { Stack } from "@mui/material"; +import { + BdmsIconButton, + IconButtonWithMargin, +} from "../../../../components/buttons/buttons"; import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ExpandLessIcon from "@mui/icons-material/ExpandLess"; @@ -17,7 +19,6 @@ const CompletionHeaderDisplay = props => { copyCompletion, deleteCompletion, } = props; - const { t } = useTranslation(); const [expanded, setExpanded] = useState(false); const toggleHeader = () => { setExpanded(!expanded); @@ -80,37 +81,31 @@ const CompletionHeaderDisplay = props => { marginLeft: "auto", visibility: isEditable ? "visible" : "hidden", }}> - - { - e.stopPropagation(); - setEditing(true); - }}> - - - - - { - e.stopPropagation(); - copyCompletion(); - }}> - - - - - { - e.stopPropagation(); - deleteCompletion(); - }}> - - - + } + tooltipLabel={"edit"} + onClick={e => { + e.stopPropagation(); + setEditing(true); + }} + /> + } + tooltipLabel={"copy"} + onClick={e => { + e.stopPropagation(); + copyCompletion(); + }} + /> + } + tooltipLabel={"delete"} + color="error" + onClick={e => { + e.stopPropagation(); + deleteCompletion(); + }} + /> )} diff --git a/src/client/src/commons/form/borehole/completion/completionHeaderInput.js b/src/client/src/commons/form/borehole/completion/completionHeaderInput.js index 375d2e19b..c0804cb05 100644 --- a/src/client/src/commons/form/borehole/completion/completionHeaderInput.js +++ b/src/client/src/commons/form/borehole/completion/completionHeaderInput.js @@ -1,12 +1,12 @@ import React, { useState, useEffect } from "react"; import { useForm, FormProvider } from "react-hook-form"; import { useTranslation } from "react-i18next"; -import { Stack, Tooltip } from "@mui/material"; +import { Stack } from "@mui/material"; import CancelIcon from "@mui/icons-material/Cancel"; import SaveIcon from "@mui/icons-material/Save"; import { useDomains } from "../../../../api/fetchApiV2"; import { completionSchemaConstants } from "./completionSchemaConstants"; -import { IconButtonWithMargin } from "../../../../components/buttons/buttons"; +import { BdmsIconButton } from "../../../../components/buttons/buttons"; import { FormInput, FormSelect, @@ -24,7 +24,7 @@ const CompletionHeaderInput = props => { } = props; const domains = useDomains(); const formMethods = useForm({ mode: "all" }); - const { t, i18n } = useTranslation(); + const { i18n } = useTranslation(); const [selectedCompletion, setSelectedCompletion] = useState({ ...completion, @@ -131,30 +131,24 @@ const CompletionHeaderInput = props => { - - { - e.stopPropagation(); - formMethods.reset(selectedCompletion); - cancelChanges(); - }}> - - - - - - { - e.stopPropagation(); - formMethods.handleSubmit(submitForm)(); - }}> - - - - + } + tooltipLabel={"cancel"} + onClick={e => { + e.stopPropagation(); + formMethods.reset(selectedCompletion); + cancelChanges(); + }} + /> + } + tooltipLabel={"save"} + disabled={!formMethods.formState.isValid} + onClick={e => { + e.stopPropagation(); + formMethods.handleSubmit(submitForm)(); + }} + /> From c4ae24eaf214fe965a01363153c65f19b8407f99 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Tue, 13 Feb 2024 12:32:28 +0100 Subject: [PATCH 41/44] Use text buttons --- src/client/cypress/e2e/editor/backfill.cy.js | 15 ++- src/client/cypress/e2e/editor/casing.cy.js | 20 ++-- .../cypress/e2e/editor/completion.cy.js | 54 +++++------ .../cypress/e2e/editor/fieldMeasurement.cy.js | 22 +++-- .../editor/groundwaterLevelMeasurement.cy.js | 22 +++-- src/client/cypress/e2e/editor/hydrotest.cy.js | 24 +++-- .../cypress/e2e/editor/instrumentation.cy.js | 20 ++-- .../cypress/e2e/editor/waterIngress.cy.js | 20 ++-- .../cypress/e2e/helpers/buttonHelpers.js | 23 +++++ src/client/src/App.js | 2 +- .../form/borehole/completion/completion.js | 19 ++-- .../completion/completionHeaderDisplay.js | 71 ++++++-------- .../completion/completionHeaderInput.js | 22 ++--- .../borehole/hydrogeology/hydrotestInput.js | 24 ++--- src/client/src/components/buttons/buttons.js | 93 ++++++++++++------- .../src/components/dataCard/dataCard.js | 11 ++- .../src/components/dataCard/dataCards.js | 8 +- .../components/dataCard/dataDisplayCard.js | 13 +-- .../src/components/dataCard/dataInputCard.js | 12 +-- 19 files changed, 274 insertions(+), 221 deletions(-) create mode 100644 src/client/cypress/e2e/helpers/buttonHelpers.js diff --git a/src/client/cypress/e2e/editor/backfill.cy.js b/src/client/cypress/e2e/editor/backfill.cy.js index 06057d2ae..bc33559bd 100644 --- a/src/client/cypress/e2e/editor/backfill.cy.js +++ b/src/client/cypress/e2e/editor/backfill.cy.js @@ -5,6 +5,12 @@ import { startBoreholeEditing, } from "../helpers/testHelpers"; import { setInput, setSelect } from "../helpers/formHelpers"; +import { + addItem, + startEditing, + saveForm, + deleteItem, +} from "../helpers/buttonHelpers"; describe("Backfill crud tests", () => { it("add, edit and delete backfills", () => { @@ -31,6 +37,7 @@ describe("Backfill crud tests", () => { cy.wait("@backfill_GET"); // add new backfill card + addItem("addFilling"); cy.get('[data-cy="addFilling-button"]').click({ force: true }); cy.wait("@codelist_GET"); @@ -42,7 +49,7 @@ describe("Backfill crud tests", () => { setSelect("materialId", 1); // save backfill - cy.get('[data-cy="save-button"]').click(); + saveForm(); // check if backfill is saved cy.contains("123456"); @@ -52,18 +59,18 @@ describe("Backfill crud tests", () => { cy.contains("filter gravel"); // edit backfill - cy.get('[data-cy="edit-button"]').click({ force: true }); + startEditing(); cy.wait("@codelist_GET"); setInput("fromDepth", "222"); // close editing mask - cy.get('[data-cy="save-button"]').click({ force: true }); + saveForm(); cy.contains("222"); cy.contains("inactive"); // delete backfill - cy.get('[data-cy="delete-button"]').click({ force: true }); + deleteItem(); cy.contains("From depth").should("not.exist"); }); }); diff --git a/src/client/cypress/e2e/editor/casing.cy.js b/src/client/cypress/e2e/editor/casing.cy.js index 2d6949642..c713f2c14 100644 --- a/src/client/cypress/e2e/editor/casing.cy.js +++ b/src/client/cypress/e2e/editor/casing.cy.js @@ -9,6 +9,12 @@ import { setInput, setSelect, } from "../helpers/formHelpers"; +import { + addItem, + startEditing, + saveForm, + deleteItem, +} from "../helpers/buttonHelpers"; describe("Casing crud tests", () => { it("add, edit and delete casings", () => { @@ -35,7 +41,7 @@ describe("Casing crud tests", () => { cy.wait("@casing_GET"); // create casing - cy.get('[data-cy="addCasing-button"]').click(); + addItem("addCasing"); cy.wait("@codelist_GET"); setInput("name", "casing-1"); @@ -49,7 +55,7 @@ describe("Casing crud tests", () => { setInput("outerDiameter", "4"); setInput("notes", "Lorem."); - cy.get('[data-cy="save-button"]').click(); + saveForm(); cy.wait("@casing_GET"); evaluateDisplayValue("name", "casing-1"); @@ -64,13 +70,13 @@ describe("Casing crud tests", () => { evaluateDisplayValue("notes", "Lorem."); // update casing - cy.get('[data-cy="edit-button"]').click(); + startEditing(); cy.wait("@codelist_GET"); setInput("name", "casing-1 updated"); setSelect("materialId", 5); - cy.get('[data-cy="save-button"]').click({ force: true }); + saveForm(); evaluateDisplayValue("name", "casing-1 updated"); evaluateDisplayValue("materialCasingLayer", "concrete"); evaluateDisplayValue("casingInnerDiameter", "3"); @@ -80,7 +86,7 @@ describe("Casing crud tests", () => { cy.get("[data-cy=completion-content-header-tab-instrumentation]").click(); cy.wait("@instrumentation_GET"); - cy.get('[data-cy="addInstrument-button"]').click({ force: true }); + addItem("addInstrument"); cy.wait("@casing_GET"); setInput("notes", "Lorem."); @@ -90,12 +96,12 @@ describe("Casing crud tests", () => { setSelect("kindId", 2); setSelect("statusId", 1); setSelect("casingId", 1); - cy.get('[data-cy="save-button"]').click({ force: true }); + saveForm(); cy.get("[data-cy=completion-content-header-tab-casing]").click(); cy.wait("@casing_GET"); - cy.get('[data-cy="delete-button"]').click({ force: true }); + deleteItem(); cy.wait("@casing_DELETE"); cy.contains("casing-1 updated").should("not.exist"); diff --git a/src/client/cypress/e2e/editor/completion.cy.js b/src/client/cypress/e2e/editor/completion.cy.js index 10f754c4b..bf9ab401b 100644 --- a/src/client/cypress/e2e/editor/completion.cy.js +++ b/src/client/cypress/e2e/editor/completion.cy.js @@ -14,6 +14,14 @@ import { evaluateCheckbox, evaluateDisplayValue, } from "../helpers/formHelpers"; +import { + addItem, + startEditing, + cancelEditing, + saveForm, + deleteItem, + copyItem, +} from "../helpers/buttonHelpers"; const toggleHeaderOpen = () => { cy.get('[data-cy="completion-header-display"]') @@ -26,44 +34,28 @@ const toggleHeaderOpen = () => { }; const addCompletion = () => { - cy.get('[data-cy="add-completion-button"]').click({ - force: true, - }); + addItem("addCompletion"); cy.wait("@codelist_GET"); }; -const startEditing = () => { +const startEdit = () => { toggleHeaderOpen(); - cy.get('[data-cy="edit-button"]').click({ - force: true, - }); -}; - -const cancelEditing = () => { - cy.get('[data-cy="cancel-button"]').click({ - force: true, - }); + startEditing(); }; const saveChanges = () => { - cy.get('[data-cy="save-button"]').click({ - force: true, - }); + saveForm(); cy.wait("@get-completions-by-boreholeId"); }; const copyCompletion = () => { toggleHeaderOpen(); - cy.get('[data-cy="copy-button"]').click({ - force: true, - }); + copyItem(); }; const deleteCompletion = () => { toggleHeaderOpen(); - cy.get('[data-cy="delete-button"]').click({ - force: true, - }); + deleteItem(); }; const setTab = index => { @@ -117,16 +109,16 @@ describe("completion crud tests", () => { cy.contains("Compl-1 (Clone)"); // edit completion - startEditing(); + startEdit(); setSelect("kindId", 1); cancelEditing(); cy.contains("telescopic"); - startEditing(); + startEdit(); setInput("name", "Compl-2"); toggleCheckbox("isPrimary"); saveChanges(); cy.contains("Compl-2"); - startEditing(); + startEdit(); evaluateCheckbox("isPrimary", true); cancelEditing(); @@ -214,7 +206,7 @@ describe("completion crud tests", () => { // switch tabs // existing editing to other existing: no prompt should be displayed when no changes have been made - startEditing(); + startEdit(); setTab(0); cy.get('[data-cy="prompt"]').should("not.exist"); isTabSelected(0); @@ -226,7 +218,7 @@ describe("completion crud tests", () => { }); // existing editing to other existing: tab switching can be canceled in prompt - startEditing(); + startEdit(); setInput("name", "Compl-1 updated"); setTab(1); handlePrompt("Unsaved changes", "cancel"); @@ -252,7 +244,7 @@ describe("completion crud tests", () => { }); // existing editing to other existing: changes can be saved in prompt - startEditing(); + startEdit(); setInput("name", "Compl-2 updated"); setTab(0); handlePrompt("Unsaved changes", "save"); @@ -339,7 +331,7 @@ describe("completion crud tests", () => { ); expect(location.hash).to.eq("#casing"); }); - startEditing(); + startEdit(); cy.get(`[data-cy="name-formInput"]`).click(); addCompletion(); evaluateInput("name", ""); @@ -359,7 +351,7 @@ describe("completion crud tests", () => { ); expect(location.hash).to.eq("#casing"); }); - startEditing(); + startEdit(); setInput("name", "Reset compl-1"); addCompletion(); handlePrompt("Unsaved changes", "reset"); @@ -377,7 +369,7 @@ describe("completion crud tests", () => { ); expect(location.hash).to.eq("#casing"); }); - startEditing(); + startEdit(); setInput("name", "Reset compl-1"); addCompletion(); handlePrompt("Unsaved changes", "save"); diff --git a/src/client/cypress/e2e/editor/fieldMeasurement.cy.js b/src/client/cypress/e2e/editor/fieldMeasurement.cy.js index d7d61460e..7fdd55659 100644 --- a/src/client/cypress/e2e/editor/fieldMeasurement.cy.js +++ b/src/client/cypress/e2e/editor/fieldMeasurement.cy.js @@ -9,6 +9,12 @@ import { setInput, setSelect, } from "../helpers/formHelpers"; +import { + addItem, + startEditing, + saveForm, + deleteItem, +} from "../helpers/buttonHelpers"; describe("Tests for the field measurement editor.", () => { it("Creates, updates and deletes field measurement", () => { @@ -26,7 +32,7 @@ describe("Tests for the field measurement editor.", () => { cy.get("[data-cy=completion-content-header-tab-casing]").click(); cy.wait("@casing_GET"); - cy.get('[data-cy="addCasing-button"]').click({ force: true }); + addItem("addCasing"); cy.wait("@codelist_GET"); setInput("name", "casing-1"); @@ -39,7 +45,7 @@ describe("Tests for the field measurement editor.", () => { setInput("innerDiameter", "3"); setInput("outerDiameter", "4"); - cy.get('[data-cy="save-button"]').click(); + saveForm(); cy.wait("@casing_GET"); cy.get('[data-cy="hydrogeology-menu-item"]').click({ force: true }); @@ -50,9 +56,7 @@ describe("Tests for the field measurement editor.", () => { cy.contains("span", "DE").click({ force: true }); // create field measurement - cy.get('[data-cy="addFieldmeasurement-button"]').click({ - force: true, - }); + addItem("addFieldmeasurement"); cy.wait("@fieldmeasurement_GET"); setSelect("reliabilityId", 1); @@ -63,7 +67,7 @@ describe("Tests for the field measurement editor.", () => { setInput("value", "77.1045"); // close editing mask - cy.get('[data-cy="save-button"]').click({ force: true }); + saveForm(); //assert field measurementis displayed evaluateDisplayValue("casingName", "casing-1"); @@ -72,14 +76,14 @@ describe("Tests for the field measurement editor.", () => { evaluateDisplayValue("value", "77.1045 %"); // edit field measurement - cy.get('[data-cy="edit-button"]').click({ force: true }); + startEditing(); setSelect("sampleTypeId", 0); - cy.get('[data-cy="save-button"]').click({ force: true }); + saveForm(); evaluateDisplayValue("field_measurement_sample_type", "Pumpprobe"); evaluateDisplayValue("casingName", "casing-1"); // delete field measurement - cy.get('[data-cy="delete-button"]').click({ force: true }); + deleteItem(); cy.wait("@fieldmeasurement_DELETE"); cy.get("body").should("not.contain", "Pumpprobe"); }); diff --git a/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js b/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js index 28d89726f..219f7b603 100644 --- a/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js +++ b/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js @@ -9,6 +9,12 @@ import { setInput, setSelect, } from "../helpers/formHelpers"; +import { + addItem, + startEditing, + saveForm, + deleteItem, +} from "../helpers/buttonHelpers"; describe("Tests for the groundwater level measurement editor.", () => { it("Creates, updates and deletes groundwater level measurement", () => { @@ -26,7 +32,7 @@ describe("Tests for the groundwater level measurement editor.", () => { cy.get("[data-cy=completion-content-header-tab-casing]").click(); cy.wait("@casing_GET"); - cy.get('[data-cy="addCasing-button"]').click({ force: true }); + addItem("addCasing"); cy.wait("@codelist_GET"); setInput("name", "casing-1"); @@ -39,7 +45,7 @@ describe("Tests for the groundwater level measurement editor.", () => { setInput("innerDiameter", "3"); setInput("outerDiameter", "4"); - cy.get('[data-cy="save-button"]').click(); + saveForm(); cy.wait("@casing_GET"); cy.get('[data-cy="hydrogeology-menu-item"]').click({ force: true }); @@ -52,9 +58,7 @@ describe("Tests for the groundwater level measurement editor.", () => { cy.contains("span", "DE").click({ force: true }); // create groundwater level measurement - cy.get('[data-cy="addGroundwaterLevelMeasurement-button"]').click({ - force: true, - }); + addItem("addGroundwaterLevelMeasurement"); cy.wait("@groundwaterlevelmeasurement_GET"); setSelect("kindId", 2); @@ -65,7 +69,7 @@ describe("Tests for the groundwater level measurement editor.", () => { setInput("levelMasl", "5.4567"); // close editing mask - cy.get('[data-cy="save-button"]').click({ force: true }); + saveForm(); evaluateDisplayValue("casingName", "casing-1"); evaluateDisplayValue("gwlm_kind", "Manometer"); evaluateDisplayValue("gwlm_levelm", "789.12"); @@ -73,14 +77,14 @@ describe("Tests for the groundwater level measurement editor.", () => { evaluateDisplayValue("reliability", "fraglich"); // edit groundwater level measurement - cy.get('[data-cy="edit-button"]').click({ force: true }); + startEditing(); setSelect("kindId", 1); - cy.get('[data-cy="save-button"]').click({ force: true }); + saveForm(); evaluateDisplayValue("gwlm_kind", "Drucksonde"); evaluateDisplayValue("casingName", "casing-1"); // delete groundwater level measurement - cy.get('[data-cy="delete-button"]').click({ force: true }); + deleteItem(); cy.wait("@groundwaterlevelmeasurement_DELETE"); cy.get("body").should("not.contain", "Drucksonde"); }); diff --git a/src/client/cypress/e2e/editor/hydrotest.cy.js b/src/client/cypress/e2e/editor/hydrotest.cy.js index e9d6eb68b..3283360c0 100644 --- a/src/client/cypress/e2e/editor/hydrotest.cy.js +++ b/src/client/cypress/e2e/editor/hydrotest.cy.js @@ -11,6 +11,12 @@ import { toggleMultiSelect, evaluateMultiSelect, } from "../helpers/formHelpers"; +import { + addItem, + startEditing, + saveForm, + deleteItem, +} from "../helpers/buttonHelpers"; describe("Tests for the hydrotest editor.", () => { it("Creates, updates and deletes hydrotests", () => { @@ -28,7 +34,7 @@ describe("Tests for the hydrotest editor.", () => { cy.get("[data-cy=completion-content-header-tab-casing]").click(); cy.wait("@casing_GET"); - cy.get('[data-cy="addCasing-button"]').click({ force: true }); + addItem("addCasing"); cy.wait("@codelist_GET"); setInput("name", "casing-1"); @@ -41,7 +47,7 @@ describe("Tests for the hydrotest editor.", () => { setInput("innerDiameter", "3"); setInput("outerDiameter", "4"); - cy.get('[data-cy="save-button"]').click(); + saveForm(); cy.wait("@casing_GET"); cy.get('[data-cy="hydrogeology-menu-item"]').click({ force: true }); @@ -52,7 +58,7 @@ describe("Tests for the hydrotest editor.", () => { cy.contains("span", "DE").click({ force: true }); // create hydrotest - cy.get('[data-cy="addHydrotest-button"]').click({ force: true }); + addItem("addHydrotest"); cy.wait("@casing_GET"); setSelect("reliabilityId", 1); @@ -60,19 +66,19 @@ describe("Tests for the hydrotest editor.", () => { setSelect("casingId", 1); toggleMultiSelect("testKindId", [2]); - cy.get('[data-cy="save-button"]').click({ force: true }); + saveForm(); cy.wait("@hydrotest_GET"); evaluateDisplayValue("reliability", "fraglich"); evaluateDisplayValue("casingName", "casing-1"); evaluateDisplayValue("testKind", "Pump-/Injektionsversuch, variable Rate"); // update hydrotest - cy.get('[data-cy="edit-button"]').click({ force: true }); + startEditing(); toggleMultiSelect("flowDirectionId", [1, 0], 3); toggleMultiSelect("evaluationMethodId", [1, 0], 4); - cy.get('[data-cy="addHydrotestResult-button"]').click({ force: true }); + addItem("addHydrotestResult"); setSelect("hydrotestResults.0.parameterId", 0); toggleMultiSelect("testKindId", [2]); @@ -83,12 +89,12 @@ describe("Tests for the hydrotest editor.", () => { toggleMultiSelect("testKindId", [2]); toggleMultiSelect("flowDirectionId", [1, 0], 3); toggleMultiSelect("evaluationMethodId", [1, 0], 4); - cy.get('[data-cy="addHydrotestResult-button"]').click({ force: true }); + addItem("addHydrotestResult"); setSelect("hydrotestResults.0.parameterId", 0, 6); setInput("hydrotestResults.0.value", "10"); setInput("hydrotestResults.0.minValue", "5"); setInput("hydrotestResults.0.maxValue", "15"); - cy.get('[data-cy="save-button"]').click({ force: true }); + saveForm(); cy.wait("@hydrotest_GET"); evaluateDisplayValue("casingName", "casing-1"); @@ -101,7 +107,7 @@ describe("Tests for the hydrotest editor.", () => { evaluateDisplayValue("hydrotestResult.0.maxValue", "15 m/s"); // delete hydrotest - cy.get('[data-cy="delete-button"]').click({ force: true }); + deleteItem(); cy.wait("@hydrotest_GET"); cy.get("body").should( "not.contain", diff --git a/src/client/cypress/e2e/editor/instrumentation.cy.js b/src/client/cypress/e2e/editor/instrumentation.cy.js index 1490590af..722998c4d 100644 --- a/src/client/cypress/e2e/editor/instrumentation.cy.js +++ b/src/client/cypress/e2e/editor/instrumentation.cy.js @@ -5,6 +5,12 @@ import { createCompletion, } from "../helpers/testHelpers"; import { setInput, setSelect } from "../helpers/formHelpers"; +import { + addItem, + startEditing, + saveForm, + deleteItem, +} from "../helpers/buttonHelpers"; describe("Instrumentation crud tests", () => { it("add, edit and delete instrumentations", () => { @@ -30,7 +36,7 @@ describe("Instrumentation crud tests", () => { cy.get("[data-cy=completion-content-header-tab-casing]").click(); cy.wait("@casing_GET"); - cy.get('[data-cy="addCasing-button"]').click({ force: true }); + addItem("addCasing"); cy.wait("@codelist_GET"); setInput("name", "casing-1"); @@ -43,14 +49,14 @@ describe("Instrumentation crud tests", () => { setInput("innerDiameter", "3"); setInput("outerDiameter", "4"); - cy.get('[data-cy="save-button"]').click(); + saveForm(); cy.wait("@casing_GET"); cy.get("[data-cy=completion-content-header-tab-instrumentation]").click(); cy.wait("@instrumentation_GET"); // create instrumentation - cy.get('[data-cy="addInstrument-button"]').click({ force: true }); + addItem("addInstrument"); cy.wait("@casing_GET"); // fill out form @@ -62,7 +68,7 @@ describe("Instrumentation crud tests", () => { setSelect("statusId", 1); // save instrumentation - cy.get('[data-cy="save-button"]').click(); + saveForm(); // check if instrumentation is saved cy.contains("123456"); @@ -73,7 +79,7 @@ describe("Instrumentation crud tests", () => { cy.contains("inactive"); // edit instrumentation - cy.get('[data-cy="edit-button"]').click({ force: true }); + startEditing(); // We need the casings for the casing name dropdown cy.wait("@casing_GET"); @@ -81,13 +87,13 @@ describe("Instrumentation crud tests", () => { setSelect("casingId", 1); // close editing mask - cy.get('[data-cy="save-button"]').click({ force: true }); + saveForm(); cy.contains("casing-1"); cy.contains("222"); cy.contains("inactive"); // delete instrumentation - cy.get('[data-cy="delete-button"]').click({ force: true }); + deleteItem(); cy.contains("From depth").should("not.exist"); }); }); diff --git a/src/client/cypress/e2e/editor/waterIngress.cy.js b/src/client/cypress/e2e/editor/waterIngress.cy.js index 85aeab7a2..658445814 100644 --- a/src/client/cypress/e2e/editor/waterIngress.cy.js +++ b/src/client/cypress/e2e/editor/waterIngress.cy.js @@ -9,6 +9,12 @@ import { setInput, setSelect, } from "../helpers/formHelpers"; +import { + addItem, + startEditing, + saveForm, + deleteItem, +} from "../helpers/buttonHelpers"; describe("Tests for the wateringress editor.", () => { it("Creates, updates and deletes wateringresses", () => { @@ -34,7 +40,7 @@ describe("Tests for the wateringress editor.", () => { cy.get("[data-cy=completion-content-header-tab-casing]").click(); cy.wait("@casing_GET"); - cy.get('[data-cy="addCasing-button"]').click({ force: true }); + addItem("addCasing"); cy.wait("@codelist_GET"); setInput("name", "casing-1"); @@ -47,7 +53,7 @@ describe("Tests for the wateringress editor.", () => { setInput("innerDiameter", "3"); setInput("outerDiameter", "4"); - cy.get('[data-cy="save-button"]').click(); + saveForm(); cy.wait("@casing_GET"); cy.get('[data-cy="hydrogeology-menu-item"]').click({ force: true }); @@ -60,7 +66,7 @@ describe("Tests for the wateringress editor.", () => { cy.contains("span", "DE").click({ force: true }); // create wateringress - cy.get('[data-cy="addWaterIngress-button"]').click({ force: true }); + addItem("addWaterIngress"); cy.wait("@casing_GET"); setSelect("quantityId", 2); @@ -70,7 +76,7 @@ describe("Tests for the wateringress editor.", () => { setInput("startTime", "2012-11-14T12:06"); // close editing mask - cy.get('[data-cy="save-button"]').click({ force: true }); + saveForm(); evaluateDisplayValue("quantity", "viel (> 120 l/min)"); evaluateDisplayValue("conditions", "frei/ungespannt"); @@ -78,14 +84,14 @@ describe("Tests for the wateringress editor.", () => { evaluateDisplayValue("casingName", "casing-1"); // edit wateringress - cy.get('[data-cy="edit-button"]').click({ force: true }); + startEditing(); setSelect("quantityId", 1); - cy.get('[data-cy="save-button"]').click({ force: true }); + saveForm(); evaluateDisplayValue("quantity", "mittel (30 - 120 l/min)"); evaluateDisplayValue("casingName", "casing-1"); // delete wateringress - cy.get('[data-cy="delete-button"]').click({ force: true }); + deleteItem(); cy.wait("@wateringress_DELETE"); cy.get("body").should("not.contain", "mittel (30 - 120 l/min)"); }); diff --git a/src/client/cypress/e2e/helpers/buttonHelpers.js b/src/client/cypress/e2e/helpers/buttonHelpers.js new file mode 100644 index 000000000..5c2e290ce --- /dev/null +++ b/src/client/cypress/e2e/helpers/buttonHelpers.js @@ -0,0 +1,23 @@ +export const saveForm = () => { + cy.get('[data-cy="save-button"]').click({ force: true }); +}; + +export const startEditing = () => { + cy.get('[data-cy="edit-button"]').click({ force: true }); +}; + +export const cancelEditing = () => { + cy.get('[data-cy="cancel-button"]').click({ force: true }); +}; + +export const deleteItem = () => { + cy.get('[data-cy="delete-button"]').click({ force: true }); +}; + +export const copyItem = () => { + cy.get('[data-cy="copy-button"]').click({ force: true }); +}; + +export const addItem = itemLabel => { + cy.get(`[data-cy="${itemLabel}-button"]`).click({ force: true }); +}; diff --git a/src/client/src/App.js b/src/client/src/App.js index 41856f2a7..315016dc6 100644 --- a/src/client/src/App.js +++ b/src/client/src/App.js @@ -79,7 +79,7 @@ export const theme = createTheme({ fontFamily: "Lato", fontWeight: "bold", textTransform: "none", - marginLeft: "0.5em", + marginLeft: "5px", boxShadow: "none", "&:hover": { boxShadow: "none", diff --git a/src/client/src/commons/form/borehole/completion/completion.js b/src/client/src/commons/form/borehole/completion/completion.js index 8c0084a59..5d7c22c6e 100644 --- a/src/client/src/commons/form/borehole/completion/completion.js +++ b/src/client/src/commons/form/borehole/completion/completion.js @@ -1,7 +1,7 @@ import React, { useState, useEffect, useRef } from "react"; import { useHistory, useLocation, useParams } from "react-router-dom"; import { useTranslation } from "react-i18next"; -import { CircularProgress, Stack, Tooltip, Typography } from "@mui/material"; +import { CircularProgress, Stack, Typography } from "@mui/material"; import { CompletionBox, CompletionTabs, @@ -269,16 +269,13 @@ const Completion = props => { })} {isEditable && ( - - { - handleCompletionChanged(e, -1); - }}> - {t("addCompletion")} - - + { + handleCompletionChanged(e, -1); + }} + /> )}
{state.selected != null && ( diff --git a/src/client/src/commons/form/borehole/completion/completionHeaderDisplay.js b/src/client/src/commons/form/borehole/completion/completionHeaderDisplay.js index 6fb2949df..2339d3310 100644 --- a/src/client/src/commons/form/borehole/completion/completionHeaderDisplay.js +++ b/src/client/src/commons/form/borehole/completion/completionHeaderDisplay.js @@ -1,15 +1,14 @@ import React, { useState } from "react"; -import { Stack } from "@mui/material"; +import { IconButton, Stack } from "@mui/material"; +import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; import { - BdmsIconButton, - IconButtonWithMargin, + EditButton, + CopyButton, + DeleteButton, } from "../../../../components/buttons/buttons"; -import { FormDisplay, FormDisplayType } from "../../../../components/form/form"; +import { DataCardButtonContainer } from "../../../../components/dataCard/dataCard"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ExpandLessIcon from "@mui/icons-material/ExpandLess"; -import ModeEditIcon from "@mui/icons-material/ModeEdit"; -import CopyIcon from "@mui/icons-material/ContentCopy"; -import DeleteIcon from "@mui/icons-material/Delete"; const CompletionHeaderDisplay = props => { const { @@ -75,46 +74,36 @@ const CompletionHeaderDisplay = props => { sx={{ flex: "0 0 400px" }} />
- - } - tooltipLabel={"edit"} - onClick={e => { - e.stopPropagation(); - setEditing(true); - }} - /> - } - tooltipLabel={"copy"} - onClick={e => { - e.stopPropagation(); - copyCompletion(); - }} - /> - } - tooltipLabel={"delete"} - color="error" - onClick={e => { - e.stopPropagation(); - deleteCompletion(); - }} - /> - + {isEditable && ( + + { + e.stopPropagation(); + setEditing(true); + }} + /> + { + e.stopPropagation(); + copyCompletion(); + }} + /> + { + e.stopPropagation(); + deleteCompletion(); + }} + /> + + )} )} - {expanded ? : } - +
); diff --git a/src/client/src/commons/form/borehole/completion/completionHeaderInput.js b/src/client/src/commons/form/borehole/completion/completionHeaderInput.js index c0804cb05..e8abbf432 100644 --- a/src/client/src/commons/form/borehole/completion/completionHeaderInput.js +++ b/src/client/src/commons/form/borehole/completion/completionHeaderInput.js @@ -2,16 +2,18 @@ import React, { useState, useEffect } from "react"; import { useForm, FormProvider } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { Stack } from "@mui/material"; -import CancelIcon from "@mui/icons-material/Cancel"; -import SaveIcon from "@mui/icons-material/Save"; import { useDomains } from "../../../../api/fetchApiV2"; import { completionSchemaConstants } from "./completionSchemaConstants"; -import { BdmsIconButton } from "../../../../components/buttons/buttons"; +import { DataCardButtonContainer } from "../../../../components/dataCard/dataCard"; import { FormInput, FormSelect, FormCheckbox, } from "../../../../components/form/form"; +import { + CancelButton, + SaveButton, +} from "../../../../components/buttons/buttons"; import Prompt from "../../../../components/prompt/prompt"; const CompletionHeaderInput = props => { @@ -128,28 +130,22 @@ const CompletionHeaderInput = props => { sx={{ flex: "0 0 400px" }} />
- - } - tooltipLabel={"cancel"} + + { e.stopPropagation(); formMethods.reset(selectedCompletion); cancelChanges(); }} /> - } - tooltipLabel={"save"} + { e.stopPropagation(); formMethods.handleSubmit(submitForm)(); }} /> - +
diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js index 64c11d6c2..5afbc9169 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js +++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.js @@ -13,12 +13,11 @@ import { FormSelect, } from "../../../../components/form/form"; import { StackHalfWidth } from "../../../../components/baseComponents"; -import CancelIcon from "@mui/icons-material/Cancel"; -import SaveIcon from "@mui/icons-material/Save"; import { DataCardButtonContainer } from "../../../../components/dataCard/dataCard"; import { AddButton, - BdmsIconButton, + CancelButton, + SaveButton, } from "../../../../components/buttons/buttons"; import ObservationInput from "./observationInput"; import { useTranslation } from "react-i18next"; @@ -301,12 +300,11 @@ const HydrotestInput = props => { {t("hydrotestResult")} { append(); - }}> - {t("addHydrotestResult")} - + }} + /> {fields.map((field, index) => ( { )} - } - tooltipLabel={"cancel"} + { formMethods.reset(); setSelected(null); }} /> - } - tooltipLabel={"save"} + closeFormIfCompleted()} + onClick={() => { + closeFormIfCompleted(); + }} /> diff --git a/src/client/src/components/buttons/buttons.js b/src/client/src/components/buttons/buttons.js index 08d27c967..5cb3f9852 100644 --- a/src/client/src/components/buttons/buttons.js +++ b/src/client/src/components/buttons/buttons.js @@ -1,44 +1,73 @@ import React, { forwardRef } from "react"; -import { useTranslation } from "react-i18next"; -import { Button, IconButton, Tooltip } from "@mui/material"; -import { styled } from "@mui/system"; +import TranslationText from "../../commons/form/translationText"; +import { Button } from "@mui/material"; import AddIcon from "@mui/icons-material/Add"; +import ModeEditIcon from "@mui/icons-material/ModeEdit"; +import CopyIcon from "@mui/icons-material/ContentCopy"; +import DeleteIcon from "@mui/icons-material/Delete"; +import CloseIcon from "@mui/icons-material/Close"; +import SaveIcon from "@mui/icons-material/Save"; + +export const BdmsBaseButton = forwardRef((props, ref) => { + return ( + + ); +}); export const AddButton = forwardRef((props, ref) => { - const { t } = useTranslation(); return ( - - - + } + /> + ); +}); + +export const EditButton = forwardRef((props, ref) => { + return ( + } /> ); }); -export const IconButtonWithMargin = styled(IconButton)({ - marginLeft: "5px", +export const CopyButton = forwardRef((props, ref) => { + return ( + } /> + ); }); -export const BdmsIconButton = ({ - icon, - tooltipLabel, - color, - disabled, - onClick, -}) => { - const { t } = useTranslation(); - var colorToUse = color ? color : "primary"; +export const CancelButton = forwardRef((props, ref) => { return ( - - - - {icon} - - - + } /> ); -}; +}); + +export const SaveButton = forwardRef((props, ref) => { + return ( + } /> + ); +}); + +export const DeleteButton = forwardRef((props, ref) => { + return ( + + ); +}); diff --git a/src/client/src/components/dataCard/dataCard.js b/src/client/src/components/dataCard/dataCard.js index fda13b14a..4a2b8d0cc 100644 --- a/src/client/src/components/dataCard/dataCard.js +++ b/src/client/src/components/dataCard/dataCard.js @@ -45,7 +45,7 @@ export const DataCard = forwardRef((props, ref) => { width: "100%", border: "1px solid lightgrey", borderRadius: "3px", - padding: "12px 12px 16px 12px", + padding: "16px 12px 16px 22px", marginBottom: "8px", })); @@ -58,7 +58,14 @@ export const DataCard = forwardRef((props, ref) => { export const DataCardButtonContainer = forwardRef((props, ref) => { return ( - + {props.children} diff --git a/src/client/src/components/dataCard/dataCards.js b/src/client/src/components/dataCard/dataCards.js index afe586252..c237e6ab4 100644 --- a/src/client/src/components/dataCard/dataCards.js +++ b/src/client/src/components/dataCard/dataCards.js @@ -109,8 +109,7 @@ export const DataCards = props => { {isEditable && ( { e.stopPropagation(); if (!selected) { @@ -118,9 +117,8 @@ export const DataCards = props => { setDisplayed([...state.data, temp]); setSelected(temp); } - }}> - {t(addLabel)} - + }} + /> )} {state.isLoadingData ? ( diff --git a/src/client/src/components/dataCard/dataDisplayCard.js b/src/client/src/components/dataCard/dataDisplayCard.js index eb4a850ee..a84d84955 100644 --- a/src/client/src/components/dataCard/dataDisplayCard.js +++ b/src/client/src/components/dataCard/dataDisplayCard.js @@ -1,9 +1,7 @@ import React from "react"; -import ModeEditIcon from "@mui/icons-material/ModeEdit"; -import DeleteIcon from "@mui/icons-material/Delete"; import { DataCardButtonContainer } from "../dataCard/dataCard"; -import { BdmsIconButton } from "../buttons/buttons"; import { StackFullWidth } from "../baseComponents"; +import { EditButton, DeleteButton } from "../buttons/buttons"; export const DataDisplayCard = props => { const { item, selected, setSelected, deleteData, isEditable } = props; @@ -13,18 +11,13 @@ export const DataDisplayCard = props => { {props.children} {isEditable && ( - } - tooltipLabel={"edit"} + { e.stopPropagation(); !selected && setSelected(item); }} /> - } - tooltipLabel={"delete"} - color="error" + { e.stopPropagation(); !selected && deleteData(item.id); diff --git a/src/client/src/components/dataCard/dataInputCard.js b/src/client/src/components/dataCard/dataInputCard.js index fdad27e9f..f73a5efa1 100644 --- a/src/client/src/components/dataCard/dataInputCard.js +++ b/src/client/src/components/dataCard/dataInputCard.js @@ -1,10 +1,8 @@ import React, { useEffect } from "react"; import { useForm, FormProvider } from "react-hook-form"; -import CancelIcon from "@mui/icons-material/Cancel"; -import SaveIcon from "@mui/icons-material/Save"; import { DataCardButtonContainer } from "../dataCard/dataCard"; -import { BdmsIconButton } from "../buttons/buttons"; import { StackFullWidth } from "../baseComponents"; +import { CancelButton, SaveButton } from "../buttons/buttons"; export const DataInputCard = props => { const { item, setSelected, addData, updateData, prepareFormDataForSubmit } = @@ -43,17 +41,13 @@ export const DataInputCard = props => {
{props.children} - } - tooltipLabel={"cancel"} + { formMethods.reset(); setSelected(null); }} /> - } - tooltipLabel={"save"} + closeFormIfCompleted()} /> From 4b082b7d517c4c9bca159817a400ff04100d193e Mon Sep 17 00:00:00 2001 From: tschumpr Date: Tue, 13 Feb 2024 12:54:22 +0100 Subject: [PATCH 42/44] Re-use button components --- .../descriptionDeleteDialog.js | 29 +++++++------------ 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/src/client/src/commons/form/profile/components/profileLayers/components/descriptionLayers/descriptionDeleteDialog.js b/src/client/src/commons/form/profile/components/profileLayers/components/descriptionLayers/descriptionDeleteDialog.js index c1ea55388..7766ab9e3 100644 --- a/src/client/src/commons/form/profile/components/profileLayers/components/descriptionLayers/descriptionDeleteDialog.js +++ b/src/client/src/commons/form/profile/components/profileLayers/components/descriptionLayers/descriptionDeleteDialog.js @@ -1,10 +1,12 @@ import React from "react"; -import { Box, Button, Stack, Typography } from "@mui/material"; -import ClearIcon from "@mui/icons-material/Clear"; -import DeleteIcon from "@mui/icons-material/Delete"; +import { Box, Stack, Typography } from "@mui/material"; import WarningIcon from "@mui/icons-material/Warning"; import { useTranslation } from "react-i18next"; import { useTheme } from "@mui/material/styles"; +import { + CancelButton, + DeleteButton, +} from "../../../../../../../components/buttons/buttons"; const DescriptionDeleteDialog = props => { const { item, setDescriptionIdSelectedForDelete, deleteMutation } = props; @@ -30,27 +32,18 @@ const DescriptionDeleteDialog = props => { - - + }} + /> ); From 9ea8cac2979ec4ebdea2bd0b8aee72d9db2c477a Mon Sep 17 00:00:00 2001 From: tschumpr Date: Tue, 13 Feb 2024 13:25:22 +0100 Subject: [PATCH 43/44] Fix test --- src/client/cypress/e2e/editor/lithologicalDescription.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/cypress/e2e/editor/lithologicalDescription.cy.js b/src/client/cypress/e2e/editor/lithologicalDescription.cy.js index d0d88813b..40aa4daf9 100644 --- a/src/client/cypress/e2e/editor/lithologicalDescription.cy.js +++ b/src/client/cypress/e2e/editor/lithologicalDescription.cy.js @@ -103,7 +103,7 @@ describe("Tests for the lithological description column.", () => { // delete last layer cy.get('[data-cy="description-1"] [data-testid="DeleteIcon"] ').click(); - cy.contains("Confirm").click(); + cy.contains("Delete").click(); cy.wait("@lithological_description"); // delete request cy.wait("@lithological_description"); // updated get request cy.wait(5000); From 82a8265319e9c8b678e758e2456366fecacdbac6 Mon Sep 17 00:00:00 2001 From: tschumpr Date: Tue, 13 Feb 2024 13:31:38 +0100 Subject: [PATCH 44/44] Fix test --- src/client/cypress/e2e/editor/lithologicalDescription.cy.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/client/cypress/e2e/editor/lithologicalDescription.cy.js b/src/client/cypress/e2e/editor/lithologicalDescription.cy.js index 40aa4daf9..04426a07d 100644 --- a/src/client/cypress/e2e/editor/lithologicalDescription.cy.js +++ b/src/client/cypress/e2e/editor/lithologicalDescription.cy.js @@ -1,4 +1,5 @@ import { newEditableBorehole } from "../helpers/testHelpers"; +import { deleteItem } from "../helpers/buttonHelpers"; describe("Tests for the lithological description column.", () => { it("Creates, updates and deletes lithological descriptions ", () => { @@ -103,7 +104,7 @@ describe("Tests for the lithological description column.", () => { // delete last layer cy.get('[data-cy="description-1"] [data-testid="DeleteIcon"] ').click(); - cy.contains("Delete").click(); + deleteItem(); cy.wait("@lithological_description"); // delete request cy.wait("@lithological_description"); // updated get request cy.wait(5000); @@ -136,7 +137,7 @@ describe("Tests for the lithological description column.", () => { cy.get('[data-cy="description-1"]').contains( "You are about to delete this layer, how do you want to proceed?", ); - cy.contains("Confirm").click(); + deleteItem(); cy.wait("@lithological_description"); // delete request cy.wait("@lithological_description"); // updated get request cy.get('[data-cy="description-1"]').contains(