51 registruojant izuvinima ivedant telkinio informacija issoka pakartotinis popup

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 (
     <FieldWrapper
       onClick={handleToggleSelect}
@@ -50,7 +71,7 @@ const LocationInput = ({ onChange, error, disabled, value, handleSelectMap }: an
           {!isEmpty(recentLocations) && (
             <>
               <HistoryTitle>Paskutinės paieškos</HistoryTitle>
-              {recentLocations.map((recentLocation: any) => {
+              {recentLocations.map((recentLocation: Location) => {
                 return (
                   <OptionRowContainer
                     onClick={() => onChange(recentLocation)}

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 = ({
               </StyledForm>
               <Map
                 iframeRef={iframeRef}
+                isMapPreviewMode={isMapPreviewMode}
                 display={!isMobile || showMap}
                 onClose={() => setShowMap(false)}
                 value={values.geom}

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<any[]>();
   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);

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;