From 5ba56207c995a7d78d728397ee822946b0b62e14 Mon Sep 17 00:00:00 2001 From: shamalka Date: Wed, 9 Oct 2019 17:22:51 +0530 Subject: [PATCH] Improve delete device UI --- .../src/components/Devices/BulkActionBar.js | 116 +++++++++++------- .../src/components/Devices/DevicesTable.js | 77 ++++++------ 2 files changed, 106 insertions(+), 87 deletions(-) diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js index 4964d4d9cb..b8076683da 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/BulkActionBar.js @@ -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( -
- + const isSelected = this.props.selectedRows.length > 0; + const isSelectedSingle = this.props.selectedRows.length == 1; + + return ( +
+ + + - -
+
) } } diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/DevicesTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/DevicesTable.js index 7a096a2147..ae14f450f2 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/DevicesTable.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/DevicesTable.js @@ -118,9 +118,9 @@ const columns = [ key: 'action', render: () => ( - - - + + + ), }, @@ -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 (
- (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}/> +
+
(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}} + /> + ); }