Отображение списков тегов обновлено

src/components/Table/Columns/tag.tsx

@@ -1,7 +1,8 @@
 import { memo, ReactNode, useCallback, useEffect, useState } from 'react'
 import { DefaultOptionType, SelectValue } from 'antd/lib/select'
-import { Select, SelectProps, Tag } from 'antd'
+import { Select, SelectProps } from 'antd'
 
+import TagList from '@components/TagList'
 import type { OmitExtends } from '@utils/types'
 
 import { ColumnProps, DataType, makeColumn } from '.'
@@ -67,7 +68,9 @@ export const makeTagColumn = <T extends DataType>(
     return makeColumn(title, dataIndex, {
         editable: true,
         ...other,
-        render: (item: T[] | undefined, dataset, index) => item?.map((elm: T) => <Tag key={elm[label_key]} color={'blue'}>{other?.render?.(elm, dataset, index) ?? elm[label_key]}</Tag>) ?? '-',
+        render: (item: T[] | undefined, dataset, index) => (
+            <TagList items={item} render={(elm) => other?.render?.(elm, dataset, index) ?? elm[label_key]} />
+        ),
         input: <InputComponent {...tagOther} options={options} />,
     })
 }

src/components/TagList.tsx

@@ -0,0 +1,25 @@
+import { memo, ReactNode } from 'react'
+import { Tag } from 'antd'
+
+import '@styles/components/tag_list.less'
+
+export type TagListProps<T> = {
+    items?: T[] | null
+    render: (item: T) => ReactNode
+}
+
+const _TagList = <T,>({ items, render }: TagListProps<T>) => {
+    if (!items || items.length <= 0) return <>-</>
+
+    return (
+        <div className={'dd-tag-list'}>
+            {items.map((item, i) => (
+                <Tag key={`${i}`}>{render(item)}</Tag>
+            ))}
+        </div>
+    )
+}
+
+export const TagList = memo(_TagList) as typeof _TagList
+
+export default TagList

src/components/views/RoleView.tsx

@@ -1,9 +1,10 @@
 import { memo } from 'react'
-import { Tag, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
 
 import { UserRoleDto } from '@api'
 import { Grid, GridItem } from '@components/Grid'
 import PermissionView from './PermissionView'
+import TagList from '../TagList'
 
 export type RoleViewProps = {
     role?: UserRoleDto
@@ -26,12 +27,8 @@ export const RoleView = memo<RoleViewProps>(({ role }) => {
 
                     <GridItem row={2} col={1}>Включённые роли:</GridItem>
                     {hasIncludedRoles ? (
-                        <GridItem row={3} col={1} colSpan={3}>
+                        <GridItem row={3} col={1} colSpan={3} style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
-                            {role.roles?.map((role, i) => (
+                            <TagList items={role.roles} render={(role) => <RoleView role={role} />} />
-                                <Tag key={i} color={'blue'}>
-                                    <RoleView role={role} />
-                                </Tag>
-                            ))}
                         </GridItem>
                     ) : (
                         <GridItem row={2} col={2}>Отсутствуют</GridItem>
@@ -42,12 +39,8 @@ export const RoleView = memo<RoleViewProps>(({ role }) => {
 
                     <GridItem row={4 + hasIncludedRoles} col={1}>Разрешения:</GridItem>
                     {hasPermissions ? (
-                        <GridItem row={5 + hasIncludedRoles} col={1} colSpan={3}>
+                        <GridItem row={5 + hasIncludedRoles} col={1} colSpan={3} style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
-                            {role.permissions?.map((permission, i) => (
+                            <TagList items={role.permissions} render={(permission) => <PermissionView info={permission} />} />
-                                <Tag key={i} color={'blue'}>
-                                    <PermissionView info={permission} />
-                                </Tag>
-                            ))}
                         </GridItem>
                     ) : (
                         <GridItem row={4 + hasIncludedRoles} col={2}>Отсутствуют</GridItem>

src/pages/AdminPanel/Telemetry/TelemetryMerger.jsx

@@ -18,15 +18,13 @@ export const TelemetryInfo = memo(({ info, danger, ...other }) => (
         bordered
         column={1}
         size={'small'}
-        style={{ background: 'white' }}
-        className={'telemetry_merger_info'}
         {...other}
     >
         {Object.keys({ ...lables, ...info }).map(key => (
             <Item
                 key={key}
                 label={lables[key] ?? key}
-                style={{ color: danger === true || danger?.includes(key) ? 'red' : 'black' }}
+                style={{ color: danger === true || danger?.includes(key) ? 'red' : '#ddd' }}
             >{info?.[key] ?? '-'}</Item>
         ))}
     </Descriptions>

src/pages/AdminPanel/UserController/index.jsx

@@ -1,4 +1,4 @@
-import { Button, Input, Tag } from 'antd'
+import { Button, Input } from 'antd'
 import { UserSwitchOutlined } from '@ant-design/icons'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { BehaviorSubject, debounceTime, distinctUntilChanged, filter, map } from 'rxjs'
@@ -20,6 +20,7 @@ import { makeTextOnFilter, makeTextFilters, makeArrayOnFilter } from '@utils/fil
 import { arrayOrDefault, withPermissions } from '@utils'
 
 import RoleTag from './RoleTag'
+import TagList from '@components/TagList'
 
 const SEARCH_TIMEOUT = 400
 
@@ -107,25 +108,20 @@ const UserController = memo(() => {
                 const filters = makeTextFilters(users, ['surname', 'name', 'patronymic', 'email'])
                 const roleFilters = [{ text: 'Без роли', value: null }, ...roles.map((role) => ({ text: role.caption, value: role.caption }))]
 
-                const rolesRender = (item) => item?.map((elm) => (
+                const rolesRender = (item) => (
-                    <Tag key={elm} color={'blue'}>
+                    <TagList
-                        <RoleView role={roles.find((role) => role.caption === elm)} />
+                        items={item}
-                    </Tag>
+                        render={(elm) => (
-                )) ?? '-'
+                            <RoleView role={roles.find((role) => role.caption === elm)} />
+                        )}
+                    />
+                )
 
                 setColumns([
                     makeTextColumn('Логин', 'login', null, null, null, {
                         formItemRules: [
                             { required: true },
                             ...createLoginRules,
-                            // () => ({
-                            //     validator(_, value) {
-                            //         if (!value || users.findIndex((user) => user.login === value) < 0)
-                            //             return Promise.resolve()
-                            //         return Promise.reject(new Error('Логин уже занят!'))
-                            //     }
-                            // })
-                            // TODO: Для проверки уникальности логина необходимо исключить из выборки логин выбранного пользователя
                         ],
                     }),
                     makeTextColumn('Фамилия', 'surname', filters.surname, null, null, {

src/styles/components/tag_list.less

@@ -0,0 +1,9 @@
+.dd-tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+
+    & > .ant-tag {
+        margin-right: 0;
+    }
+}