From 1e31f2f2c18dc7fc667c886e62edcc796f1f83d0 Mon Sep 17 00:00:00 2001 From: goodmice Date: Tue, 27 Dec 2022 19:04:02 +0500 Subject: [PATCH] =?UTF-8?q?=D0=9E=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=81=D0=BF=D0=B8=D1=81=D0=BA=D0=BE?= =?UTF-8?q?=D0=B2=20=D1=82=D0=B5=D0=B3=D0=BE=D0=B2=20=D0=BE=D0=B1=D0=BD?= =?UTF-8?q?=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D0=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Table/Columns/tag.tsx | 7 ++++-- src/components/TagList.tsx | 25 +++++++++++++++++++ src/components/views/RoleView.tsx | 19 +++++--------- .../AdminPanel/Telemetry/TelemetryMerger.jsx | 4 +-- src/pages/AdminPanel/UserController/index.jsx | 24 ++++++++---------- src/styles/components/tag_list.less | 9 +++++++ 6 files changed, 56 insertions(+), 32 deletions(-) create mode 100644 src/components/TagList.tsx create mode 100644 src/styles/components/tag_list.less 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; + } +}