Добавлено меню навигации для раздела месторождения

src/context.ts

@@ -3,6 +3,8 @@ import { createContext, useContext, useEffect } from 'react'
 import { LayoutPortalProps } from '@components/LayoutPortal'
 import { DepositDto, UserTokenDto, WellDto } from '@api'
 
+/** Контекст текущего месторождения */
+export const DepositContext = createContext<DepositDto | null>(null)
 /** Контекст текущей скважины */
 export const WellContext = createContext<[WellDto, (well: WellDto) => void]>([{}, () => {}])
 /** Контекст текущего корневого пути */
@@ -19,10 +21,17 @@ export const DepositListContext = createContext<DepositDto[]>([])
 /**
    * Получить текущую скважину
    *
-   * @returns Текущая скважина, либо `null`
+   * @returns Текущая скважина, либо пустой объект
    */
 export const useWell = () => useContext(WellContext)
 
+/**
+   * Получить текущее месторождение
+   *
+   * @returns Текущее месторождение, либо `null`
+   */
+export const useDeposit = () => useContext(DepositContext)
+
 /**
    * Получить текущий корневой путь
    *

src/pages/Deposit.jsx

@@ -1,106 +0,0 @@
-import { useEffect, memo, useMemo, useCallback } from 'react'
-import { Link, useLocation } from 'react-router-dom'
-import { Map, Overlay } from 'pigeon-maps'
-import { Popover, Badge } from 'antd'
-
-import { useDepositList, useLayoutProps } from '@asb/context'
-import { PointerIcon } from '@components/icons'
-import { FastRunMenu } from '@components/FastRunMenu'
-import { limitValue, withPermissions } from '@utils'
-
-import '@styles/index.css'
-
-const zoomLimit = limitValue(5, 15)
-
-const calcViewParams = (clusters) => {
-    if ((clusters?.length ?? 0) <= 0)
-        return { center: [60.81226, 70.0562], zoom: 5 }
-
-    const center = clusters.reduce((sum, cluster) => {
-        sum[0] += cluster.latitude
-        sum[1] += cluster.longitude
-        return sum
-    }, [0, 0]).map((elm) => elm / clusters.length)
-
-    const maxDeg = clusters.reduce((max, cluster) => {
-        const dLatitude = Math.abs(center[0] - cluster.latitude)
-        const dLongitude = Math.abs(center[1] - cluster.longitude)
-        return Math.max(Math.max(dLatitude, dLongitude), max)
-    }, 0)
-
-    // zoom max = 20 (too close)
-    // zoom min = 1 (mega far)
-    // 4 - full Russia (161.6 deg)
-    // 13.5 - Khanty-Mansiysk
-    const zoom = zoomLimit(5 + 5 / (maxDeg + 0.5))
-
-    return { center, zoom }
-}
-
-const Deposit = memo(() => {
-    const deposits = useDepositList()
-    const setLayoutProps = useLayoutProps()
-    const location = useLocation()
-
-    const makeDepositLinks = useCallback((clusters) => (
-        <div>
-            {clusters.map(cluster => (
-                <Link
-                    key={cluster.id}
-                    to={{
-                        pathname: `/cluster/${cluster.id}`,
-                        state: { from: location.pathname }
-                    }}
-                >
-                    <div>{cluster.caption}</div>
-                </Link>
-            ))}
-        </div>
-    ), [location.pathname])
-
-    const viewParams = useMemo(() => calcViewParams(deposits), [deposits])
-
-    useEffect(() => {
-        const hasId = location.pathname.length > '/deposit/'.length
-
-        const selectorProps = {
-            expand: hasId ? [location.pathname] : true,
-            current: hasId ? location.pathname : undefined,
-        }
-
-        setLayoutProps({
-            sheet: false,
-            showSelector: true,
-            selectorProps,
-            title: 'Месторождение',
-        })
-    }, [setLayoutProps, location.pathname])
-
-    return (
-        <>
-            <FastRunMenu />
-            <div className={'deposit-page'}>
-                <Map {...viewParams}>
-                    {deposits.map(deposit => {
-                        const anchor = [deposit.latitude, deposit.longitude]
-                        const links = makeDepositLinks(deposit.clusters)
-
-                        return (
-                            <Overlay width={32} anchor={anchor} key={anchor.join(' ')}>
-                                <Popover content={links} trigger={['click']} title={deposit.caption}>
-                                    <div className={'pointer'}>
-                                        <Badge count={deposit.clusters.length}>
-                                            <PointerIcon state={'active'} width={48} height={59} />
-                                        </Badge>
-                                    </div>
-                                </Popover>
-                            </Overlay>
-                        )
-                    })}
-                </Map>
-            </div>
-        </>
-    )
-})
-
-export default withPermissions(Deposit, ['Cluster.get'])

src/pages/Deposit/DepositNavigationMenu.jsx

@@ -0,0 +1,23 @@
+import { memo } from 'react'
+import {
+    HeatMapOutlined,
+} from '@ant-design/icons'
+
+import { makeItem, PrivateMenu } from '@components/PrivateMenu'
+
+export const menuItems = [
+    makeItem('Карта', 'map', [], <HeatMapOutlined />),
+]
+
+export const DepositNavigationMenu = memo((props) => (
+    <PrivateMenu
+        {...props}
+        items={menuItems}
+        rootPath={'/deposit/{idDeposit}'}
+        mode={'inline'}
+        theme={'dark'}
+        style={{ backgroundColor: 'transparent' }}
+    />
+))
+
+export default DepositNavigationMenu

src/pages/Deposit/Map.jsx

@@ -0,0 +1,85 @@
+import { memo, useMemo, useCallback } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { Map as PigeonMap, Overlay } from 'pigeon-maps'
+import { Popover, Badge } from 'antd'
+
+import { useDepositList } from '@asb/context'
+import { PointerIcon } from '@components/icons'
+import { limitValue, withPermissions } from '@utils'
+
+import '@styles/index.css'
+
+const zoomLimit = limitValue(5, 15)
+
+const calcViewParams = (clusters) => {
+    if ((clusters?.length ?? 0) <= 0)
+        return { center: [60.81226, 70.0562], zoom: 5 }
+
+    const center = clusters.reduce((sum, cluster) => {
+        sum[0] += cluster.latitude
+        sum[1] += cluster.longitude
+        return sum
+    }, [0, 0]).map((elm) => elm / clusters.length)
+
+    const maxDeg = clusters.reduce((max, cluster) => {
+        const dLatitude = Math.abs(center[0] - cluster.latitude)
+        const dLongitude = Math.abs(center[1] - cluster.longitude)
+        return Math.max(Math.max(dLatitude, dLongitude), max)
+    }, 0)
+
+    // zoom max = 20 (too close)
+    // zoom min = 1 (mega far)
+    // 4 - full Russia (161.6 deg)
+    // 13.5 - Khanty-Mansiysk
+    const zoom = zoomLimit(5 + 5 / (maxDeg + 0.5))
+
+    return { center, zoom }
+}
+
+const Map = memo(() => {
+    const deposits = useDepositList()
+    const location = useLocation()
+
+    const makeDepositLinks = useCallback((clusters) => (
+        <div>
+            {clusters.map(cluster => (
+                <Link
+                    key={cluster.id}
+                    to={{
+                        pathname: `/cluster/${cluster.id}`,
+                        state: { from: location.pathname }
+                    }}
+                >
+                    <div>{cluster.caption}</div>
+                </Link>
+            ))}
+        </div>
+    ), [location.pathname])
+
+    const viewParams = useMemo(() => calcViewParams(deposits), [deposits])
+
+    return (
+        <div className={'deposit-page'}>
+            <PigeonMap {...viewParams}>
+                {deposits.map(deposit => {
+                    const anchor = [deposit.latitude, deposit.longitude]
+                    const links = makeDepositLinks(deposit.clusters)
+
+                    return (
+                        <Overlay width={32} anchor={anchor} key={anchor.join(' ')}>
+                            <Popover content={links} trigger={['click']} title={deposit.caption}>
+                                <div className={'pointer'}>
+                                    <Badge count={deposit.clusters.length}>
+                                        <PointerIcon state={'active'} width={48} height={59} />
+                                    </Badge>
+                                </div>
+                            </Popover>
+                        </Overlay>
+                    )
+                })}
+            </PigeonMap>
+        </div>
+    )
+})
+
+export default withPermissions(Map, ['Cluster.get'])

src/pages/Deposit/index.jsx

@@ -0,0 +1,64 @@
+import { Navigate, Route, Routes, useLocation, useParams } from 'react-router-dom'
+import { lazy, memo, useEffect, useMemo } from 'react'
+
+import { DepositContext, RootPathContext, useDepositList, useLayoutProps, useRootPath } from '@asb/context'
+import FastRunMenu from '@components/FastRunMenu'
+import { NoAccessComponent, withPermissions } from '@utils'
+
+const Map = lazy(() => import('./Map'))
+const DepositNavigationMenu = lazy(() => import('./DepositNavigationMenu'))
+
+const Deposit = memo(() => {
+    const { '*': param } = useParams()
+    const location = useLocation()
+
+    const setLayoutProps = useLayoutProps()
+    const deposits = useDepositList()
+
+    const idDeposit = useMemo(() => {
+        const result = /^([^\/#?]+)/.exec(param)
+        return result && result[1] !== 'null' ? Number(result[1]) : null
+    }, [param])
+
+    const deposit = useMemo(() => deposits.find((deposit) => deposit.id === idDeposit) || null, [deposits, idDeposit])
+
+    const root = useRootPath()
+    const rootPath = useMemo(() => `${root}/deposit`, [root])
+
+    useEffect(() => {
+        const hasId = location.pathname.length > '/deposit/'.length
+
+        const selectorProps = {
+            expand: hasId ? [location.pathname] : true,
+            current: hasId ? location.pathname : undefined,
+        }
+
+        setLayoutProps({
+            sheet: false,
+            sider: <DepositNavigationMenu disabled={idDeposit === null} variables={{ idDeposit: idDeposit }} />,
+            showSelector: true,
+            selectorProps,
+            title: 'Месторождение',
+        })
+    }, [setLayoutProps, location.pathname, deposit])
+
+    return (
+        <RootPathContext.Provider value={rootPath}>
+            <DepositContext.Provider value={deposit}>
+                <FastRunMenu />
+                <Routes>
+                    <Route index element={<Navigate to={'null/'} />} />
+
+                    <Route path={':idDeposit'}>
+                        <Route index element={<Navigate to={'map'} replace />} />
+                        <Route path={'*'} element={<NoAccessComponent />} />
+
+                        <Route path={'map'} element={<Map />} />
+                    </Route>
+                </Routes>
+            </DepositContext.Provider>
+        </RootPathContext.Provider>
+    )
+})
+
+export default withPermissions(Deposit, [])