From fc26e299a1bd8dcd67e3a881159b8edc5a1c0b66 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Wed, 26 Jun 2019 12:49:55 +0530 Subject: [PATCH] Completed add release functionality in APPM UI --- .../apps/list-apps/AppDetailsDrawer.js | 7 +- .../components/apps/list-apps/AppsTable.js | 6 +- .../src/components/new-app/AddNewAppForm.js | 2 +- .../components/new-release/AddReleaseForm.js | 309 ++++++++++++++++++ .../react-app/src/index.js | 6 + .../add-new-release/AddNewRelease.js | 50 +++ 6 files changed, 372 insertions(+), 8 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-release/AddNewRelease.js diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer.js index 8663806eb0..b53fc9812a 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer.js @@ -1,7 +1,8 @@ import React from 'react'; -import {Drawer, Row, Col, Typography, Divider, Tag, Avatar, List} from 'antd'; +import {Drawer, Row, Col, Typography, Divider, Tag, Avatar, List, Button, Icon} from 'antd'; import "../../../App.css"; import DetailedRating from "../detailed-rating/DetailedRating"; +import {Link} from "react-router-dom"; const {Text, Title, Paragraph} = Typography; @@ -64,7 +65,9 @@ class AppDetailsDrawer extends React.Component { })} - Releases + Releases + {/*display add new release only if app type is enterprise*/} + {(app.type ==="ENTERPRISE") && ()}
this.setState({icons: fileList}); - handleBinaryFileChange = ({fileList}) => this.setState({icons: fileList}); + handleBinaryFileChange = ({fileList}) => this.setState({binaryFiles: fileList}); handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList}); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js new file mode 100644 index 0000000000..35ac487e60 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js @@ -0,0 +1,309 @@ +import React from "react"; +import "antd/dist/antd.css"; +import { + Card, + Button, + message, + Row, + Col, + Input, + Icon, + Select, + Switch, + Form, + Upload, + Divider, + notification, + Spin +} from "antd"; +import axios from "axios"; +import {withRouter} from 'react-router-dom' +import config from "../../../public/conf/config.json"; + +const {Option} = Select; +const {TextArea} = Input; +const InputGroup = Input.Group; + +const formItemLayout = { + labelCol: { + span: 8, + }, + wrapperCol: { + span: 16, + }, +}; + +class AddNewReleaseFormComponent extends React.Component { + + constructor(props) { + super(props); + this.state = { + current: 0, + categories: [], + tags: [], + icons: [], + screenshots: [], + loading: false, + binaryFiles: [] + }; + } + + componentDidMount() { + + } + + handleSubmit = e => { + e.preventDefault(); + const {appId} = this.props; + + this.props.form.validateFields((err, values) => { + if (!err) { + this.setState({ + loading: true + }); + const {price, isSharedWithAllTenants, icon, screenshots, releaseDescription, releaseType, binaryFile} = values; + + + const data = new FormData(); + + //add release data + const release = { + description: releaseDescription, + price: (price === undefined) ? 0 : parseInt(price), + isSharedWithAllTenants, + metaData: "string", + releaseType: releaseType, + supportedOsVersions: "4.0-10.0" + }; + + data.append('binaryFile', binaryFile[0].originFileObj); + data.append('icon', icon[0].originFileObj); + data.append('screenshot1', screenshots[0].originFileObj); + data.append('screenshot2', screenshots[1].originFileObj); + data.append('screenshot3', screenshots[2].originFileObj); + + const json = JSON.stringify(release); + const blob = new Blob([json], { + type: 'application/json' + }); + + data.append("applicationRelease", blob); + + const url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/ent-app/" + appId; + + axios.post( + url, + data, + { + headers: { + 'X-Platform': config.serverConfig.platform + }, + } + ).then(res => { + if (res.status === 201) { + this.setState({ + loading: false, + }); + + notification["success"]({ + message: "Done!", + description: + "New release was added successfully", + }); + + console.log(res); + + const uuid = res.data.data.uuid; + + this.props.history.push('/publisher/apps/releases/'+uuid); + } + + }).catch((error) => { + console.log(error); + if (error.hasOwnProperty("response") && error.response.status === 401) { + window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login'; + } else { + notification["error"]({ + message: "Something went wrong!", + description: + "Sorry, we were unable to complete your request.", + }); + + } + this.setState({ + loading: false + }); + console.log(error); + }); + } + }); + }; + + normFile = e => { + console.log('Upload event:', e); + if (Array.isArray(e)) { + return e; + } + return e && e.fileList; + }; + + handleIconChange = ({fileList}) => this.setState({icons: fileList}); + handleBinaryFileChange = ({fileList}) => this.setState({binaryFiles: fileList}); + + handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList}); + + render() { + const {categories, tags, icons, screenshots, loading, binaryFiles} = this.state; + const {getFieldDecorator} = this.props.form; + const {formConfig} = this.props; + return ( +
+ + + + +
+ + + + {getFieldDecorator('binaryFile', { + valuePropName: 'binaryFile', + getValueFromEvent: this.normFile, + required: true, + message: 'Please select application' + })( + false} + > + {binaryFiles.length !== 1 && ( + + )} + , + )} + + + + {getFieldDecorator('icon', { + valuePropName: 'icon', + getValueFromEvent: this.normFile, + required: true, + message: 'Please select a icon' + })( + false} + > + {icons.length !== 1 && ( + + )} + , + )} + + + + + + + + + + {getFieldDecorator('screenshots', { + valuePropName: 'icon', + getValueFromEvent: this.normFile, + required: true, + message: 'Please select a icon' + })( + false} + multiple + > + + {screenshots.length < 3 && ( + + )} + + + , + )} + + + + {getFieldDecorator('releaseType', { + rules: [{ + required: true, + message: 'Please input the Release Type' + }], + })( + + )} + + + + {getFieldDecorator('releaseDescription', { + rules: [{ + required: true, + message: 'Please enter a description for release' + }], + })( +