From 359ae1766a9a010b229a084ebd2476a28eb8eb59 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Thu, 28 Nov 2024 10:11:43 +0100 Subject: [PATCH 1/6] Fix settings detail header --- src/client/cypress/e2e/filters/filter.cy.js | 10 ++++- .../cypress/e2e/filters/srsFilter.cy.js | 4 +- src/client/cypress/e2e/mainPage/map.cy.js | 4 +- .../cypress/e2e/settings/mapSettings.cy.js | 4 +- src/client/src/components/buttons/buttons.tsx | 21 +++++++++- .../legacyComponents/listItem/listItem.jsx | 3 +- src/client/src/components/styledComponents.ts | 6 +++ src/client/src/pages/detail/detailHeader.tsx | 38 +++++++------------ .../src/pages/detail/detailHeaderSettings.tsx | 20 ++++++++++ .../src/pages/settings/menuSettings.jsx | 1 - .../src/pages/settings/settingsPage.jsx | 2 + 11 files changed, 76 insertions(+), 37 deletions(-) create mode 100644 src/client/src/pages/detail/detailHeaderSettings.tsx diff --git a/src/client/cypress/e2e/filters/filter.cy.js b/src/client/cypress/e2e/filters/filter.cy.js index d8d4e8cd0..5796e6337 100644 --- a/src/client/cypress/e2e/filters/filter.cy.js +++ b/src/client/cypress/e2e/filters/filter.cy.js @@ -1,5 +1,11 @@ import { showTableAndWaitForData, verifyPaginationText } from "../helpers/dataGridHelpers"; -import { createBorehole, createLithologyLayer, createStratigraphy, loginAsAdmin } from "../helpers/testHelpers.js"; +import { + createBorehole, + createLithologyLayer, + createStratigraphy, + loginAsAdmin, + returnToOverview, +} from "../helpers/testHelpers.js"; describe("Search filter tests", () => { it("has search filters", () => { @@ -62,7 +68,7 @@ describe("Search filter tests", () => { cy.wait("@setting"); // check visibility of filters - cy.contains("h3", "Done").click(); + returnToOverview(); cy.get('[data-cy="show-filter-button"]').click(); cy.contains("Registration").click(); cy.contains("Created by"); diff --git a/src/client/cypress/e2e/filters/srsFilter.cy.js b/src/client/cypress/e2e/filters/srsFilter.cy.js index 1034e0686..72e12fd07 100644 --- a/src/client/cypress/e2e/filters/srsFilter.cy.js +++ b/src/client/cypress/e2e/filters/srsFilter.cy.js @@ -18,7 +18,7 @@ describe("Tests for filtering data by reference system.", () => { cy.get("@checkbox").check({ force: true }); cy.get("@checkbox").should("be.checked"); - cy.contains("h3", "Done").click(); + returnToOverview(); cy.get('[data-cy="show-filter-button"]').click(); cy.contains("h6", "Location").click(); cy.get('[data-cy="spatial-reference-filter"]').should("exist"); @@ -27,7 +27,7 @@ describe("Tests for filtering data by reference system.", () => { cy.get("@checkbox").uncheck({ force: true }); cy.get("@checkbox").should("not.be.checked"); - cy.contains("h3", "Done").click(); + returnToOverview(); cy.get('[data-cy="show-filter-button"]').click(); cy.contains("h6", "Location").click(); cy.get('[data-cy="spatial-reference-filter"]').should("not.exist"); diff --git a/src/client/cypress/e2e/mainPage/map.cy.js b/src/client/cypress/e2e/mainPage/map.cy.js index 7e5a42d4d..ecbd37298 100644 --- a/src/client/cypress/e2e/mainPage/map.cy.js +++ b/src/client/cypress/e2e/mainPage/map.cy.js @@ -1,4 +1,4 @@ -import { loginAsEditor } from "../helpers/testHelpers.js"; +import { loginAsEditor, returnToOverview } from "../helpers/testHelpers.js"; describe("Map tests", () => { it("map preserves zoom level and center", () => { @@ -28,7 +28,7 @@ describe("Map tests", () => { cy.get('[data-cy="settings-button"]').click(); // return to map - cy.contains("h3", "Done").click(); + returnToOverview(); // verify resolution and map center cy.window().then(win => { diff --git a/src/client/cypress/e2e/settings/mapSettings.cy.js b/src/client/cypress/e2e/settings/mapSettings.cy.js index a6bbc7b61..2a5df0db0 100644 --- a/src/client/cypress/e2e/settings/mapSettings.cy.js +++ b/src/client/cypress/e2e/settings/mapSettings.cy.js @@ -1,4 +1,4 @@ -import { goToRouteAndAcceptTerms } from "../helpers/testHelpers.js"; +import { goToRouteAndAcceptTerms, returnToOverview } from "../helpers/testHelpers.js"; describe("map settings", () => { it("Adds wms and wmts to user maps", () => { @@ -28,7 +28,7 @@ describe("map settings", () => { cy.get('[data-cy="maps-for-user-box"]').contains(wmtsName); // Verify layers are added to overview map - cy.contains("h3", "Done").click(); + returnToOverview(); cy.get('[data-cy="layers-button"]').click(); cy.contains(wmsName); cy.contains(wmtsName); diff --git a/src/client/src/components/buttons/buttons.tsx b/src/client/src/components/buttons/buttons.tsx index 14a9bda49..7d2eaf770 100644 --- a/src/client/src/components/buttons/buttons.tsx +++ b/src/client/src/components/buttons/buttons.tsx @@ -1,8 +1,8 @@ import { forwardRef } from "react"; import { useTranslation } from "react-i18next"; import CloseIcon from "@mui/icons-material/Close"; -import { Button } from "@mui/material"; -import { ArrowDownToLine, Check, Pencil, Plus, Save, Trash2 } from "lucide-react"; +import { Button, IconButton } from "@mui/material"; +import { ArrowDownToLine, Check, ChevronLeft, Pencil, Plus, Save, Trash2 } from "lucide-react"; import CopyIcon from "../../assets/icons/copy.svg?react"; import { capitalizeFirstLetter } from "../../utils.ts"; import { ButtonProps } from "./buttonsInterface"; @@ -131,3 +131,20 @@ export const ExportButton = forwardRef((props, r /> ); }); + +export const ReturnButton = ({ onClick }: { onClick: () => void }) => { + return ( + + + + ); +}; diff --git a/src/client/src/components/legacyComponents/listItem/listItem.jsx b/src/client/src/components/legacyComponents/listItem/listItem.jsx index f10245d70..1b7bff9c6 100644 --- a/src/client/src/components/legacyComponents/listItem/listItem.jsx +++ b/src/client/src/components/legacyComponents/listItem/listItem.jsx @@ -14,8 +14,7 @@ const ListItem = props => { style={{ padding: "1em", borderRadius: "inherit", - borderLeft: - location.pathname.indexOf(path) >= 0 && name !== "done" ? "0.25em solid rgb(237, 29, 36)" : null, + borderLeft: location.pathname.indexOf(path) >= 0 ? "0.25em solid rgb(237, 29, 36)" : null, }}> diff --git a/src/client/src/components/styledComponents.ts b/src/client/src/components/styledComponents.ts index 3aa1c9bac..5a9c97fa0 100644 --- a/src/client/src/components/styledComponents.ts +++ b/src/client/src/components/styledComponents.ts @@ -63,3 +63,9 @@ export const DialogFooterContainer = styled(Box)({ borderTop: "1px solid " + theme.palette.border, padding: theme.spacing(3), }); + +export const DetailHeaderStack = styled(Stack)({ + borderBottom: "1px solid " + theme.palette.boxShadow, + height: "84px", + padding: "16px", +}); diff --git a/src/client/src/pages/detail/detailHeader.tsx b/src/client/src/pages/detail/detailHeader.tsx index ed0ba3d78..89a86cd15 100644 --- a/src/client/src/pages/detail/detailHeader.tsx +++ b/src/client/src/pages/detail/detailHeader.tsx @@ -2,15 +2,21 @@ import { useContext } from "react"; import { useTranslation } from "react-i18next"; import { useDispatch } from "react-redux"; import { useHistory } from "react-router-dom"; -import { Chip, IconButton, Stack, Typography } from "@mui/material"; -import { Check, ChevronLeft, Trash2, X } from "lucide-react"; +import { Chip, Stack, Typography } from "@mui/material"; +import { Check, Trash2, X } from "lucide-react"; import { deleteBorehole, lockBorehole, unlockBorehole } from "../../api-lib"; import { BoreholeV2 } from "../../api/borehole.ts"; -import { theme } from "../../AppTheme.ts"; import { useAuth } from "../../auth/useBdmsAuth.tsx"; -import { DeleteButton, EditButton, EndEditButton, ExportButton } from "../../components/buttons/buttons.tsx"; +import { + DeleteButton, + EditButton, + EndEditButton, + ExportButton, + ReturnButton, +} from "../../components/buttons/buttons.tsx"; import DateText from "../../components/legacyComponents/dateText"; import { PromptContext } from "../../components/prompt/promptContext.tsx"; +import { DetailHeaderStack } from "../../components/styledComponents.ts"; interface DetailHeaderProps { editingEnabled: boolean; @@ -93,32 +99,16 @@ const DetailHeader = ({ }; return ( - + - { { editingEnabled && (isFormDirty ? stopEditingWithUnsavedChanges() : stopEditing()); history.push("/"); } }} - sx={{ - width: "36px", - height: "36px", - marginRight: "18px", - borderRadius: "2px", - }}> - - + /> {borehole?.alternateName} {!auth.anonymousModeEnabled && ( @@ -165,7 +155,7 @@ const DetailHeader = ({ ))} - + ); }; diff --git a/src/client/src/pages/detail/detailHeaderSettings.tsx b/src/client/src/pages/detail/detailHeaderSettings.tsx new file mode 100644 index 000000000..03e233bcf --- /dev/null +++ b/src/client/src/pages/detail/detailHeaderSettings.tsx @@ -0,0 +1,20 @@ +import { useHistory } from "react-router-dom"; +import { Stack } from "@mui/material"; +import { ReturnButton } from "../../components/buttons/buttons.tsx"; +import { DetailHeaderStack } from "../../components/styledComponents.ts"; + +export const DetailHeaderSettings = () => { + const history = useHistory(); + + return ( + + + { + history.push("/"); + }} + /> + + + ); +}; diff --git a/src/client/src/pages/settings/menuSettings.jsx b/src/client/src/pages/settings/menuSettings.jsx index 5a5f74665..087fe8160 100644 --- a/src/client/src/pages/settings/menuSettings.jsx +++ b/src/client/src/pages/settings/menuSettings.jsx @@ -11,7 +11,6 @@ const MenuSettings = props => { return (
- {!auth.anonymousModeEnabled && ( )} diff --git a/src/client/src/pages/settings/settingsPage.jsx b/src/client/src/pages/settings/settingsPage.jsx index 17aaf86ea..5e52dc542 100644 --- a/src/client/src/pages/settings/settingsPage.jsx +++ b/src/client/src/pages/settings/settingsPage.jsx @@ -2,6 +2,7 @@ import { withTranslation } from "react-i18next"; import { Route, Switch, withRouter } from "react-router-dom"; import { Box } from "@mui/material"; import { useAuth } from "../../auth/useBdmsAuth"; +import { DetailHeaderSettings } from "../detail/detailHeaderSettings"; import AboutSettings from "./aboutSettings"; import AdminSettings from "./admin/adminSettings"; import EditorSettings from "./editorSettings.tsx"; @@ -17,6 +18,7 @@ const SettingsPage = () => { flexDirection: "column", height: "100%", }}> + Date: Thu, 28 Nov 2024 12:24:42 +0100 Subject: [PATCH 2/6] Fix setting field visibility --- .../cypress/e2e/settings/fieldSettings.cy.js | 93 +++++++++++++++++++ .../editorSettingList/editorSettingList.jsx | 79 ++++++++++------ 2 files changed, 142 insertions(+), 30 deletions(-) create mode 100644 src/client/cypress/e2e/settings/fieldSettings.cy.js diff --git a/src/client/cypress/e2e/settings/fieldSettings.cy.js b/src/client/cypress/e2e/settings/fieldSettings.cy.js new file mode 100644 index 000000000..1f7e4fd12 --- /dev/null +++ b/src/client/cypress/e2e/settings/fieldSettings.cy.js @@ -0,0 +1,93 @@ +import { goToRouteAndAcceptTerms, loginAsAdmin, returnToOverview } from "../helpers/testHelpers"; + +it("checks that the field settings control the field visibility.", () => { + loginAsAdmin("/"); + cy.get('[data-cy="settings-button"]').click(); + cy.contains("Lithology fields").click(); + cy.contains("Select all").click(); + cy.wait("@setting"); + + goToRouteAndAcceptTerms("/1001140/stratigraphy/lithology"); + cy.get('[data-cy="styled-layer-9"]').click(); + cy.contains("From depth [m MD]").should("exist"); + cy.contains("To depth [m MD]").should("exist"); + cy.contains("End of borehole").should("exist"); + cy.contains("Completeness of entries").should("exist"); + cy.contains("Lithology").should("exist"); + cy.contains("Original lithology").should("exist"); + cy.contains("USCS original classification").should("exist"); + cy.contains("USCS way of determination").should("exist"); + cy.contains("USCS 1").should("exist"); + cy.contains("Grain size 1").should("exist"); + cy.contains("USCS 2").should("exist"); + cy.contains("Grain size 2").should("exist"); + cy.contains("USCS 3").should("exist"); + cy.contains("Grain shape").should("exist"); + cy.contains("Grain angularity").should("exist"); + cy.contains("Organic components").should("exist"); + cy.contains("Debris").should("exist"); + cy.contains("Debris lithology").should("exist"); + cy.contains("Striations").should("exist"); + cy.contains("Colour").should("exist"); + cy.contains("Consistency").should("exist"); + cy.contains("Plasticity").should("exist"); + cy.contains("Compactness").should("exist"); + cy.contains("Cohesion").should("exist"); + cy.contains("Gradation").should("exist"); + cy.contains("Humidity").should("exist"); + cy.contains("Alteration").should("exist"); + cy.contains("Notes").should("exist"); + + returnToOverview(); + cy.get('[data-cy="settings-button"]').click(); + cy.contains("Lithology fields").click(); + cy.contains("Unselect all").click(); + + goToRouteAndAcceptTerms("/1001140/stratigraphy/lithology"); + cy.get('[data-cy="styled-layer-9"]').click(); + cy.contains("From depth [m MD]").should("exist"); + cy.contains("To depth [m MD]").should("exist"); + cy.contains("End of borehole").should("not.exist"); + cy.contains("Completeness of entries").should("not.exist"); + cy.contains("Original lithology").should("not.exist"); + cy.contains("USCS original classification").should("not.exist"); + cy.contains("USCS way of determination").should("not.exist"); + cy.contains("USCS 1").should("not.exist"); + cy.contains("Grain size 1").should("not.exist"); + cy.contains("USCS 2").should("not.exist"); + cy.contains("Grain size 2").should("not.exist"); + cy.contains("USCS 3").should("not.exist"); + cy.contains("Grain shape").should("not.exist"); + cy.contains("Grain angularity").should("not.exist"); + cy.contains("Organic components").should("not.exist"); + cy.contains("Debris").should("not.exist"); + cy.contains("Debris lithology").should("not.exist"); + cy.contains("Colour").should("not.exist"); + cy.contains("Consistency").should("not.exist"); + cy.contains("Plasticity").should("not.exist"); + cy.contains("Compactness").should("not.exist"); + cy.contains("Cohesion").should("not.exist"); + cy.contains("Gradation").should("not.exist"); + cy.contains("Humidity").should("not.exist"); + cy.contains("Alteration").should("not.exist"); + cy.contains("Notes").should("not.exist"); + + returnToOverview(); + cy.get('[data-cy="settings-button"]').click(); + cy.contains("Lithology fields").click(); + cy.contains("Unselect all").click(); + + // manually check some and verify states + cy.get('[data-cy="checkbox-original_lithology"]').click(); + cy.get('[data-cy="checkbox-plasticity"]').click(); + cy.get('[data-cy="checkbox-uscs_1"]').click(); + + cy.get('[data-cy="checkbox-plasticity"] input').should("be.checked"); + cy.get('[data-cy="checkbox-original_lithology"] input').should("be.checked"); + cy.get('[data-cy="checkbox-uscs_1"] input').should("be.checked"); + + cy.get('[data-cy="checkbox-humidity"] input').should("not.be.checked"); + cy.get('[data-cy="checkbox-gradation"] input').should("not.be.checked"); + cy.get('[data-cy="checkbox-cohesion"] input').should("not.be.checked"); + cy.get('[data-cy="checkbox-compactness"] input').should("not.be.checked"); +}); diff --git a/src/client/src/pages/settings/components/editorSettingList/editorSettingList.jsx b/src/client/src/pages/settings/components/editorSettingList/editorSettingList.jsx index 9846c2c98..b4b41a2f0 100644 --- a/src/client/src/pages/settings/components/editorSettingList/editorSettingList.jsx +++ b/src/client/src/pages/settings/components/editorSettingList/editorSettingList.jsx @@ -1,34 +1,36 @@ +import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; -import { Button } from "@mui/material"; +import { Button, Checkbox } from "@mui/material"; import { Segment } from "semantic-ui-react"; -import _ from "lodash"; import TranslationText from "../../../../components/legacyComponents/translationText.jsx"; import * as Styled from "./styles"; const EditorSettingList = props => { const { data, toggleFilter, attribute, toggleField, listName, codes, toggleFieldArray, toggleFilterArray } = props; - const { t } = useTranslation(); + const [checkedStates, setCheckedStates] = useState({}); - const isChecked = item => { - return listName === "lithologyfields" - ? isVisible(item.value) - : item.value.split(".").length > 1 - ? data?.[item.value.split(".")[0]]?.[item.value.split(".")[1]] - : data?.[item.value]; - }; - const isVisible = field => { - if (_.has(codes, "data.layer_kind") && _.isArray(codes.data.layer_kind)) { - for (let idx = 0; idx < codes.data.layer_kind.length; idx++) { - const element = codes.data.layer_kind[idx]; + useEffect(() => { + const isChecked = item => { + const isVisible = field => { + const layerKindConfigEntry = codes?.find(c => c.schema === "layer_kind"); - if (element.code === "Geol") { - return element.conf.fields[field]; - } - } - } - return false; - }; + const conf = layerKindConfigEntry?.conf ? JSON.parse(layerKindConfigEntry?.conf) : ""; + return conf?.fields?.[field] ?? false; + }; + return listName === "lithologyfields" + ? isVisible(item.value) + : item.value.split(".").length > 1 + ? data?.[item.value.split(".")[0]]?.[item.value.split(".")[1]] + : data?.[item.value]; + }; + + const initialState = {}; + attribute.forEach(item => { + initialState[item.value] = isChecked(item); + }); + setCheckedStates(initialState); + }, [attribute, codes, data, listName]); const sendSelectAll = value => { const newData = []; @@ -39,7 +41,29 @@ const EditorSettingList = props => { if (listName === "lithologyfields") { toggleFieldArray(newData, value); } else toggleFilterArray(newData, value); + + setCheckedStates(prevState => { + const newState = { ...prevState }; + attribute.forEach(item => { + newState[item.value] = value; + }); + return newState; + }); }; + + const handleCheckboxChange = (item, value) => { + setCheckedStates(prevState => ({ + ...prevState, + [item.value]: value, + })); + + if (listName === "lithologyfields") { + toggleField(item.value, value); + } else { + toggleFilter(item.value, value); + } + }; + return ( @@ -60,15 +84,10 @@ const EditorSettingList = props => { {attribute?.map((item, index) => ( - { - if (listName === "lithologyfields") { - toggleField(item.value, d.checked); - } else { - toggleFilter(item.value, d.checked); - } - }} + handleCheckboxChange(item, e.target.checked)} + data-cy={`checkbox-${item.value}`} /> From 975c5831fa21c21794361613b102ab5ad9fa3f7f Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Thu, 28 Nov 2024 14:12:43 +0100 Subject: [PATCH 3/6] Add waits --- src/client/cypress/e2e/settings/fieldSettings.cy.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/client/cypress/e2e/settings/fieldSettings.cy.js b/src/client/cypress/e2e/settings/fieldSettings.cy.js index 1f7e4fd12..87c02e26f 100644 --- a/src/client/cypress/e2e/settings/fieldSettings.cy.js +++ b/src/client/cypress/e2e/settings/fieldSettings.cy.js @@ -2,10 +2,15 @@ import { goToRouteAndAcceptTerms, loginAsAdmin, returnToOverview } from "../help it("checks that the field settings control the field visibility.", () => { loginAsAdmin("/"); + + const waitForSettings = () => { + cy.wait(["@setting", "@codes", "@codelist_GET"]); + }; cy.get('[data-cy="settings-button"]').click(); cy.contains("Lithology fields").click(); cy.contains("Select all").click(); cy.wait("@setting"); + waitForSettings(); goToRouteAndAcceptTerms("/1001140/stratigraphy/lithology"); cy.get('[data-cy="styled-layer-9"]').click(); @@ -42,6 +47,7 @@ it("checks that the field settings control the field visibility.", () => { cy.get('[data-cy="settings-button"]').click(); cy.contains("Lithology fields").click(); cy.contains("Unselect all").click(); + waitForSettings(); goToRouteAndAcceptTerms("/1001140/stratigraphy/lithology"); cy.get('[data-cy="styled-layer-9"]').click(); @@ -75,13 +81,13 @@ it("checks that the field settings control the field visibility.", () => { returnToOverview(); cy.get('[data-cy="settings-button"]').click(); cy.contains("Lithology fields").click(); - cy.contains("Unselect all").click(); + waitForSettings(); + cy.wait(500); // manually check some and verify states cy.get('[data-cy="checkbox-original_lithology"]').click(); cy.get('[data-cy="checkbox-plasticity"]').click(); cy.get('[data-cy="checkbox-uscs_1"]').click(); - cy.get('[data-cy="checkbox-plasticity"] input').should("be.checked"); cy.get('[data-cy="checkbox-original_lithology"] input').should("be.checked"); cy.get('[data-cy="checkbox-uscs_1"] input').should("be.checked"); From 890bd59922035389b6b3a9de375416f34aa34c75 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Thu, 28 Nov 2024 14:12:50 +0100 Subject: [PATCH 4/6] Add button margin --- .../settings/components/editorSettingList/editorSettingList.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/client/src/pages/settings/components/editorSettingList/editorSettingList.jsx b/src/client/src/pages/settings/components/editorSettingList/editorSettingList.jsx index b4b41a2f0..639a2228f 100644 --- a/src/client/src/pages/settings/components/editorSettingList/editorSettingList.jsx +++ b/src/client/src/pages/settings/components/editorSettingList/editorSettingList.jsx @@ -69,6 +69,7 @@ const EditorSettingList = props => {