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

Add loading animation when installing/uninstall app in APPM store

Browse Source
merge-requests/340/head
Jayasanka Weerasinghe 5 years ago committed by Dharmakeerthi Lasantha
parent 41f53d06c6
commit 78bd339cd4
3 changed files with 44 additions and 38 deletions
Show Stats Download Patch File Download Diff File

5
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js vendored
Unescape View File

@ -17,7 +17,7 @@
*/ */
import React from "react"; import React from "react";
import {Divider, Row, Col, Typography, Button, Dropdown, notification, Menu, Icon} from "antd"; import {Divider, Row, Col, Typography, Button, Dropdown, notification, Menu, Icon, Spin} from "antd";
import "../../../App.css"; import "../../../App.css";
import ImgViewer from "../../apps/release/images/ImgViewer"; import ImgViewer from "../../apps/release/images/ImgViewer";
import StarRatings from "react-star-ratings"; import StarRatings from "react-star-ratings";
@ -126,17 +126,18 @@ class ReleaseView extends React.Component {
</Menu> </Menu>
); );
return ( return (
<div> <div>
<AppInstallModal <AppInstallModal
uuid={release.uuid} uuid={release.uuid}
loading={this.state.loading}
visible={this.state.appInstallModalVisible} visible={this.state.appInstallModalVisible}
deviceType={deviceType} deviceType={deviceType}
onClose={this.closeAppOperationModal} onClose={this.closeAppOperationModal}
onInstall={this.appOperation}/> onInstall={this.appOperation}/>
<AppUninstallModal <AppUninstallModal
uuid={release.uuid} uuid={release.uuid}
loading={this.state.loading}
visible={this.state.appUninstallModalVisible} visible={this.state.appUninstallModalVisible}
deviceType={deviceType} deviceType={deviceType}
onClose={this.closeAppOperationModal} onClose={this.closeAppOperationModal}

8
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppInstallModal.js vendored
Unescape View File

@ -17,7 +17,7 @@
*/ */
import React from "react"; import React from "react";
import {Modal, Tabs} from "antd"; import {Modal, Spin, Tabs} from "antd";
import UserInstall from "./UserInstall"; import UserInstall from "./UserInstall";
import GroupInstall from "./GroupInstall"; import GroupInstall from "./GroupInstall";
import RoleInstall from "./RoleInstall"; import RoleInstall from "./RoleInstall";
@ -29,6 +29,7 @@ class AppInstallModal extends React.Component{
state = { state = {
data: [] data: []
}; };
render() { render() {
const {deviceType} = this.props; const {deviceType} = this.props;
return ( return (
@ -37,8 +38,8 @@ class AppInstallModal extends React.Component{
title="Install App" title="Install App"
visible={this.props.visible} visible={this.props.visible}
onCancel={this.props.onClose} onCancel={this.props.onClose}
footer={null} footer={null}>
> <Spin spinning={this.props.loading}>
<Tabs defaultActiveKey="device"> <Tabs defaultActiveKey="device">
<TabPane tab="Device" key="device"> <TabPane tab="Device" key="device">
<DeviceInstall deviceType={deviceType} onInstall={this.props.onInstall}/> <DeviceInstall deviceType={deviceType} onInstall={this.props.onInstall}/>
@ -53,6 +54,7 @@ class AppInstallModal extends React.Component{
<GroupInstall onInstall={this.props.onInstall}/> <GroupInstall onInstall={this.props.onInstall}/>
</TabPane> </TabPane>
</Tabs> </Tabs>
</Spin>
</Modal> </Modal>
</div> </div>
); );

11
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppUninstallModal.js vendored
Unescape View File

@ -16,7 +16,7 @@
* under the License. * under the License.
*/ */
import React from "react"; import React from "react";
import {Modal, Tabs} from "antd"; import {Modal, Spin, Tabs} from "antd";
import DeviceUninstall from "./DeviceUninstall"; import DeviceUninstall from "./DeviceUninstall";
import UserUninstall from "./UserUninstall"; import UserUninstall from "./UserUninstall";
import RoleUninstall from "./RoleUninstall"; import RoleUninstall from "./RoleUninstall";
@ -28,6 +28,7 @@ class AppUninstallModal extends React.Component{
state = { state = {
data: [] data: []
}; };
render() { render() {
const {deviceType} = this.props; const {deviceType} = this.props;
return ( return (
@ -36,11 +37,12 @@ class AppUninstallModal extends React.Component{
title="Uninstall App" title="Uninstall App"
visible={this.props.visible} visible={this.props.visible}
onCancel={this.props.onClose} onCancel={this.props.onClose}
footer={null} footer={null}>
> <Spin spinning={this.props.loading}>
<Tabs defaultActiveKey="device"> <Tabs defaultActiveKey="device">
<TabPane tab="Device" key="device"> <TabPane tab="Device" key="device">
<DeviceUninstall deviceType={deviceType} onUninstall={this.props.onUninstall} uuid={this.props.uuid}/> <DeviceUninstall deviceType={deviceType} onUninstall={this.props.onUninstall}
uuid={this.props.uuid}/>
</TabPane> </TabPane>
<TabPane tab="User" key="user"> <TabPane tab="User" key="user">
<UserUninstall onUninstall={this.props.onUninstall} uuid={this.props.uuid}/> <UserUninstall onUninstall={this.props.onUninstall} uuid={this.props.uuid}/>
@ -52,6 +54,7 @@ class AppUninstallModal extends React.Component{
<GroupUninstall onUninstall={this.props.onUninstall} uuid={this.props.uuid}/> <GroupUninstall onUninstall={this.props.onUninstall} uuid={this.props.uuid}/>
</TabPane> </TabPane>
</Tabs> </Tabs>
</Spin>
</Modal> </Modal>
</div> </div>
); );

Write Preview
Loading…
Cancel
Save