forked from ddrilling/asb_cloud_front
* Добавлены крошки в разделе админки, куста и скважины
* Улучшены стили на страницах скважины
This commit is contained in:
parent
879fea41a5
commit
c3d53284bd
@ -11,6 +11,8 @@ export const RootPathContext = createContext<string>('/')
|
|||||||
export const UserContext = createContext<UserTokenDto>({})
|
export const UserContext = createContext<UserTokenDto>({})
|
||||||
/** Контекст метода редактирования параметров заголовка и меню */
|
/** Контекст метода редактирования параметров заголовка и меню */
|
||||||
export const LayoutPropsContext = createContext<(props: LayoutPortalProps) => void>(() => {})
|
export const LayoutPropsContext = createContext<(props: LayoutPortalProps) => void>(() => {})
|
||||||
|
/** Контекст для блока справа от крошек на страницах скважин и админки */
|
||||||
|
export const TopRightBlockContext = createContext<(block: JSX.Element) => void>(() => {})
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Получить текущую скважину
|
* Получить текущую скважину
|
||||||
@ -33,6 +35,8 @@ export const useRootPath = () => useContext(RootPathContext)
|
|||||||
*/
|
*/
|
||||||
export const useUser = () => useContext(UserContext)
|
export const useUser = () => useContext(UserContext)
|
||||||
|
|
||||||
|
export const useTopRightBlock = () => useContext(TopRightBlockContext)
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Получить метод задания параметров заголовка и меню
|
* Получить метод задания параметров заголовка и меню
|
||||||
*
|
*
|
||||||
|
@ -2,9 +2,10 @@ import { Navigate, Route, Routes } from 'react-router-dom'
|
|||||||
import { lazy, memo, useMemo } from 'react'
|
import { lazy, memo, useMemo } from 'react'
|
||||||
|
|
||||||
import { RootPathContext, useLayoutProps, useRootPath } from '@asb/context'
|
import { RootPathContext, useLayoutProps, useRootPath } from '@asb/context'
|
||||||
|
import { MenuBreadcrumbItems } from '@components/MenuBreadcrumb'
|
||||||
import { NoAccessComponent, wrapPrivateComponent } from '@utils'
|
import { NoAccessComponent, wrapPrivateComponent } from '@utils'
|
||||||
|
|
||||||
import AdminNavigationMenu from './AdminNavigationMenu'
|
import { AdminNavigationMenu, menuItems } from './AdminNavigationMenu'
|
||||||
|
|
||||||
const ClusterController = lazy(() => import('./ClusterController'))
|
const ClusterController = lazy(() => import('./ClusterController'))
|
||||||
const CompanyController = lazy(() => import('./CompanyController'))
|
const CompanyController = lazy(() => import('./CompanyController'))
|
||||||
@ -23,6 +24,7 @@ const layoutProps = {
|
|||||||
sider: <AdminNavigationMenu />,
|
sider: <AdminNavigationMenu />,
|
||||||
title: 'Администраторская панель',
|
title: 'Администраторская панель',
|
||||||
isAdmin: true,
|
isAdmin: true,
|
||||||
|
breadcrumb: <MenuBreadcrumbItems menuItems={menuItems} pathRoot={/^\/admin\//} />,
|
||||||
}
|
}
|
||||||
|
|
||||||
const AdminPanel = memo(() => {
|
const AdminPanel = memo(() => {
|
||||||
@ -56,9 +58,4 @@ const AdminPanel = memo(() => {
|
|||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
export default wrapPrivateComponent(AdminPanel, {
|
export default wrapPrivateComponent(AdminPanel, { requirements: ['RequestTracker.get'] })
|
||||||
requirements: ['RequestTracker.get'],
|
|
||||||
title: 'Панель администратора',
|
|
||||||
route: 'admin/*',
|
|
||||||
key: 'admin',
|
|
||||||
})
|
|
||||||
|
@ -10,7 +10,8 @@ import { OperationStatService } from '@api'
|
|||||||
import ClusterWells from './ClusterWells'
|
import ClusterWells from './ClusterWells'
|
||||||
|
|
||||||
const layoutProps = {
|
const layoutProps = {
|
||||||
title: 'Анализ скважин куста'
|
title: 'Анализ скважин куста',
|
||||||
|
breadcrumb: true,
|
||||||
}
|
}
|
||||||
|
|
||||||
const Cluster = memo(() => {
|
const Cluster = memo(() => {
|
||||||
|
@ -94,7 +94,7 @@ export const DocumentsTemplate = ({ idCategory, well: givenWell, mimeTypes, head
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<LoaderPortal show={showLoader}>
|
<LoaderPortal show={showLoader}>
|
||||||
<div style={{ margin: 16, display: 'flex' }}>
|
<div style={{ margin: 16, marginTop: 0, display: 'flex' }}>
|
||||||
<div>
|
<div>
|
||||||
<span>Фильтр по дате</span>
|
<span>Фильтр по дате</span>
|
||||||
<div>
|
<div>
|
||||||
|
@ -1,12 +1,13 @@
|
|||||||
import { lazy, memo, useCallback, useEffect, useMemo, useState } from 'react'
|
import { lazy, memo, useCallback, useEffect, useMemo, useState } from 'react'
|
||||||
import { Navigate, Route, Routes, useParams } from 'react-router-dom'
|
import { Navigate, Route, Routes, useLocation, useParams } from 'react-router-dom'
|
||||||
|
|
||||||
import { WellContext, RootPathContext, useRootPath, useLayoutProps } from '@asb/context'
|
import { WellContext, RootPathContext, useRootPath, useLayoutProps, TopRightBlockContext } from '@asb/context'
|
||||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||||
|
import { MenuBreadcrumbItems } from '@components/MenuBreadcrumb'
|
||||||
import { NoAccessComponent, wrapPrivateComponent } from '@utils'
|
import { NoAccessComponent, wrapPrivateComponent } from '@utils'
|
||||||
import { WellService } from '@api'
|
import { WellService } from '@api'
|
||||||
|
|
||||||
import NavigationMenu from './NavigationMenu'
|
import { NavigationMenu, menuItems } from './NavigationMenu'
|
||||||
|
|
||||||
import '@styles/index.css'
|
import '@styles/index.css'
|
||||||
|
|
||||||
@ -42,7 +43,10 @@ const WellCompositeEditor = lazy(() => import('./Analytics/WellCompositeEditor')
|
|||||||
const Well = memo(() => {
|
const Well = memo(() => {
|
||||||
const { idWell } = useParams()
|
const { idWell } = useParams()
|
||||||
|
|
||||||
|
const location = useLocation()
|
||||||
|
|
||||||
const [well, setWell] = useState({ id: idWell })
|
const [well, setWell] = useState({ id: idWell })
|
||||||
|
const [topRightBlock, setTopRightBlock] = useState()
|
||||||
|
|
||||||
const root = useRootPath()
|
const root = useRootPath()
|
||||||
const rootPath = useMemo(() => `${root}/well/${idWell}`, [root, idWell])
|
const rootPath = useMemo(() => `${root}/well/${idWell}`, [root, idWell])
|
||||||
@ -71,56 +75,64 @@ const Well = memo(() => {
|
|||||||
)
|
)
|
||||||
}, [idWell])
|
}, [idWell])
|
||||||
|
|
||||||
useEffect(() => setLayoutProps({ sider: <NavigationMenu idWell={well.id} /> }), [well, setLayoutProps])
|
useEffect(() => setLayoutProps({
|
||||||
|
sider: <NavigationMenu idWell={well.id} />,
|
||||||
|
breadcrumb: <MenuBreadcrumbItems menuItems={menuItems} pathRoot={/^\/well\/[0-9]+\//} />,
|
||||||
|
topRightBlock: topRightBlock,
|
||||||
|
}), [well, setLayoutProps, topRightBlock])
|
||||||
|
|
||||||
|
useEffect(() => setTopRightBlock(undefined), [location])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<RootPathContext.Provider value={rootPath}>
|
<RootPathContext.Provider value={rootPath}>
|
||||||
<WellContext.Provider value={[well, updateWell]}>
|
<WellContext.Provider value={[well, updateWell]}>
|
||||||
<Routes>
|
<TopRightBlockContext.Provider value={setTopRightBlock}>
|
||||||
<Route index element={<Navigate to={'telemetry'} replace />} />
|
<Routes>
|
||||||
<Route path={'*'} element={<NoAccessComponent />} />
|
|
||||||
|
|
||||||
<Route path={'telemetry/*'} element={<Telemetry />}>
|
|
||||||
<Route index element={<Navigate to={'telemetry'} replace />} />
|
<Route index element={<Navigate to={'telemetry'} replace />} />
|
||||||
<Route path={'*'} element={<NoAccessComponent />} />
|
<Route path={'*'} element={<NoAccessComponent />} />
|
||||||
|
|
||||||
<Route path={'telemetry'} element={<TelemetryView />} />
|
<Route path={'telemetry/*'} element={<Telemetry />}>
|
||||||
<Route path={'messages'} element={<Messages />} />
|
<Route index element={<Navigate to={'telemetry'} replace />} />
|
||||||
<Route path={'archive'} element={<Archive />} />
|
<Route path={'*'} element={<NoAccessComponent />} />
|
||||||
<Route path={'dashboard_nnb/*'} element={<DashboardNNB />} />
|
|
||||||
<Route path={'operations'} element={<Operations />} />
|
|
||||||
<Route path={'operation_time'} element={<OperationTime />} />
|
|
||||||
</Route>
|
|
||||||
<Route path={'reports/*'} element={<Reports />}>
|
|
||||||
<Route index element={<Navigate to={'diagram_report'} replace />} />
|
|
||||||
<Route path={'*'} element={<NoAccessComponent />} />
|
|
||||||
|
|
||||||
<Route path={'diagram_report'} element={<DiagramReport />} />
|
<Route path={'telemetry'} element={<TelemetryView />} />
|
||||||
<Route path={'daily_report'} element={<DailyReport />} />
|
<Route path={'messages'} element={<Messages />} />
|
||||||
</Route>
|
<Route path={'archive'} element={<Archive />} />
|
||||||
<Route path={'analytics/*'} element={<Analytics />}>
|
<Route path={'dashboard_nnb/*'} element={<DashboardNNB />} />
|
||||||
<Route index element={<Navigate to={'composite'} replace />} />
|
<Route path={'operations'} element={<Operations />} />
|
||||||
<Route path={'*'} element={<NoAccessComponent />} />
|
<Route path={'operation_time'} element={<OperationTime />} />
|
||||||
|
</Route>
|
||||||
|
<Route path={'reports/*'} element={<Reports />}>
|
||||||
|
<Route index element={<Navigate to={'diagram_report'} replace />} />
|
||||||
|
<Route path={'*'} element={<NoAccessComponent />} />
|
||||||
|
|
||||||
<Route path={'composite/*'} element={<WellCompositeEditor />} />
|
<Route path={'diagram_report'} element={<DiagramReport />} />
|
||||||
<Route path={'statistics'} element={<Statistics />} />
|
<Route path={'daily_report'} element={<DailyReport />} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path={'operations/*'} element={<WellOperations />}>
|
<Route path={'analytics/*'} element={<Analytics />}>
|
||||||
<Route index element={<Navigate to={'tvd'} replace />} />
|
<Route index element={<Navigate to={'composite'} replace />} />
|
||||||
<Route path={'*'} element={<NoAccessComponent />} />
|
<Route path={'*'} element={<NoAccessComponent />} />
|
||||||
|
|
||||||
<Route path={'tvd'} element={<Tvd />} />
|
<Route path={'composite/*'} element={<WellCompositeEditor />} />
|
||||||
<Route path={'sections'} element={<WellSectionsStat />} />
|
<Route path={'statistics'} element={<Statistics />} />
|
||||||
<Route path={'plan'} element={<WellOperationsEditorPlan />} />
|
</Route>
|
||||||
<Route path={'fact'} element={<WellOperationsEditorFact />} />
|
<Route path={'operations/*'} element={<WellOperations />}>
|
||||||
<Route path={'drillProcessFlow'} element={<DrillProcessFlow />} />
|
<Route index element={<Navigate to={'tvd'} replace />} />
|
||||||
<Route path={'params'} element={<WellDrillParams />} />
|
<Route path={'*'} element={<NoAccessComponent />} />
|
||||||
</Route>
|
|
||||||
<Route path={'document/*'} element={<Documents />} />
|
<Route path={'tvd'} element={<Tvd />} />
|
||||||
<Route path={'measure/*'} element={<Measure />} />
|
<Route path={'sections'} element={<WellSectionsStat />} />
|
||||||
<Route path={'drillingProgram'} element={<DrillingProgram />} />
|
<Route path={'plan'} element={<WellOperationsEditorPlan />} />
|
||||||
<Route path={'well_case'} element={<WellCase />} />
|
<Route path={'fact'} element={<WellOperationsEditorFact />} />
|
||||||
</Routes>
|
<Route path={'drillProcessFlow'} element={<DrillProcessFlow />} />
|
||||||
|
<Route path={'params'} element={<WellDrillParams />} />
|
||||||
|
</Route>
|
||||||
|
<Route path={'document/*'} element={<Documents />} />
|
||||||
|
<Route path={'measure/*'} element={<Measure />} />
|
||||||
|
<Route path={'drillingProgram'} element={<DrillingProgram />} />
|
||||||
|
<Route path={'well_case'} element={<WellCase />} />
|
||||||
|
</Routes>
|
||||||
|
</TopRightBlockContext.Provider>
|
||||||
</WellContext.Provider>
|
</WellContext.Provider>
|
||||||
</RootPathContext.Provider>
|
</RootPathContext.Provider>
|
||||||
)
|
)
|
||||||
|
@ -6,19 +6,19 @@
|
|||||||
min-height: 80vh;
|
min-height: 80vh;
|
||||||
|
|
||||||
.tvd-top {
|
.tvd-top {
|
||||||
|
margin: 0 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
.tvd-inputs {
|
.tvd-inputs {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
|
||||||
.tvd-input-group {
|
.tvd-input-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 0 15px;
|
|
||||||
|
|
||||||
& > span {
|
& > span {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
Loading…
Reference in New Issue
Block a user