community
/
device-mgt-core
12
0
Fork 43
Code Issues Pull Requests 21 Packages Projects Releases Wiki Activity

Improve delete device UI

Browse Source
merge-requests/299/head
shamalka 5 years ago
parent b92046fa3d
commit 5ba56207c9
2 changed files with 106 additions and 87 deletions
Show Stats Download Patch File Download Diff File

116
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js vendored
Unescape View File

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

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

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

Write Preview
Loading…
Cancel
Save