From 1021c01aa79c34aa1de0098472fce6d5e5f7eef8 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Thu, 21 Nov 2024 10:58:36 +0100 Subject: [PATCH 1/6] Fix label width to avoid jumping --- src/client/src/components/map/pointComponent.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/client/src/components/map/pointComponent.jsx b/src/client/src/components/map/pointComponent.jsx index 6a1f5b204..4389c7168 100644 --- a/src/client/src/components/map/pointComponent.jsx +++ b/src/client/src/components/map/pointComponent.jsx @@ -329,14 +329,12 @@ class PointComponent extends React.Component { From 03b17aa88697f861c9133de00a6d9be67740948a Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Thu, 21 Nov 2024 11:02:37 +0100 Subject: [PATCH 2/6] Fix responsiveness of map and coordinate component --- .../src/components/map/pointComponent.jsx | 8 ++- src/client/src/pages/detail/detailPage.tsx | 1 + .../src/pages/detail/detailPageContent.tsx | 3 ++ .../form/location/coordinatesSegment.tsx | 6 +-- .../detail/form/location/locationPanel.tsx | 3 +- .../form/location/locationPanelInterfaces.tsx | 1 + .../detail/form/location/locationSegment.tsx | 53 ++++++++++--------- 7 files changed, 45 insertions(+), 30 deletions(-) diff --git a/src/client/src/components/map/pointComponent.jsx b/src/client/src/components/map/pointComponent.jsx index 4389c7168..1e66ae0bc 100644 --- a/src/client/src/components/map/pointComponent.jsx +++ b/src/client/src/components/map/pointComponent.jsx @@ -302,6 +302,9 @@ class PointComponent extends React.Component { style={{ position: "relative", padding: 0, + height: "100%", + display: "flex", + flexDirection: "column", }}>
- + { onBoreholeFormSubmit={onBoreholeFormSubmit} handleDirtyChange={handleDirtyChange} borehole={borehole} + panelOpen={panelOpen} /> {editingEnabled && panelOpen && } diff --git a/src/client/src/pages/detail/detailPageContent.tsx b/src/client/src/pages/detail/detailPageContent.tsx index fa6674557..b13b45c9f 100644 --- a/src/client/src/pages/detail/detailPageContent.tsx +++ b/src/client/src/pages/detail/detailPageContent.tsx @@ -31,6 +31,7 @@ interface DetailPageContentProps { onBoreholeFormSubmit: (data: BoreholeFormInputs) => void; handleDirtyChange: (isDirty: boolean) => void; borehole: BoreholeV2; + panelOpen: boolean; } type DetailPageParams = { id: string; @@ -45,6 +46,7 @@ export const DetailPageContent = ({ onBoreholeFormSubmit, handleDirtyChange, borehole, + panelOpen, }: DetailPageContentProps) => { const { t } = useTranslation(); const { showAlert } = useContext(AlertContext); @@ -95,6 +97,7 @@ export const DetailPageContent = ({ onSubmit={onLocationFormSubmit} borehole={borehole} onDirtyChange={handleDirtyChange} + labelingPanelOpen={panelOpen} /> )} /> diff --git a/src/client/src/pages/detail/form/location/coordinatesSegment.tsx b/src/client/src/pages/detail/form/location/coordinatesSegment.tsx index 89ef71161..2263ed1e4 100644 --- a/src/client/src/pages/detail/form/location/coordinatesSegment.tsx +++ b/src/client/src/pages/detail/form/location/coordinatesSegment.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useContext, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; -import { Card, CardContent, CardHeader } from "@mui/material"; +import { Box, Card, CardContent, CardHeader } from "@mui/material"; import { Check, X } from "lucide-react"; import { LabelingButton } from "../../../../components/buttons/labelingButton"; import { FormContainer, FormCoordinate, FormDomainSelect, FormSelect } from "../../../../components/form/form"; @@ -261,12 +261,12 @@ const CoordinatesSegment: React.FC = ({ sx={{ p: 4, pb: 3 }} titleTypographyProps={{ variant: "h5" }} action={ - editingEnabled && ( + startLabeling()} /> - ) + } /> diff --git a/src/client/src/pages/detail/form/location/locationPanel.tsx b/src/client/src/pages/detail/form/location/locationPanel.tsx index b51f3d1d0..34f01ea34 100644 --- a/src/client/src/pages/detail/form/location/locationPanel.tsx +++ b/src/client/src/pages/detail/form/location/locationPanel.tsx @@ -10,7 +10,7 @@ import NameSegment from "./nameSegment.tsx"; import RestrictionSegment from "./restrictionSegment.tsx"; export const LocationPanel = forwardRef( - ({ editingEnabled, onSubmit, onDirtyChange, borehole }: LocationPanelProps, ref) => { + ({ editingEnabled, onSubmit, onDirtyChange, borehole, labelingPanelOpen }: LocationPanelProps, ref) => { const [resetKey, setResetKey] = useState(0); const formMethods = useForm({ mode: "onChange", @@ -73,6 +73,7 @@ export const LocationPanel = forwardRef( borehole={borehole} editingEnabled={editingEnabled} formMethods={formMethods} + labelingPanelOpen={labelingPanelOpen} key={resetKey}> diff --git a/src/client/src/pages/detail/form/location/locationPanelInterfaces.tsx b/src/client/src/pages/detail/form/location/locationPanelInterfaces.tsx index 8a60df3d0..5017ad2c2 100644 --- a/src/client/src/pages/detail/form/location/locationPanelInterfaces.tsx +++ b/src/client/src/pages/detail/form/location/locationPanelInterfaces.tsx @@ -10,6 +10,7 @@ export interface LocationBaseProps { export interface LocationPanelProps extends LocationBaseProps { onSubmit: (data: LocationFormInputs) => void; onDirtyChange: (isDirty: boolean) => void; + labelingPanelOpen: boolean; ref: RefObject<{ submit: () => void; reset: () => void }>; } diff --git a/src/client/src/pages/detail/form/location/locationSegment.tsx b/src/client/src/pages/detail/form/location/locationSegment.tsx index eeb183211..f9a83cea5 100644 --- a/src/client/src/pages/detail/form/location/locationSegment.tsx +++ b/src/client/src/pages/detail/form/location/locationSegment.tsx @@ -1,6 +1,6 @@ import { useCallback } from "react"; import { UseFormReturn } from "react-hook-form"; -import { Card, Stack } from "@mui/material"; +import { Card, Grid, Stack } from "@mui/material"; import { fetchApiV2 } from "../../../../api/fetchApiV2"; import PointComponent from "../../../../components/map/pointComponent"; import { FormSegmentBox } from "../../../../components/styledComponents"; @@ -13,9 +13,10 @@ import { LocationBaseProps, LocationFormInputs } from "./locationPanelInterfaces interface LocationSegmentProps extends LocationBaseProps { formMethods: UseFormReturn; + labelingPanelOpen: boolean; } -const LocationSegment = ({ borehole, editingEnabled, formMethods }: LocationSegmentProps) => { +const LocationSegment = ({ borehole, editingEnabled, labelingPanelOpen, formMethods }: LocationSegmentProps) => { const transformCoordinates = useCallback(async (referenceSystem: string, x: number, y: number) => { let apiUrl; if (referenceSystem === referenceSystems.LV95.name) { @@ -103,8 +104,8 @@ const LocationSegment = ({ borehole, editingEnabled, formMethods }: LocationSegm return ( - - + + + + + + { + setValuesForNewMapPoint(x, y, height, country, canton, municipality); + }} + id={borehole.id} + isEditable={editingEnabled} + x={borehole.locationX ? Number(borehole.locationX) : null} + y={borehole.locationY ? Number(borehole.locationY) : null} + /> + + + - - - { - setValuesForNewMapPoint(x, y, height, country, canton, municipality); - }} - id={borehole.id} - isEditable={editingEnabled} - x={borehole.locationX ? Number(borehole.locationX) : null} - y={borehole.locationY ? Number(borehole.locationY) : null} - /> - - + + Date: Thu, 21 Nov 2024 11:04:20 +0100 Subject: [PATCH 3/6] Add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 57b9fad85..7cd4ab568 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ - The basemap selector buttons were not displayed correctly on hover. - No scrollbar was displayed in the side drawer when many additional layers were added. - There was no appropriate error message when the drawn box did not contain extractable coordinates. +- The responsive design of the coordinate segment in the detail view was broken. ## v2.1.870 - 2024-09-27 From 5ef6eb85ec0834418fdf17bb0b639b8a610f8492 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Thu, 21 Nov 2024 11:22:24 +0100 Subject: [PATCH 4/6] Fix position of identifier add button to avoid flickering on edit click --- .../form/location/identifierSegment.tsx | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/client/src/pages/detail/form/location/identifierSegment.tsx b/src/client/src/pages/detail/form/location/identifierSegment.tsx index d5ba0fec8..ca8603cf8 100644 --- a/src/client/src/pages/detail/form/location/identifierSegment.tsx +++ b/src/client/src/pages/detail/form/location/identifierSegment.tsx @@ -28,7 +28,15 @@ const IdentifierSegment = ({ borehole, editingEnabled, formMethods }: Identifier return ( - + + { + append({ boreholeId: borehole.id, codelistId: null, value: "" }); + }} + /> + + {t("borehole_identifier")} @@ -79,16 +87,6 @@ const IdentifierSegment = ({ borehole, editingEnabled, formMethods }: Identifier ))} - - {editingEnabled && ( - { - append({ boreholeId: borehole.id, codelistId: null, value: "" }); - }} - /> - )} - ); From 058407db0a15715d598873dc13c24945b67d4121 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Thu, 21 Nov 2024 12:02:55 +0100 Subject: [PATCH 5/6] Fix point component display --- src/client/src/components/map/pointComponent.jsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/client/src/components/map/pointComponent.jsx b/src/client/src/components/map/pointComponent.jsx index 1e66ae0bc..aaa24fdf7 100644 --- a/src/client/src/components/map/pointComponent.jsx +++ b/src/client/src/components/map/pointComponent.jsx @@ -33,7 +33,6 @@ class PointComponent extends React.Component { this.changefeature = this.updatePointAndGetAddress.bind(this); this.detailMapStyleFunction = detailMapStyleFunction.bind(this); this.getAddress = this.getAddress.bind(this); - this.setStateBound = this.setState.bind(this); this.srs = "EPSG:2056"; _.forEach(projections, function (proj, srs) { @@ -302,9 +301,6 @@ class PointComponent extends React.Component { style={{ position: "relative", padding: 0, - height: "100%", - display: "flex", - flexDirection: "column", }}>
@@ -338,7 +333,10 @@ class PointComponent extends React.Component { From c0cd85d69ea7ac52440edb1b5bc737d880c35de9 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Thu, 21 Nov 2024 12:04:34 +0100 Subject: [PATCH 6/6] Fix point component display --- src/client/src/components/map/pointComponent.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/src/components/map/pointComponent.jsx b/src/client/src/components/map/pointComponent.jsx index aaa24fdf7..11c32c516 100644 --- a/src/client/src/components/map/pointComponent.jsx +++ b/src/client/src/components/map/pointComponent.jsx @@ -312,7 +312,7 @@ class PointComponent extends React.Component { }} /> - +