Improve delete device UI

feature/appm-store/pbac
shamalka 5 years ago
parent b92046fa3d
commit 5ba56207c9

@ -17,66 +17,90 @@
*/
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'}}>
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"
type="link"
shape="circle"
icon="delete"
size={'default'}
onClick={this.deleteDevice}
style={
{display:this.state.selectedMultiple ? "inline" : "none"}
}>Delete
</Button>
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="normal"
icon="delete"
type="link"
shape="circle"
icon="close"
size={'default'}
style={
{display:this.state.selectedSingle ? "inline" : "none"}
}>Disenroll
</Button>
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>
),
},
@ -220,17 +220,10 @@ class DeviceTable extends React.Component {
config.serverConfig.invoker.deviceMgt +
"/admin/devices/permanent-delete",
deviceData,
{ headers : {'Content-Type': 'application/json'}}
{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) {
@ -248,7 +241,7 @@ class DeviceTable extends React.Component {
this.setState({loading: false});
});
}
};
handleTableChange = (pagination, filters, sorter) => {
const pager = {...this.state.pagination};
@ -272,6 +265,7 @@ class DeviceTable extends React.Component {
<BulkActionBar
deleteDevice={this.deleteDevice}
selectedRows={this.state.selectedRows}/>
<div>
<Table
columns={columns}
rowKey={record => (record.deviceIdentifier + record.enrolmentInfo.owner + record.enrolmentInfo.ownership)}
@ -289,6 +283,7 @@ class DeviceTable extends React.Component {
scroll={{x: 1000}}
/>
</div>
</div>
);
}
}

Loading…
Cancel
Save