Improve device delete UI

feature/appm-store/pbac
shamalka 5 years ago
parent b127c3015e
commit 795edd4c66

@ -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 {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider, Button} 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.
@ -140,7 +140,8 @@ class DeviceTable extends React.Component {
data: [], data: [],
pagination: {}, pagination: {},
loading: false, loading: false,
selectedRows: [] selectedRows: [],
deviceIds: []
}; };
} }
@ -149,7 +150,8 @@ class DeviceTable extends React.Component {
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
this.setState({ this.setState({
selectedRows: selectedRows selectedRows: selectedRows
}) });
this.state.deviceIds = selectedRows.map(obj => obj.deviceIdentifier);
} }
}; };
@ -157,6 +159,17 @@ class DeviceTable extends React.Component {
this.fetch(); this.fetch();
} }
componentDidUpdate(prevProps, prevState, snapshot) {
if(prevProps.deleteRequest !== this.props.deleteRequest){
this.deleteDevice();
}
if(prevProps.deselectRequest !== this.props.deselectRequest){
this.rowSelection.getCheckboxProps = record => ({
disabled: record.enrolmentInfo.status !== 'REMOVED' // Column configuration not to be checked
})
}
}
//fetch data from api //fetch data from api
fetch = (params = {}) => { fetch = (params = {}) => {
const config = this.props.context; const config = this.props.context;
@ -170,11 +183,13 @@ class DeviceTable extends React.Component {
requireDeviceInfo: true, requireDeviceInfo: true,
}; };
const encodedExtraParams = Object.keys(extraParams).map(key => key + '=' + extraParams[key]).join('&'); const encodedExtraParams = Object.keys(extraParams)
.map(key => key + '=' + extraParams[key]).join('&');
//send request to the invoker //send request to the invoker
axios.get( axios.get(
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt + window.location.origin + config.serverConfig.invoker.uri +
config.serverConfig.invoker.deviceMgt +
"/devices?" + encodedExtraParams, "/devices?" + encodedExtraParams,
).then(res => { ).then(res => {
if (res.status === 200) { if (res.status === 200) {
@ -204,6 +219,49 @@ class DeviceTable extends React.Component {
}); });
}; };
deleteDevice = () => {
const config = this.props.context;
this.setState({loading: true});
const deviceData = JSON.stringify(this.state.deviceIds);
//send request to the invoker
axios.delete(
window.location.origin + config.serverConfig.invoker.uri +
config.serverConfig.invoker.deviceMgt +
"/admin/devices/permanent-delete",
{
headers:{'Content-Type': 'application/json; charset=utf-8'} ,
data: deviceData
},
).then(res => {
if (res.status === 200) {
const pagination = {...this.state.pagination};
this.setState({
loading: false,
data: res.data.data.devices,
pagination,
});
}
}).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 devices.",
});
}
this.setState({loading: false});
});
}
handleTableChange = (pagination, filters, sorter) => { handleTableChange = (pagination, filters, sorter) => {
const pager = {...this.state.pagination}; const pager = {...this.state.pagination};
pager.current = pagination.current; pager.current = pagination.current;

@ -36,19 +36,24 @@ class DateRangePicker extends React.Component {
return( return(
<RangePicker <RangePicker
ranges={{ ranges={{
'Today': [moment(), moment()], 'Today': [
'Yesterday': [moment() moment(),
.subtract(1, 'days'), moment() moment()],
.subtract(1, 'days')], 'Yesterday': [
'Last 7 Days': [moment().subtract(6, 'days'), moment()], moment().subtract(1, 'days'),
'Last 30 Days': [moment().subtract(29, 'days'), moment()], moment().subtract(1, 'days')],
'This Month': [moment() 'Last 7 Days': [
.startOf('month'), moment() moment().subtract(6, 'days'),
.endOf('month')], moment()],
'Last Month': [moment().subtract(1, 'month') 'Last 30 Days': [
.startOf('month'), moment() moment().subtract(29, 'days'),
.subtract(1, 'month') moment()],
.endOf('month')] 'This Month': [
moment().startOf('month'),
moment().endOf('month')],
'Last Month': [
moment().subtract(1, 'month').startOf('month'),
moment().subtract(1, 'month').endOf('month')]
}} }}
format="YYYY-MM-DD" format="YYYY-MM-DD"
onChange={this.onChange} onChange={this.onChange}

@ -22,7 +22,7 @@ import {
Typography, Typography,
Breadcrumb, Breadcrumb,
Icon, Icon,
Card Button, Select
} from "antd"; } from "antd";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import DeviceTable from "../../../components/Devices/DevicesTable"; import DeviceTable from "../../../components/Devices/DevicesTable";
@ -35,7 +35,32 @@ class Devices extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.routes = props.routes; this.routes = props.routes;
this.state = {
deselectRequest:false,
deleteRequest:false,
deleteButtonDisabled:true,
displayDeleteButton:'none',
selected:"Actions"
}
this.deleteCall = this.deleteCall.bind(this);
this.cancelDelete = this.cancelDelete.bind(this);
}
//This method is used to trigger delete request on selected devices
deleteCall = () => {
this.setState({deleteRequest:!this.state.deleteRequest});
}
//This method is used to cancel deletion
cancelDelete = () => {
this.setState({displayDeleteButton:'none' , deleteRequest:false})
}
//When delete action is selected, this method is called and devices which aren't in REMOVED state becomes unselectable
onChange = value => {
this.setState(
{displayDeleteButton:'inline' , deselectRequest:!this.state.deselectRequest
});
} }
render() { render() {
@ -52,12 +77,53 @@ class Devices extends React.Component {
<h3>Devices</h3> <h3>Devices</h3>
<Paragraph>Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an <Paragraph>Lorem ipsum dolor sit amet, est similique constituto at, quot inermis id mel, an
illud incorrupte nam.</Paragraph> illud incorrupte nam.</Paragraph>
<div style={{paddingBottom:'5px'}}>
<table>
<tbody>
<tr>
<td>
<Select
value={this.state.selected}
showSearch
style={{ width: 100 }}
placeholder="Actions"
optionFilterProp="children"
onChange={this.onChange}
filterOption={(input, option) =>
option.props.children
.toLowerCase()
.indexOf(input.toLowerCase()) >= 0
}>
<Select.Option value="delete">Delete</Select.Option>
</Select>
</td>
<td>
<Button type="primary" icon="delete"
onClick={this.deleteCall}
style={{display:this.state.displayDeleteButton}}>
Delete Selected Devices
</Button>.
</td>
<td>
<Button type="danger"
onClick={this.cancelDelete}
style={{display:this.state.displayDeleteButton}}>
Cancel
</Button>
</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
<div style={{backgroundColor:"#ffffff", borderRadius: 5}}> <div style={{backgroundColor:"#ffffff", borderRadius: 5}}>
<DeviceTable/> <DeviceTable
deleteRequest={this.state.deleteRequest}
deselectRequest={this.state.deselectRequest}/>
</div> </div>
</PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
</div> </div>
</div> </div>
); );

Loading…
Cancel
Save