community/device-mgt-core
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-core.git synced 2025-10-06 02:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add tabs on user info modal

Browse Source
This commit is contained in:
shamalka 2019-10-23 17:18:33 +05:30
parent 7dc9fbb04b
commit 22cd3a09f1
8 changed files with 89 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/DeviceTypes/DeviceTypesTable.js vendored
View File

@ -18,7 +18,7 @@
import React from "react";
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'
// Load locale-specific relative date/time formatting rules.
@ -113,16 +113,27 @@ class DeviceTypesTable extends React.Component {
render() {
const {data, pagination, loading, selectedRows} = this.state;
const { Meta } = Card;
const itemCard = data.map((data) =>
<Col span={8} key={data.id}>
<Card hoverable title="Device Type" bordered={true}>
{data.name}
<Col span={5} key={data.id}>
<Card
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>
</Col>
);
return (
<div style={{ background: '#ECECEC', padding: '30px' }}>
<div style={{ background: '#ECECEC', padding: '20px' }}>
<Row gutter={16}>
{itemCard}
</Row>

45
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/DevicesTable.js vendored
View File

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

1
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/ReportDevicesTable.js vendored
View File

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

3
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js vendored
View File

@ -18,7 +18,7 @@
import React from "react";
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'
// Load locale-specific relative date/time formatting rules.
@ -164,7 +164,6 @@ class GroupsTable extends React.Component {
loading={loading}
onChange={this.handleTableChange}
rowSelection={this.rowSelection}
scroll={{x: 1000}}
/>
</div>
);

3
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/PoliciesTable.js vendored
View File

@ -18,7 +18,7 @@
import React from "react";
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'
// Load locale-specific relative date/time formatting rules.
@ -171,7 +171,6 @@ class PoliciesTable extends React.Component {
loading={loading}
onChange={this.handleTableChange}
rowSelection={this.rowSelection}
scroll={{x: 1000}}
/>
</div>
);

22
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js vendored
View File

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

1
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersDevices.js vendored
View File

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

34
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js vendored
View File

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