asb_cloud_front/src/pages/AdminPanel/ClusterController.jsx

import { useEffect, useState } from 'react'
import { invokeWebApiWrapperAsync } from '../../components/factory'
import LoaderPortal from '../../components/LoaderPortal'
import {
    EditableTable,
    makeColumn,
    makeSelectColumn,
    makeActionHandler,
    makeStringSorter
} from '../../components/Table'
import { AdminClusterService, AdminDepositService } from '../../services/api'
import { arrayOrDefault } from '../../utils'

export default function ClusterController() {
    const [deposits, setDeposits] = useState([])
    const [clusters, setClusters] = useState([])
    const [showLoader, setShowLoader] = useState(false)

    const clusterColumns = [
        makeSelectColumn('Месторождение', 'idDeposit', deposits, '--', {
            width: 200,
            editable: true,
            sorter: makeStringSorter('idDeposit')
        }),
        makeColumn('Название', 'caption', {
            width: 200,
            editable: true,
            sorter: makeStringSorter('caption')
        }),
        makeColumn('Широта', 'latitude', { width: 150, editable: true }),
        makeColumn('Долгота', 'longitude', { width: 150, editable: true })
    ]

    const updateTable = () => invokeWebApiWrapperAsync(
        async () => {
            const clusters = await AdminClusterService.getAll()
            setClusters(arrayOrDefault(clusters))
        },
        setShowLoader,
        `Не удалось загрузить список кустов`
    )

    useEffect(() => invokeWebApiWrapperAsync(
        async () => {
            let deposits = arrayOrDefault(await AdminDepositService.getAll())
            deposits = deposits.map((deposit) => ({ value: deposit.id, label: deposit.caption }))
            setDeposits(deposits)
        },
        setShowLoader,
        `Не удалось загрузить список месторождений`
    ), [])

    useEffect(updateTable, [])

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

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