asb_cloud_front/src/pages/AdminPanel/PermissionController.jsx

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

const columns = [
    makeColumn('Название', 'name', {
        editable: true,
        sorter: makeStringSorter('name'),
    }),
    makeColumn('Описание', 'description', {
        editable: true,
        sorter: makeStringSorter('description'),
    }),
]

export const PermissionController = () => {
    const [showLoader, setShowLoader] = useState(false)
    const [permissions, setPermissions] = useState([])

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

    useEffect(() => updateTable(), [])

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

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

export default PermissionController