From 2431e5a5d50e3dc8fbe71ed6235e9fb6d0493425 Mon Sep 17 00:00:00 2001 From: "Jingwei.Zhang" Date: Tue, 28 Jun 2022 16:27:53 +0800 Subject: [PATCH] fix: fix multi role select in transfer component 1. Update Transfer component to support custom table onRow func 2. Fix the trigger to select the row when click select in project manage user form 3. Fix the trigger to select the row when click select in project manage user group form 4. Fix the trigger to select the project when click select in create user page 5. Fix multi select filter the inputed role name in project manage user form 6. Fix multi select filter the inputed role name in project manage user group form 7. Fix multi select filter the inputed role name in create user page Change-Id: I0ee4a3db3e923384cf62c44e1801cabfca887217 --- src/components/FormItem/Transfer/index.jsx | 25 ++++++++++++++----- .../containers/Project/actions/ManageUser.jsx | 3 +++ .../Project/actions/ManageUserGroup.jsx | 3 +++ .../containers/User/actions/Create.jsx | 3 +++ src/resources/keystone/role.js | 5 ++++ 5 files changed, 33 insertions(+), 6 deletions(-) diff --git a/src/components/FormItem/Transfer/index.jsx b/src/components/FormItem/Transfer/index.jsx index 0f7be0e5..94d8b186 100644 --- a/src/components/FormItem/Transfer/index.jsx +++ b/src/components/FormItem/Transfer/index.jsx @@ -24,6 +24,8 @@ const TableTransfer = ({ rightColumns, pageSize, loading, + onRowLeft, + onRowRight, ...restProps }) => ( @@ -36,6 +38,7 @@ const TableTransfer = ({ disabled: listDisabled, }) => { const columns = direction === 'left' ? leftColumns : rightColumns; + const currentOnRow = direction === 'left' ? onRowLeft : onRowRight; const rowSelection = { getCheckboxProps: (item) => ({ @@ -59,6 +62,15 @@ const TableTransfer = ({ pageSize, }; + const onRowDefault = ({ key, disabled: itemDisabled }) => ({ + onClick: () => { + if (itemDisabled || listDisabled) return; + onItemSelect(key, !listSelectedKeys.includes(key)); + }, + }); + + const onRow = currentOnRow || onRowDefault; + return ( ({ - onClick: () => { - if (itemDisabled || listDisabled) return; - onItemSelect(key, !listSelectedKeys.includes(key)); - }, - })} + onRow={onRow} /> ); }} @@ -94,6 +101,8 @@ export default class Index extends Component { value: PropTypes.array, pageSize: PropTypes.number, loading: PropTypes.bool, + onRowLeft: PropTypes.func, + onRowRight: PropTypes.func, }; static defaultProps = { @@ -154,6 +163,8 @@ export default class Index extends Component { titles, pageSize, loading, + onRowLeft, + onRowRight, } = this.props; const { targetKeys } = this.state; return ( @@ -170,6 +181,8 @@ export default class Index extends Component { leftColumns={leftTableColumns} rightColumns={rightTableColumns} loading={loading} + onRowLeft={onRowLeft} + onRowRight={onRowRight} /> ); diff --git a/src/pages/identity/containers/Project/actions/ManageUser.jsx b/src/pages/identity/containers/Project/actions/ManageUser.jsx index 53958378..bd8f8824 100644 --- a/src/pages/identity/containers/Project/actions/ManageUser.jsx +++ b/src/pages/identity/containers/Project/actions/ManageUser.jsx @@ -23,6 +23,7 @@ import { nameDomainColumns, transferFilterOption, } from 'resources/keystone/domain'; +import { roleFilterOption } from 'resources/keystone/role'; export class ManageUser extends ModalAction { static id = 'management-user'; @@ -136,6 +137,7 @@ export class ManageUser extends ModalAction { mode="multiple" options={this.userRolesList(id)} defaultValue={this.defaultRoles(id)} + filterOption={roleFilterOption} onChange={(value, option) => { this.onSelectChange(value, option, id); }} @@ -204,6 +206,7 @@ export class ManageUser extends ModalAction { filterOption: transferFilterOption, wrapperCol: this.wrapperCol, loading: this.userStore.list.isLoading, + onRowRight: () => null, }, ]; } diff --git a/src/pages/identity/containers/Project/actions/ManageUserGroup.jsx b/src/pages/identity/containers/Project/actions/ManageUserGroup.jsx index c2f8f85d..2e0f079a 100644 --- a/src/pages/identity/containers/Project/actions/ManageUserGroup.jsx +++ b/src/pages/identity/containers/Project/actions/ManageUserGroup.jsx @@ -23,6 +23,7 @@ import { nameDomainColumns, transferFilterOption, } from 'resources/keystone/domain'; +import { roleFilterOption } from 'resources/keystone/role'; export class ManageUserGroup extends ModalAction { static id = 'manage-group-group'; @@ -124,6 +125,7 @@ export class ManageUserGroup extends ModalAction { mode="multiple" options={this.groupRolesList(groupId)} defaultValue={this.defaultRoles(groupId)} + filterOption={roleFilterOption} onChange={(value, option) => { this.onSubChange(value, option, groupId); }} @@ -204,6 +206,7 @@ export class ManageUserGroup extends ModalAction { onChange: this.onChangeUserGroup, wrapperCol: this.wrapperCol, loading: this.userGroupStore.list.isLoading, + onRowRight: () => null, }, ]; } diff --git a/src/pages/identity/containers/User/actions/Create.jsx b/src/pages/identity/containers/User/actions/Create.jsx index c0a45132..8dc5e899 100644 --- a/src/pages/identity/containers/User/actions/Create.jsx +++ b/src/pages/identity/containers/User/actions/Create.jsx @@ -32,6 +32,7 @@ import { nameDomainColumns, transferFilterOption, } from 'resources/keystone/domain'; +import { roleFilterOption } from 'resources/keystone/role'; export class Create extends FormAction { constructor(props) { @@ -167,6 +168,7 @@ export class Create extends FormAction { mode="multiple" options={this.projectRolesList(projectId)} defaultValue={this.defaultRoles()} + filterOption={roleFilterOption} onChange={(value, option) => { this.onSelectChange(value, option, projectId); }} @@ -330,6 +332,7 @@ export class Create extends FormAction { onChange: this.onChangeProject, filterOption: transferFilterOption, loading: this.projectStore.list.isLoading, + onRowRight: () => null, }, { name: 'select_user_group', diff --git a/src/resources/keystone/role.js b/src/resources/keystone/role.js index 698022b5..302bde80 100644 --- a/src/resources/keystone/role.js +++ b/src/resources/keystone/role.js @@ -19,3 +19,8 @@ export const editable = (item) => { } return true; }; + +export const roleFilterOption = (inputValue, options) => { + const { label = '' } = options; + return label.toLowerCase().includes((inputValue || '').toLowerCase()); +};