|
|
@ -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}
|
|
|
|