diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js index 2496c2f569..7f99ddc4fd 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js @@ -1,72 +1,35 @@ import React from "react"; import "antd/dist/antd.css"; import { - PageHeader, - Typography, Card, - Steps, Button, message, Row, Col, - Tag, - Tooltip, Input, Icon, Select, Switch, Form, Upload, - Divider, notification + Divider, + notification, + Spin } from "antd"; -import IconImage from "./IconImg"; -import UploadScreenshots from "./UploadScreenshots"; import axios from "axios"; +import {withRouter} from 'react-router-dom' import config from "../../../public/conf/config.json"; -const Paragraph = Typography; -const Dragger = Upload.Dragger; - -const props = { - name: 'file', - multiple: false, - action: '//jsonplaceholder.typicode.com/posts/', - onChange(info) { - const status = info.file.status; - if (status !== 'uploading') { - console.log(info.file, info.fileList); - } - if (status === 'done') { - message.success(`${info.file.name} file uploaded successfully.`); - } else if (status === 'error') { - message.error(`${info.file.name} file upload failed.`); - } - }, -}; - -// -// const steps = [{ -// title: 'First', -// content: Step1 -// }, { -// title: 'Second', -// content: Step2, -// }, { -// title: 'Last', -// content: Step3, -// }]; - - const {Option} = Select; const {TextArea} = Input; const InputGroup = Input.Group; const formItemLayout = { labelCol: { - span: 4, + span: 5, }, wrapperCol: { - span: 20, + span: 19, }, }; @@ -79,7 +42,9 @@ class AddNewAppFormComponent extends React.Component { categories: [], tags: [], icons: [], - screenshots: [] + screenshots: [], + loading: false, + binaryFiles: [] }; } @@ -148,144 +113,123 @@ class AddNewAppFormComponent extends React.Component { handleSubmit = e => { e.preventDefault(); + const {formConfig} = this.props; + const {specificElements} = formConfig; + this.props.form.validateFields((err, values) => { if (!err) { - const {name, description, appCategories, tags, deviceType, price, isSharedWithAllTenants, binaryFile, icon, screenshots} = values; - const payload = { - binaryFile: binaryFile[0].originFileObj, - icon: icon[0].originFileObj, - screenshot1: screenshots[0].originFileObj, - screenshot2: screenshots[1].originFileObj, - screenshot3: screenshots[2].originFileObj, - application: { - name, - description, - appCategories, - subType: (price === undefined || parseInt(price) === 0) ? "FREE" : "PAID", - tags, - unrestrictedRoles: [], - deviceType, - entAppReleaseWrappers: [{ - description, - price: (price === undefined) ? 0 : parseInt(price), - isSharedWithAllTenants, - metaData: "string", - supportedOsVersions: "4.0-10.0" - }] - } + this.setState({ + loading: true + }); + const {name, description, appCategories, tags, price, isSharedWithAllTenants, binaryFile, icon, screenshots, releaseDescription} = values; + const application = { + name, + description, + appCategories, + subType: (price === undefined || parseInt(price) === 0) ? "FREE" : "PAID", + tags, + unrestrictedRoles: [], + // deviceType, + // entAppReleaseWrappers: [{ + // description, + // price: (price === undefined) ? 0 : parseInt(price), + // isSharedWithAllTenants, + // metaData: "string", + // supportedOsVersions: "4.0-10.0" + // }] + }; + + const data = new FormData(); + + if (formConfig.deviceType === "WEB_CLIP") { + application.deviceType = "ALL"; + } else { + application.deviceType = values.deviceType; + } + + if (specificElements.hasOwnProperty("binaryFile")) { + data.append('binaryFile', binaryFile[0].originFileObj); + } + + //add release data + const release = { + description: releaseDescription, + price: (price === undefined) ? 0 : parseInt(price), + isSharedWithAllTenants, + metaData: "string", + supportedOsVersions: "4.0-10.0" }; - console.log(payload); - - // let data = new FormData(); - // - // const url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/ent-app"; - // - // 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); - // data.append('application', JSON.toString(payload.application)); - - // let request = new XMLHttpRequest(); - // request.open('POST', url); - // request.send(data); - - - // var xhr = new XMLHttpRequest(); - // // xhr.withCredentials = true; - // - // xhr.addEventListener("readystatechange", function () { - // if (this.readyState === 4) { - // console.log(this.responseText); - // } - // }); - // - // xhr.open("POST", "https://localhost:9443/ui-request-handler/invoke/application-mgt-publisher/v1.0/applications/ent-app"); - // xhr.open("GET", "https://localhost:9443/ui-request-handler/invoke/application-mgt-publisher/v1.0/applications/tags"); - - // xhr.setRequestHeader("Content-Type", "multipart/mixed"); - // xhr.setRequestHeader("X-Platform", "publisher"); - // - - // // xhr.setRequestHeader("Accept", "*/*"); - // - // xhr.send(data); - - // xhr.send(); - - // const options = {method: 'POST', body: data}; - // - // fetch(url, options).then(function (response) { - // console.log(response); - // }); - - - // axios.post( - // url, - // data, - // { - // headers:{ - // 'X-Platform': config.serverConfig.platform, - // 'Content-Type': 'multipart/mixed', - // 'content-type': 'multipart/form-data' - // }, - // 'Content-Type': 'multipart/mixed', - // 'content-type': 'multipart/form-data' - // } - // ).then(res => { - // if (res.status === 201) { - // this.setState({ - // loading: false, - // }); - // - // notification["success"]({ - // message: "Done!", - // description: - // "New app was added successfully", - // }); - // } - // - // }).catch((error) => { - // if (error.response.status === 401) { - // window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login'; - // } else { - // message.warning('Something went wrong'); - // - // } - // this.setState({ - // loading: false - // }); - // }); - - - - let data = new FormData(); - data.append('binaryFile', binaryFile[0].originFileObj); + if (specificElements.hasOwnProperty("version")) { + release.version = values.version; + } + if (specificElements.hasOwnProperty("url")) { + release.url = values.url; + } + if (specificElements.hasOwnProperty("packageName")) { + release.packageName = values.packageName; + } + + //add release wrapper + application[formConfig.releaseWrapperName] = [release]; + 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(payload.application); + + const json = JSON.stringify(application); const blob = new Blob([json], { type: 'application/json' }); data.append('application', blob); - let xhr = new XMLHttpRequest(); - xhr.withCredentials = true; + console.log(application); + + const url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications"+formConfig.endpoint; - xhr.addEventListener("readystatechange", function () { - if (this.readyState === 4) { - console.log(this.responseText); + + axios.post( + url, + data, + { + headers: { + 'X-Platform': config.serverConfig.platform + }, } - }); + ).then(res => { + if (res.status === 201) { + this.setState({ + loading: false, + }); - const url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/ent-app"; - xhr.open("POST", url); - xhr.setRequestHeader("X-Platform", "publisher"); - xhr.send(data); + notification["success"]({ + message: "Done!", + description: + "New app was added successfully", + }); + + this.props.history.push('/publisher/apps'); + + // window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/apps'; + + } + + }).catch((error) => { + if (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 + }); + }); } }); }; @@ -299,6 +243,7 @@ class AddNewAppFormComponent extends React.Component { }; handleIconChange = ({fileList}) => this.setState({icons: fileList}); + handleBinaryFileChange = ({fileList}) => this.setState({icons: fileList}); handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList}); @@ -311,86 +256,270 @@ class AddNewAppFormComponent extends React.Component { }; render() { - const {categories, tags, icons, screenshots} = this.state; + const {categories, tags, icons, screenshots, loading, binaryFiles} = this.state; const {getFieldDecorator} = this.props.form; + const {formConfig} = this.props; return (
- - - -
- - -
- {/*device type*/} - - {getFieldDecorator('deviceType', { - rules: [{ - required: false, - message: 'Please select device type' - }, - { - validator: this.validateIcon + + + + + + + +
+ + {formConfig.installationType !== "WEB_CLIP" && ( + + {getFieldDecorator('deviceType', { + rules: [ + { + required: true, + message: 'Please select device type' + }, + { + validator: this.validateIcon + } + ], + + } + )( + + )} + + )} + + {/*app name*/} + + {getFieldDecorator('name', { + rules: [{ + required: true, + message: 'Please input a name' + }], + })( + + )} + + + {/*description*/} + + {getFieldDecorator('description', { + rules: [{ + required: true, + message: 'Please enter a description' + }], + })( +