asb_cloud_front/src/pages/WellOperationsEditor.jsx

import { useState, useEffect } from 'react'
import { Input, DatePicker, Select } from 'antd'
import { EditableTable } from "../components/EditableTable"
import LoaderPortal from '../components/LoaderPortal'
import { makeColumn, RegExpIsFloat, invokeWebApiWrapperAsync } from '../components/factory'
import { WellOperationService} from '../services/api'
import moment from 'moment'

const { Option } = Select
const { TextArea } = Input;

const basePageSize = 160;
const format='YYYY.MM.DD HH:mm'

const numericColumnOptions = {
  editable: true,
  initialValue: 0,
  width:100,
  formItemRules: [
    {
      required: true,
      message: `Введите число`,
      pattern: RegExpIsFloat,
    },
  ],
};

const dictionarySectionType = [
  {id:1, name:'Пилотный ствол'},
  {id:2, name:'Направление'},
  {id:3, name:'Кондуктор'},
  {id:4, name:'Эксплуатационная колонна'},
  {id:5, name:'Транспортный ствол'},
  {id:6, name:'Хвостовик'},
]

const getNameById = (dictionary, id) => {
  if(!dictionary?.length)
    return id
  const item = dictionary.find(i => i?.id === id)  
  return item?.name ?? id
}

const DatePickerWrapper = ({value, onChange, ...other}) => {
  return <DatePicker
    allowClear={false}
    defaultValue={moment()}
    value={moment.utc(value).local()}
    format={format}
    showTime
    onChange={(date) => onChange(date)}
    {...other}
  />
}

export default function WellOperationsEditor({idWell, idType}){
  const [pageNumAndPageSize, setPageNumAndPageSize] = useState({current:1, pageSize:basePageSize})
  const [paginationTotal, setPaginationTotal] = useState(0)
  const [dictionaryOperationCategory, setDictionaryOperationCategory] = useState([])
  const [operations, setOperations] = useState([])
  const [showLoader, setShowLoader] = useState(false)
  
  useEffect(() => invokeWebApiWrapperAsync(
    async () => {
      const r = await WellOperationService.getCategories(idWell)
      setDictionaryOperationCategory(r)
    }),[idWell])

  const updateOperations = () => invokeWebApiWrapperAsync(
    async () => {
      const skip = ((pageNumAndPageSize.current - 1) * pageNumAndPageSize.pageSize) || 0
      const take = pageNumAndPageSize.pageSize
      const paginatedOperations = await WellOperationService.getOperations(idWell, idType, undefined, undefined, undefined, undefined, skip, take )
      const operations = paginatedOperations?.items ?? []
      setOperations(operations)
      const total = paginatedOperations.count?? paginatedOperations.items?.length ?? 0      
      setPaginationTotal(total)
    },
    setShowLoader,
    'Не удалось загрузить список операций по скважине'
  )

  useEffect(updateOperations, [idWell, idType, pageNumAndPageSize])

  const SelectorSectionType = <Select>
    {dictionarySectionType.map(item =><Option 
      key={item.id}
      value={item.id}>
        {item.name}
      </Option>)}
  </Select>

  const SelectorOperationCategory = <Select>
    {dictionaryOperationCategory.map(item =><Option 
      key={item.id}
      value={item.id}>
        {item.name}
      </Option>)}
  </Select>

  const columns = [
    makeColumn('Конструкция секции','idWellSectionType', {
      editable:true,
      input:SelectorSectionType, 
      width:105,
      render:(_, record)=>getNameById(dictionarySectionType, record.idWellSectionType)
    }),
    makeColumn('Операция','idCategory', {
      editable:true,
      input:SelectorOperationCategory, 
      width:200,
      render:(_, record)=>getNameById(dictionaryOperationCategory, record.idCategory)
    }),
    makeColumn('Доп. инфо','categoryInfo', {editable:true, width:300, input:<TextArea/>}),
    makeColumn('Глубина забоя','wellDepth', {...numericColumnOptions}),
    makeColumn('Время начала','startDate', {
      editable:true, 
      width:200, 
      input:<DatePickerWrapper/>,
      render:(_, record) => moment.utc(record.startDate).local().format(format)
    }),
    makeColumn('Часы','durationHours', {...numericColumnOptions}),
    makeColumn('Комментарий','comment', {editable:true, input:<TextArea/>}),
  ]

  const onAdd = async (operation) => {
    operation.idType = idType
    await WellOperationService.insertRange(idWell, [operation])
    updateOperations()
  }

  const onEdit= async (operation) => {
    if(!operation.id)
      return
    operation.idType = idType
    await WellOperationService.update(idWell, operation.id, operation)
    updateOperations()
  }

  const onDelete= async (operation) => {
    if(!operation.id)
      return
    await WellOperationService.delete(idWell, operation.id)
    updateOperations()
  }

  return <LoaderPortal show={showLoader}>
    <EditableTable
      size='small'
      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})
      }}
      />
  </LoaderPortal> 
}