Revize fc8a530f

Pagination

re #9741

frontend/src/features/TrackingTool/Controls/PathPagination.tsx

@@ +1 @@
+import { Pagination } from '@mui/material'
+import { ChangeEvent, Fragment } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../redux/store'
+import { setDisplayedPathIdx } from '../trackingToolSlice'
+
+const PathPagination = () => {
+    const dispatch = useDispatch()
+    const pathVariants = useSelector(
+        (state: RootState) => state.trackingTool.pathVariants
+    )
+    const currentPathIdx = useSelector(
+        (state: RootState) => state.trackingTool.displayedPathIdx
+    )
+
+    const onPageChange = (event: ChangeEvent<unknown>, value: number) => {
+        dispatch(setDisplayedPathIdx(value))
+    }
+
+    return (
+        <Fragment>
+            {pathVariants && (
+                <Pagination
+                    count={pathVariants.length}
+                    page={currentPathIdx + 1}
+                    onChange={onPageChange}
+                    color="primary"
+                />
+            )}
+        </Fragment>
+    )
+}
+
+export default PathPagination

frontend/src/features/TrackingTool/Map/Map.tsx

@@ -7 +7 @@
 import { buildTheme } from '../../Theme/ThemeWrapper'
 import RightClickPopupMenu from '../Import/ImportContextMenu'
 import MapPath from './MapPath'
-import { Map as LeafletMap } from 'leaflet'
+import L, { Map as LeafletMap } from 'leaflet'
+import {  } from 'leaflet.fullscreen'
 
 const mapTheme = buildTheme('light')
 
@@ -18 +19 @@
     const mapRef = useRef<LeafletMap | undefined>(undefined)
     useEffect(() => {
         if (!mapRef || !mapRef.current) {
-            console.log('No map ref')
             return
         }
 

frontend/src/features/TrackingTool/TrackingTool.tsx

@@ -12 +12 @@
 import MapPointToggleables from './Controls/MapPointToggleables'
 import GeoJsonImportDialog from './Import/GeoJsonImportDialog'
 import Map from './Map/Map'
+import MapPointDraggableList from './Controls/MapPointDraggableList'
+import PathPagination from './Controls/PathPagination'
 
 // Page with tracking tool
 const TrackingTool = () => {
@@ -25 +27 @@
         (state: RootState) => state.trackingTool.displayedPath
     )
 
+    const pathVariants = useSelector(
+        (state: RootState) => state.trackingTool.pathVariants
+    )
+
     // Consume any error
     const dispatch = useDispatch()
     const err = useSelector((state: RootState) => state.trackingTool.lastError)
@@ -61 +67 @@
                             Looks like no path / catalog items match this query.
                         </Typography>
                     )}
+                    {pathVariants && pathVariants.length > 0 && (
+                        <PathPagination />
+                    )}
                     <Stack
                         direction="row"
                         alignItems="flex-start"

frontend/src/features/TrackingTool/trackingToolSlice.ts

@@ -93 +93 @@
                 displayedPath: newPath,
             }
         },
+        // Updates currently used path - payload must be a number indexed from 1 since this is default behavior
+        // for MUI Pagination
+        // This function should only ever be called if there is some displayed path
+        setDisplayedPathIdx: (state: TrackingToolState, action: { payload: number }) => {
+            const newIdx = action.payload - 1 // subtract one to make index start from 0
+            const pathVariants = [...state.pathVariants ?? []]
+            const previousIdx = state.displayedPathIdx
+            if (pathVariants.length < newIdx || newIdx < 0) {
+                return state
+            }
+
+            // We will always have displayedPath defined if this function is called
+            pathVariants.splice(previousIdx, 0, [...state.displayedPath ?? []])
+            const newPath = pathVariants.splice(newIdx, 1)[0]
+            return {
+                ...state,
+                displayedPath: newPath,
+                displayedPathIdx: newIdx,
+                pathVariants,
+            }
+        },
+        moveToNextPathVariant: (state: TrackingToolState) => {
+            const currentPathIdx = state.displayedPathIdx
+            const pathVariants = [...state.pathVariants ?? []]
+
+            // Since we take out the selected path index the displayedPathIdx will serve as
+            // index of the next element
+            if (currentPathIdx >= pathVariants.length) {
+                return state // do nothing if the displayed path is also the last one
+            }
+
+            // Else get the next path variant
+            const newPath = [...pathVariants[currentPathIdx]]
+            const previousPath = [...state.displayedPath ?? []]
+
+            // And replace the displayed path with the new one
+            return {
+                ...state,
+                displayedPath: newPath,
+                displayedPathIdx: currentPathIdx + 1,
+                pathVariants: [
+                    ...pathVariants.slice(0, currentPathIdx),
+                    previousPath,
+                    ...pathVariants.slice(currentPathIdx + 1),
+                ]
+            }
+        },
+        moveToPreviousPathVariant: (state: TrackingToolState) => {
+            const currentPathIdx = state.displayedPathIdx
+            const pathVariants = [...state.pathVariants ?? []]
+
+            const previousPathIdx = currentPathIdx - 1
+            if (previousPathIdx < 0) {
+                return state // do nothing if the displayed path is the first one
+            }
+
+            // Else get the previous path variant
+            const newPath = [...pathVariants[previousPathIdx]]
+            const previousPath = [...state.displayedPath ?? []]
+
+            return {
+                ...state,
+                displayedPath: newPath,
+                displayedPathIdx: previousPathIdx,
+                pathVariants: [
+                    ...pathVariants.slice(0, previousPathIdx),
+                    previousPath,
+                    ...pathVariants.slice(previousPathIdx + 1),
+                ]
+            }
+        }
     },
     extraReducers: (builder) => {
         builder.addCase(sendTextForProcessing.fulfilled, (state, action) => {
             const pathDto: PathDto = action.payload
             const pathVariants = buildPathVariants(pathDto)
             const selectedPath = pathVariants.length > 0 ? pathVariants[0] : undefined
+            pathVariants.splice(0, 1) // remove the selected path so that we do not have to update it here
             if (!selectedPath) {
                 return {
                     ...state,
@@ -153 +225 @@
     moveMarkerToDestination,
     clear,
     mergeWithCurrentPath,
+    setDisplayedPathIdx,
 } = trackingToolSlice.actions
 
 const trackingToolReducer = trackingToolSlice.reducer