asb_cloud_front/src/pages/WellOperations/WellOperationsEditor.jsx

import { useState, useEffect } from 'react'
import { Input } from 'antd'
import moment from 'moment'
import { 
  EditableTable, 
  DatePickerWrapper, 
  SelectFromDictionary, 
  makeColumn, 
  numericColumnOptions, 
  makeNumericSorter, 
  makeDateSorter } from "../../components/Table"
import LoaderPortal from '../../components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '../../components/factory'
import { WellOperationService} from '../../services/api'
import { dictionarySectionType, getByKeyOrReturnKey } from './dictionary'

const { TextArea } = Input;

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

const numericSortColumnOptions = {
  ...numericColumnOptions,
  sorter: makeNumericSorter('wellDepth'),
  render:(value) => 
  <div className='text-align-r-container'>
    <span>{value}</span>
  </div>
}

const durationFormattedColumnOptions = {
  ...numericColumnOptions,
  render:(value) => 
  <div className='text-align-r-container'>
    <span>{Number.isNaN(+value) ? "-" : value.toFixed(2)}</span>
  </div>
}

export const WellOperationsEditor = ({idWell, idType}) => {
  const [pageNumAndPageSize, setPageNumAndPageSize] = useState({current:1, pageSize:basePageSize})
  const [paginationTotal, setPaginationTotal] = useState(0)
  const [dictionaryOperationCategory, setDictionaryOperationCategory] = useState(new Map())
  const [operations, setOperations] = useState([])
  const [showLoader, setShowLoader] = useState(false)
  
  useEffect(() => invokeWebApiWrapperAsync(
    async () => {
      const categories = await WellOperationService.getCategories(idWell)
      const dictCategories = new Map()
      categories?.forEach((item) => dictCategories.set(item.id, item.name))
      setDictionaryOperationCategory(dictCategories)
    }),[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, 
        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 columns = [
    makeColumn('Конструкция секции','idWellSectionType', {
      editable:true,
      input:<SelectFromDictionary dictionary={dictionarySectionType}/>,
      width:160,
      render:(_, record)=>getByKeyOrReturnKey(dictionarySectionType, record.idWellSectionType)
    }),
    makeColumn('Операция','idCategory', {
      editable:true,
      input:<SelectFromDictionary dictionary={dictionaryOperationCategory}/>, 
      width:200,
      render:(_, record)=>getByKeyOrReturnKey(dictionaryOperationCategory, record.idCategory)
    }),
    makeColumn('Доп. инфо','categoryInfo', {editable:true, width:300, input:<TextArea/>}),
    makeColumn('Глубина забоя','wellDepth', numericSortColumnOptions),
    makeColumn('Время начала','startDate', {
      editable:true, 
      width:200, 
      input:<DatePickerWrapper/>,
      initialValue:moment().format(),
      sorter: makeDateSorter('startDate'),      
      render:(_, record) => 
        <div className={'text-align-r-container'}>
          <span>{moment.utc(record.startDate).local().format(format)}</span>
        </div>
    }),
    makeColumn('Часы','durationHours', durationFormattedColumnOptions),
    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'
      bordered
      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> 
}