Убарана лишняя буква из index.html, обновлен редактор ролей и view

public/index.html

@@ -17,4 +17,3 @@
     <div id="root"></div>
   </body>
 </html>
-ц

src/components/views/RoleView.tsx

@@ -7,10 +7,13 @@ import PermissionView from './PermissionView'
 
 export type RoleViewProps = {
     role?: UserRoleDto
-    parentRole?: UserRoleDto
 }
 
-export const RoleView = memo<RoleViewProps>(({ role, parentRole }) => role ? (
+export const RoleView = memo<RoleViewProps>(({ role }) => {
+    const hasIncludedRoles = (role?.roles?.length && role.roles.length > 0) ? 1 : 0
+    const hasPermissions = (role?.permissions?.length && role.permissions.length > 0) ? 1 : 0
+
+    return role ? (
         <Tooltip
             overlayInnerStyle={{ width: '400px' }}
             title={
@@ -18,25 +21,40 @@ export const RoleView = memo<RoleViewProps>(({ role, parentRole }) => role ? (
                     <GridItem row={1} col={1}>Название:</GridItem>
                     <GridItem row={1} col={2}>{role.caption}</GridItem>
 
-                <GridItem row={2} col={1}>Роль-родитель:</GridItem>
-                <GridItem row={2} col={2}>{parentRole?.caption ?? 'Отсутствует'}</GridItem>
+                    <GridItem row={2} col={1}>Включённые роли:</GridItem>
+                    {hasIncludedRoles ? (
+                        <GridItem row={3} col={1} colSpan={3}>
+                            {role.roles?.map((role, i) => (
+                                <Tag key={i} color={'blue'}>
+                                    <RoleView role={role} />
+                                </Tag>
+                            ))}
+                        </GridItem>
+                    ) : (
+                        <GridItem row={2} col={2}>Отсутствуют</GridItem>
+                    )}
 
-                <GridItem row={3} col={1}>Тип:</GridItem>
-                <GridItem row={3} col={2}>{role.idType}</GridItem>
+                    <GridItem row={3 + hasIncludedRoles} col={1}>Тип:</GridItem>
+                    <GridItem row={3 + hasIncludedRoles} col={2}>{role.idType}</GridItem>
 
-                <GridItem row={4} col={1}>Разрешения:</GridItem>
-                <GridItem row={5} col={1} colSpan={3}>
+                    <GridItem row={4 + hasIncludedRoles} col={1}>Разрешения:</GridItem>
+                    {hasPermissions ? (
+                        <GridItem row={5 + hasIncludedRoles} col={1} colSpan={3}>
                             {role.permissions?.map((permission, i) => (
                                 <Tag key={i} color={'blue'}>
                                     <PermissionView info={permission} />
                                 </Tag>
-                    )) ?? '-'}
+                            ))}
                         </GridItem>
+                    ) : (
+                        <GridItem row={4 + hasIncludedRoles} col={2}>Отсутствуют</GridItem>
+                    )}
                 </Grid>
             }
         >
             {role.caption}
         </Tooltip>
-) : (
+    ) : (
         <Tooltip title={'нет данных'}>-</Tooltip>
-))
+    )
+})

src/pages/AdminPanel/RoleController.jsx

@@ -1,9 +1,9 @@
 import { memo, useEffect, useState } from 'react'
 
 import LoaderPortal from '../../components/LoaderPortal'
-import { PermissionView } from '../../components/views'
+import { PermissionView, RoleView } from '../../components/views'
 import { invokeWebApiWrapperAsync } from '../../components/factory'
-import { EditableTable, makeActionHandler, makeColumn, makeSelectColumn, makeTagColumn } from '../../components/Table'
+import { EditableTable, makeActionHandler, makeColumn, makeTagColumn } from '../../components/Table'
 import { AdminPermissionService, AdminUserRoleService } from '../../services/api'
 import { arrayOrDefault } from '../../utils'
 import { min1 } from '../../utils/validationRules'
@@ -20,12 +20,12 @@ export const RoleController = memo(() => {
     }
 
     useEffect(() => {
-        const options = roles?.map((r) => ({ value: r.id, label: r.caption })) ?? []
         setColumns([
             makeColumn('Название', 'caption', { width: 200, editable: true, formItemRules: min1 }),
-            makeSelectColumn('Роль-родитель', 'idParent', options, options[0], {
+            makeTagColumn('Включённые роли', 'roles', roles, 'id', 'caption', {
                 width: 200,
-                editable: true
+                editable: true,
+                render: (role) => <RoleView role={role} />
             }, { allowClear: true }),
             makeTagColumn('Разрешения', 'permissions', permissions, 'id', 'name', {
                 editable: true,
@@ -58,8 +58,8 @@ export const RoleController = memo(() => {
     return (
         <LoaderPortal show={showLoader}>
             <EditableTable
-                size={'small'}
                 bordered
+                size={'small'}
                 columns={columns}
                 dataSource={roles}
                 onRowAdd={makeActionHandler('insert', handlerProps)}