Add tabs on user info modal

feature/appm-store/pbac
shamalka 5 years ago
parent 7dc9fbb04b
commit 22cd3a09f1

@ -18,7 +18,7 @@
import React from "react"; import React from "react";
import axios from "axios"; import axios from "axios";
import {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider, Card, Col, Row, Select} from "antd"; import {message, notification, Typography, Icon, Card, Col, Row} from "antd";
import TimeAgo from 'javascript-time-ago' import TimeAgo from 'javascript-time-ago'
// Load locale-specific relative date/time formatting rules. // Load locale-specific relative date/time formatting rules.
@ -113,16 +113,27 @@ class DeviceTypesTable extends React.Component {
render() { render() {
const {data, pagination, loading, selectedRows} = this.state; const {data, pagination, loading, selectedRows} = this.state;
const { Meta } = Card;
const itemCard = data.map((data) => const itemCard = data.map((data) =>
<Col span={8} key={data.id}> <Col span={5} key={data.id}>
<Card hoverable title="Device Type" bordered={true}> <Card
{data.name} size="default"
style={{ width: 200 }}
bordered={true}
actions={[
<Icon type="setting" key="setting" />,
<Icon type="edit" key="edit" />,]}
>
<Meta
avatar={<Icon type="desktop" key="device-types"/>}
title={data.name}
/>
</Card> </Card>
</Col> </Col>
); );
return ( return (
<div style={{ background: '#ECECEC', padding: '30px' }}> <div style={{ background: '#ECECEC', padding: '20px' }}>
<Row gutter={16}> <Row gutter={16}>
{itemCard} {itemCard}
</Row> </Row>

@ -18,7 +18,7 @@
import React from "react"; import React from "react";
import axios from "axios"; import axios from "axios";
import {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider, Button, Modal, Select} from "antd"; import {Tag, message, notification, Table, Typography, Tooltip, Icon, Modal, Select} from "antd";
import TimeAgo from 'javascript-time-ago' import TimeAgo from 'javascript-time-ago'
// Load locale-specific relative date/time formatting rules. // Load locale-specific relative date/time formatting rules.
@ -133,18 +133,11 @@ class DeviceTable extends React.Component {
selectedRows: [], selectedRows: [],
deviceGroups: [], deviceGroups: [],
groupModalVisible: false, groupModalVisible: false,
selectedGroupId: [] selectedGroupId: [],
selectedRowKeys:[]
}; };
} }
rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
this.setState({
selectedRows: selectedRows
});
}
};
componentDidMount() { componentDidMount() {
this.fetch(); this.fetch();
} }
@ -249,6 +242,9 @@ class DeviceTable extends React.Component {
).then(res => { ).then(res => {
if (res.status === 200) { if (res.status === 200) {
this.fetch(); this.fetch();
this.setState({
selectedRowKeys:[]
})
notification["success"]({ notification["success"]({
message: "Done", message: "Done",
duration: 4, duration: 4,
@ -409,11 +405,30 @@ class DeviceTable extends React.Component {
}); });
}; };
render() { onSelectChange = (selectedRowKeys, selectedRows) => {
const {data, pagination, loading, selectedRows} = this.state; this.setState({
selectedRowKeys,
selectedRows: selectedRows
});
};
render() {
const {data, pagination, loading, selectedRows, selectedRowKeys} = this.state;
const isSelectedSingle = this.state.selectedRows.length == 1; const isSelectedSingle = this.state.selectedRows.length == 1;
let selectedText;
if(isSelectedSingle){
selectedText = "You have selected 1 device"
}else{
selectedText = "You have selected " + this.state.selectedRows.length + " devices"
}
const rowSelection = {
selectedRowKeys,
selectedRows,
onChange: this.onSelectChange,
};
let item = this.state.deviceGroups.map((data) => let item = this.state.deviceGroups.map((data) =>
<Select.Option <Select.Option
value={data.id} value={data.id}
@ -441,8 +456,7 @@ class DeviceTable extends React.Component {
}} }}
loading={loading} loading={loading}
onChange={this.handleTableChange} onChange={this.handleTableChange}
rowSelection={this.rowSelection} rowSelection={rowSelection}
scroll={{x: 1000}}
/> />
</div> </div>
@ -453,10 +467,11 @@ class DeviceTable extends React.Component {
onOk={this.handleOk} onOk={this.handleOk}
onCancel={this.handleCancel} onCancel={this.handleCancel}
> >
<p>{selectedText}</p>
<Select <Select
mode={isSelectedSingle ? "multiple" : "default"} mode={isSelectedSingle ? "multiple" : "default"}
showSearch showSearch
style={{width: 200}} style={{display:"block"}}
placeholder="Select Group" placeholder="Select Group"
optionFilterProp="children" optionFilterProp="children"
onChange={this.onGroupSelectChange} onChange={this.onGroupSelectChange}

@ -239,7 +239,6 @@ class ReportDeviceTable extends React.Component {
loading={loading} loading={loading}
onChange={this.handleTableChange} onChange={this.handleTableChange}
rowSelection={this.rowSelection} rowSelection={this.rowSelection}
scroll={{x: 1000}}
/> />
</div> </div>
); );

@ -18,7 +18,7 @@
import React from "react"; import React from "react";
import axios from "axios"; import axios from "axios";
import {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider} from "antd"; import { message, notification, Table, Typography} from "antd";
import TimeAgo from 'javascript-time-ago' import TimeAgo from 'javascript-time-ago'
// Load locale-specific relative date/time formatting rules. // Load locale-specific relative date/time formatting rules.
@ -164,7 +164,6 @@ class GroupsTable extends React.Component {
loading={loading} loading={loading}
onChange={this.handleTableChange} onChange={this.handleTableChange}
rowSelection={this.rowSelection} rowSelection={this.rowSelection}
scroll={{x: 1000}}
/> />
</div> </div>
); );

@ -18,7 +18,7 @@
import React from "react"; import React from "react";
import axios from "axios"; import axios from "axios";
import {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider} from "antd"; import {message, notification, Table, Typography} from "antd";
import TimeAgo from 'javascript-time-ago' import TimeAgo from 'javascript-time-ago'
// Load locale-specific relative date/time formatting rules. // Load locale-specific relative date/time formatting rules.
@ -171,7 +171,6 @@ class PoliciesTable extends React.Component {
loading={loading} loading={loading}
onChange={this.handleTableChange} onChange={this.handleTableChange}
rowSelection={this.rowSelection} rowSelection={this.rowSelection}
scroll={{x: 1000}}
/> />
</div> </div>
); );

@ -126,16 +126,26 @@ class RolesTable extends React.Component {
render() { render() {
const {data, pagination, loading, selectedRows} = this.state; const {data, pagination, loading, selectedRows} = this.state;
const { Meta } = Card;
const itemCard = data.map((data) => const itemCard = data.map((data) =>
<Col span={8} key={data}> <Col span={5} key={data}>
<Card hoverable title="Role" bordered={true}> <Card
{data} 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> </Card>
</Col> </Col>
); );
return ( return (
<div style={{ background: '#ECECEC', padding: '30px' }}> <div style={{ background: '#ECECEC', padding: '20px' }}>
<Row gutter={16}> <Row gutter={16}>
{itemCard} {itemCard}
</Row> </Row>

@ -240,7 +240,6 @@ class UsersDevices extends React.Component {
loading={loading} loading={loading}
onChange={this.handleTableChange} onChange={this.handleTableChange}
rowSelection={this.rowSelection} rowSelection={this.rowSelection}
scroll={{x: 1000}}
/> />
</div> </div>
); );

@ -18,7 +18,7 @@
import React from "react"; import React from "react";
import axios from "axios"; import axios from "axios";
import {message, notification, Table, Typography, Panel, Collapse, Button, List, Modal, Icon} from "antd"; import {message, notification, Table, Typography, Panel, Collapse, Button, List, Modal, Icon, Tabs} from "antd";
import TimeAgo from 'javascript-time-ago' import TimeAgo from 'javascript-time-ago'
// Load locale-specific relative date/time formatting rules. // Load locale-specific relative date/time formatting rules.
@ -174,9 +174,9 @@ class UsersTable extends React.Component {
}; };
render() { render() {
const {data, pagination, loading, selectedRows} = this.state; const {data, pagination, loading, selectedRows} = this.state;
const { Panel } = Collapse; const { Panel } = Collapse;
const { TabPane } = Tabs;
const columns = [ const columns = [
{ {
title: 'User Name', title: 'User Name',
@ -231,30 +231,44 @@ class UsersTable extends React.Component {
loading={loading} loading={loading}
onChange={this.handleTableChange} onChange={this.handleTableChange}
rowSelection={this.rowSelection} rowSelection={this.rowSelection}
scroll={{x: 1000}}
/> />
</div> </div>
<div> <div>
<Modal <Modal
width="900px" width="900px"
title="Info"
visible={this.state.rolesModalVisible} visible={this.state.rolesModalVisible}
onOk={this.handleOk} onOk={this.handleOk}
onCancel={this.handleCancel} onCancel={this.handleCancel}
> >
<Collapse> <Tabs size="small" defaultActiveKey="1">
<Panel header="User Roles" key="1"> <TabPane
tab={
<span>
<Icon type="book"/>
Roles
</span>
}
key="1"
>
<List <List
size="small" size="small"
bordered bordered
dataSource={this.state.rolesData} dataSource={this.state.rolesData}
renderItem={item => <List.Item>{item}</List.Item>} renderItem={item => <List.Item>{item}</List.Item>}
/> />
</Panel> </TabPane>
<Panel header="Enrolled Devices" key="2"> <TabPane
tab={
<span>
<Icon type="appstore"/>
Enrolled Devices
</span>
}
key="2"
>
<UsersDevices user={this.state.user}/> <UsersDevices user={this.state.user}/>
</Panel> </TabPane>
</Collapse> </Tabs>
</Modal> </Modal>
</div> </div>
</div> </div>

Loading…
Cancel
Save