asb_cloud_front/src/pages/WellOperations/WellDrillParams.jsx

import { useState, useEffect, useCallback } from 'react'

import { DrillParamsService, WellOperationService } from '../../services/api'
import LoaderPortal from '../../components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '../../components/factory'
import {
    EditableTable,
    makeSelectColumn,
    makeActionHandler,
    makeNumericAvgRange,
} from '../../components/Table'
import { arrayOrDefault } from '../../utils'

export const getColumns = async (idWell) => {
    let sectionTypes = await WellOperationService.getSectionTypes(idWell)
    sectionTypes = Object.keys(sectionTypes).map((id) => ({
        label: sectionTypes[id],
        value: id,
    }))

    return [
        makeSelectColumn('Конструкция секции','idWellSectionType', sectionTypes, null, {
            editable: true,
            width: 160,
        }),
        makeNumericAvgRange('Нагрузка, т', 'axialLoad', 1),
        makeNumericAvgRange('Давление, атм', 'pressure', 1),
        makeNumericAvgRange('Момент на ВСП, кН·м', 'rotorTorque', 1),
        makeNumericAvgRange('Обороты на ВСП, об/мин', 'rotorSpeed', 1),
        makeNumericAvgRange('Расход, л/с', 'flow', 1),
    ]
}

export const WellDrillParams = ({ idWell }) => {
    const [params, setParams] = useState([])
    const [showLoader, setShowLoader] = useState(false)
    const [columns, setColumns] = useState([])

    const updateParams = useCallback(async () => await invokeWebApiWrapperAsync(
        async () => {
            const params = arrayOrDefault(await DrillParamsService.getAll(idWell))
            setParams(params)
        },
        setShowLoader,
        'Не удалось загрузить список режимов бурения скважины'
    ), [idWell])

    useEffect(() => {
        setColumns(getColumns(idWell))
        updateParams()
    }, [idWell, updateParams])

    const handlerProps = {
        service: DrillParamsService,
        setLoader: setShowLoader,
        errorMsg: `Не удалось выполнить операцию`,
        onComplete: updateParams,
        idWell
    }

    const recordParser = (record) => ({ ...record, idWell })

    return (
        <LoaderPortal show={showLoader}>
            <EditableTable
                size={'small'}
                bordered
                columns={columns}
                dataSource={params}
                onRowAdd={makeActionHandler('insert', handlerProps, recordParser)}
                onRowEdit={makeActionHandler('update', handlerProps, recordParser)}
                onRowDelete={makeActionHandler('delete', handlerProps, recordParser)}
                pagination={false}
            />
        </LoaderPortal>
    )
}