community/device-mgt-core
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-core.git synced 2025-10-06 02:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve delete device UI

Browse Source
This commit is contained in:
shamalka 2019-10-09 17:22:51 +05:30
parent b92046fa3d
commit 5ba56207c9
2 changed files with 106 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js vendored
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{ };
onConfirmDelete = () => {
if (this.state.deletable) {
this.props.deleteDevice(); this.props.deleteDevice();
} }
} };
componentDidUpdate(prevProps, prevState, snapshot) { onConfirmDisenroll = () => {
if(prevProps.selectedRows !== this.props.selectedRows){ //TODO: Implement disenrollment function
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})
}
}
}
render() { render() {
return( const isSelected = this.props.selectedRows.length > 0;
<div style={{padding:'5px'}}> const isSelectedSingle = this.props.selectedRows.length == 1;
<Button
type="normal"
icon="delete"
size={'default'}
onClick={this.deleteDevice}
style={
{display:this.state.selectedMultiple ? "inline" : "none"}
}>Delete
</Button>
<Button return (
type="normal" <div
icon="delete" style={{display: isSelected ? "inline" : "none", padding: '11px'}}>
size={'default'}
style={ <Tooltip
{display:this.state.selectedSingle ? "inline" : "none"} placement="bottom"
}>Disenroll title={"Delete Device"}
</Button> autoAdjustOverflow={true}>
</div> <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="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>
) )
} }
} }

77
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/DevicesTable.js vendored
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>
); );
} }