asb_cloud_front/concept/WellStat.jsx

import LoaderPortal from '../src/components/LoaderPortal'
import { useState, useEffect } from "react";
import {makeColumn, makeColumnsPlanFact, RegExpIsFloat} from '../src/components/factory'
import {WellSectionService} from '../src/services/api'
import {invokeWebApiWrapperAsync} from '../src/components/factory'
import { EditableTable } from '../src/components/EditableTable';
import { Input } from 'antd'

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 numericColumnOptions = {
  editable: true,
  initialValue: 0,
  formItemRules: [
    {
      required: true,
      message: `Введите число`,
      pattern: RegExpIsFloat,
    },
  ],
};
  
const columns = [
  makeColumn('Конструкция секции', 'sectionType', {editable:true, input:TypeSelector}),
  makeColumnsPlanFact('Глубина, м', 'wellDepth', numericColumnOptions),
  makeColumnsPlanFact('Период, д',  'buildDays', numericColumnOptions),
  makeColumnsPlanFact('Механическая скорость проходки, м/час', 'rateOfPenetration', numericColumnOptions),
  makeColumnsPlanFact('Рейсовая скорость, м/час', 'routeSpeed', numericColumnOptions),
  makeColumnsPlanFact('Скорость подъема КНБК', 'bhaUpSpeed', numericColumnOptions),
  makeColumnsPlanFact('Скорость спуска КНБК', 'bhaDownSpeed', numericColumnOptions),
  makeColumnsPlanFact('Скорость спуска обсадной колонны', 'casingDownSpeed', numericColumnOptions),
]

export default function WellStat({idWell}){
  const [showLoader, setShowLoader] = useState(false)
  const [items, setItems] = useState([])
  
  const addKeysAndUpdateStateData = (items) =>{
    const keyedItems = items?.map(item => ({...item, key:item.id}))??[]
    setItems(keyedItems)
  }

  useEffect(() => {
    invokeWebApiWrapperAsync(
      async () => {
        const paginationContainer = await WellSectionService.getAll(idWell, 0, 1024)
        addKeysAndUpdateStateData(paginationContainer.items)
      },
      setShowLoader, 
      `Не удалось загрузить секции по скважине "${idWell}"`)
  } ,[idWell])

  const onAdd = (item) => {
    invokeWebApiWrapperAsync(      
      async () => {
        const updatedItems = await WellSectionService.insert(idWell, [item])
        const newItems = [...items, ...updatedItems]
        addKeysAndUpdateStateData(newItems)
      },
      setShowLoader, 
      `Не удалось добавить секцию в скважину "${idWell}"`)    
  }

  const onEdit = (item) => {
    invokeWebApiWrapperAsync(      
      async () => {
        const updatedItem = await WellSectionService.update(idWell, item.id, item)    
        const newItems = [...items]
        const index = newItems.findIndex((i) => item.key === i.key)    
        newItems.splice(index, 1, updatedItem)
        addKeysAndUpdateStateData(newItems)
      },
      setShowLoader, 
      `Не удалось изменить секцию в скважине "${idWell}"`)    
  }
  
  const onDelete = (item) =>{
    invokeWebApiWrapperAsync(      
      async () => {
        await WellSectionService.delete(idWell, [item.id])    
        const newItems = [...items]
        const index = newItems.findIndex((i) => item.key === i.key)    
        newItems.splice(index, 1)
        addKeysAndUpdateStateData(newItems)
      },
      setShowLoader, 
      `Не удалось удалить секцию из скважины "${idWell}"`)
  }

  return(
    <LoaderPortal show={showLoader}>
      <EditableTable
        columns={columns}
        dataSource={items}
        size={'small'}
        bordered
        pagination={false}
        onRowAdd={onAdd}
        onRowEdit={onEdit}
        onRowDelete={onDelete}
      />
      {DataListSectionTypes}
    </LoaderPortal>)
}