CF2-39: Добавлено подменю 'Документы'

src/components/Documents.jsx

@@ -1,6 +1,5 @@
 import {Table, DatePicker, Button, Modal, ConfigProvider} from 'antd'
 import { UploadOutlined } from '@ant-design/icons'
-import MenuDocuments from "./MenuDocuments"
 import DocumentCreationForm from './modalWindows/DocumentCreationForm'
 import { FileService } from '../services/api'
 import {useState, useEffect} from "react"
@@ -136,7 +135,6 @@ export default function Documents({selectedFileCategory}) {
 
   return (
     <div>
-      <MenuDocuments/>
         <div className='filter-group'>
           <h3 className='filter-group-heading'>Фильтр документов:</h3>
           <ConfigProvider locale={locale}>

src/components/MenuDocuments.jsx

@@ -1,16 +1,22 @@
-import {Menu} from "antd";
+import {Layout, Menu} from "antd";
 import {FolderOutlined} from "@ant-design/icons";
-import {Link} from "react-router-dom";
+import {Link, Route, Switch, useParams, useLocation} from "react-router-dom";
-import {useState} from "react"
+import Documents from "../components/Documents";
+import LastData from '../pages/LastData'
+import { useState, useEffect } from "react";
 
+const { Content } = Layout
 
 export default function MenuDocuments() {
+  let { id } = useParams()
+  let currentPath = useLocation().pathname
 
-  const [selectedItem, setSelectedItem] = useState(1)
+  const [selectedElement, setSelectedElement] = useState('fluidService')
 
-  const handleClick = e => {
+  useEffect(() => {
-    setSelectedItem({ current: e.key });
+    let pathLastElement = currentPath.split('/').pop()
-  };
+    setSelectedElement(pathLastElement)
+  }, [currentPath])
 
   return(
   <>
@@ -18,33 +24,63 @@ export default function MenuDocuments() {
       mode="horizontal"
       selectable={true}
       className="well_menu"
-      onClick={handleClick} 
+      selectedKeys={[selectedElement]}
-      selectedKeys={[selectedItem]}
     >
-      <Menu.Item key="1" icon={<FolderOutlined/>}>
+      <Menu.Item key="fluidService" icon={<FolderOutlined/>}>
-        <Link to='fluidService'>Растворный сервис</Link>
+        <Link to={{pathname: `/well/${id}/documents/fluidService`}}>Растворный сервис</Link>
       </Menu.Item>
-      <Menu.Item key="2" icon={<FolderOutlined/>}>
+      <Menu.Item key="cementing" icon={<FolderOutlined/>}>
-        <Link to='cementing'>Цементирование</Link>
+        <Link to={{pathname: `/well/${id}/documents/cementing`}}>Цементирование</Link>
       </Menu.Item>
-      <Menu.Item key="3" icon={<FolderOutlined/>}>
+      <Menu.Item key="nnb" icon={<FolderOutlined/>}>
-        <Link to='nnb'>ННБ</Link>
+        <Link to={{pathname: `/well/${id}/documents/nnb`}}>ННБ</Link>
       </Menu.Item>
-      <Menu.Item key="4" icon={<FolderOutlined/>}>
+      <Menu.Item key="gti" icon={<FolderOutlined/>}>
-        <Link to='gti'>ГТИ</Link>
+        <Link to={{pathname: `/well/${id}/documents/gti`}}>ГТИ</Link>
       </Menu.Item>
-      <Menu.Item key="5" icon={<FolderOutlined/>}>
+      <Menu.Item key="documentsForWell" icon={<FolderOutlined/>}>
-        <Link to='documentsForWell'>Документы по скважине</Link>
+        <Link to={{pathname: `/well/${id}/documents/documentsForWell`}}>Документы по скважине</Link>
       </Menu.Item>
-      <Menu.Item key="6" icon={<FolderOutlined/>}>
+      <Menu.Item key="supervisor" icon={<FolderOutlined/>}>
-        <Link to='supervisor'>Супервайзер</Link>
+        <Link to={{pathname: `/well/${id}/documents/supervisor`}}>Супервайзер</Link>
       </Menu.Item>
-      <Menu.Item key="7" icon={<FolderOutlined/>}>
+      <Menu.Item key="master" icon={<FolderOutlined/>}>
-        <Link to='master'>Мастер</Link>
+        <Link to={{pathname: `/well/${id}/documents/master`}}>Мастер</Link>
       </Menu.Item>
-      <Menu.Item key="8" icon={<FolderOutlined/>}>
+      <Menu.Item key="lastData" icon={<FolderOutlined/>}>
-        <Link to='lastData'>Последние данные</Link>
+        <Link to={{pathname: `/well/${id}/documents/lastData`}}>Последние данные</Link>
       </Menu.Item>
     </Menu>
+
+    <Layout>
+        <Content className="site-layout-background">
+          <Switch>
+            <Route path="/well/:id/documents/fluidService">
+              <Documents selectedFileCategory={1}/>
+            </Route>
+            <Route path="/well/:id/documents/cementing">
+              <Documents selectedFileCategory={2}/>
+            </Route>
+            <Route path="/well/:id/documents/nnb">
+              <Documents selectedFileCategory={3}/>
+            </Route>
+            <Route path="/well/:id/documents/gti">
+              <Documents selectedFileCategory={4}/>
+            </Route>
+            <Route path="/well/:id/documents/documentsForWell">
+              <Documents selectedFileCategory={5}/>
+            </Route>
+            <Route path="/well/:id/documents/supervisor">
+              <Documents selectedFileCategory={6}/>
+            </Route>
+            <Route path="/well/:id/documents/master">
+              <Documents selectedFileCategory={7}/>
+            </Route>
+            <Route path="/well/:id/documents/lastData">
+              <LastData/>
+            </Route>
+          </Switch>
+        </Content>
+      </Layout>
   </>)
 }

src/pages/LastData.jsx

@@ -1,10 +1,9 @@
 import {Button, Modal, Checkbox } from "antd";
 import {CementFluid} from "../components/CementFluid";
-import React, {useState} from "react";
+import {useState} from "react";
 import {Sludge} from "../components/Sludge";
 import {NnbTable} from "../components/NnbTable"
 import Disposition from "../components/Disposition";
-import MenuDocuments from "../components/MenuDocuments";
 
 
 export default function LastData() {
@@ -15,9 +14,6 @@ export default function LastData() {
 
   return (
     <>
-      <div>
-        <MenuDocuments/>
-      </div>
       <div>&nbsp;</div>
       <Button type="primary" onClick={() => setTableVisible(true)}>
         Последний замер бурового раствора

src/pages/Well.jsx

@@ -7,9 +7,8 @@ import Messages from "../pages/Messages";
 import Report from "../pages/Report";
 import Analysis from "../pages/Analysis";
 import WellAnalysis from "../pages/WellAnalysis";
-import Documents from "../components/Documents";
-import LastData from '../pages/LastData'
 import TelemetryView from "../pages/TelemetryView";
+import MenuDocuments from "../components/MenuDocuments";
 
 const { Content } = Layout
 
@@ -26,55 +25,55 @@ export default function Well() {
         className="well_menu"
       >
         <Menu.Item key="1" icon={<FundViewOutlined/>}>
-          <Link to='telemetry'>Мониторинг</Link>
+          <Link to={{pathname: `/well/${id}/telemetry`}}>Мониторинг</Link>
         </Menu.Item>
         <Menu.Item key="2" icon={<FolderOutlined/>}>
-          <Link to='message'>Сообщения</Link>
+          <Link to={{pathname: `/well/${id}/message`}}>Сообщения</Link>
         </Menu.Item>
         <Menu.Item key="3" icon={<FolderOutlined/>}>
-          <Link to='report'>Рапорт</Link>
+          <Link to={{pathname: `/well/${id}/report`}}>Рапорт</Link>
         </Menu.Item>
         <Menu.Item key="4" icon={<FolderOutlined/>}>
-          <Link to='analysis'>Анализ</Link>
+          <Link to={{pathname: `/well/${id}/analysis`}}>Анализ</Link>
         </Menu.Item>
         <Menu.Item key="5" icon={<FolderOutlined/>}>
-          <Link to='wellAnalysis'>Операции по скважине</Link>
+          <Link to={{pathname: `/well/${id}/wellAnalysis`}}>Операции по скважине</Link>
         </Menu.Item>
         <Menu.Item key="6" icon={<FolderOutlined/>}>
-          <Link to='file'>Файлы</Link>
+          <Link to={{pathname: `/well/${id}/file`}}>Файлы</Link>
         </Menu.Item>
         <Menu.Item key="7" icon={<FolderOutlined/>}>
-          <Link to='archive'>Архив</Link>
+          <Link to={{pathname: `/well/${id}/archive`}}>Архив</Link>
         </Menu.Item>
         <SubMenu
             key="documentsSub"
-            title={<Link to='fluidService' className="linkDocuments">Документы</Link>}
+            title={<span className="linkDocuments">Документы</span>}
             icon={<FolderOutlined/>}
             selectable={true}
           >
             <Menu.Item key="documentsSub1" icon={<FolderOutlined/>}>
-              <Link to='fluidService'>Растворный сервис</Link>
+              <Link to={{pathname: `/well/${id}/documents/fluidService`}}>Растворный сервис</Link>
             </Menu.Item>
             <Menu.Item key="documentsSub1.1" icon={<FolderOutlined/>}>
-              <Link to='cementing'>Цементирование</Link>
+              <Link to={{pathname: `/well/${id}/documents/cementing`}}>Цементирование</Link>
             </Menu.Item>
             <Menu.Item key="documentsSub1.2" icon={<FolderOutlined/>}>
-              <Link to='nnb'>ННБ</Link>
+              <Link to={{pathname: `/well/${id}/documents/nnb`}}>ННБ</Link>
             </Menu.Item>
             <Menu.Item key="documentsSub1.3" icon={<FolderOutlined/>}>
-              <Link to='gti'>ГТИ</Link>
+              <Link to={{pathname: `/well/${id}/documents/gti`}}>ГТИ</Link>
             </Menu.Item>
             <Menu.Item key="documentsSub1.4" icon={<FolderOutlined/>}>
-              <Link to='documentsForWell'>Документы по скважине</Link>
+              <Link to={{pathname: `/well/${id}/documents/documentsForWell`}}>Документы по скважине</Link>
             </Menu.Item>
             <Menu.Item key="documentsSub1.5" icon={<FolderOutlined/>}>
-              <Link to='supervisor'>Супервайзер</Link>
+              <Link to={{pathname: `/well/${id}/documents/supervisor`}}>Супервайзер</Link>
             </Menu.Item>
             <Menu.Item key="documentsSub1.6" icon={<FolderOutlined/>}>
-              <Link to='master'>Мастер</Link>
+              <Link to={{pathname: `/well/${id}/documents/master`}}>Мастер</Link>
             </Menu.Item>
             <Menu.Item key="documentsSub1.7" icon={<FolderOutlined/>}>
-              <Link to='lastData'>Последние данные</Link>
+              <Link to={{pathname: `/well/${id}/documents/lastData`}}>Последние данные</Link>
             </Menu.Item>
           </SubMenu>
       </Menu>
@@ -103,32 +102,8 @@ export default function Well() {
             <Route path="/well/:id/telemetry">
               <TelemetryView/>
             </Route>
-            <Route path="/well/:id/fluidService">
-              <Documents selectedFileCategory={1}/>
-            </Route>
-            <Route path="/well/:id/cementing">
-              <Documents selectedFileCategory={2}/>
-            </Route>
-            <Route path="/well/:id/nnb">
-              <Documents selectedFileCategory={3}/>
-            </Route>
-            <Route path="/well/:id/gti">
-              <Documents selectedFileCategory={4}/>
-            </Route>
-            <Route path="/well/:id/documentsForWell">
-              <Documents selectedFileCategory={5}/>
-            </Route>
-            <Route path="/well/:id/supervisor">
-              <Documents selectedFileCategory={6}/>
-            </Route>
-            <Route path="/well/:id/master">
-              <Documents selectedFileCategory={7}/>
-            </Route>
-            <Route path="/well/:id/lastData">
-              <LastData/>
-            </Route>
             <Route path="/well/:id/documents">
-              <Documents/>
+              <MenuDocuments/>
             </Route>
             <Route path="/">
               <Redirect to={{pathname: `/well/${id}/telemetry`}}/>