mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Modify Role view and User View
This commit is contained in:
Kaveesha Mihirangi
Dharmakeerthi Lasantha
parent
3cc68f761e
commit
df3548fb8f
340
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/AddRole.js
vendored
Normal file
340
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/AddRole.js
vendored
Normal file
@ -0,0 +1,340 @@
|
||||
import React from 'react';
|
||||
import {Button, Form, Input, message, Modal, notification, Select, Tree} from "antd";
|
||||
import {withConfigContext} from "../../context/ConfigContext";
|
||||
import axios from "axios";
|
||||
|
||||
const {Option} = Select;
|
||||
const {TreeNode} = Tree;
|
||||
|
||||
class AddRole extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.config = this.props.context;
|
||||
this.expandKeys = [];
|
||||
this.state = {
|
||||
isAddRoleModalVisible: false,
|
||||
isAddPermissionModalVisible: false,
|
||||
roleName: '',
|
||||
users: [],
|
||||
nodeList: [],
|
||||
expandedKeys: [],
|
||||
autoExpandParent: true,
|
||||
checkedKeys: [],
|
||||
isNodeList: false,
|
||||
}
|
||||
}
|
||||
|
||||
openAddModal = () => {
|
||||
this.setState({
|
||||
isAddRoleModalVisible: true
|
||||
});
|
||||
};
|
||||
|
||||
onCancelHandler = e => {
|
||||
this.setState({
|
||||
isAddRoleModalVisible: false,
|
||||
isAddPermissionModalVisible: false,
|
||||
});
|
||||
};
|
||||
|
||||
getCheckedPermissionsList = (data) =>{
|
||||
data.forEach(item => {
|
||||
if (item !== null) {
|
||||
this.expandKeys.push(item.resourcePath);
|
||||
this.getCheckedPermissionsList(item.nodeList);
|
||||
}else{
|
||||
return null;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onAddRole = e => {
|
||||
this.props.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.onConfirmAddRole(values);
|
||||
}
|
||||
console.log(values);
|
||||
});
|
||||
};
|
||||
|
||||
onExpand = expandedKeys => {
|
||||
this.setState({
|
||||
expandedKeys,
|
||||
autoExpandParent: false,
|
||||
});
|
||||
};
|
||||
|
||||
onCheck = checkedKeys => {
|
||||
this.setState({checkedKeys});
|
||||
};
|
||||
|
||||
onConfirmAddRole = (value) => {
|
||||
const roleData = {
|
||||
roleName: value.roleName,
|
||||
users: value.users,
|
||||
};
|
||||
this.setState({
|
||||
roleName: value.roleName,
|
||||
});
|
||||
axios.post(
|
||||
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
"/roles",
|
||||
roleData,
|
||||
{headers: {'Content-Type': 'application-json'}}
|
||||
).then(res => {
|
||||
if (res.status === 201) {
|
||||
this.props.fetchUsers();
|
||||
this.setState({
|
||||
isAddRoleModalVisible: false,
|
||||
isAddPermissionModalVisible: true,
|
||||
|
||||
});
|
||||
notification["success"]({
|
||||
message: "Done",
|
||||
duration: 4,
|
||||
description:
|
||||
"Successfully added the role.",
|
||||
});
|
||||
this.loadPermissionList();
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:
|
||||
"Error occurred while trying to add role.",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
renderTreeNodes = (data) => {
|
||||
return data.map(item => {
|
||||
if (item !== null) {
|
||||
if (item.hasOwnProperty("nodeList")) {
|
||||
return (
|
||||
<TreeNode title={item.displayName} key={item.resourcePath} dataRef={item}>
|
||||
{this.renderTreeNodes(item.nodeList)}
|
||||
</TreeNode>
|
||||
);
|
||||
}
|
||||
return <TreeNode key={item.resourcePath} {...item}/>;
|
||||
}
|
||||
else{
|
||||
return <TreeNode/>;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onAssignPermissions = () =>{
|
||||
const roleData = {
|
||||
roleName : this.state.roleName,
|
||||
permissions : this.state.checkedKeys
|
||||
};
|
||||
axios.put(
|
||||
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
"/roles/"+ this.state.roleName,
|
||||
roleData,
|
||||
{headers: {'Content-Type' : 'application-json'}}
|
||||
).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.props.fetchUsers();
|
||||
notification["success"]({
|
||||
message: "Done",
|
||||
duration: 4,
|
||||
description:
|
||||
"Successfully Updated the Permissions.",
|
||||
});
|
||||
this.setState({
|
||||
isAddPermissionModalVisible : false
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:
|
||||
"Error occurred while trying to add permissions.",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
loadPermissionList = () => {
|
||||
let apiURL = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt + "/roles/" + this.state.roleName + "/permissions";
|
||||
|
||||
axios.get(apiURL).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.getCheckedPermissionsList(res.data.data.nodeList);
|
||||
this.setState({
|
||||
nodeList: res.data.data.nodeList,
|
||||
isNodeList: true,
|
||||
expandedKeys : this.expandKeys
|
||||
});
|
||||
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description: "Error occurred while trying to load permission.",
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
loadUsersList = (value) => {
|
||||
let apiURL = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt + "/users/search/usernames?filter=" + value + "&domain=Primary";
|
||||
axios.get(apiURL).then(res => {
|
||||
if (res.status === 200) {
|
||||
let user = JSON.parse(res.data.data);
|
||||
let users = [];
|
||||
for (let i = 0; i < user.length; i++) {
|
||||
users.push(<Option key={user[i].username}>{user[i].username}</Option>);
|
||||
}
|
||||
this.setState({
|
||||
users: users
|
||||
});
|
||||
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description: "Error occurred while trying to load users.",
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
render() {
|
||||
const {getFieldDecorator} = this.props.form;
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<Button type="primary" icon="plus" size={"default"} onClick={this.openAddModal}
|
||||
style={{marginBottom: '10px'}}>
|
||||
Add Role
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Modal
|
||||
title="ADD NEW ROLE"
|
||||
width="40%"
|
||||
visible={this.state.isAddRoleModalVisible}
|
||||
onOk={this.onAddRole}
|
||||
onCancel={this.onCancelHandler}
|
||||
footer={[
|
||||
<Button key="cancel" onClick={this.onCancelHandler}>
|
||||
Cancel
|
||||
</Button>,
|
||||
<Button key="submit" type="primary" onClick={this.onAddRole}>
|
||||
Add Role
|
||||
</Button>,
|
||||
]}>
|
||||
<div style={{alignItems: "center"}}>
|
||||
<p>Create new user on IoT Server.</p>
|
||||
<Form
|
||||
labelCol={{span: 5}}
|
||||
wrapperCol={{span: 18}}>
|
||||
<Form.Item label="User Store Domain" style={{display: "block"}}>
|
||||
{getFieldDecorator('userStoreDomain', {
|
||||
initialValue: 'PRIMARY'
|
||||
})(
|
||||
<Select>
|
||||
<Option key="PRIMARY">PRIMARY</Option>
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Role Name" style={{display: "block"}}>
|
||||
{getFieldDecorator('roleName', {
|
||||
rules: [
|
||||
{
|
||||
pattern: new RegExp("^(((?!(\\@|\\/|\\s)).){3,})*$"),
|
||||
message: 'Role name should be in minimum 3 characters long and not ' +
|
||||
'include any whitespaces or @ or /',
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
message: 'This field is required.',
|
||||
},
|
||||
|
||||
],
|
||||
})(<Input/>)}
|
||||
</Form.Item>
|
||||
<Form.Item label="User List" style={{display: "block"}}>
|
||||
{getFieldDecorator('users', {})(<Select
|
||||
mode="multiple"
|
||||
style={{width: '100%'}}
|
||||
onSearch={this.loadUsersList}>
|
||||
{this.state.users}
|
||||
</Select>)}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
<div>
|
||||
<Modal
|
||||
title="CHANGE ROLE PERMISSION"
|
||||
width="40%"
|
||||
visible={this.state.isAddPermissionModalVisible}
|
||||
onOk={this.onAssignPermissions}
|
||||
onCancel={this.onCancelHandler}
|
||||
bodyStyle={{overflowY:"scroll", maxHeight:'500px', marginLeft:'10px'}}
|
||||
footer={[
|
||||
<Button key="cancel" onClick={this.onCancelHandler}>
|
||||
Cancel
|
||||
</Button>,
|
||||
<Button key="submit" type="primary" onClick={this.onAssignPermissions}>
|
||||
Assign
|
||||
</Button>,
|
||||
]}>
|
||||
<div style={{alignItems: "center"}}>
|
||||
<div>
|
||||
{(this.state.isNodeList) && (
|
||||
<Tree
|
||||
checkable
|
||||
onExpand={this.onExpand}
|
||||
expandedKeys={this.state.expandedKeys}
|
||||
autoExpandParent={this.state.autoExpandParent}
|
||||
onCheck={this.onCheck}
|
||||
checkedKeys={this.state.checkedKeys}>
|
||||
{this.renderTreeNodes(this.state.nodeList)}
|
||||
</Tree>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(Form.create({name: 'add-role'})(AddRole))
|
||||
428
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RoleAction.js
vendored
Normal file
428
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RoleAction.js
vendored
Normal file
@ -0,0 +1,428 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Form,
|
||||
Icon,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
notification,
|
||||
Popconfirm,
|
||||
Select,
|
||||
Tooltip, Tree,
|
||||
Typography
|
||||
} from "antd";
|
||||
import axios from "axios";
|
||||
import {withConfigContext} from "../../context/ConfigContext";
|
||||
const { Option } = Select;
|
||||
const {Text} = Typography;
|
||||
const { TreeNode } = Tree;
|
||||
|
||||
class RoleAction extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.config = this.props.context;
|
||||
this.selected = [];
|
||||
this.expandKeys = [];
|
||||
this.state = {
|
||||
roleData: [],
|
||||
nodeList : [],
|
||||
isNodeList: false,
|
||||
users : [],
|
||||
isEditRoleModalVisible: false,
|
||||
isEditPermissionModalVisible: false,
|
||||
expandedKeys: [],
|
||||
autoExpandParent: true,
|
||||
checkedKeys: [],
|
||||
};
|
||||
}
|
||||
|
||||
openEditRoleModal = () =>{
|
||||
let apiUrl = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
"/roles/"+ this.props.data;
|
||||
|
||||
axios.get(apiUrl).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.setState({
|
||||
roleData : res.data.data,
|
||||
isEditRoleModalVisible: true,
|
||||
});
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:"Error occurred while trying to load role.",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
openEditPermissionModal =()=>{
|
||||
this.loadPermissionList();
|
||||
this.setState({
|
||||
isEditPermissionModalVisible: true,
|
||||
});
|
||||
};
|
||||
|
||||
loadPermissionList = () => {
|
||||
let apiURL = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt + "/roles/"+this.props.data+"/permissions";
|
||||
|
||||
axios.get(apiURL).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.getCheckedPermissions(res.data.data.nodeList);
|
||||
this.setState({
|
||||
nodeList : res.data.data.nodeList,
|
||||
isNodeList: true,
|
||||
checkedKeys : this.selected,
|
||||
expandedKeys : this.expandKeys
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:"Error occurred while trying to load permission.",
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
getCheckedPermissions = (data) =>{
|
||||
data.forEach(item => {
|
||||
if (item !== null) {
|
||||
this.expandKeys.push(item.resourcePath);
|
||||
if (item.isSelected) {
|
||||
this.selected.push(item.resourcePath);
|
||||
}
|
||||
this.getCheckedPermissions(item.nodeList);
|
||||
}else{
|
||||
return null;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onExpand = expandedKeys => {
|
||||
this.setState({
|
||||
expandedKeys,
|
||||
autoExpandParent: false,
|
||||
});
|
||||
};
|
||||
|
||||
onCheck = checkedKeys => {
|
||||
this.setState({checkedKeys});
|
||||
};
|
||||
|
||||
renderTreeNodes = (data) => {
|
||||
return data.map(item => {
|
||||
if (item !== null) {
|
||||
if (item.hasOwnProperty("nodeList")) {
|
||||
return (
|
||||
<TreeNode title={item.displayName} key={item.resourcePath} dataRef={item}>
|
||||
{this.renderTreeNodes(item.nodeList)}
|
||||
</TreeNode>
|
||||
);
|
||||
}
|
||||
return <TreeNode key={item.resourcePath} {...item}/>;
|
||||
} else{
|
||||
return <TreeNode/>;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onUpdateRole = e => {
|
||||
this.props.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.onConfirmUpdateRole(values);
|
||||
}
|
||||
console.log(values);
|
||||
});
|
||||
};
|
||||
|
||||
onCancelHandler = e =>{
|
||||
this.setState({
|
||||
isEditRoleModalVisible: false,
|
||||
isEditPermissionModalVisible:false,
|
||||
})
|
||||
};
|
||||
|
||||
onConfirmUpdateRole = (value) =>{
|
||||
const roleData = {
|
||||
roleName : value.roleName,
|
||||
users : value.users,
|
||||
};
|
||||
axios.put(
|
||||
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
"/roles/"+ this.props.data,
|
||||
roleData,
|
||||
{headers: {'Content-Type' : 'application-json'}}
|
||||
).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.props.fetchUsers();
|
||||
this.setState({
|
||||
isEditRoleModalVisible: false,
|
||||
});
|
||||
notification["success"]({
|
||||
message: "Done",
|
||||
duration: 4,
|
||||
description:
|
||||
"Successfully Updated the role.",
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:
|
||||
"Error occurred while trying to add role.",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onAssignPermission = () =>{
|
||||
const roleData = {
|
||||
roleName : this.props.data,
|
||||
permissions : this.state.checkedKeys
|
||||
};
|
||||
axios.put(
|
||||
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
"/roles/"+ this.props.data,
|
||||
roleData,
|
||||
{headers: {'Content-Type' : 'application-json'}}
|
||||
).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.props.fetchUsers();
|
||||
notification["success"]({
|
||||
message: "Done",
|
||||
duration: 4,
|
||||
description:
|
||||
"Successfully Updated the Permissions.",
|
||||
});
|
||||
this.setState({
|
||||
isEditPermissionModalVisible : false
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:
|
||||
"Error occurred while trying to add permissions.",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
loadUsersList = (value) => {
|
||||
let apiURL = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt + "/users/search/usernames?filter="+value+"&domain=Primary";
|
||||
axios.get(apiURL).then(res => {
|
||||
if (res.status === 200) {
|
||||
let user = JSON.parse(res.data.data);
|
||||
let users = [];
|
||||
for(let i=0; i<user.length; i++){
|
||||
users.push(<Option key={user[i].username}>{user[i].username}</Option>);
|
||||
}
|
||||
this.setState({
|
||||
users : users
|
||||
});
|
||||
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:"Error occurred while trying to load users.",
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
onDeleteRole = () => {
|
||||
axios.delete(
|
||||
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
"/roles/" + this.props.data,
|
||||
{headers: {'Content-Type': 'application/json'}}
|
||||
|
||||
).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.props.fetchUsers();
|
||||
notification["success"]({
|
||||
message: "Done",
|
||||
duration: 4,
|
||||
description:
|
||||
"Successfully deleted the Role.",
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:
|
||||
"Error occurred while trying to delete role.",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const isAdminRole = this.props.data ==="admin";
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
return (
|
||||
<div>
|
||||
<div style={{display:isAdminRole ? "none" : "inline"}}>
|
||||
<Tooltip placement="top" title={"Edit Role"}>
|
||||
<a><Icon type="edit" onClick={this.openEditRoleModal}/></a>
|
||||
</Tooltip>
|
||||
<Divider type="vertical" />
|
||||
<Tooltip placement="top" title={"Edit Permissions"}>
|
||||
<a><Icon type="file-add" onClick={this.openEditPermissionModal}/></a>
|
||||
</Tooltip>
|
||||
<Divider type="vertical" />
|
||||
<Tooltip placement="bottom" title={"Remove Role"}>
|
||||
<Popconfirm
|
||||
placement="top"
|
||||
title={"Are you sure?"}
|
||||
onConfirm={this.onDeleteRole}
|
||||
okText="Ok"
|
||||
cancelText="Cancel">
|
||||
<a><Text type="danger"><Icon type="delete"/></Text></a>
|
||||
</Popconfirm>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Modal
|
||||
title="EDIT ROLE"
|
||||
width="40%"
|
||||
visible={this.state.isEditRoleModalVisible}
|
||||
onOk={this.onUpdateRole}
|
||||
onCancel={this.onCancelHandler}
|
||||
footer={[
|
||||
<Button key="cancel" onClick={this.onCancelHandler}>
|
||||
Cancel
|
||||
</Button>,
|
||||
<Button key="submit" type="primary" onClick={this.onUpdateRole}>
|
||||
Add Role
|
||||
</Button>,
|
||||
]}>
|
||||
<div style={{alignItems:"center"}}>
|
||||
<p>Create new user on IoT Server.</p>
|
||||
<Form
|
||||
labelCol={{ span: 5 }}
|
||||
wrapperCol={{ span: 18 }}>
|
||||
<Form.Item label="User Store Domain" style={{display:"block"}}>
|
||||
{getFieldDecorator('userStoreDomain', {
|
||||
initialValue : 'PRIMARY'
|
||||
})(
|
||||
<Select>
|
||||
<Option key="PRIMARY">PRIMARY</Option>
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Role Name" style={{display:"block"}}>
|
||||
{getFieldDecorator('roleName', {
|
||||
initialValue: this.state.roleData.roleName,
|
||||
rules: [
|
||||
{
|
||||
pattern : new RegExp("^(((?!(\\@|\\/|\\s)).){3,})*$"),
|
||||
message: 'Role name should be in minimum 3 characters long and not ' +
|
||||
'include any whitespaces or @ or /',
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
message: 'This field is required.',
|
||||
},
|
||||
|
||||
],
|
||||
})(<Input/>)}
|
||||
</Form.Item>
|
||||
<Form.Item label="User List" style={{display:"block"}}>
|
||||
{getFieldDecorator('users', {
|
||||
initialValue: this.state.roleData.users,
|
||||
})(<Select
|
||||
mode="multiple"
|
||||
style={{ width: '100%' }}
|
||||
onSearch={this.loadUsersList}>
|
||||
{this.state.users}
|
||||
</Select>)}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
<div>
|
||||
<Modal
|
||||
title="CHANGE ROLE PERMISSION"
|
||||
width="40%"
|
||||
visible={this.state.isEditPermissionModalVisible}
|
||||
onOk={this.onAssignPermission}
|
||||
onCancel={this.onCancelHandler}
|
||||
footer={[
|
||||
<Button key="cancel" onClick={this.onCancelHandler}>
|
||||
Cancel
|
||||
</Button>,
|
||||
<Button key="submit" type="primary" onClick={this.onAssignPermission}>
|
||||
Assign
|
||||
</Button>,
|
||||
]}
|
||||
bodyStyle={{overflowY:"scroll", maxHeight:'500px', marginLeft:'10px'}}>
|
||||
<div>
|
||||
{(this.state.isNodeList) &&(
|
||||
<Tree
|
||||
checkable
|
||||
onExpand={this.onExpand}
|
||||
expandedKeys={this.state.expandedKeys}
|
||||
autoExpandParent={this.state.autoExpandParent}
|
||||
onCheck={this.onCheck}
|
||||
checkedKeys={this.state.checkedKeys}>
|
||||
{this.renderTreeNodes(this.state.nodeList)}
|
||||
</Tree>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(Form.create({name: 'role-actions'})(RoleAction));
|
||||
@ -18,24 +18,19 @@
|
||||
|
||||
import React from "react";
|
||||
import axios from "axios";
|
||||
import {Card, Col, Icon, message, notification, Row, Typography} from "antd";
|
||||
import {
|
||||
Button,
|
||||
message,
|
||||
Modal,
|
||||
notification,
|
||||
Table, List
|
||||
} from "antd";
|
||||
import TimeAgo from 'javascript-time-ago'
|
||||
// Load locale-specific relative date/time formatting rules.
|
||||
import en from 'javascript-time-ago/locale/en'
|
||||
import {withConfigContext} from "../../context/ConfigContext";
|
||||
|
||||
const {Text} = Typography;
|
||||
|
||||
let config = null;
|
||||
let apiUrl;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'User Name',
|
||||
dataIndex: 'username',
|
||||
width: 100,
|
||||
}
|
||||
];
|
||||
import AddRole from "./AddRole";
|
||||
import RoleAction from "./RoleAction";
|
||||
|
||||
const getTimeAgo = (time) => {
|
||||
const timeAgo = new TimeAgo('en-US');
|
||||
@ -45,23 +40,76 @@ const getTimeAgo = (time) => {
|
||||
class RolesTable extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
config = this.props.context;
|
||||
this.config = this.props.context;
|
||||
TimeAgo.addLocale(en);
|
||||
this.state = {
|
||||
data: [],
|
||||
pagination: {},
|
||||
loading: false,
|
||||
selectedRows: []
|
||||
selectedRows: [],
|
||||
userData: [],
|
||||
users : [],
|
||||
isEditRoleModalVisible: false,
|
||||
isUserListModalVisible :false,
|
||||
};
|
||||
}
|
||||
|
||||
rowSelection = {
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
this.setState({
|
||||
selectedRows: selectedRows
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchUsers();
|
||||
}
|
||||
|
||||
openUserListModal = (event) => {
|
||||
let apiUrl = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
"/roles/"+ event;
|
||||
|
||||
//send request to the invokerss
|
||||
axios.get(apiUrl).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.setState({
|
||||
userData : res.data.data.users,
|
||||
isUserListModalVisible: true,
|
||||
});
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:"Error occurred while trying to load users.",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
handleOk = e => {
|
||||
this.setState({
|
||||
isUserListModalVisible: false,
|
||||
});
|
||||
};
|
||||
|
||||
handleCancel = e => {
|
||||
this.setState({
|
||||
isUserListModalVisible: false,
|
||||
});
|
||||
};
|
||||
|
||||
//fetch data from api
|
||||
fetchUsers = (params = {}) => {
|
||||
const config = this.props.context;
|
||||
// const config = this.props.context;
|
||||
this.setState({loading: true});
|
||||
|
||||
// get current page
|
||||
@ -75,8 +123,8 @@ class RolesTable extends React.Component {
|
||||
const encodedExtraParams = Object.keys(extraParams)
|
||||
.map(key => key + '=' + extraParams[key]).join('&');
|
||||
|
||||
apiUrl = window.location.origin + config.serverConfig.invoker.uri +
|
||||
config.serverConfig.invoker.deviceMgt +
|
||||
let apiUrl = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
"/roles";
|
||||
|
||||
//send request to the invokerss
|
||||
@ -124,30 +172,77 @@ class RolesTable extends React.Component {
|
||||
|
||||
render() {
|
||||
const {data, pagination, loading, selectedRows} = this.state;
|
||||
const { Meta } = Card;
|
||||
const itemCard = data.map((data) =>
|
||||
<Col span={5} key={data}>
|
||||
<Card
|
||||
size="default"
|
||||
style={{ width: 200 }}
|
||||
bordered={true}
|
||||
actions={[
|
||||
<Icon type="setting" key="setting" />,
|
||||
<Icon type="edit" key="edit" />,]}
|
||||
>
|
||||
<Meta
|
||||
avatar={<Icon type="book" key="roles"/>}
|
||||
title={data}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
);
|
||||
const columns = [
|
||||
{
|
||||
title: 'Role Name',
|
||||
dataIndex: '',
|
||||
key: "role",
|
||||
width: "60%",
|
||||
},
|
||||
{
|
||||
title: 'View',
|
||||
dataIndex: '',
|
||||
key: 'users',
|
||||
render: (id, row) =>
|
||||
<Button
|
||||
type="primary"
|
||||
size={"small"}
|
||||
icon="book"
|
||||
onClick={()=>this.openUserListModal(row)}>Users</Button>
|
||||
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
dataIndex: 'id',
|
||||
key: 'action',
|
||||
render: (id, row) => (
|
||||
<span>
|
||||
<RoleAction data={row} fetchUsers={this.fetchUsers}/>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
|
||||
];
|
||||
return (
|
||||
<div style={{ background: '#ECECEC', padding: '20px' }}>
|
||||
<Row gutter={16}>
|
||||
{itemCard}
|
||||
</Row>
|
||||
<div>
|
||||
<div style={{background: '#f0f2f5'}}>
|
||||
<AddRole fetchUsers={this.fetchUsers}/>
|
||||
</div>
|
||||
<div>
|
||||
<Table
|
||||
columns={columns}
|
||||
rowKey={record => (record)}
|
||||
dataSource={data}
|
||||
pagination={{
|
||||
...pagination,
|
||||
size: "small",
|
||||
// position: "top",
|
||||
showTotal: (total, range) => `showing ${range[0]}-${range[1]} of ${total} groups`
|
||||
// showQuickJumper: true
|
||||
}}
|
||||
loading={loading}
|
||||
onChange={this.handleTableChange}
|
||||
rowSelection={this.rowSelection}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Modal
|
||||
title="USERS"
|
||||
width="900px"
|
||||
visible={this.state.isUserListModalVisible}
|
||||
onOk={this.handleOk}
|
||||
onCancel={this.handleCancel} >
|
||||
<div>
|
||||
<List
|
||||
size="small"
|
||||
bordered
|
||||
dataSource={this.state.userData}
|
||||
renderItem={item => <List.Item>{item}</List.Item>}/>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
423
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UserActions.js
vendored
Normal file
423
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UserActions.js
vendored
Normal file
@ -0,0 +1,423 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Form,
|
||||
Icon,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
notification,
|
||||
Popconfirm,
|
||||
Select,
|
||||
Tooltip,
|
||||
Typography } from "antd";
|
||||
import axios from "axios";
|
||||
import {withConfigContext} from "../../context/ConfigContext";
|
||||
const { Option } = Select;
|
||||
const {Text} = Typography;
|
||||
|
||||
class UserActions extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.config = this.props.context;
|
||||
this.state = {
|
||||
isEditModalVisible: false,
|
||||
isResetPasswordModalVisible: false,
|
||||
rolesData: [],
|
||||
}
|
||||
}
|
||||
openEditModal = () =>{
|
||||
this.setState({
|
||||
isEditModalVisible: true,
|
||||
});
|
||||
this.fetchRoles(this.props.data.username);
|
||||
|
||||
};
|
||||
openPasswordResetModal = () =>{
|
||||
this.setState({
|
||||
isResetPasswordModalVisible: true,
|
||||
})
|
||||
};
|
||||
|
||||
onCancelHandler = () =>{
|
||||
this.setState({
|
||||
isEditModalVisible: false,
|
||||
isResetPasswordModalVisible: false,
|
||||
})
|
||||
};
|
||||
|
||||
compareToFirstPassword = (rule, value, callback) => {
|
||||
if (value && value !== this.props.form.getFieldValue('password')) {
|
||||
callback('New password doesn\'t match the confirmation.');
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
onSavePassword = () => {
|
||||
this.props.form.validateFields((['password', 'confirmPassword']),(err, values) => {
|
||||
if (!err) {
|
||||
this.onResetPassword(values);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onResetPassword = (value) =>{
|
||||
const password = {
|
||||
newPassword : value.password,
|
||||
};
|
||||
axios.post(
|
||||
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
"/admin/users/"+this.props.data.username+"/credentials",
|
||||
password,
|
||||
{headers: {'Content-Type' : 'application-json'}}
|
||||
).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.props.fetchUsers();
|
||||
this.setState({
|
||||
isResetPasswordModalVisible: false,
|
||||
});
|
||||
notification["success"]({
|
||||
message: "Done",
|
||||
duration: 4,
|
||||
description:
|
||||
"Successfully reset the password",
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:
|
||||
"Error occurred while trying to reset password.",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.getRole();
|
||||
}
|
||||
|
||||
getRole = () => {
|
||||
let apiURL = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt + "/roles?user-store=PRIMARY&limit=100";
|
||||
|
||||
axios.get(apiURL).then(res => {
|
||||
if (res.status === 200) {
|
||||
const roles = [];
|
||||
for(let i=0; i<res.data.data.roles.length ; i++){
|
||||
roles.push(<Option key={res.data.data.roles[i]}>{res.data.data.roles[i]}</Option>);
|
||||
}
|
||||
this.setState({
|
||||
roles : roles
|
||||
})
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:"Error occurred while trying to load roles.",
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
onConfirmDeleteUser = () => {
|
||||
axios.delete(
|
||||
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
"/users/" + this.props.data.username,
|
||||
{headers: {'Content-Type': 'application/json'}}
|
||||
|
||||
).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.props.fetchUsers();
|
||||
notification["success"]({
|
||||
message: "Done",
|
||||
duration: 4,
|
||||
description:
|
||||
"Successfully deleted the user.",
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:
|
||||
"Error occurred while trying to delete user.",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
fetchRoles = (username) => {
|
||||
let apiUrl = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
"/users/" + username + "/roles";
|
||||
|
||||
axios.get(apiUrl).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.setState({
|
||||
rolesData: res.data.data.roles,
|
||||
});
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:"Error occurred while trying to load roles.",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
handleEditOk = e =>{
|
||||
this.props.form.validateFields((['userStoreDomain', 'userName', 'firstName', 'lastName' , 'email', 'userRoles']),(err, values) => {
|
||||
if (!err) {
|
||||
this.onUpdateUser(values);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onUpdateUser = (value) =>{
|
||||
const userData = {
|
||||
username : value.userStoreDomain +"/"+value.userName,
|
||||
firstname : value.firstName,
|
||||
lastname : value.lastName,
|
||||
emailAddress : value.email,
|
||||
roles : value.userRoles
|
||||
};
|
||||
axios.put(
|
||||
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||
this.config.serverConfig.invoker.deviceMgt +
|
||||
"/users/"+ this.props.data.username,
|
||||
userData,
|
||||
{headers: {'Content-Type' : 'application-json'}}
|
||||
).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.props.fetchUsers();
|
||||
this.setState({
|
||||
isEditModalVisible: false,
|
||||
});
|
||||
notification["success"]({
|
||||
message: "Done",
|
||||
duration: 4,
|
||||
description:
|
||||
"Successfully updated the user.",
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:
|
||||
"Error occurred while trying to update user.",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const isAdminUser = this.props.data.username ==="admin";
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
return (
|
||||
<div>
|
||||
<div style={{display:isAdminUser ? "none" : "inline"}}>
|
||||
<Tooltip placement="top" title={"Edit User"}>
|
||||
<a><Icon type="edit" onClick={this.openEditModal}/></a>
|
||||
</Tooltip>
|
||||
<Divider type="vertical" />
|
||||
<Tooltip placement="top" title={"Reset Password"}>
|
||||
<a><Icon type="key" onClick={this.openPasswordResetModal}/></a>
|
||||
</Tooltip>
|
||||
<Divider type="vertical" />
|
||||
<Tooltip placement="bottom" title={"Remove User"}>
|
||||
<Popconfirm
|
||||
placement="top"
|
||||
title={"Are you sure?"}
|
||||
onConfirm={this.onConfirmDeleteUser}
|
||||
okText="Ok"
|
||||
cancelText="Cancel">
|
||||
<a><Text type="danger"><Icon type="delete"/></Text></a>
|
||||
</Popconfirm>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Modal
|
||||
title="Reset Password"
|
||||
width="40%"
|
||||
visible={this.state.isResetPasswordModalVisible}
|
||||
onCancel={this.onCancelHandler}
|
||||
onOk={this.onSavePassword}
|
||||
footer={[
|
||||
<Button key="cancel" onClick={this.onCancelHandler}>
|
||||
Cancel
|
||||
</Button>,
|
||||
<Button key="submit" type="primary" onClick={this.onSavePassword} >
|
||||
Save
|
||||
</Button>,
|
||||
]}>
|
||||
<div style={{alignItems:"center"}}>
|
||||
<Form
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 17 }}>
|
||||
<Form.Item label="New Password" style={{display:"block"}}>
|
||||
{getFieldDecorator(
|
||||
'password',
|
||||
{
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'This field is required',
|
||||
},
|
||||
],
|
||||
})(<Input.Password/>)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Retype New Password" style={{display:"block"}}>
|
||||
{getFieldDecorator(
|
||||
'confirmPassword',
|
||||
{
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'This field is required',
|
||||
},
|
||||
{
|
||||
validator: this.compareToFirstPassword,
|
||||
},
|
||||
],
|
||||
})(<Input.Password/>)}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Modal
|
||||
title="EDIT USER"
|
||||
width="40%"
|
||||
visible={this.state.isEditModalVisible}
|
||||
onOk={this.handleEditOk}
|
||||
onCancel={this.onCancelHandler}
|
||||
footer={[
|
||||
<Button key="cancel" onClick={this.onCancelHandler}>
|
||||
Cancel
|
||||
</Button>,
|
||||
<Button key="submit" type="primary" onClick={this.handleEditOk}>
|
||||
Update
|
||||
</Button>,
|
||||
]}>
|
||||
<div style={{alignItems:"center"}}>
|
||||
<p>Create new user on IoT Server.</p>
|
||||
<Form
|
||||
labelCol={{ span: 5 }}
|
||||
wrapperCol={{ span: 18 }}>
|
||||
<Form.Item label="User Store Domain" style={{display:"block"}}>
|
||||
{getFieldDecorator('userStoreDomain', {
|
||||
initialValue : 'PRIMARY'
|
||||
})(
|
||||
<Select disabled={true}>
|
||||
<Option key="PRIMARY">PRIMARY</Option>
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="User Name" style={{display:"block"}}>
|
||||
{getFieldDecorator('userName', {
|
||||
initialValue: this.props.data.username,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'This field is required. Username should be at least 3 characters long with no white spaces.',
|
||||
},
|
||||
],
|
||||
})(<Input disabled={true}/>)}
|
||||
</Form.Item>
|
||||
<Form.Item label="First Name" style={{display:"block"}}>
|
||||
{getFieldDecorator('firstName', {
|
||||
initialValue: this.props.data.firstname,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'This field is required',
|
||||
},
|
||||
],
|
||||
})(<Input/>)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Last Name" style={{display:"block"}}>
|
||||
{getFieldDecorator('lastName', {
|
||||
initialValue: this.props.data.lastname,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'This field is required',
|
||||
},
|
||||
],
|
||||
})(<Input/>)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Email Address" style={{display:"block"}}>
|
||||
{getFieldDecorator('email', {
|
||||
initialValue: this.props.data.emailAddress,
|
||||
rules: [
|
||||
{
|
||||
type: 'email',
|
||||
message: 'Invalid Email Address',
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
message: 'This field is required',
|
||||
},
|
||||
],
|
||||
})(<Input/>)}
|
||||
</Form.Item>
|
||||
<Form.Item label="User Roles" style={{display:"block"}}>
|
||||
{getFieldDecorator('userRoles', {
|
||||
initialValue: this.state.rolesData,
|
||||
})(<Select
|
||||
mode="multiple"
|
||||
style={{ width: '100%' }}>
|
||||
{this.state.roles}
|
||||
</Select>)}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(Form.create({name: 'user-actions'})(UserActions));
|
||||
@ -25,7 +25,8 @@ import en from 'javascript-time-ago/locale/en'
|
||||
import {withConfigContext} from "../../context/ConfigContext";
|
||||
import UsersDevices from "./UsersDevices";
|
||||
import AddUser from "./AddUser";
|
||||
|
||||
import UserActions from "./UserActions";
|
||||
const ButtonGroup = Button.Group
|
||||
const {Text} = Typography;
|
||||
|
||||
let config = null;
|
||||
@ -42,6 +43,7 @@ class UsersTable extends React.Component {
|
||||
loading: false,
|
||||
selectedRows: [],
|
||||
rolesModalVisible: false,
|
||||
devicesModalVisible: false,
|
||||
rolesData: [],
|
||||
user:''
|
||||
};
|
||||
@ -88,6 +90,8 @@ class UsersTable extends React.Component {
|
||||
data: res.data.data.users,
|
||||
pagination,
|
||||
});
|
||||
|
||||
console.log(res.data.data)
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
@ -107,7 +111,6 @@ class UsersTable extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
//fetch data from api
|
||||
fetchRoles = (username) => {
|
||||
const config = this.props.context;
|
||||
|
||||
@ -120,7 +123,6 @@ class UsersTable extends React.Component {
|
||||
config.serverConfig.invoker.deviceMgt +
|
||||
"/users/" + username + "/roles";
|
||||
|
||||
//send request to the invokerss
|
||||
axios.get(apiUrl).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.setState({
|
||||
@ -163,15 +165,23 @@ class UsersTable extends React.Component {
|
||||
handleOk = e => {
|
||||
this.setState({
|
||||
rolesModalVisible: false,
|
||||
devicesModalVisible: false
|
||||
});
|
||||
};
|
||||
|
||||
handleCancel = e => {
|
||||
this.setState({
|
||||
rolesModalVisible: false,
|
||||
devicesModalVisible: false
|
||||
});
|
||||
};
|
||||
|
||||
openDeviceListModal = e =>{
|
||||
this.setState({
|
||||
devicesModalVisible: true,
|
||||
})
|
||||
};
|
||||
|
||||
render() {
|
||||
const {data, pagination, loading, selectedRows} = this.state;
|
||||
const { Panel } = Collapse;
|
||||
@ -180,38 +190,52 @@ class UsersTable extends React.Component {
|
||||
{
|
||||
title: 'User Name',
|
||||
dataIndex: 'username',
|
||||
width: 150,
|
||||
key: "username",
|
||||
},
|
||||
{
|
||||
title: 'First Name',
|
||||
width: 150,
|
||||
dataIndex: 'firstname',
|
||||
key: 'firstname',
|
||||
},
|
||||
{
|
||||
title: 'Last Name',
|
||||
width: 150,
|
||||
dataIndex: 'lastname',
|
||||
key: 'lastname',
|
||||
},
|
||||
{
|
||||
title: 'Email',
|
||||
width: 100,
|
||||
dataIndex: 'emailAddress',
|
||||
key: 'emailAddress',
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
title: 'View',
|
||||
dataIndex: 'username',
|
||||
key: 'roles',
|
||||
render: (username) =>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
type="link"
|
||||
size={"default"}
|
||||
icon="info-circle"
|
||||
onClick={() => this.fetchRoles(username)}>Info</Button>
|
||||
}
|
||||
type="primary"
|
||||
size={"small"}
|
||||
icon="book"
|
||||
onClick={() => this.fetchRoles(username)}>Roles</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
size={"small"}
|
||||
icon="desktop"
|
||||
onClick={this.openDeviceListModal}>Devices</Button>
|
||||
</ButtonGroup>
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
dataIndex: 'id',
|
||||
key: 'action',
|
||||
render: (id, row) => (
|
||||
<span>
|
||||
<UserActions data={row} fetchUsers={this.fetchUsers}/>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
@ -237,40 +261,31 @@ class UsersTable extends React.Component {
|
||||
</div>
|
||||
<div>
|
||||
<Modal
|
||||
title="ROLES"
|
||||
width="900px"
|
||||
visible={this.state.rolesModalVisible}
|
||||
onOk={this.handleOk}
|
||||
onCancel={this.handleCancel}
|
||||
>
|
||||
<Tabs size="small" defaultActiveKey="1">
|
||||
<TabPane
|
||||
tab={
|
||||
<span>
|
||||
<Icon type="book"/>
|
||||
Roles
|
||||
</span>
|
||||
}
|
||||
key="1"
|
||||
>
|
||||
onCancel={this.handleCancel} >
|
||||
<div>
|
||||
<List
|
||||
size="small"
|
||||
bordered
|
||||
dataSource={this.state.rolesData}
|
||||
renderItem={item => <List.Item>{item}</List.Item>}
|
||||
/>
|
||||
</TabPane>
|
||||
<TabPane
|
||||
tab={
|
||||
<span>
|
||||
<Icon type="appstore"/>
|
||||
Enrolled Devices
|
||||
</span>
|
||||
}
|
||||
key="2"
|
||||
>
|
||||
renderItem={item => <List.Item>{item}</List.Item>}/>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Modal
|
||||
title="DEVICES"
|
||||
width="900px"
|
||||
visible={this.state.devicesModalVisible}
|
||||
onOk={this.handleOk}
|
||||
onCancel={this.handleCancel}>
|
||||
<div>
|
||||
<UsersDevices user={this.state.user}/>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user