baha/skyline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Update user create form style

Browse Source 
1. Update style in user create form
2. Refactor pathname check in list page
3. Fix project role when remove project in user create form && project manage user form
4. Add loading style to Transfer component

Change-Id: I6eddf27a096aa35236430595d8329782ae5b6ed1
This commit is contained in:
Jingwei.Zhang 2022-06-10 15:03:21 +08:00
parent 8ed4795ece
commit 5c3ea06aba
12 changed files with 71 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/FormItem/Transfer/index.jsx
View File

@ -23,6 +23,7 @@ const TableTransfer = ({
leftColumns,
rightColumns,
pageSize,
loading,
...restProps
}) => (
<Transfer {...restProps} showSelectAll={false}>
@ -60,6 +61,7 @@ const TableTransfer = ({
return (
<Table
loading={loading}
rowSelection={rowSelection}
columns={columns}
dataSource={filteredItems}
@ -91,6 +93,7 @@ export default class Index extends Component {
// eslint-disable-next-line react/no-unused-prop-types
value: PropTypes.array,
pageSize: PropTypes.number,
loading: PropTypes.bool,
};
static defaultProps = {
@ -101,6 +104,7 @@ export default class Index extends Component {
onChange: null,
value: [],
pageSize: 5,
loading: false,
};
constructor(props) {
@ -149,6 +153,7 @@ export default class Index extends Component {
filterOption,
titles,
pageSize,
loading,
} = this.props;
const { targetKeys } = this.state;
return (
@ -164,6 +169,7 @@ export default class Index extends Component {
filterOption={filterOption}
leftColumns={leftTableColumns}
rightColumns={rightTableColumns}
loading={loading}
/>
</>
);

5
src/containers/List/index.jsx
View File

@ -136,6 +136,11 @@ export default class BaseList extends React.Component {
return '';
}
get path() {
const { location: { pathname = '' } = {} } = this.props;
return pathname || '';
}
get inDetailPage() {
const { detail } = this.props;
return !!detail;

2
src/locales/en.json
View File

@ -1348,10 +1348,10 @@
"Manage User Group": "Manage User Group",
"Manage host": "Manage host",
"Manage user": "Manage user",
"Manage user group": "Manage user group",
"Manageable": "Manageable",
"Management": "Management",
"Management Reason": "Management Reason",
"Manager user group": "Manager user group",
"Manu": "Manu",
"Manual backup": "Manual backup",
"Manual input": "Manual input",

8
src/locales/zh.json
View File

@ -975,7 +975,7 @@
"Get {name} error.": "获取{name}失败。",
"Ghana": "加纳",
"Gibraltar": "直布罗陀",
"Gigabytes (GiB)": "",
"Gigabytes (GiB)": "容量 (GiB)",
"Given IP": "指定IP",
"Glance": "",
"Global Setting": "平台配置",
@ -1099,7 +1099,7 @@
"Image ID": "镜像ID",
"Image Info": "镜像信息",
"Image Name": "镜像名称",
"Image Pending Upload": "",
"Image Pending Upload": "镜像待上传",
"Image Pull Policy": "镜像拉取策略",
"Image Size": "镜像大小",
"Image Snapshot Pending": "镜像快照等待上传",
@ -1348,10 +1348,10 @@
"Manage User Group": "管理用户组",
"Manage host": "管理主机",
"Manage user": "管理用户",
"Manage user group": "管理用户组",
"Manageable": "可管理",
"Management": "维护",
"Management Reason": "维护原因",
"Manager user group": "管理用户组",
"Manu": "手动",
"Manual backup": "手动备份",
"Manual input": "手动输入",
@ -1777,7 +1777,7 @@
"Provisioning Status": "配置状态",
"Public": "公有",
"Public Access": "公开访问",
"Public Address": "",
"Public Address": "公共地址",
"Public Image": "公有镜像",
"Public Key": "公钥",
"Published In": "",

15
src/pages/compute/containers/Instance/index.jsx
View File

@ -55,30 +55,21 @@ export class Instance extends Base {
if (!this.inDetailPage) {
return false;
}
const {
match: { path },
} = this.props;
return path.indexOf('server-group') >= 0;
return this.path.includes('server-group');
}
get inHostDetailPage() {
if (!this.inDetailPage) {
return false;
}
const {
match: { path },
} = this.props;
return path.indexOf('hypervisors') >= 0;
return this.path.includes('hypervisors');
}
get inFlavorDetailPage() {
if (!this.inDetailPage) {
return false;
}
const {
match: { path },
} = this.props;
return path.indexOf('flavor') >= 0;
return this.path.includes('flavor');
}
get isFilterByBackend() {

7
src/pages/identity/containers/Project/actions/ManageUser.jsx
View File

@ -24,7 +24,7 @@ import {
transferFilterOption,
} from 'resources/keystone/domain';
export class ManagerUser extends ModalAction {
export class ManageUser extends ModalAction {
static id = 'management-user';
static title = t('Manage User');
@ -148,7 +148,7 @@ export class ManagerUser extends ModalAction {
if (value.length && option.length) {
userRoles[userId] = value;
} else {
userRoles[userId] = {};
userRoles[userId] = [];
}
this.setState({ userRoles });
};
@ -203,6 +203,7 @@ export class ManagerUser extends ModalAction {
onChange: this.onChangeUser,
filterOption: transferFilterOption,
wrapperCol: this.wrapperCol,
loading: this.userStore.list.isLoading,
},
];
}
@ -237,4 +238,4 @@ export class ManagerUser extends ModalAction {
};
}
export default inject('rootStore')(observer(ManagerUser));
export default inject('rootStore')(observer(ManageUser));

13
src/pages/identity/containers/Project/actions/ManageUserGroup.jsx
View File

@ -24,21 +24,21 @@ import {
transferFilterOption,
} from 'resources/keystone/domain';
export class ManageGroupGroup extends ModalAction {
export class ManageUserGroup extends ModalAction {
static id = 'manage-group-group';
static title = t('Manage User Group');
async init() {
this.state.groupRoles = this.getInitRoleMap();
this.groupGroupStore = new GroupStore();
this.userGroupStore = new GroupStore();
this.store = globalRoleStore;
this.getRoleList();
this.getGroupGroup();
}
get name() {
return t('Manager user group');
return t('Manage user group');
}
getInitRoleMap() {
@ -50,7 +50,7 @@ export class ManageGroupGroup extends ModalAction {
}
getGroupGroup() {
this.groupGroupStore.fetchList();
this.userGroupStore.fetchList();
}
getRoleList() {
@ -80,7 +80,7 @@ export class ManageGroupGroup extends ModalAction {
}
get groupList() {
return (this.groupGroupStore.list.data || []).map((it) => ({
return (this.userGroupStore.list.data || []).map((it) => ({
...it,
key: it.id,
}));
@ -187,6 +187,7 @@ export class ManageGroupGroup extends ModalAction {
oriTargetKeys: groups ? Object.keys(groups) : [],
filterOption: transferFilterOption,
wrapperCol: this.wrapperCol,
loading: this.userGroupStore.list.isLoading,
},
];
}
@ -221,4 +222,4 @@ export class ManageGroupGroup extends ModalAction {
};
}
export default inject('rootStore')(observer(ManageGroupGroup));
export default inject('rootStore')(observer(ManageUserGroup));

49
src/pages/identity/containers/User/actions/Create.jsx
View File

@ -155,7 +155,7 @@ export class Create extends FormAction {
if (value.length && option.length) {
projectRoles[projectId] = value;
} else {
projectRoles[projectId] = {};
projectRoles[projectId] = [];
}
this.setState({ projectRoles });
};
@ -225,14 +225,22 @@ export class Create extends FormAction {
get formItems() {
const { more } = this.state;
const labelCol = {
xs: { span: 5 },
sm: { span: 6 },
xs: { span: 4 },
sm: { span: 5 },
};
const wrapperCol = {
xs: { span: 16 },
sm: { span: 15 },
};
const cols = {
labelCol,
wrapperCol,
colNum: 2,
};
const domainFormItem = getDomainFormItem(this);
const currentDomainFormItem = {
...domainFormItem,
labelCol,
colNum: 2,
...cols,
};
return [
{
@ -242,8 +250,7 @@ export class Create extends FormAction {
validator: this.checkName,
extra: t('User name can not be duplicated'),
required: true,
labelCol,
colNum: 2,
...cols,
maxLength: 30,
},
{
@ -252,8 +259,7 @@ export class Create extends FormAction {
type: 'input',
required: true,
validator: emailValidate,
labelCol,
colNum: 2,
...cols,
},
{
name: 'password',
@ -261,8 +267,7 @@ export class Create extends FormAction {
type: 'input-password',
required: true,
otherRule: getPasswordOtherRule('password'),
labelCol,
colNum: 2,
...cols,
},
{
name: 'phone',
@ -270,8 +275,7 @@ export class Create extends FormAction {
type: 'phone',
required: true,
validator: phoneNumberValidate,
labelCol,
colNum: 2,
...cols,
},
{
name: 'confirmPassword',
@ -280,8 +284,7 @@ export class Create extends FormAction {
required: true,
dependencies: ['password'],
otherRule: getPasswordOtherRule('confirmPassword'),
labelCol,
colNum: 2,
...cols,
},
currentDomainFormItem,
{
@ -291,23 +294,20 @@ export class Create extends FormAction {
optionType: 'default',
options: statusTypes,
required: true,
labelCol,
colNum: 2,
...cols,
},
{
name: 'description',
label: t('Description'),
type: 'textarea',
labelCol,
colNum: 2,
...cols,
},
{
name: 'real_name',
label: t('Real Name'),
type: 'input',
required: true,
labelCol,
colNum: 2,
...cols,
maxLength: 30,
},
{
@ -329,6 +329,7 @@ export class Create extends FormAction {
hidden: !more,
onChange: this.onChangeProject,
filterOption: transferFilterOption,
loading: this.projectStore.list.isLoading,
},
{
name: 'select_user_group',
@ -340,15 +341,15 @@ export class Create extends FormAction {
showSearch: true,
hidden: !more,
filterOption: transferFilterOption,
loading: this.userGroupStore.list.isLoading,
},
];
}
onSubmit = async (values) => {
const { domain } = this.state;
const { projectRoles } = this.state;
values.defaultRole = this.projectRoleList[0].id;
values.projectRoles = this.state.projectRoles;
values.domain_id = domain;
values.projectRoles = projectRoles;
const { confirmPassword, more, ...rest } = values;
return this.store.create(rest);
};

20
src/pages/identity/containers/User/index.jsx
View File

@ -34,31 +34,19 @@ export class User extends Base {
}
get inDomainDetail() {
const {
match: { path },
} = this.props;
return this.inDetailPage && path.includes('domain-admin/detail');
return this.inDetailPage && this.path.includes('domain-admin/detail');
}
get inProjectDetail() {
const {
match: { path },
} = this.props;
return this.inDetailPage && path.includes('project-admin/detail');
return this.inDetailPage && this.path.includes('project-admin/detail');
}
get inUserGroupDetail() {
const {
match: { path },
} = this.props;
return this.inDetailPage && path.includes('identity/user-group');
return this.inDetailPage && this.path.includes('identity/user-group');
}
get inRoleDetail() {
const {
match: { path },
} = this.props;
return this.inDetailPage && path.includes('identity/role-admin');
return this.inDetailPage && this.path.includes('identity/role-admin');
}
getBaseColumns() {

1
src/pages/identity/containers/UserGroup/actions/ManageUser.jsx
View File

@ -119,6 +119,7 @@ export class ManageUser extends ModalAction {
disabled: false,
showSearch: true,
filterOption: transferFilterOption,
loading: this.userStore.list.isLoading,
},
];
}

30
src/pages/network/containers/VirtualAdapter/index.jsx
View File

@ -27,29 +27,19 @@ export class VirtualAdapter extends Base {
}
get isInstanceDetail() {
const {
match: { path },
} = this.props;
if (
path.indexOf('compute/instance') >= 0 ||
path.indexOf('management/recycle-bin') >= 0
) {
return true;
}
return false;
return (
this.inDetailPage &&
(this.path.includes('compute/instance') ||
this.path.includes('management/recycle-bin'))
);
}
get isNetworkDetail() {
const {
match: { path },
} = this.props;
if (
path.indexOf('networks/detail') >= 0 ||
path.indexOf('networks-admin/detail') >= 0
) {
return true;
}
return false;
return (
this.inDetailPage &&
(this.path.includes('networks/detail') ||
this.path.includes('networks-admin/detail'))
);
}
get isFilterByBackend() {

5
src/pages/user-center/containers/Credentials/index.jsx
View File

@ -28,10 +28,7 @@ export class Credentials extends Base {
}
get isUserDetail() {
const {
match: { path },
} = this.props;
return path.indexOf('user-admin/detail') >= 0;
return this.inDetailPage && this.path.includes('user-admin/detail');
}
updateFetchParamsByPage = (params) => {