Modify the uninstall UI of the APPM store

feature/appm-store/pbac
nipun 5 years ago
parent 7323ea0271
commit 2103e0ea48

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

@ -32,26 +32,22 @@ class Dashboard extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
routes: props.routes routes: props.routes,
visible: false,
collapsed: false
}; };
const config = this.props.context; const config = this.props.context;
this.Logo = config.theme.logo; this.Logo = config.theme.logo;
} }
//functions for show the drawer showMobileNavigationBar = () => {
state = {
visible: false,
collapsed: false
};
showDrawer = () => {
this.setState({ this.setState({
visible: true, visible: true,
collapsed: !this.state.collapsed collapsed: !this.state.collapsed
}); });
}; };
onClose = () => { onCloseMobileNavigationBar = () => {
this.setState({ this.setState({
visible: false, visible: false,
}); });
@ -113,7 +109,7 @@ class Dashboard extends React.Component {
<Layout className="mobile-layout"> <Layout className="mobile-layout">
<div className="mobile-menu-button"> <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"/> <Icon type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'} className="bar-icon"/>
</Button> </Button>
</div> </div>
@ -122,7 +118,7 @@ class Dashboard extends React.Component {
width={"60%"}/></Link>} width={"60%"}/></Link>}
placement="left" placement="left"
closable={false} closable={false}
onClose={this.onClose} onClose={this.onCloseMobileNavigationBar}
visible={this.state.visible} visible={this.state.visible}
getContainer={false} getContainer={false}
style={{position: 'absolute'}} 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 config = this.props.context;
const release = this.props.app.applicationReleases[0]; const release = this.props.app.applicationReleases[0];
const {uuid} = release; const {uuid} = release;
@ -50,7 +50,7 @@ class ReleaseView extends React.Component {
this.setState({ this.setState({
loading: true, 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( axios.post(
url, url,
payload, payload,
@ -66,7 +66,7 @@ class ReleaseView extends React.Component {
notification["success"]({ notification["success"]({
message: 'Done!', message: 'Done!',
description: description:
'App installed triggered.', 'App '+operation+'ed triggered.',
}); });
} else { } else {
this.setState({ this.setState({
@ -76,11 +76,11 @@ class ReleaseView extends React.Component {
message: "There was a problem", message: "There was a problem",
duration: 0, duration: 0,
description: description:
"Error occurred while installing app", "Error occurred while "+operation+"ing app",
}); });
} }
}).catch((error) => { }).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 appInstallModalVisible: true
}); });
}; };
closeAppInstallModal = () => {
closeAppOperationModal = () => {
this.setState({ this.setState({
appInstallModalVisible: false, appInstallModalVisible: false,
appUninstallModalVisible: false appUninstallModalVisible: false
@ -112,14 +113,14 @@ class ReleaseView extends React.Component {
uuid={release.uuid} uuid={release.uuid}
visible={this.state.appInstallModalVisible} visible={this.state.appInstallModalVisible}
deviceType = {deviceType} deviceType = {deviceType}
onClose={this.closeAppInstallModal} onClose={this.closeAppOperationModal}
onInstall={this.installApp}/> onInstall={this.appOperation}/>
<AppUninstallModal <AppUninstallModal
uuid={release.uuid} uuid={release.uuid}
visible={this.state.appUninstallModalVisible} visible={this.state.appUninstallModalVisible}
deviceType = {deviceType} deviceType = {deviceType}
onClose={this.closeAppInstallModal} onClose={this.closeAppOperationModal}
onInstall={this.installApp}/> onUninstall={this.appOperation}/>
<div className="release"> <div className="release">
<Row> <Row>
<Col xl={4} sm={6} xs={8} className="release-icon"> <Col xl={4} sm={6} xs={8} className="release-icon">

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

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

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

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

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

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

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

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

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

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

Loading…
Cancel
Save