From b3851ed1e2f0ad56a9c3ca60f34dea876085fe88 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Tue, 3 Sep 2024 09:34:45 +0200 Subject: [PATCH 1/6] Fix editable inputs for viewer and anonymous user --- .../domain/dropdown/domainDropdown.jsx | 6 +-- src/client/src/pages/detail/detailHeader.tsx | 37 ++++---------- src/client/src/pages/detail/detailPage.tsx | 51 +++++++++++++++++-- .../src/pages/detail/detailPageContent.jsx | 44 ++++++++-------- .../form/stratigraphy/lithology/lithology.jsx | 4 +- .../lithologyAttributeList.jsx | 9 ++-- .../lithologyAttributes.jsx | 9 ++-- .../lithologyInfo/infoList/InfoList.jsx | 6 ++- .../lithology/lithologyInfo/lithologyInfo.jsx | 9 ++-- 9 files changed, 100 insertions(+), 75 deletions(-) diff --git a/src/client/src/components/legacyComponents/domain/dropdown/domainDropdown.jsx b/src/client/src/components/legacyComponents/domain/dropdown/domainDropdown.jsx index 6ef1ef993..09d2bc021 100644 --- a/src/client/src/components/legacyComponents/domain/dropdown/domainDropdown.jsx +++ b/src/client/src/components/legacyComponents/domain/dropdown/domainDropdown.jsx @@ -3,9 +3,7 @@ import PropTypes from "prop-types"; import { connect } from "react-redux"; import { withTranslation } from "react-i18next"; import _ from "lodash"; - -import { loadDomains } from "../../../../api-lib/index.js"; - +import { loadDomains } from "../../../../api-lib"; import { Form, Header } from "semantic-ui-react"; class DomainDropdown extends React.Component { @@ -207,7 +205,7 @@ class DomainDropdown extends React.Component { ); if (readOnly) { let selectedOption = options.find(option => option.value === selected); - return ; + return ; } return ( { - const [editingEnabled, setEditingEnabled] = useState(false); - const [editableByCurrentUser, setEditableByCurrentUser] = useState(false); +interface DetailHeaderProps { + editingEnabled: boolean; + setEditingEnabled: (editingEnabled: boolean) => void; + editableByCurrentUser: boolean; +} + +const DetailHeader = ({ editingEnabled, setEditingEnabled, editableByCurrentUser }: DetailHeaderProps) => { const borehole: Borehole = useSelector((state: ReduxRootState) => state.core_borehole); const user = useSelector((state: ReduxRootState) => state.core_user); const history = useHistory(); - const location = useLocation(); const dispatch = useDispatch(); const { t } = useTranslation(); const { showPrompt } = useContext(PromptContext); @@ -45,28 +48,6 @@ const DetailHeader = () => { history.push("/"); }; - useEffect(() => { - setEditingEnabled(borehole.data.lock !== null); - }, [borehole.data.lock]); - - useEffect(() => { - if (borehole.data.lock !== null && borehole.data.lock.id !== user.data.id) { - setEditableByCurrentUser(false); - return; - } - - const matchingWorkgroup = - user.data.workgroups.find(workgroup => workgroup.id === borehole.data.workgroup?.id) ?? false; - const userRoleMatches = - matchingWorkgroup && - Object.prototype.hasOwnProperty.call(matchingWorkgroup, "roles") && - matchingWorkgroup.roles.includes(borehole.data.role); - const isStatusPage = location.pathname.endsWith("/status"); - const isBoreholeInEditWorkflow = borehole?.data.workflow?.role === "EDIT"; - - setEditableByCurrentUser(userRoleMatches && (isStatusPage || isBoreholeInEditWorkflow)); - }, [editingEnabled, user, borehole, location]); - if (borehole.isFetching) { return; } diff --git a/src/client/src/pages/detail/detailPage.tsx b/src/client/src/pages/detail/detailPage.tsx index 62c2a9bf5..936349d5d 100644 --- a/src/client/src/pages/detail/detailPage.tsx +++ b/src/client/src/pages/detail/detailPage.tsx @@ -1,19 +1,64 @@ import { LayoutBox, MainContentBox, SidebarBox } from "../../components/styledComponents.ts"; -import { FC } from "react"; +import { FC, useEffect, useState } from "react"; +import { useSelector } from "react-redux"; +import { useLocation } from "react-router-dom"; +import { Borehole, ReduxRootState } from "../../api-lib/ReduxStateInterfaces.ts"; import DetailSideNav from "./detailSideNav"; import DetailPageContent from "./detailPageContent"; import DetailHeader from "./detailHeader.tsx"; +interface DetailPageContentProps { + editingEnabled: boolean; + editableByCurrentUser: boolean; +} + export const DetailPage: FC = () => { + const [editingEnabled, setEditingEnabled] = useState(false); + const [editableByCurrentUser, setEditableByCurrentUser] = useState(false); + const borehole: Borehole = useSelector((state: ReduxRootState) => state.core_borehole); + const user = useSelector((state: ReduxRootState) => state.core_user); + const location = useLocation(); + + useEffect(() => { + setEditingEnabled(borehole.data.lock !== null); + }, [borehole.data.lock]); + + useEffect(() => { + if (borehole.data.lock !== null && borehole.data.lock.id !== user.data.id) { + setEditableByCurrentUser(false); + return; + } + + const matchingWorkgroup = + user.data.workgroups.find(workgroup => workgroup.id === borehole.data.workgroup?.id) ?? false; + const userRoleMatches = + matchingWorkgroup && + Object.prototype.hasOwnProperty.call(matchingWorkgroup, "roles") && + matchingWorkgroup.roles.includes(borehole.data.role); + const isStatusPage = location.pathname.endsWith("/status"); + const isBoreholeInEditWorkflow = borehole?.data.workflow?.role === "EDIT"; + + setEditableByCurrentUser(userRoleMatches && (isStatusPage || isBoreholeInEditWorkflow)); + }, [editingEnabled, user, borehole, location]); + + const props: DetailPageContentProps = { + editingEnabled: editingEnabled, + editableByCurrentUser: editableByCurrentUser, + }; + return ( <> - + - + diff --git a/src/client/src/pages/detail/detailPageContent.jsx b/src/client/src/pages/detail/detailPageContent.jsx index 1dc98d9a4..86dab5455 100644 --- a/src/client/src/pages/detail/detailPageContent.jsx +++ b/src/client/src/pages/detail/detailPageContent.jsx @@ -105,7 +105,7 @@ class DetailPageContent extends React.Component { } checkLock() { - const { t } = this.props; + const { t, editingEnabled, editableByCurrentUser } = this.props; if (this.props.borehole.data.role !== "EDIT") { this.context.showAlert( t("common:errorStartEditingWrongStatus", { @@ -115,8 +115,10 @@ class DetailPageContent extends React.Component { ); return false; } - if (this.props.borehole.data.lock === null || this.props.borehole.data.lock.id !== this.props.user.data.id) { - this.context.showAlert(t("common:errorStartEditing"), "error"); + if (!editingEnabled) { + if (editableByCurrentUser) { + this.context.showAlert(t("errorStartEditing"), "error"); + } return false; } return true; @@ -127,9 +129,7 @@ class DetailPageContent extends React.Component { } updateNumber(attribute, value, to = true) { - if (this.checkLock() === false) { - return; - } + if (!this.checkLock()) return; const state = { ...this.state, patchFetch: true, @@ -232,10 +232,8 @@ class DetailPageContent extends React.Component { } render() { - const { t, borehole, user } = this.props; + const { t, borehole, user, editingEnabled } = this.props; const size = null; // 'small' - const isEditable = - borehole?.data.role === "EDIT" && borehole?.data.lock !== null && borehole?.data.lock?.id === user?.data.id; if (borehole.error !== null) { return
{t(borehole.error, borehole.data)}
; } @@ -330,24 +328,24 @@ class DetailPageContent extends React.Component { borehole={borehole} updateChange={this.updateChange} updateNumber={this.updateNumber} - isEditable={isEditable} + isEditable={editingEnabled} /> )} /> } + render={() => } /> } + render={() => } /> } + render={() => } /> } + render={() => } /> } + render={() => } /> } + render={() => } /> } + render={() => } /> } + render={() => } /> } + render={() => } /> - } /> + } /> { }; }; -const ConnectedBoreholeForm = withRouter( +const ConnectedDetailPageContent = withRouter( connect(mapStateToProps, mapDispatchToProps)(withTranslation(["common"])(DetailPageContent)), ); -export default ConnectedBoreholeForm; +export default ConnectedDetailPageContent; diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithology.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithology.jsx index d4500cfcc..8c747e785 100644 --- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithology.jsx +++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithology.jsx @@ -9,7 +9,7 @@ import { stratigraphyData } from "./data/stratigraphydata.js"; import TranslationText from "../../../../../components/legacyComponents/translationText.jsx"; import { Loader } from "semantic-ui-react"; -const Lithology = () => { +const Lithology = ({ checkLock }) => { const { user, borehole } = useSelector(state => ({ borehole: state.core_borehole, user: state.core_user, @@ -106,6 +106,7 @@ const Lithology = () => { selectedStratigraphyID: selectedStratigraphy ? selectedStratigraphy.id : null, isEditable, onUpdated, + checkLock, attribute: attributesBasedKind?.profileInfo, }} /> @@ -131,6 +132,7 @@ const Lithology = () => { isEditable, onUpdated, reloadAttribute, + checkLock, attribute: attributesBasedKind?.profileAttribute, }} /> diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributeList/lithologyAttributeList.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributeList/lithologyAttributeList.jsx index e4d1957ae..7db717887 100644 --- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributeList/lithologyAttributeList.jsx +++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributeList/lithologyAttributeList.jsx @@ -11,9 +11,8 @@ import { useTranslation } from "react-i18next"; import { parseIfString } from "../../../../../../../components/legacyComponents/formUtils.ts"; const LithologyAttributeList = props => { - const { attribute, showAll, updateChange, layer, isVisibleFunction } = props.data; + const { attribute, showAll, updateChange, layer, isVisibleFunction, isEditable } = props.data; const { t } = useTranslation(); - const [inputDisplayValues, setInputDisplayValues] = useState({}); // This adds a delay to each keystroke before calling the updateChange method in the parent component. @@ -63,6 +62,7 @@ const LithologyAttributeList = props => { item?.isNumber, ); }} + readOnly={!isEditable} spellCheck="false" style={{ width: "100%" }} value={ @@ -79,6 +79,7 @@ const LithologyAttributeList = props => { data-cy={item.value} autoCapitalize="off" autoComplete="off" + readOnly={!isEditable} autoCorrect="off" onChange={e => { updateInputDisplayValue(item.value, e.target.value); @@ -112,6 +113,7 @@ const LithologyAttributeList = props => { debouncedUpdateChange(item.value, e.target.value); }} style={{ width: "100%" }} + readOnly={!isEditable} value={ _.isNil(inputDisplayValues[item.value]) ? _.isNil(layer?.[item.value]) @@ -156,6 +158,7 @@ const LithologyAttributeList = props => { false, ); }} + readOnly={!isEditable} schema={item.schema} search={item.search} selected={_.isNil(layer?.[item.value]) ? null : layer[item.value]} @@ -172,7 +175,7 @@ const LithologyAttributeList = props => { schema={item.schema} selected={_.isNil(layer?.[item.value]) ? null : layer[item.value]} title={} - isEditable={true} + isEditable={isEditable} /> )} diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributes.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributes.jsx index c21947ee1..b0b1798bb 100644 --- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributes.jsx +++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributes.jsx @@ -10,7 +10,7 @@ import { AlertContext } from "../../../../../../components/alert/alertContext.ts import { fetchLayerById, layerQueryKey, updateLayer } from "../../../../../../api/fetchApiV2.js"; const LithologyAttributes = props => { - const { id, isEditable, onUpdated, attribute, reloadAttribute, selectedStratigraphyID } = props.data; + const { id, isEditable, checkLock, onUpdated, attribute, reloadAttribute, selectedStratigraphyID } = props.data; const { codes, geocode } = useSelector(state => ({ codes: state.core_domain_list, @@ -88,11 +88,7 @@ const LithologyAttributes = props => { }, [id, reloadAttribute, mapResponseToLayer]); const updateChange = (attribute, value, isNumber = false) => { - if (!isEditable) { - showAlert(t("common:errorStartEditing"), "error"); - return; - } - + if (!checkLock()) return; setState(prevState => ({ ...prevState, isPatching: true })); _.set(state.layer, attribute, value); @@ -168,6 +164,7 @@ const LithologyAttributes = props => { updateChange, layer: state.layer, isVisibleFunction, + isEditable, }} /> )} diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoList/InfoList.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoList/InfoList.jsx index c7454dd72..1a4ee9b34 100644 --- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoList/InfoList.jsx +++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoList/InfoList.jsx @@ -7,8 +7,7 @@ import _ from "lodash"; import { useCallback, useMemo, useState } from "react"; const InfoList = props => { - const { attribute, profileInfo, updateChange } = props.data; - + const { attribute, profileInfo, updateChange, isEditable } = props.data; const [inputDisplayValues, setInputDisplayValues] = useState({}); // This adds a delay to each keystroke before calling the updateChange method in the parent component. @@ -48,6 +47,7 @@ const InfoList = props => { autoCapitalize="off" autoComplete="off" autoCorrect="off" + readOnly={!isEditable} onChange={e => { updateInputDisplayValue(item.value, e.target.value); debouncedUpdateChange( @@ -74,6 +74,7 @@ const InfoList = props => { updateChange(item.value, item.multiple ? e.map(mlpr => mlpr.id) : e.id, false)} schema={item.schema} search={item.search} @@ -85,6 +86,7 @@ const InfoList = props => { {item.type === "Date" && ( { diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/lithologyInfo.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/lithologyInfo.jsx index 88c3677f7..e93c81c16 100644 --- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/lithologyInfo.jsx +++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/lithologyInfo.jsx @@ -9,8 +9,7 @@ import _ from "lodash"; import { AlertContext } from "../../../../../../components/alert/alertContext.tsx"; const LithologyInfo = props => { - const { selectedStratigraphyID: id, isEditable, onUpdated, attribute } = props.data; - + const { selectedStratigraphyID: id, isEditable, onUpdated, attribute, checkLock } = props.data; const mounted = useRef(false); const { t } = useTranslation(); const { showAlert } = useContext(AlertContext); @@ -45,10 +44,7 @@ const LithologyInfo = props => { }, [id, setData]); const updateChange = (attribute, value, isNumber = false) => { - if (!isEditable) { - showAlert(t("common:errorStartEditing"), "error"); - return; - } + if (!checkLock()) return; setState(prevState => ({ ...prevState, isPatching: true })); _.set(state.profileInfo, attribute, value); @@ -89,6 +85,7 @@ const LithologyInfo = props => { data={{ attribute, updateChange, + isEditable, profileInfo: state.profileInfo, }} /> From cd4f448cf17dce429134e4d3d02ec867b5855df9 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Tue, 3 Sep 2024 10:21:48 +0200 Subject: [PATCH 2/6] Fix broken table and layer styles --- src/client/src/AppTheme.ts | 19 ++++++- .../form/formResultTableDisplay.tsx | 7 --- .../detail/form/completion/casingDisplay.jsx | 51 +++++-------------- .../lithologyLayersList.jsx | 30 +++++------ .../lithologyLayersList/styles.js | 31 ----------- 5 files changed, 47 insertions(+), 91 deletions(-) diff --git a/src/client/src/AppTheme.ts b/src/client/src/AppTheme.ts index f7d8db1c0..1f4f1e1de 100644 --- a/src/client/src/AppTheme.ts +++ b/src/client/src/AppTheme.ts @@ -53,7 +53,7 @@ export const theme = createTheme({ typography: { fontFamily: "Inter", h6: { - fontSize: "14px", + fontSize: "12px", lineHeight: "20px", fontWeight: 500, color: "#337083", @@ -239,5 +239,22 @@ export const theme = createTheme({ }, }, }, + MuiTableCell: { + styleOverrides: { + head: { + fontSize: "13px", + fontWeight: 700, + padding: "3px", + flex: 1, + verticalAlign: "top", + }, + body: { + paddingRight: "3px", + paddingLeft: "3px", + flex: 1, + fontSize: "13px", + }, + }, + }, }, }); diff --git a/src/client/src/components/form/formResultTableDisplay.tsx b/src/client/src/components/form/formResultTableDisplay.tsx index 4545c8c37..0c423429d 100644 --- a/src/client/src/components/form/formResultTableDisplay.tsx +++ b/src/client/src/components/form/formResultTableDisplay.tsx @@ -24,18 +24,11 @@ export const FormResultTableDisplay: React.FC = ({ const { t } = useTranslation(); const tableCellStyles: React.CSSProperties = { - paddingRight: "3px", - paddingLeft: "3px", - flex: 1, width: "20%", maxWidth: "20%", - fontSize: "13px", }; const tableHeaderStyles: React.CSSProperties = { - fontWeight: 900, - padding: "3px", - flex: 1, width: "20%", maxWidth: "20%", }; diff --git a/src/client/src/pages/detail/form/completion/casingDisplay.jsx b/src/client/src/pages/detail/form/completion/casingDisplay.jsx index 7c382a9b9..9e3f4387f 100644 --- a/src/client/src/pages/detail/form/completion/casingDisplay.jsx +++ b/src/client/src/pages/detail/form/completion/casingDisplay.jsx @@ -11,19 +11,6 @@ const CasingDisplay = props => { const { t, i18n } = useTranslation(); const domains = useDomains(); - const tableCellStyles = { - paddingRight: "3px", - paddingLeft: "3px", - flex: 1, - fontSize: "13px", - }; - - const tableHeaderStyles = { - fontWeight: 900, - padding: "3px", - flex: 1, - }; - var depth = extractCasingDepth(item); return ( @@ -43,24 +30,20 @@ const CasingDisplay = props => { - + {t("depthMD")} - - {t("kindCasingLayer")} - - - {t("materialCasingLayer")} - - + {t("kindCasingLayer")} + {t("materialCasingLayer")} + {t("diameter")} - {t("from")} - {t("to")} - {t("inner")} - {t("outer")} + {t("from")} + {t("to")} + {t("inner")} + {t("outer")} @@ -68,26 +51,20 @@ const CasingDisplay = props => { ?.sort((a, b) => a.fromDepth - b.fromDepth) .map((element, index) => ( - + {element.fromDepth} - - {element.toDepth} - - + {element.toDepth} + {domains?.data?.find(d => d.id === element.kindId)?.[i18n.language] || ""} - + {domains?.data?.find(d => d.id === element.materialId)?.[i18n.language] || ""} - + {element.innerDiameter} - + {element.outerDiameter} diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/lithologyLayersList/lithologyLayersList.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/lithologyLayersList/lithologyLayersList.jsx index 077f90a14..6e7ad06b6 100644 --- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/lithologyLayersList/lithologyLayersList.jsx +++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/lithologyLayersList/lithologyLayersList.jsx @@ -3,7 +3,7 @@ import { Icon, Popup } from "semantic-ui-react"; import DeleteIcon from "@mui/icons-material/Delete"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; import ClearIcon from "@mui/icons-material/Clear"; -import { Stack, Tooltip } from "@mui/material"; +import { Stack, Tooltip, Typography } from "@mui/material"; import { NumericFormat } from "react-number-format"; import { withTranslation } from "react-i18next"; import * as Styled from "./styles.js"; @@ -162,7 +162,7 @@ const LithologyLayersList = props => { {showDelete !== itemWithValidation?.id && ( <> - + {isTopHasWarning && } {showTopPopup ? ( { displayType="text" /> )} - - - + {mainProps} - - + { lineHeight: "1.3", }}> {secondaryProps} - - + + {isBottomHasWarning && } {showBottomPopup ? ( { displayType="text" /> )} - + {isEditable && ( diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/lithologyLayersList/styles.js b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/lithologyLayersList/styles.js index 60a100c66..39e5522fd 100644 --- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/lithologyLayersList/styles.js +++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/lithologyLayersList/styles.js @@ -1,13 +1,4 @@ import styled from "styled-components"; -import DomainText from "../../../../../../../components/legacyComponents/domain/domainText.jsx"; -import { Button } from "semantic-ui-react"; - -export const Layer = styled.div` - box-shadow: - inset -1px 0 0 lightgrey, - inset 0 -1px 0 lightgrey; - border-left: 2px solid lightgrey; -`; export const MyCard = styled.div` display: flex; @@ -38,25 +29,3 @@ export const CardInfo = styled.div` height: 10em; max-height: 10em; `; - -export const CardButtonContainer = styled.div` - flex: 1; - display: flex; - align-items: center; - justify-content: center; - isolation: isolate; -`; - -export const CardButton = styled(Button)` - color: red; - isolation: isolate; -`; - -export const Text = styled.div` - display: flex; - font-weight: ${props => (props.bold ? "bold" : "100")}; - font-size: ${props => (props.bold ? "14px" : props.small ? "10px" : "13px")}; - color: ${props => (props.warning ? "red" : props.small ? "grey" : "black")}; -`; - -export const DomainTxt = styled(DomainText)``; From 1c50a90228d2a78ade8e78f446092556c5a55f42 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Tue, 3 Sep 2024 10:34:51 +0200 Subject: [PATCH 3/6] Fix lint errors --- .../lithology/lithologyAttributes/lithologyAttributes.jsx | 5 +---- .../stratigraphy/lithology/lithologyInfo/lithologyInfo.jsx | 6 +----- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributes.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributes.jsx index b0b1798bb..064eb011e 100644 --- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributes.jsx +++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributes.jsx @@ -1,4 +1,4 @@ -import { useCallback, useContext, useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import * as Styled from "./styles.js"; import { Checkbox } from "semantic-ui-react"; import _ from "lodash"; @@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next"; import LithologyAttributeList from "./lithologyAttributeList/lithologyAttributeList.jsx"; import { useSelector } from "react-redux"; import { useQueryClient } from "react-query"; -import { AlertContext } from "../../../../../../components/alert/alertContext.tsx"; import { fetchLayerById, layerQueryKey, updateLayer } from "../../../../../../api/fetchApiV2.js"; const LithologyAttributes = props => { @@ -56,8 +55,6 @@ const LithologyAttributes = props => { }); const { t } = useTranslation(); const queryClient = useQueryClient(); - const { showAlert } = useContext(AlertContext); - const mounted = useRef(false); const mapResponseToLayer = useCallback(response => { diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/lithologyInfo.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/lithologyInfo.jsx index e93c81c16..8b482387e 100644 --- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/lithologyInfo.jsx +++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/lithologyInfo.jsx @@ -1,18 +1,14 @@ -import { useCallback, useContext, useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import * as Styled from "./styles.js"; import InfoList from "./infoList"; import InfoCheckBox from "./infoCheckBox"; -import { useTranslation } from "react-i18next"; import { sendProfile } from "./api"; import { fetchStratigraphy } from "../../../../../../api/fetchApiV2.js"; import _ from "lodash"; -import { AlertContext } from "../../../../../../components/alert/alertContext.tsx"; const LithologyInfo = props => { const { selectedStratigraphyID: id, isEditable, onUpdated, attribute, checkLock } = props.data; const mounted = useRef(false); - const { t } = useTranslation(); - const { showAlert } = useContext(AlertContext); const [state, setState] = useState({ isPatching: false, updateAttributeDelay: {}, From e055d667f2d489c46f165001eb1c699c1067f846 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Tue, 3 Sep 2024 11:10:08 +0200 Subject: [PATCH 4/6] Fix cy test --- src/client/cypress/e2e/editor/dataCards.cy.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/client/cypress/e2e/editor/dataCards.cy.js b/src/client/cypress/e2e/editor/dataCards.cy.js index 14668c3c2..af1a7859a 100644 --- a/src/client/cypress/e2e/editor/dataCards.cy.js +++ b/src/client/cypress/e2e/editor/dataCards.cy.js @@ -1,6 +1,12 @@ -import { createBorehole, handlePrompt, loginAsAdmin, startBoreholeEditing } from "../helpers/testHelpers"; +import { + createBorehole, + handlePrompt, + loginAsAdmin, + startBoreholeEditing, + stopBoreholeEditing, +} from "../helpers/testHelpers"; import { evaluateDisplayValue, evaluateTextarea, setInput, setSelect } from "../helpers/formHelpers"; -import { addItem, saveForm, startEditing, stopEditing } from "../helpers/buttonHelpers"; +import { addItem, saveForm, startEditing } from "../helpers/buttonHelpers"; describe("Tests for the data cards in the editor.", () => { it("resets datacards when stop editing", () => { @@ -13,7 +19,7 @@ describe("Tests for the data cards in the editor.", () => { cy.wait(500); addItem("addwateringress"); cy.get('[data-cy="waterIngress-card.0.edit"]').should("exist"); - stopEditing(); + stopBoreholeEditing(); cy.get('[data-cy="waterIngress-card.0.edit"]').should("not.exist"); startBoreholeEditing(); @@ -27,7 +33,7 @@ describe("Tests for the data cards in the editor.", () => { cy.wait("@wateringress_GET"); startEditing(); setInput("comment", "Lorem."); - stopEditing(); + stopBoreholeEditing(); evaluateDisplayValue("comment", "-"); }); From a29b1ead46eb121ec24d94ae658d3556fa6d7460 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Tue, 3 Sep 2024 11:39:55 +0200 Subject: [PATCH 5/6] reset fontsize --- src/client/src/AppTheme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/src/AppTheme.ts b/src/client/src/AppTheme.ts index 1f4f1e1de..af91489c4 100644 --- a/src/client/src/AppTheme.ts +++ b/src/client/src/AppTheme.ts @@ -53,7 +53,7 @@ export const theme = createTheme({ typography: { fontFamily: "Inter", h6: { - fontSize: "12px", + fontSize: "14px", lineHeight: "20px", fontWeight: 500, color: "#337083", From a432ca9cbcef1d43c12a101cc9483952d9ad1bc6 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Tue, 3 Sep 2024 13:45:28 +0200 Subject: [PATCH 6/6] Add test case for cancel editing --- src/client/cypress/e2e/editor/dataCards.cy.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/client/cypress/e2e/editor/dataCards.cy.js b/src/client/cypress/e2e/editor/dataCards.cy.js index af1a7859a..ae1911aef 100644 --- a/src/client/cypress/e2e/editor/dataCards.cy.js +++ b/src/client/cypress/e2e/editor/dataCards.cy.js @@ -6,10 +6,10 @@ import { stopBoreholeEditing, } from "../helpers/testHelpers"; import { evaluateDisplayValue, evaluateTextarea, setInput, setSelect } from "../helpers/formHelpers"; -import { addItem, saveForm, startEditing } from "../helpers/buttonHelpers"; +import { addItem, cancelEditing, saveForm, startEditing } from "../helpers/buttonHelpers"; describe("Tests for the data cards in the editor.", () => { - it("resets datacards when stop editing", () => { + it("resets datacards when stop editing or cancel", () => { createBorehole({ "extended.original_name": "INTEADAL" }).as("borehole_id"); cy.get("@borehole_id").then(id => { loginAsAdmin(`/${id}/hydrogeology/wateringress`); @@ -17,6 +17,14 @@ describe("Tests for the data cards in the editor.", () => { startBoreholeEditing(); cy.wait(500); + + //Add card and cancel editing in datacard + addItem("addwateringress"); + cy.get('[data-cy="waterIngress-card.0.edit"]').should("exist"); + cancelEditing(); + cy.get('[data-cy="waterIngress-card.0.edit"]').should("not.exist"); + + //Add card and stop editing borehole addItem("addwateringress"); cy.get('[data-cy="waterIngress-card.0.edit"]').should("exist"); stopBoreholeEditing();