Modify the uninstall UI of the APPM store

4.x.x
nipun 5 years ago
parent e4311d4e3a
commit d363194356

@ -58,7 +58,7 @@
}
.mobile-menu-button{
margin-top: 4%;
margin-top: 15px;
}
Header{
@ -68,7 +68,7 @@
}
.dashboard-body{
margin-top: 14%;
margin-top: 50px;
}
.logo-image {
@ -80,7 +80,7 @@
@media screen and (max-height: 350px) {
.mobile-menu-button{
margin-top: 2%;
margin-top: 15px;
}
.dashboard-body{
margin-top: 9%;

@ -32,26 +32,22 @@ class Dashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
routes: props.routes
routes: props.routes,
visible: false,
collapsed: false
};
const config = this.props.context;
this.Logo = config.theme.logo;
}
//functions for show the drawer
state = {
visible: false,
collapsed: false
};
showDrawer = () => {
showMobileNavigationBar = () => {
this.setState({
visible: true,
collapsed: !this.state.collapsed
});
};
onClose = () => {
onCloseMobileNavigationBar = () => {
this.setState({
visible: false,
});
@ -113,7 +109,7 @@ class Dashboard extends React.Component {
<Layout className="mobile-layout">
<div className="mobile-menu-button">
<Button type="link" onClick={this.showDrawer}>
<Button type="link" onClick={this.showMobileNavigationBar}>
<Icon type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'} className="bar-icon"/>
</Button>
</div>
@ -122,7 +118,7 @@ class Dashboard extends React.Component {
width={"60%"}/></Link>}
placement="left"
closable={false}
onClose={this.onClose}
onClose={this.onCloseMobileNavigationBar}
visible={this.state.visible}
getContainer={false}
style={{position: 'absolute'}}

@ -42,7 +42,7 @@ class ReleaseView extends React.Component {
}
}
installApp = (type, payload) => {
appOperation = (type, payload, operation) => {
const config = this.props.context;
const release = this.props.app.applicationReleases[0];
const {uuid} = release;
@ -50,7 +50,7 @@ class ReleaseView extends React.Component {
this.setState({
loading: true,
});
const url = window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/subscription/" + uuid + "/" + type + "/install";
const url = window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/subscription/" + uuid + "/" + type + "/" + operation;
axios.post(
url,
payload,
@ -66,7 +66,7 @@ class ReleaseView extends React.Component {
notification["success"]({
message: 'Done!',
description:
'App installed triggered.',
'App '+operation+'ed triggered.',
});
} else {
this.setState({
@ -76,11 +76,11 @@ class ReleaseView extends React.Component {
message: "There was a problem",
duration: 0,
description:
"Error occurred while installing app",
"Error occurred while "+operation+"ing app",
});
}
}).catch((error) => {
handleApiError(error,"Error occurred while installing the app.");
handleApiError(error,"Error occurred while "+operation+"ing the app.");
});
};
@ -90,7 +90,8 @@ class ReleaseView extends React.Component {
appInstallModalVisible: true
});
};
closeAppInstallModal = () => {
closeAppOperationModal = () => {
this.setState({
appInstallModalVisible: false,
appUninstallModalVisible: false
@ -112,14 +113,14 @@ class ReleaseView extends React.Component {
uuid={release.uuid}
visible={this.state.appInstallModalVisible}
deviceType = {deviceType}
onClose={this.closeAppInstallModal}
onInstall={this.installApp}/>
onClose={this.closeAppOperationModal}
onInstall={this.appOperation}/>
<AppUninstallModal
uuid={release.uuid}
visible={this.state.appUninstallModalVisible}
deviceType = {deviceType}
onClose={this.closeAppInstallModal}
onInstall={this.installApp}/>
onClose={this.closeAppOperationModal}
onUninstall={this.appOperation}/>
<div className="release">
<Row>
<Col xl={4} sm={6} xs={8} className="release-icon">

@ -196,7 +196,7 @@ class DeviceInstall extends React.Component {
type: device.type
});
});
this.props.onInstall("devices", payload);
this.props.onInstall("devices", payload, "install");
};
render() {

@ -192,7 +192,7 @@ class DeviceUninstall extends React.Component {
type: device.type
});
});
this.props.onUninstall("devices", payload);
this.props.onUninstall("devices", payload, "uninstall");
};
render() {

@ -85,7 +85,7 @@ class GroupInstall extends React.Component {
value.map(val=>{
data.push(val.key);
});
this.props.onInstall("group",data);
this.props.onInstall("group", data, "install");
};
render() {

@ -87,7 +87,7 @@ class GroupUninstall extends React.Component {
value.map(val=>{
data.push(val.key);
});
this.props.onInstall("group",data);
this.props.onInstall("group", data, "uninstall");
};
render() {

@ -85,7 +85,7 @@ class RoleInstall extends React.Component {
value.map(val=>{
data.push(val.key);
});
this.props.onInstall("role",data);
this.props.onInstall("role", data, "install");
};
render() {

@ -86,7 +86,7 @@ class RoleUninstall extends React.Component {
value.map(val=>{
data.push(val.key);
});
this.props.onInstall("role",data);
this.props.onInstall("role", data, "uninstall");
};
render() {

@ -87,7 +87,7 @@ class UserInstall extends React.Component {
value.map(val => {
data.push(val.key);
});
this.props.onInstall("user", data);
this.props.onInstall("user", data, "install");
};
render() {

@ -86,7 +86,7 @@ class UserUninstall extends React.Component {
value.map(val => {
data.push(val.key);
});
this.props.onUninstall("user", data);
this.props.onUninstall("user", data, "uninstall");
};
render() {

@ -58,7 +58,7 @@
}
.mobile-menu-button {
margin-top: 4%;
margin-top: 15px;
}
Header{
@ -68,7 +68,7 @@
}
.dashboard-body{
margin-top: 15%;
margin-top: 50px;
}
.logo-image {
@ -80,7 +80,7 @@
@media only screen and (max-height: 350px) {
.mobile-menu-button{
margin-top: 2%;
margin-top: 15px;
}
.dashboard-body{

@ -36,7 +36,9 @@ class Dashboard extends React.Component {
this.state = {
routes: props.routes,
selectedKeys: [],
deviceTypes: []
deviceTypes: [],
visible: false,
collapsed: false
};
this.logo = this.props.context.theme.logo;
}
@ -72,20 +74,14 @@ class Dashboard extends React.Component {
})
};
//functions for show the drawer
state = {
visible: false,
collapsed: false
};
showDrawer = () => {
showMobileNavigationBar = () => {
this.setState({
visible: true,
collapsed: !this.state.collapsed,
});
};
onClose = () => {
onCloseMobileNavigationBar = () => {
this.setState({
visible: false,
});
@ -153,7 +149,7 @@ class Dashboard extends React.Component {
<Layout className="mobile-layout">
<div className="mobile-menu-button">
<Button type="link" onClick={this.showDrawer}>
<Button type="link" onClick={this.showMobileNavigationBar}>
<Icon type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'} className="bar-icon"/>
</Button>
</div>
@ -163,7 +159,7 @@ class Dashboard extends React.Component {
</Link>}
placement="left"
closable={false}
onClose={this.onClose}
onClose={this.onCloseMobileNavigationBar}
visible={this.state.visible}
getContainer={false}
style={{position: 'absolute'}}

Loading…
Cancel
Save