WellStat редактируемое

src/pages/Well.jsx

@@ -8,7 +8,7 @@ import Analysis from "../pages/Analysis";
 import WellAnalysis from "../pages/WellAnalysis";
 import TelemetryView from "../pages/TelemetryView";
 import MenuDocuments from "../components/MenuDocuments";
-import WellStat from "./WellStat";
+import WellStat from "./WellStat"
 
 const { Content } = Layout
 
@@ -83,7 +83,7 @@ export default function Well() {
         <Content className="site-layout-background">
           <Switch>
             <Route path="/well/:id/stat">
-              <WellStat/>
+              <WellStat idWell={id}/>
             </Route>
             <Route path="/well/:id/archive">
               <Archive/>

src/pages/WellStat.jsx

@@ -1,44 +1,28 @@
-//import {useParams} from "react-router-dom";
-//import {Link} from "react-router-dom";
 import LoaderPortal from '../components/LoaderPortal'
 import { useState, useEffect } from "react";
-// import {ClusterService} from '../services/api'
-// import notify from '../components/notify'
-import {Table, Tag, Button} from 'antd';
-
-const makeColumn = (title, key) => ({title: title,  key: key,  dataIndex: key,})
-
-const makePlanFactColumns = (title, keyPlan, keyFact) =>
-{
-  let keyPlanLocal = keyPlan
-  let keyFactLocal = keyFact
-  
-  if(!keyFact){
-    keyPlanLocal = keyPlan + 'Plan'
-    keyFactLocal =  keyPlan + 'Fact'
-  }
-
-  return {  
-    title: title,
-    children: [ 
-      makeColumn('план', keyPlanLocal),
-      makeColumn('факт', keyFactLocal),
-    ]
-  }
-}
+import {makeColumn, makeColumnsPlanFact, RegExpIsFloat} from '../components/factory'
+import {WellService} from '../services/api'
+import notify from '../components/notify'
+import { EditableTable } from '../components/EditableTable';
 
 const columns = [
-  makeColumn('Конструкция секции', 'sectionType'),
-  makePlanFactColumns('Глубина, м', 'wellDepth'),
-  makePlanFactColumns('Период, д',  'buildDays'),
-  makePlanFactColumns('Механическая скорость проходки, м/час', 'rateOfPenetration'),
-  makePlanFactColumns('Рейсовая скорость, м/час', 'routeSpeed'),
-  makePlanFactColumns('Скорость подъема КНБК', 'bhaUpSpeed'),
-  makePlanFactColumns('Скорость спуска КНБК', 'bhaDownSpeed'),
-  makePlanFactColumns('Скорость спуска обсадной колонны', 'casingDownSpeed'),
+  makeColumn('Конструкция секции', 'sectionType', {editable:true}),
+  makeColumnsPlanFact('Глубина, м', 'wellDepth', {editable:true, formItemRules:[
+    {
+      required: true,
+      message: `Введите число`,
+      pattern: RegExpIsFloat
+    }]}),
+  makeColumnsPlanFact('Период, д',  'buildDays', {editable:true}),
+  makeColumnsPlanFact('Механическая скорость проходки, м/час', 'rateOfPenetration', {editable:true}),
+  makeColumnsPlanFact('Рейсовая скорость, м/час', 'routeSpeed', {editable:true}),
+  makeColumnsPlanFact('Скорость подъема КНБК', 'bhaUpSpeed', {editable:true}),
+  makeColumnsPlanFact('Скорость спуска КНБК', 'bhaDownSpeed', {editable:true}),
+  makeColumnsPlanFact('Скорость спуска обсадной колонны', 'casingDownSpeed', {editable:true}),
 ]
 
 // const data = [{
+//   key:1,
 //   sectionType: 'загагулина',
 //   wellDepthPlan: 1,
 //   wellDepthFact: 1,
@@ -56,17 +40,33 @@ const columns = [
 //   casingDownSpeedFact: 1,
 //   }]
 
-export default function WellStat({data}){
+export default function WellStat({idWell}){
   const [showLoader, setShowLoader] = useState(false)
+  const [data, setData] = useState(null)
+  
+  useEffect(()=>{
+    const update = async()=>{
+      setShowLoader(true)
+      try{
+        const data = await WellService.getSections(idWell)
+        setData(data);
+      } catch (ex) {
+        console.log(ex)
+        notify(`Не удалось загрузить секции по скважине "${idWell}"`, 'error')
+      }
+      setShowLoader(false)
+    }
+    update();
+  } ,[idWell])
+
   return(
     <LoaderPortal show={showLoader}>
-      <Table
-          columns={columns}
-          dataSource={data}
-          size={'small'}
-          bordered
-          pagination={false}
-          rowKey={(record) => record.sectionType}
-        />
+      <EditableTable
+        columns={columns}
+        dataSource={data}
+        size={'small'}
+        bordered
+        pagination={false}
+      />
     </LoaderPortal>)
 }