Revize b45d0300

draggable map marker pt1

re #9741

frontend/src/features/Catalog/CatalogTable.tsx

@@ -125 +125 @@
             {mapValueOrDefault(item.countries?.join(', '))}
             {mapValueOrDefault(
                 item.latitude && item.longitude
-                    ? `${item.latitude.toFixed(2)}, ${item.longitude.toFixed(
-                          2
-                      )}`
+                    ? `${item.latitude}, ${item.longitude}`
                     : undefined
             )}
             {mapValueOrDefault(
@@ -142 +140 @@
             {loading && !displayError ? <ContentLoading /> : null}
             {!loading && !displayError ? (
                 <Fragment>
-                    <TableContainer sx={{ minHeight: '65vh', maxHeight: '65vh' }}>
+                    <TableContainer sx={{ minHeight: '60vh', maxHeight: '60vh' }}>
                         <Table
                             stickyHeader
                             sx={{ minWidth: 400 }}

frontend/src/features/Navigation/navigationSlice.ts

@@ +1 @@
+import { createSlice } from '@reduxjs/toolkit'
+import persistReducer from 'redux-persist/es/persistReducer'
+import storage from 'redux-persist/lib/storage'
+
+export interface NavigationState {
+    selectedMenuItem?: string,
+    open: boolean,
+}
+
+const persistConfig = {
+    key: 'navigation',
+    storage
+}
+
+const initialState: NavigationState = {
+    selectedMenuItem: '',
+    open: false
+}
+
+export const navigationSlice = createSlice({
+    name: 'navigation',
+    initialState,
+    reducers: {
+        setSelectedMenuItem: (state: NavigationState, action: any) => ({...state, selectedMenuItem: action.payload}),
+        setOpen: (state: NavigationState, action: any) => ({...state, open: action.payload}),
+    }
+})
+
+const navigationReducer = persistReducer(persistConfig, navigationSlice.reducer)
+
+export const { setSelectedMenuItem, setOpen } = navigationSlice.actions
+
+export default navigationReducer

frontend/src/features/Navigation/navigationSlice.tsx

@@ -1 @@
-import { createSlice } from '@reduxjs/toolkit'
-import persistReducer from 'redux-persist/es/persistReducer'
-import storage from 'redux-persist/lib/storage'
-
-export interface NavigationState {
-    selectedMenuItem?: string,
-    open: boolean,
-}
-
-const persistConfig = {
-    key: 'navigation',
-    storage
-}
-
-const initialState: NavigationState = {
-    selectedMenuItem: '',
-    open: false
-}
-
-export const navigationSlice = createSlice({
-    name: 'navigation',
-    initialState,
-    reducers: {
-        setSelectedMenuItem: (state: NavigationState, action: any) => ({...state, selectedMenuItem: action.payload}),
-        setOpen: (state: NavigationState, action: any) => ({...state, open: action.payload}),
-    }
-})
-
-const navigationReducer = persistReducer(persistConfig, navigationSlice.reducer)
-
-export const { setSelectedMenuItem, setOpen } = navigationSlice.actions
-
-export default navigationReducer

frontend/src/features/TrackingTool/MapMarker.tsx

@@ +1 @@
+import { LatLngTuple, Marker as MarkerPOJO } from 'leaflet'
+import { FunctionComponent, ReactNode, useMemo, useRef, useState } from 'react'
+import { Marker } from 'react-leaflet'
+
+export interface MapMarkerProps {
+    position: LatLngTuple
+    children?: ReactNode
+}
+
+// Custom Map Marker component
+const MapMarker: FunctionComponent<MapMarkerProps> = ({ position, children }) => {
+    const [currentPosition, setCurrentPosition] = useState(position)
+    const markerRef = useRef<MarkerPOJO | null>(null)
+    const eventHandlers = useMemo(
+        () => ({
+            dragend: () => {
+                const marker = markerRef.current
+                console.log(markerRef)
+                if (!marker) {
+                    return
+                }
+                const latlng = marker.getLatLng()
+                setCurrentPosition([latlng.lat, latlng.lng])
+            },
+        }),
+        []
+    )
+
+    return (
+        <Marker
+            draggable={true}
+            position={currentPosition}
+            eventHandlers={eventHandlers}
+            ref={markerRef}
+        >
+            {children}
+        </Marker>
+    )
+}
+
+export default MapMarker

frontend/src/features/TrackingTool/MapPath.tsx

@@ -14 +14 @@
 import { DialogCatalogItemDetail as CatalogItemDetailDialog } from '../Catalog/CatalogItemDetail'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../redux/store'
+import MapMarker from './MapMarker'
 
 // CatalogItemDto wrapper to keep track whether the item is active or not
 class DisplayableMapPoint {
@@ -123 +124 @@
      */
     const buildVertices = () => {
         return mapPoints.map((mapPoint, idx) => (
-            <Marker
+            <MapMarker
                 key={idx}
                 position={[
                     mapPoint.catalogItem.latitude as number,
@@ -161 +162 @@
                         </Stack>
                     </Fragment>
                 </Popup>
-            </Marker>
+            </MapMarker>
         ))
     }
 

frontend/src/features/TrackingTool/trackingToolSlice.ts

@@ -88 +88 @@
                 currentPage: 0,
             }
         })
-        builder.addCase(sendTextForProcessing.rejected, (state, action) => ({
+        builder.addCase(sendTextForProcessing.rejected, (_, action) => ({
             ...initialState,
             lastError: action.error.message,
             isLoading: false,

frontend/src/features/redux/store.ts

@@ -25 +25 @@
         trackingTool: trackingToolReducer,
         usersDetail: usersDetailReducer,
         navigation: navigationReducer,
-        usersDetail: usersDetailReducer,
     }),
     process.env.REACT_APP_DEV_ENV === 'true'
         ? composeEnhancers(