asb_cloud_front/src/pages/WellStat.jsx

import LoaderPortal from '../components/LoaderPortal'
import { useState, useEffect } from "react";
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', {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,
//   buildDaysPlan: 1,
//   buildDaysFact: 1,
//   rateOfPenetrationPlan: 4,
//   rateOfPenetrationFact: 3,
//   routeSpeedPlan: 2,
//   routeSpeedFact: 1,
//   bhaUpSpeedPlan: 1,
//   bhaUpSpeedFact: 1,
//   bhaDownSpeedPlan: 1,
//   bhaDownSpeedFact: 1,
//   casingDownSpeedPlan: 1,
//   casingDownSpeedFact: 1,
//   }]

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])

  const onChange = (newData) =>{
    setData(newData)
  }

  return(
    <LoaderPortal show={showLoader}>
      <EditableTable
        columns={columns}
        dataSource={data}
        size={'small'}
        bordered
        pagination={false}
        onChange={onChange}
        onRowAdd={()=>{}}
        onRowEdit={()=>{}}
        onRowDelete={()=>{}}
      />
    </LoaderPortal>)
}