From 72b16c7d09ae900a2863b3e1b747234e8f7a2ac5 Mon Sep 17 00:00:00 2001 From: dovilemely Date: Tue, 30 Apr 2024 16:30:56 +0300 Subject: [PATCH 1/2] enable map preview mode when location is selected from list --- src/components/fields/LocationInput.tsx | 27 +++++++++++++++++++++--- src/components/forms/Registration.tsx | 7 ++++++ src/components/other/RegistrationMap.tsx | 20 ++++++++++++++++-- src/utils/types.ts | 7 ++++++ 4 files changed, 56 insertions(+), 5 deletions(-) diff --git a/src/components/fields/LocationInput.tsx b/src/components/fields/LocationInput.tsx index ee1e013..ef2a3c0 100644 --- a/src/components/fields/LocationInput.tsx +++ b/src/components/fields/LocationInput.tsx @@ -1,13 +1,30 @@ import { isEmpty } from 'lodash'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import styled from 'styled-components'; import { useRecentLocations } from '../../utils/hooks'; import { inputLabels } from '../../utils/texts'; import Icon from '../other/Icon'; import FieldWrapper from './components/FieldWrapper'; import TextFieldInput from './components/TextFieldInput'; +import { Location } from '../../utils/types'; -const LocationInput = ({ onChange, error, disabled, value, handleSelectMap }: any) => { +export interface LocationInputProps { + onOpen: () => void; + handleSelectMap: () => void; + onChange: (recentLocation: Location) => void; + error?: string; + value?: string; + disabled: boolean; +} + +const LocationInput = ({ + onChange, + error, + disabled, + value, + handleSelectMap, + onOpen, +}: LocationInputProps) => { const [showSelect, setShowSelect] = useState(false); const recentLocations = useRecentLocations(); @@ -21,6 +38,10 @@ const LocationInput = ({ onChange, error, disabled, value, handleSelectMap }: an !disabled && setShowSelect(!showSelect); }; + useEffect(() => { + showSelect && onOpen && onOpen(); + }, [showSelect, onOpen]); + return ( Paskutinės paieškos - {recentLocations.map((recentLocation: any) => { + {recentLocations.map((recentLocation: Location) => { return ( onChange(recentLocation)} diff --git a/src/components/forms/Registration.tsx b/src/components/forms/Registration.tsx index 452f87f..335e1f5 100644 --- a/src/components/forms/Registration.tsx +++ b/src/components/forms/Registration.tsx @@ -50,6 +50,7 @@ const RegistrationForm = ({ disabled?: boolean; }) => { const [showMap, setShowMap] = useState(false); + const [isMapPreviewMode, toggleMapPreviewMode] = useState(false); const [queryString, setQueryString] = useState(''); const isMobile = useMediaQuery(device.mobileL); const fishAges = useFishAges(); @@ -237,11 +238,16 @@ const RegistrationForm = ({ error={errors.location} disabled={disabled} value={values?.location?.name} + onOpen={() => toggleMapPreviewMode(true)} handleSelectMap={() => { + toggleMapPreviewMode(false); setQueryString(queryStrings.draw); setShowMap(true); + setFieldValue('geom', undefined); + setFieldValue('location', undefined); }} onChange={(location: any) => { + toggleMapPreviewMode(true); const { geom, ...rest } = location; iframeRef?.current?.contentWindow?.postMessage(JSON.stringify({ geom }), '*'); setFieldValue('geom', geom); @@ -428,6 +434,7 @@ const RegistrationForm = ({ setShowMap(false)} value={values.geom} diff --git a/src/components/other/RegistrationMap.tsx b/src/components/other/RegistrationMap.tsx index 7e7a2ae..30eb6d7 100644 --- a/src/components/other/RegistrationMap.tsx +++ b/src/components/other/RegistrationMap.tsx @@ -20,15 +20,31 @@ export interface MapProps { value?: string; display: boolean; iframeRef: any; + isMapPreviewMode?: boolean; } -const Map = ({ height, onSave, onClose, value, display, iframeRef }: MapProps) => { +const Map = ({ + isMapPreviewMode, + height, + onSave, + onClose, + value, + display, + iframeRef, +}: MapProps) => { const [showModal, setShowModal] = useState(false); const [geom, setGeom] = useState(); const [loading, setLoading] = useState(true); const isMobile = useMediaQuery(device.mobileL); - const src = `${Url.DRAW}`; + const getMapUrl = () => { + const url = new URL(Url.DRAW); + const params = new URLSearchParams(url.search); + params.append('preview', isMapPreviewMode ? 'true' : 'false'); + url.search = params.toString(); + return url.href; + }; + const src = getMapUrl(); const handleLoadMap = () => { setLoading(false); diff --git a/src/utils/types.ts b/src/utils/types.ts index 8d61dc2..63930e6 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -111,6 +111,13 @@ export interface FishBatch { reviewAmount?: number; } +export interface Location { + cadastral_id: string; + geom: any; + municipality: { id: string; name: string }; + name: string; +} + export interface FishStocking { id: number; geom: any; From 069cf0a9eccefd11a9fba3a1193a1201a4735c91 Mon Sep 17 00:00:00 2001 From: dovilemely Date: Wed, 1 May 2024 23:22:06 +0300 Subject: [PATCH 2/2] make interface property optional --- src/components/fields/LocationInput.tsx | 2 +- src/components/other/RegistrationMap.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/fields/LocationInput.tsx b/src/components/fields/LocationInput.tsx index ef2a3c0..fce2caf 100644 --- a/src/components/fields/LocationInput.tsx +++ b/src/components/fields/LocationInput.tsx @@ -14,7 +14,7 @@ export interface LocationInputProps { onChange: (recentLocation: Location) => void; error?: string; value?: string; - disabled: boolean; + disabled?: boolean; } const LocationInput = ({ diff --git a/src/components/other/RegistrationMap.tsx b/src/components/other/RegistrationMap.tsx index 30eb6d7..18529b8 100644 --- a/src/components/other/RegistrationMap.tsx +++ b/src/components/other/RegistrationMap.tsx @@ -20,7 +20,7 @@ export interface MapProps { value?: string; display: boolean; iframeRef: any; - isMapPreviewMode?: boolean; + isMapPreviewMode: boolean; } const Map = ({