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 } from '../../components/Table'
import { AdminClusterService, AdminDepositService } from '../../services/api'

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 }),
        makeColumn('Название', 'caption', { width: 200, editable: true }),
        makeColumn('Широта', 'latitude', { width: 150, editable: true }),
        makeColumn('Долгота', 'longitude', { width: 150, editable: true })
    ]

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

    useEffect(() => invokeWebApiWrapperAsync(
        async () => {
            let deposits = 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>
    )
}