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 schedule install/ uninstall component's UI in APPM store

Browse Source
This commit is contained in:
Jayasanka 2019-10-09 17:22:34 +05:30
parent b21de79151
commit 6d16259aaf
3 changed files with 87 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,10 @@ class ReleaseView extends React.Component {
} }
} }
componentDidMount() {
console.log("mounted: Release view");
}
render() { render() {
const {app, release} = this.props; const {app, release} = this.props;
const config = this.props.context; const config = this.props.context;

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

@ -17,7 +17,7 @@
*/ */
import React from "react"; import React from "react";
import {Divider, Row, Col, Typography, Button, Rate, notification} from "antd"; import {Divider, Row, Col, Typography, Button, Dropdown, notification, Menu, Icon} 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";
@ -89,13 +89,6 @@ class ReleaseView extends React.Component {
}); });
}; };
showAppInstallModal = () => {
this.setState({
appInstallModalVisible: true
});
};
closeAppOperationModal = () => { closeAppOperationModal = () => {
this.setState({ this.setState({
appInstallModalVisible: false, appInstallModalVisible: false,
@ -103,10 +96,16 @@ class ReleaseView extends React.Component {
}); });
}; };
showAppUninstallModal = () => { handleSubscribeClick = (e) => {
if (e.key === "install") {
this.setState({ this.setState({
appUninstallModalVisible: true appInstallModalVisible: true // display app install modal
}); })
} else if (e.key === "uninstall") {
this.setState({
appUninstallModalVisible: true // display app uninstall modal
})
}
}; };
render() { render() {
@ -119,6 +118,13 @@ class ReleaseView extends React.Component {
} catch (e) { } catch (e) {
} }
const menu = (
<Menu onClick={this.handleSubscribeClick}>
<Menu.Item key="install">Install</Menu.Item>
<Menu.Item key="uninstall">Uninstall</Menu.Item>
</Menu>
);
return ( return (
<div> <div>
@ -152,17 +158,14 @@ class ReleaseView extends React.Component {
/> />
</Col> </Col>
<Col xl={8} md={10} sm={24} xs={24} style={{float: "right"}}> <Col xl={8} md={10} sm={24} xs={24} style={{float: "right"}}>
<div> <div style={{
<Button.Group style={{float: "right"}}> textAlign: "right"
<Button onClick={this.showAppInstallModal} loading={this.state.loading} }}>
htmlType="button" type="primary" icon="download">Install</Button> <Dropdown overlay={menu}>
</Button.Group> <Button type="primary">
</div> Subscribe <Icon type="down"/>
<div> </Button>
<Button.Group style={{float: "right",marginRight:'3%'}}> </Dropdown>
<Button onClick={this.showAppUninstallModal} loading={this.state.loading}
htmlType="button" type="primary" icon="delete">UnInstall</Button>
</Button.Group>
</div> </div>
</Col> </Col>
</Row> </Row>

55
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/installModalFooter/InstallModalFooter.js vendored
View File

@ -17,7 +17,7 @@
*/ */
import React from "react"; import React from "react";
import {Button, DatePicker} from "antd"; import {Button, DatePicker, Checkbox} from "antd";
class InstallModalFooter extends React.Component { class InstallModalFooter extends React.Component {
constructor(props) { constructor(props) {
@ -34,24 +34,19 @@ class InstallModalFooter extends React.Component{
}); });
}; };
showScheduledInstall = ()=>{ toggleScheduledInstall = () => {
this.setState({ this.setState({
isScheduledInstallVisible: true isScheduledInstallVisible: !this.state.isScheduledInstallVisible
})
};
hideScheduledInstall = ()=>{
this.setState({
isScheduledInstallVisible: false
}) })
}; };
triggerInstallOperation = () => { triggerInstallOperation = () => {
this.props.operation(); const {scheduledTime, isScheduledInstallVisible} = this.state;
}; if (isScheduledInstallVisible && scheduledTime != null) {
triggerScheduledInstallOperation = () =>{
const {scheduledTime} =this.state;
this.props.operation(scheduledTime); this.props.operation(scheduledTime);
} else {
this.props.operation();
}
}; };
render() { render() {
@ -60,38 +55,30 @@ class InstallModalFooter extends React.Component{
return ( return (
<div> <div>
<div style={{ <div style={{
textAlign: "right", textAlign: "right"
display: (!isScheduledInstallVisible)?'block':'none'
}}> }}>
<Button style={{margin: 5}} disabled={disabled} htmlType="button" type="primary" <div style={{margin: 8}}>
onClick={this.triggerInstallOperation}> <Checkbox checked={this.state.isScheduledInstallVisible} onChange={this.toggleScheduledInstall}>
{type} Schedule {type}
</Button> </Checkbox>
<Button style={{margin: 5}} disabled={disabled} htmlType="button"
onClick={this.showScheduledInstall}>
Scheduled {type}
</Button>
</div> </div>
<div style={{ <span style={{
textAlign: "right", display: (isScheduledInstallVisible) ? 'inline' : 'none'
display: (isScheduledInstallVisible)?'block':'none'
}}> }}>
<DatePicker showTime <DatePicker showTime
placeholder="Select Time" placeholder="Select Time"
format="YYYY-MM-DDTHH:mm" format="YYYY-MM-DDTHH:mm"
onChange={this.onDateTimeChange}/> onChange={this.onDateTimeChange}/>
<Button disabled={scheduledTime == null} </span>
style={{margin: 5}} <Button style={{margin: 5}}
disabled={disabled || (isScheduledInstallVisible && scheduledTime == null)}
htmlType="button" htmlType="button"
type="primary" type="primary"
onClick={this.triggerScheduledInstallOperation}> onClick={this.triggerInstallOperation}>
Schedule {type}
</Button>
<Button style={{margin: 5}} htmlType="button"
onClick={this.hideScheduledInstall}>
Cancel
</Button> </Button>
</div> </div>
</div> </div>
); );
} }