diff --git a/app/src/App.tsx b/app/src/App.tsx index fbb525c3..354d216e 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -267,14 +267,14 @@ function App() { path='attestation-form' element={} /> - {layers.map((l: any) => ( + {layers.map((l: LayerProps) => ( } diff --git a/lib/src/Components/Templates/ItemCard.tsx b/lib/src/Components/Templates/ItemCard.tsx index e8b5b1f3..2cd4fcf9 100644 --- a/lib/src/Components/Templates/ItemCard.tsx +++ b/lib/src/Components/Templates/ItemCard.tsx @@ -1,6 +1,8 @@ +import { LatLng } from 'leaflet' import { useMap } from 'react-leaflet' import { useNavigate } from 'react-router-dom' +import { usePopupForm } from '#components/Map/hooks/usePopupForm' import { useSetSelectPosition } from '#components/Map/hooks/useSelectPosition' import useWindowDimensions from '#components/Map/hooks/useWindowDimension' import { StartEndView, TextView } from '#components/Map/Subcomponents/ItemPopupComponents' @@ -25,6 +27,31 @@ export const ItemCard = ({ const windowDimensions = useWindowDimensions() const map = useMap() const setSelectPosition = useSetSelectPosition() + const { setPopupForm } = usePopupForm() + + const handleEdit = () => { + if (!i.layer) { + throw new Error('Layer is not defined') + } + + if (i.layer.itemType.small_form_edit && i.position) { + navigate('/') + // Wait for navigation to complete before setting popup + setTimeout(() => { + if (i.position && i.layer) { + const position = new LatLng(i.position.coordinates[1], i.position.coordinates[0]) + setPopupForm({ + position, + layer: i.layer, + item: i, + }) + map.setView(position, map.getZoom(), { duration: 1 }) + } + }, 100) + } else { + navigate('/edit-item/' + i.id) + } + } return (
navigate('/edit-item/' + i.id)} + editCallback={() => handleEdit()} setPositionCallback={() => { map.closePopup() setSelectPosition(i)