asb_cloud_front/src/pages/AdminPanel/PermissionController.jsx

import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import { Input } from 'antd'

import {
    EditableTable,
    makeActionHandler,
    makeColumn,
    makeStringSorter
} from '@components/Table'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { AdminPermissionService } from '@api'
import { arrayOrDefault } from '@utils'
import { min1 } from '@utils/validationRules'
import { hasPermission } from '@utils/permissions'

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

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

    const filteredPermissions = useMemo(() => permissions.filter((permission) => permission && (!searchValue || [
            permission.name ?? '',
            permission.description ?? '',
        ].join(' ').includes(searchValue.toLowerCase()))
    ), [permissions, searchValue])

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

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

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

    return (
        <>
            <Input.Search
                style={{ margin: '15px 0' }}
                placeholder={'Введите текст для поиска (по полям: Название, Описание)...'}
                onChange={(e) => setSearchValue(e.target.value)}
                value={searchValue}
                loading={showLoader}
            />
            <EditableTable
                bordered
                size={'small'}
                columns={columns}
                loading={showLoader}
                dataSource={filteredPermissions}
                pagination={{ showSizeChanger: true }}
                onRowAdd={hasPermission('AdminPermission.edit') && makeActionHandler('insert', handlerProps, null, 'Добавление права')}
                onRowEdit={hasPermission('AdminPermission.edit') && makeActionHandler('update', handlerProps, null, 'Редактирование права')}
                onRowDelete={hasPermission('AdminPermission.delete') && makeActionHandler('delete', handlerProps, null, 'Удаление права')}
                tableName={'admin_permission_controller'}
            />
        </>
    )
})

export default PermissionController