diff --git a/src/components/FastRunMenu.tsx b/src/components/FastRunMenu.tsx index dfaed0c..30d78b2 100644 --- a/src/components/FastRunMenu.tsx +++ b/src/components/FastRunMenu.tsx @@ -5,11 +5,11 @@ import { AutoComplete } from 'antd' import { join } from 'path' import { useWell } from '@asb/context' -import { makeItem, PrivateWellMenuItem } from './PrivateWellMenu' +import { makeItem, PrivateMenuItem } from './PrivateMenu' import { hasPermission, isURLAvailable } from '@utils' import { menuItems as adminMenuItems } from '@pages/AdminPanel/AdminNavigationMenu' -import { menuItems as wellMenuItems } from '@pages/Well/NavigationMenu' +import { menuItems as wellMenuItems } from '@pages/Well/WellNavigationMenu' import '@styles/fast_run_menu.less' @@ -29,7 +29,7 @@ const transliterateToEn = (text: string) => Object.entries(transliterationTable) const applyVars = (route: string, vars?: object): string => !vars ? route : Object.entries(vars).reduce((out, [key, value]) => out.replaceAll(`{${key}}`, value), route) -const makeOptions = (items: PrivateWellMenuItem[], vars?: object): OptionType[] => { +const makeOptions = (items: PrivateMenuItem[], vars?: object): OptionType[] => { const out: OptionType[] = [] items.forEach((item) => { if (!hasPermission(item.permissions)) return @@ -78,7 +78,7 @@ export const FastRunMenu = memo(() => { ] if (isURLAvailable('/admin')) - menus.push(makeItem('Панель администратора', '/admin', [], undefined, adminMenuItems as PrivateWellMenuItem[])) + menus.push(makeItem('Панель администратора', '/admin', [], undefined, adminMenuItems as PrivateMenuItem[])) if (well.id) menus.push( diff --git a/src/components/MenuBreadcrumb.tsx b/src/components/MenuBreadcrumb.tsx index 5299039..3623f68 100644 --- a/src/components/MenuBreadcrumb.tsx +++ b/src/components/MenuBreadcrumb.tsx @@ -2,16 +2,16 @@ import { Breadcrumb, BreadcrumbItemProps } from 'antd' import { Link } from 'react-router-dom' import { join } from 'path' -import { PrivateWellMenuItem } from '@components/PrivateWellMenu' +import { PrivateMenuItem } from '@components/PrivateMenu' import { FunctionalValue, getFunctionalValue, } from '@utils' -export const makeBreadcrumbItems = (items: PrivateWellMenuItem[], pathParts: string[], root: string = '/') => { +export const makeBreadcrumbItems = (items: PrivateMenuItem[], pathParts: string[], root: string = '/') => { const out = [] const parts = [...pathParts] let route = root - let arr: PrivateWellMenuItem[] | undefined = items + let arr: PrivateMenuItem[] | undefined = items while (arr && parts.length > 0) { - const child: PrivateWellMenuItem | undefined = arr.find(elm => elm.route.toLowerCase() === parts[0].toLowerCase()) + const child: PrivateMenuItem | undefined = arr.find(elm => elm.route.toLowerCase() === parts[0].toLowerCase()) if (!child) break route = join(route, child.route) out.push({ ...child, route }) @@ -22,11 +22,11 @@ export const makeBreadcrumbItems = (items: PrivateWellMenuItem[], pathParts: str } export const makeMenuBreadcrumbItems = ( - menuItems: PrivateWellMenuItem[], + menuItems: PrivateMenuItem[], path: string, pathRoot: RegExp = /^\//, - itemsProps?: FunctionalValue<(item: PrivateWellMenuItem) => BreadcrumbItemProps>, - itemRender?: (item: PrivateWellMenuItem) => JSX.Element, + itemsProps?: FunctionalValue<(item: PrivateMenuItem) => BreadcrumbItemProps>, + itemRender?: (item: PrivateMenuItem) => JSX.Element, ) => { const getItemProps = getFunctionalValue(itemsProps) diff --git a/src/components/PrivateWellMenu.tsx b/src/components/PrivateMenu.tsx similarity index 73% rename from src/components/PrivateWellMenu.tsx rename to src/components/PrivateMenu.tsx index 78e6d6c..f19fddf 100644 --- a/src/components/PrivateWellMenu.tsx +++ b/src/components/PrivateMenu.tsx @@ -1,21 +1,21 @@ import { ItemType } from 'antd/lib/menu/hooks/useItems' +import { Menu, MenuProps } from 'antd' import { memo, ReactNode, useMemo } from 'react' import { Link, useLocation } from 'react-router-dom' import { join } from 'path' -import { Menu, MenuProps } from 'antd' import { hasPermission, Permission } from '@utils' -export type PrivateWellMenuItem = { +export type PrivateMenuItem = { title: string route: string permissions: Permission | Permission[] icon?: ReactNode visible?: boolean - children?: PrivateWellMenuItem[] + children?: PrivateMenuItem[] } -const makeItems = (items: PrivateWellMenuItem[], parentRoute: string, pathParser?: (path: string, parent: string) => string): ItemType[] => { +const makeItems = (items: PrivateMenuItem[], parentRoute: string, pathParser?: (path: string, parent: string) => string): ItemType[] => { return items.map((item) => { if (item.visible === false || !(item.visible === true || hasPermission(item.permissions))) return null @@ -43,11 +43,11 @@ const makeItems = (items: PrivateWellMenuItem[], parentRoute: string, pathParser }).filter(Boolean) } -const makeItemList = (items: PrivateWellMenuItem[], rootPath: string, wellId?: number): ItemType[] => { +const makeItemList = (items: PrivateMenuItem[], rootPath: string, variables: Record): ItemType[] => { const parser = (path: string, parent: string) => { if (!path.startsWith('/')) path = join(parent, path) - return path.replace(/\{wellId\}/, String(wellId)) + return Object.entries(variables).reduce((out, [key, value]) => out.replaceAll(`{${key}}`, String(value)), path) } return makeItems(items, rootPath, parser) @@ -58,9 +58,9 @@ export const makeItem = ( route: string, permissions: Permission | Permission[], icon?: ReactNode, - children?: PrivateWellMenuItem[], + children?: PrivateMenuItem[], visible?: boolean -): PrivateWellMenuItem => ({ +): PrivateMenuItem => ({ title, route, icon, @@ -69,16 +69,16 @@ export const makeItem = ( visible, }) -export type PrivateWellMenuProps = Omit & { - idWell?: number - items: PrivateWellMenuItem[] +export type PrivateMenuProps = Omit & { + variables?: Record + items: PrivateMenuItem[] rootPath?: string } -export const PrivateWellMenu = memo(({ idWell, items, rootPath = '/', ...other }) => { +export const PrivateMenu = memo(({ variables, items, rootPath = '/', ...other }) => { const location = useLocation() - const menuItems = useMemo(() => makeItemList(items, rootPath, idWell), [items, rootPath, idWell]) + const menuItems = useMemo(() => makeItemList(items, rootPath, variables || {}), [items, rootPath, variables]) const tabKeys = useMemo(() => { const out = [] diff --git a/src/pages/AdminPanel/AdminNavigationMenu.jsx b/src/pages/AdminPanel/AdminNavigationMenu.jsx index 0474af2..98a098a 100644 --- a/src/pages/AdminPanel/AdminNavigationMenu.jsx +++ b/src/pages/AdminPanel/AdminNavigationMenu.jsx @@ -12,7 +12,7 @@ import { UserOutlined, } from '@ant-design/icons' -import { makeItem, PrivateWellMenu } from '@components/PrivateWellMenu' +import { makeItem, PrivateMenu } from '@components/PrivateMenu' import { isDev } from '@utils' export const menuItems = [ @@ -33,7 +33,7 @@ export const menuItems = [ ].filter(Boolean) export const AdminNavigationMenu = memo((props) => ( - , [ @@ -59,15 +59,15 @@ export const menuItems = [ makeItem('Дело скважины', 'well_case', [], ), ] -export const NavigationMenu = memo((props) => ( - ( + )) -export default NavigationMenu +export default WellNavigationMenu diff --git a/src/pages/Well/index.jsx b/src/pages/Well/index.jsx index 44b22d9..ca1cd2e 100644 --- a/src/pages/Well/index.jsx +++ b/src/pages/Well/index.jsx @@ -8,7 +8,7 @@ import { makeMenuBreadcrumbItems } from '@components/MenuBreadcrumb' import { NoAccessComponent, withPermissions } from '@utils' import { WellService } from '@api' -import { NavigationMenu, menuItems } from './NavigationMenu' +import { WellNavigationMenu, menuItems } from './WellNavigationMenu' import '@styles/index.css' @@ -81,7 +81,7 @@ const Well = memo(() => { }, [idWell]) useEffect(() => setLayoutProps({ - sider: , + sider: , breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/well\/[0-9]+\//), topRightBlock: topRightBlock?.(well), }), [well, location.pathname, setLayoutProps, topRightBlock])