From 3c6ba111a9936b0c8547de5c79d9b0099eeb3e87 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Mon, 10 Jun 2019 19:54:41 +0530 Subject: [PATCH] create component to install app by users --- .../react-app/package.json | 1 + .../components/apps/release/ReleaseView.js | 44 +++++-- .../apps/release/install/AppInstallModal.js | 37 ++++++ .../apps/release/install/UserInstall.js | 115 ++++++++++++++++++ 4 files changed, 187 insertions(+), 10 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppInstallModal.js create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json index 388f4ef0fd..ac80be19a0 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json @@ -16,6 +16,7 @@ "d3": "^5.9.2", "dagre": "^0.8.4", "keymirror": "^0.1.1", + "lodash.debounce": "^4.0.8", "rc-viewer": "0.0.9", "react": "^16.8.4", "react-d3-graph": "^2.0.2", diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js index 823a9e075c..4731d1eb82 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js @@ -8,22 +8,30 @@ import Reviews from "./review/Reviews"; import AddReview from "./review/AddReview"; import axios from "axios"; import config from "../../../../public/conf/config.json"; +import AppInstallModal from "./install/AppInstallModal"; const {Title, Text, Paragraph} = Typography; class ReleaseView extends React.Component { - constructor(props){ + constructor(props) { super(props); this.state = { - loading: false + loading: false, + appInstallModalVisible: false } } - installApp = () =>{ + installApp = (type,payload) => { const {uuid} = this.props.release; - const payload = ["admin"]; - const request = "method=post&content-type=application/json&payload="+JSON.stringify(payload)+"&api-endpoint=/application-mgt-store/v1.0/subscription/install/"+uuid+"/user/install"; + const parameters = { + method: "post", + 'content-type': "application/json", + payload: JSON.stringify(payload), + 'api-endpoint': "/application-mgt-store/v1.0/subscription/install/" + uuid + "/"+type+"/install" + }; + + const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&'); this.setState({ loading: true, }); @@ -32,14 +40,15 @@ class ReleaseView extends React.Component { ).then(res => { if (res.status === 201) { this.setState({ - loading: false + loading: false, + appInstallModalVisible: false }); notification["success"]({ message: 'Done!', description: 'App installed successfully.', }); - }else{ + } else { this.setState({ loading: false }); @@ -50,10 +59,10 @@ class ReleaseView extends React.Component { }); } - }).catch((error) =>{ + }).catch((error) => { if (error.response.status === 401) { window.location.href = 'https://localhost:9443/store/login'; - } else{ + } else { this.setState({ loading: false, visible: false @@ -67,10 +76,24 @@ class ReleaseView extends React.Component { }); }; + showAppInstallModal = () => { + this.setState({ + appInstallModalVisible: true + }); + }; + + closeAppInstallModal = () => { + this.setState({ + appInstallModalVisible: false + }); + }; + render() { const release = this.props.release; return (
+
@@ -91,7 +114,8 @@ class ReleaseView extends React.Component {
- +
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppInstallModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppInstallModal.js new file mode 100644 index 0000000000..5b97f2568b --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppInstallModal.js @@ -0,0 +1,37 @@ +import React from "react"; +import {Button, Modal, Tabs} from "antd"; +import UserInstall from "./UserInstall"; + +const { TabPane } = Tabs; + +class AppInstallModal extends React.Component{ + render() { + return ( +
+ + + + + + + Tab 2 + + + Tab 3 + + + Tab 3 + + + +
+ ); + } +} + +export default AppInstallModal; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js new file mode 100644 index 0000000000..f8e90f1864 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js @@ -0,0 +1,115 @@ +import React from "react"; +import {Typography, Select, Spin, message, notification, Button} from "antd"; +import debounce from 'lodash.debounce'; +import axios from "axios"; +import config from "../../../../../public/conf/config.json"; + +const {Text} = Typography; +const {Option} = Select; + + +class UserInstall extends React.Component { + + constructor(props) { + super(props); + this.lastFetchId = 0; + this.fetchUser = debounce(this.fetchUser, 800); + } + + state = { + data: [], + value: [], + fetching: false, + }; + + fetchUser = value => { + console.log('fetching user', value); + this.lastFetchId += 1; + const fetchId = this.lastFetchId; + this.setState({data: [], fetching: true}); + + + const parameters = { + method: "get", + 'content-type': "application/json", + payload: "{}", + 'api-endpoint': "/device-mgt/v1.0/users/search?username=" + value + }; + + const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&'); + console.log(request); + axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request + ).then(res => { + if (res.status === 200) { + if (fetchId !== this.lastFetchId) { + // for fetch callback order + return; + } + + console.log(res.data.data); + + const data = res.data.data.users.map(user => ({ + text: user.username, + value: user.username, + })); + + this.setState({data, fetching: false}); + } + + }).catch((error) => { + if (error.response.hasOwnProperty(status) && error.response.status === 401) { + message.error('You are not logged in'); + window.location.href = 'https://localhost:9443/publisher/login'; + } else { + message.error('Something went wrong... :('); + } + + this.setState({fetching: false}); + }); + }; + + handleChange = value => { + this.setState({ + value, + data: [], + fetching: false, + }); + }; + + install = () =>{ + this.props.onInstall("user",this.state.data); + }; + + render() { + + const {fetching, data, value} = this.state; + + return ( +
+ Lorem ipsum dolor sit amet, ne tation labores quo, errem facilisis expetendis vel in. Ut choro + decore ubique sed, +

Select users

+ +
+ +
+
+ ); + } +} + +export default UserInstall; \ No newline at end of file