asb_cloud_front/src/pages/AdminPanel/ClusterController.jsx

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

import {
    EditableTable,
    makeColumn,
    makeSelectColumn,
    makeActionHandler,
    makeStringSorter,
    defaultPagination,
    makeTimezoneColumn
} from '@components/Table'
import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { AdminClusterService, AdminDepositService } from '@api'
import { arrayOrDefault } from '@utils'
import { min1 } from '@utils/validationRules'
import { hasPermission } from '@utils/permissions'

import { coordsFixed } from './DepositController'

export const ClusterController = memo(() => {
    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'),
            formItemRules: min1,
        }),
        makeColumn('Широта', 'latitude', { width: 150, editable: true, render: coordsFixed }),
        makeColumn('Долгота', 'longitude', { width: 150, editable: true, render: coordsFixed }),
        makeTimezoneColumn('Зона', 'timezone', null, true, { width: 150 }),
    ]

    const updateTable = useCallback(() => 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, [updateTable])

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

    return (
        <LoaderPortal show={showLoader}>
            <EditableTable
                size={'small'}
                bordered
                dataSource={clusters}
                columns={clusterColumns}
                pagination={defaultPagination}
                onRowAdd={hasPermission('AdminCluster.edit') && makeActionHandler('insert', handlerProps, null, 'Добавление куста')}
                onRowEdit={hasPermission('AdminCluster.edit') && makeActionHandler('update', handlerProps, null, 'Редактирование куста')}
                onRowDelete={hasPermission('AdminCluster.delete') && makeActionHandler('delete', handlerProps, null, 'Удаление куста')}
            />
        </LoaderPortal>
    )
})

export default ClusterController