diff --git a/src/components/Table/Columns/tag.tsx b/src/components/Table/Columns/tag.tsx index c83329b..342de75 100755 --- a/src/components/Table/Columns/tag.tsx +++ b/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 = ( return makeColumn(title, dataIndex, { editable: true, ...other, - render: (item: T[] | undefined, dataset, index) => item?.map((elm: T) => {other?.render?.(elm, dataset, index) ?? elm[label_key]}) ?? '-', + render: (item: T[] | undefined, dataset, index) => ( + other?.render?.(elm, dataset, index) ?? elm[label_key]} /> + ), input: , }) } diff --git a/src/components/TagList.tsx b/src/components/TagList.tsx new file mode 100644 index 0000000..de4a66a --- /dev/null +++ b/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 = { + items?: T[] | null + render: (item: T) => ReactNode +} + +const _TagList = ({ items, render }: TagListProps) => { + if (!items || items.length <= 0) return <>- + + return ( +
+ {items.map((item, i) => ( + {render(item)} + ))} +
+ ) +} + +export const TagList = memo(_TagList) as typeof _TagList + +export default TagList diff --git a/src/components/views/RoleView.tsx b/src/components/views/RoleView.tsx index 66c0ad3..79673d3 100755 --- a/src/components/views/RoleView.tsx +++ b/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(({ role }) => { Включённые роли: {hasIncludedRoles ? ( - - {role.roles?.map((role, i) => ( - - - - ))} + + } /> ) : ( Отсутствуют @@ -42,12 +39,8 @@ export const RoleView = memo(({ role }) => { Разрешения: {hasPermissions ? ( - - {role.permissions?.map((permission, i) => ( - - - - ))} + + } /> ) : ( Отсутствуют diff --git a/src/pages/AdminPanel/Telemetry/TelemetryMerger.jsx b/src/pages/AdminPanel/Telemetry/TelemetryMerger.jsx index e8add7a..71dfb76 100755 --- a/src/pages/AdminPanel/Telemetry/TelemetryMerger.jsx +++ b/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 => ( {info?.[key] ?? '-'} ))} diff --git a/src/pages/AdminPanel/UserController/index.jsx b/src/pages/AdminPanel/UserController/index.jsx index 5bb3ef2..e85731a 100755 --- a/src/pages/AdminPanel/UserController/index.jsx +++ b/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) => ( - - role.caption === elm)} /> - - )) ?? '-' + const rolesRender = (item) => ( + ( + 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, { diff --git a/src/styles/components/tag_list.less b/src/styles/components/tag_list.less new file mode 100644 index 0000000..255d028 --- /dev/null +++ b/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; + } +}