Improve delete device UI

merge-requests/299/head
shamalka 5 years ago
parent b92046fa3d
commit 5ba56207c9

@ -17,67 +17,91 @@
*/
import React from "react";
import {Button, Icon, notification} from "antd";
import {Button, Tooltip, Popconfirm, Divider} from "antd";
class BulkActionBar extends React.Component {
constructor(props){
constructor(props) {
super(props);
this.state = {
selectedMultiple:false,
selectedSingle:false
selectedMultiple: false,
selectedSingle: false,
deleteable: true,
}
}
//This method is used to trigger delete request on selected devices
deleteDevice = () => {
const deviceStatusArray = this.props.selectedRows.map(obj => obj.enrolmentInfo.status);
if(deviceStatusArray.includes("ACTIVE") || deviceStatusArray.includes("INACTIVE")){
notification["error"]({
message: "There was a problem",
duration: 0,
description:
"Cannot delete ACTIVE/INACTIVE devices.",
});
}else{
this.props.deleteDevice();
onDeleteDeviceCall = () => {
let i;
for(i=0; i < this.props.selectedRows.length; i++){
if(this.props.selectedRows[i].enrolmentInfo.status != "REMOVED"){
this.setState({deletable:false});
break;
}
this.setState({deletable:true});
}
}
};
componentDidUpdate(prevProps, prevState, snapshot) {
if(prevProps.selectedRows !== this.props.selectedRows){
if(this.props.selectedRows.length > 1){
this.setState({selectedMultiple:true,selectedSingle:false})
}else if(this.props.selectedRows.length == 1){
this.setState({selectedSingle:true,selectedMultiple:true})
}else{
this.setState({selectedSingle:false,selectedMultiple:false})
}
onConfirmDelete = () => {
if (this.state.deletable) {
this.props.deleteDevice();
}
}
};
onConfirmDisenroll = () => {
//TODO: Implement disenrollment function
};
render() {
return(
<div style={{padding:'5px'}}>
<Button
type="normal"
icon="delete"
size={'default'}
onClick={this.deleteDevice}
style={
{display:this.state.selectedMultiple ? "inline" : "none"}
}>Delete
</Button>
const isSelected = this.props.selectedRows.length > 0;
const isSelectedSingle = this.props.selectedRows.length == 1;
return (
<div
style={{display: isSelected ? "inline" : "none", padding: '11px'}}>
<Tooltip
placement="bottom"
title={"Delete Device"}
autoAdjustOverflow={true}>
<Popconfirm
placement="topLeft"
title={
this.state.deletable ?
"Are you sure you want to delete?" : "You can only delete disenrolled devices"}
onConfirm={this.onConfirmDelete}
okText="Ok"
cancelText="Cancel">
<Button
type="normal"
icon="delete"
size={'default'}
style={
{display:this.state.selectedSingle ? "inline" : "none"}
}>Disenroll
</Button>
</div>
<Button
type="link"
shape="circle"
icon="delete"
size={'default'}
onClick={this.onDeleteDeviceCall}
disabled={isSelected ? false : true}
style={{margin: "2px"}}/>
</Popconfirm>
</Tooltip>
<Divider type="vertical"/>
<Tooltip placement="bottom" title={"Disenroll Device"}>
<Popconfirm
placement="topLeft"
title={"Are you sure?"}
onConfirm={this.onConfirmDisenroll}
okText="Ok"
disabled={isSelectedSingle ? false : true}
cancelText="Cancel">
<Button
type="link"
shape="circle"
icon="close"
size={'default'}
disabled={isSelectedSingle ? false : true}
style={{margin: "2px"}}/>
</Popconfirm>
</Tooltip>
</div>
)
}
}

@ -118,9 +118,9 @@ const columns = [
key: 'action',
render: () => (
<span>
<a><Icon type="edit" /></a>
<Divider type="vertical" />
<a><Text type="danger"><Icon type="delete" /></Text></a>
<a><Icon type="edit"/></a>
<Divider type="vertical"/>
<a><Text type="danger"><Icon type="delete"/></Text></a>
</span>
),
},
@ -135,7 +135,7 @@ const getTimeAgo = (time) => {
class DeviceTable extends React.Component {
constructor(props) {
super(props);
config = this.props.context;
config = this.props.context;
TimeAgo.addLocale(en);
this.state = {
data: [],
@ -173,7 +173,7 @@ class DeviceTable extends React.Component {
};
const encodedExtraParams = Object.keys(extraParams)
.map(key => key + '=' + extraParams[key]).join('&');
.map(key => key + '=' + extraParams[key]).join('&');
//send request to the invoker
axios.get(
@ -216,21 +216,14 @@ class DeviceTable extends React.Component {
//send request to the invoker
axios.put(
window.location.origin + config.serverConfig.invoker.uri +
config.serverConfig.invoker.deviceMgt +
"/admin/devices/permanent-delete",
deviceData,
{ headers : {'Content-Type': 'application/json'}}
window.location.origin + config.serverConfig.invoker.uri +
config.serverConfig.invoker.deviceMgt +
"/admin/devices/permanent-delete",
deviceData,
{headers: {'Content-Type': 'application/json'}}
).then(res => {
if (res.status === 200) {
this.fetch();
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) {
@ -239,16 +232,16 @@ class DeviceTable extends React.Component {
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 devices.",
});
message: "There was a problem",
duration: 0,
description:
"Error occurred while trying to delete devices.",
});
}
this.setState({loading: false});
});
}
};
handleTableChange = (pagination, filters, sorter) => {
const pager = {...this.state.pagination};
@ -270,24 +263,26 @@ class DeviceTable extends React.Component {
return (
<div>
<BulkActionBar
deleteDevice={this.deleteDevice}
selectedRows={this.state.selectedRows}/>
<Table
columns={columns}
rowKey={record => (record.deviceIdentifier + record.enrolmentInfo.owner + record.enrolmentInfo.ownership)}
dataSource={data}
pagination={{
...pagination,
size: "small",
// position: "top",
showTotal: (total, range) => `showing ${range[0]}-${range[1]} of ${total} devices`
// showQuickJumper: true
}}
loading={loading}
onChange={this.handleTableChange}
rowSelection={this.rowSelection}
scroll={{x: 1000}}
/>
deleteDevice={this.deleteDevice}
selectedRows={this.state.selectedRows}/>
<div>
<Table
columns={columns}
rowKey={record => (record.deviceIdentifier + record.enrolmentInfo.owner + record.enrolmentInfo.ownership)}
dataSource={data}
pagination={{
...pagination,
size: "small",
// position: "top",
showTotal: (total, range) => `showing ${range[0]}-${range[1]} of ${total} devices`
// showQuickJumper: true
}}
loading={loading}
onChange={this.handleTableChange}
rowSelection={this.rowSelection}
scroll={{x: 1000}}
/>
</div>
</div>
);
}

Loading…
Cancel
Save