WellOperations get and display.

src/pages/Well.jsx

@@ -2,16 +2,13 @@ import { Layout, Menu } from "antd";
 import { FolderOutlined, FundViewOutlined } from "@ant-design/icons";
 import { Link, Redirect, Route, Switch, useParams } from "react-router-dom";
 import TelemetryView from "./TelemetryView";
-import Messages from "../pages/Messages";
+import Messages from "./Messages";
 import Report from "./Report";
-import Archive from "../pages/Archive";
+import Archive from "./Archive";
-import Analysis from "../pages/Analysis";
+import Documents from "./Documents";
-import WellAnalysis from "../pages/WellAnalysis";
+import LastData from './LastData'
-import Documents from "../pages/Documents";
-import LastData from '../pages/LastData'
 import { makeMenuItems } from "./Documents/menuItems";
-import WellStat from "./WellStat";
+import WellOperations from "./WellOperations";
-import Smbo from "./Smbo";
 
 const { Content } = Layout;
 
@@ -26,33 +23,27 @@ export default function Well() {
       <Layout>
         <Menu mode="horizontal" selectable={true} className="well_menu">
           <Menu.Item key="1" icon={<FundViewOutlined />}>
-            <Link to={{ pathname: `${rootPath}/telemetry` }}>Мониторинг</Link>
+            <Link to={`${rootPath}/telemetry`}>Мониторинг</Link>
           </Menu.Item>
           <Menu.Item key="2" icon={<FolderOutlined />}>
-            <Link to={{ pathname: `${rootPath}/message` }}>Сообщения</Link>
+            <Link to={`${rootPath}/message`}>Сообщения</Link>
           </Menu.Item>
           <Menu.Item key="3" icon={<FolderOutlined />}>
-            <Link to={{ pathname: `${rootPath}/report` }}>Рапорт</Link>
+            <Link to={`${rootPath}/report`}>Рапорт</Link>
-          </Menu.Item>
-          <Menu.Item key="4" icon={<FolderOutlined />}>
-            <Link to={{ pathname: `${rootPath}/analysis` }}>Анализ</Link>
           </Menu.Item>
           <Menu.Item key="5" icon={<FolderOutlined />}>
-            <Link to={{ pathname: `${rootPath}/wellAnalysis` }}>
+            <Link to={`${rootPath}/operations/plan`}>
               Операции по скважине
             </Link>
           </Menu.Item>
-          <Menu.Item key="6" icon={<FolderOutlined />}>
-            <Link to="stat">Статистика</Link>
-          </Menu.Item>
           <Menu.Item key="7" icon={<FolderOutlined />}>
-            <Link to={{ pathname: `${rootPath}/archive` }}>Архив</Link>
+            <Link to={`${rootPath}/archive`}>Архив</Link>
           </Menu.Item>
           <SubMenu
             key="documentsSub"
             title={
               <Link
-                to={{ pathname: `${rootPath}/document/fluidService` }}
+                to={`${rootPath}/document/fluidService` }
                 className="linkDocuments">
                 Документы
               </Link>
@@ -62,11 +53,8 @@ export default function Well() {
           >
             {makeMenuItems(rootPath)}
           </SubMenu>
-          <Menu.Item key="8" icon={<FolderOutlined />}>
-            <Link to={{ pathname: `${rootPath}/smbo` }}>СМБО</Link>
-          </Menu.Item>
           <Menu.Item key="9" icon={<FolderOutlined />}>
-            <Link to={{ pathname: `${rootPath}/lastData` }}>Последние данные</Link>
+            <Link to={`${rootPath}/lastData`}>Последние данные</Link>
           </Menu.Item>
         </Menu>
 
@@ -82,14 +70,8 @@ export default function Well() {
               <Route path="/well/:idWell/report">
                 <Report idWell={idWell} />
               </Route>
-              <Route path="/well/:idWell/analysis">
+              <Route path="/well/:idWell/operations/:tab">
-                <Analysis idWell={idWell} />
+                <WellOperations idWell={idWell} />
-              </Route>
-              <Route path="/well/:idWell/stat">
-                <WellStat idWell={idWell} />
-              </Route>
-              <Route path="/well/:idWell/wellAnalysis">
-                <WellAnalysis idWell={idWell} />
               </Route>
               <Route path="/well/:idWell/archive">
                 <Archive idWell={idWell} />
@@ -97,14 +79,11 @@ export default function Well() {
               <Route path="/well/:idWell/document/:category">
                 <Documents idWell={idWell} />
               </Route>
-              <Route path="/well/:idWell/smbo">
-                <Smbo idWell={idWell} />
-              </Route>
               <Route path="/well/:id/lastData">
                 <LastData/>
               </Route>
               <Route path="/">
-                <Redirect to={{ pathname: `${rootPath}/telemetry` }} />
+                <Redirect to={`${rootPath}/telemetry`} />
               </Route>
             </Switch>
           </Content>

src/pages/WellOperations.jsx

@@ -0,0 +1,53 @@
+import {Layout, Menu} from "antd";
+import {Switch, Link, Route, Redirect, useParams} from "react-router-dom";
+import { FolderOutlined } from "@ant-design/icons";
+import WellOperationsEditor from './WellOperationsEditor'
+
+const { Content } = Layout
+
+export default function WellOperations({idWell}) {
+  let {tab} = useParams()
+  const rootPath = `/well/${idWell}/operations`;
+  
+  return(<>
+    <Menu
+      mode="horizontal"
+      selectable={true}
+      className="well_menu"
+      selectedKeys={[tab]}>
+        <Menu.Item key="tvd" icon={<FolderOutlined />}>
+          <Link to={`${rootPath}/tvd`}>TVD</Link>
+        </Menu.Item>
+        <Menu.Item key="sections" icon={<FolderOutlined />}>
+          <Link to={`${rootPath}/sections`}>Секции</Link>
+        </Menu.Item>
+        <Menu.Item key="plan" icon={<FolderOutlined />}>
+          <Link to={`${rootPath}/plan`}>План</Link>
+        </Menu.Item>        
+        <Menu.Item key="fact" icon={<FolderOutlined />}>
+          <Link to={`${rootPath}/fact`}>Факт</Link>
+        </Menu.Item>
+    </Menu>
+    <Layout>
+        <Content className="site-layout-background">
+          <Switch>            
+            <Route path={`${rootPath}/tvd`}>
+              <div>sss</div>
+            </Route>
+            <Route path={`${rootPath}/sections`}>
+              <div>sss</div>
+            </Route>
+            <Route path={`${rootPath}/plan`}>
+              <WellOperationsEditor idWell={idWell}/>
+            </Route>
+            <Route path={`${rootPath}/fact`}>
+              <div>sss</div>
+            </Route>
+            <Route path={rootPath}>
+              <Redirect to={`${rootPath}/tvd`}/>
+            </Route>
+          </Switch>
+        </Content>
+      </Layout>
+  </>)
+}

src/pages/WellOperationsEditor.jsx

@@ -0,0 +1,93 @@
+import { useState, useEffect } from 'react'
+import { Input, DatePicker } from 'antd'
+import { EditableTable } from "../components/EditableTable"
+import LoaderPortal from '../components/LoaderPortal'
+import { makeColumn, RegExpIsFloat, invokeWebApiWrapperAsync } from '../components/factory'
+import { WellOperationService} from '../services/api'
+
+const numericColumnOptions = {
+  editable: true,
+  initialValue: 0,
+  formItemRules: [
+    {
+      required: true,
+      message: `Введите число`,
+      pattern: RegExpIsFloat,
+    },
+  ],
+};
+
+const TypeSelector = <Input list={'sectionTypeList'}/>
+
+const DataListSectionTypes = <datalist id="sectionTypeList">
+  <option value="Пилотный ствол">Пилотный ствол</option>
+  <option value="Направление">Направление</option>
+  <option value="Кондуктор">Кондуктор</option>
+  <option value="Эксплуатационная колонна">Эксплуатационная колонна</option>
+  <option value="Транспортный ствол">Транспортный ствол</option>
+  <option value="Хвостовик">Хвостовик</option>
+</datalist>
+
+const columns = [
+  makeColumn('Конструкция секции','wellSectionTypeName', {editable:true, input:TypeSelector}),
+  makeColumn('Операция','categoryName', {editable:true, input:TypeSelector}),
+  makeColumn('Доп. инфо','info', {editable:true}),
+  makeColumn('Глубина забоя','wellDepth', numericColumnOptions),
+  makeColumn('Время начала','startDate', {editable:true, input:<DatePicker/>}),
+  makeColumn('Продолжительность','durationHours', numericColumnOptions),
+  makeColumn('Комментарий','comment', {editable:true}),
+]
+
+const basePageSize = 32;
+
+export default function WellOperationsEditor({idWell, type}){
+  const [pageNumAndPageSize, setPageNumAndPageSize] = useState({current:1, pageSize:basePageSize})
+  const [paginationTotal, setPaginationTotal] = useState(0)
+  const [operations, setOperations] = useState([])
+  const [showLoader, setShowLoader] = useState(false)
+
+  const updateOperations = () => invokeWebApiWrapperAsync(
+    async () => {
+      const skip = ((pageNumAndPageSize.current - 1) * pageNumAndPageSize.pageSize) || 0
+      const take = pageNumAndPageSize.pageSize
+      const paginatedOperations = await WellOperationService.getOperations(idWell, type, undefined, undefined, undefined, undefined, skip, take )
+      setOperations(paginatedOperations?.items??[])
+      const total = paginatedOperations.count?? paginatedOperations.items?.length ?? 0      
+      setPaginationTotal(total)
+    },
+    setShowLoader,
+    'Не удалось загрузить список операций по скважине'
+  )
+
+  useEffect(updateOperations, [idWell, type, pageNumAndPageSize])
+
+  const onAdd = (newOperation) => {
+
+  }
+
+  const onEdit= (newOperation) => {
+
+  }
+
+  const onDelete= (newOperation) => {
+
+  }
+
+  return <LoaderPortal show={showLoader}>
+    <EditableTable
+      columns={columns}
+      dataSource={operations}
+      onRowAdd={onAdd}
+      onRowEdit={onEdit}
+      onRowDelete={onDelete}
+      pagination={{
+        current: pageNumAndPageSize.current,
+        pageSize: pageNumAndPageSize.pageSize,
+        showSizeChanger: false,
+        total: paginationTotal,
+        onChange: (page, pageSize) => setPageNumAndPageSize({current: page, pageSize: pageSize})
+      }}
+      />
+    {DataListSectionTypes}
+  </LoaderPortal> 
+}