diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js index bd7a2ef8a8..8100a25a05 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js @@ -10,12 +10,12 @@ const {Option} = Select; const {Title, Text} = Typography; const Search = Input.Search; // connecting state.apps with the component -const mapStateToProps = state => { - return {apps: state.apps} -}; +// const mapStateToProps = state => { +// return {apps: state.apps} +// }; -class ConnectedListApps extends React.Component { +class ListApps extends React.Component { constructor(props) { super(props); this.state = { @@ -70,6 +70,6 @@ class ConnectedListApps extends React.Component { } } -const ListApps = connect(mapStateToProps, {getApps})(ConnectedListApps); +// const ListApps = connect(mapStateToProps, {getApps})(ConnectedListApps); export default ListApps; \ No newline at end of file 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 new file mode 100644 index 0000000000..61b9e93d97 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js @@ -0,0 +1,485 @@ +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 +} from "antd"; +import IconImage from "./IconImg"; +import UploadScreenshots from "./UploadScreenshots"; +import axios from "axios"; +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, + }, + wrapperCol: { + span: 20, + }, +}; + +class AddNewAppFormComponent extends React.Component { + + constructor(props) { + super(props); + this.state = { + current: 0, + categories: [], + tags: [], + icons: [], + screenshots: [] + }; + } + + componentDidMount() { + this.getCategories(); + this.getTags(); + } + + getCategories = () => { + axios.get( + config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories", + { + headers: {'X-Platform': config.serverConfig.platform} + }).then(res => { + if (res.status === 200) { + let categories = JSON.parse(res.data.data); + this.setState({ + categories: categories, + loading: false + }); + } + + }).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 + }); + }); + }; + + getTags = () => { + axios.get( + config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags", + { + headers: {'X-Platform': config.serverConfig.platform} + }).then(res => { + if (res.status === 200) { + let tags = JSON.parse(res.data.data); + this.setState({ + tags: tags, + loading: false, + }); + } + + }).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 + }); + }); + }; + + handleCategoryChange = (value) => { + console.log(`selected ${value}`); + }; + + handleSubmit = e => { + e.preventDefault(); + this.props.form.validateFields((err, values) => { + if (!err) { + const {name, description, appCategories, tags, deviceType, price, isSharedWithAllTenants, binaryFile, icon, screenshots} = values; + const payload = { + binaryFile, + icon, + screenshot1: screenshots[0], + screenshot2: screenshots[1], + screenshot3: screenshots[2], + application:{ + name, + description, + appCategories, + subType: (price === undefined || parseInt(price) === 0) ? "FREE" : "PAID", + tags, + unrestrictedRoles: [], + deviceType, + applicationReleaseWrappers: { + description, + price: (price === undefined) ? 0 : parseInt(price), + isSharedWithAllTenants, + metaData: "string", + supportedOsVersions: "4.0" + } + } + + }; + + axios.post( + config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/ent-app", + payload, + { + headers: { + 'X-Platform': config.serverConfig.platform, + 'Content-Type': 'multipart/mixed' + } + }).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 + }); + }); + + console.log(payload); + } + }); + }; + + normFile = e => { + console.log('Upload event:', e); + if (Array.isArray(e)) { + return e; + } + return e && e.fileList; + }; + + handleIconChange = ({fileList}) => this.setState({icons: fileList}); + + handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList}); + + validateIcon = (rule, value, callback) => { + const {icons} = this.state; + if (icons.length !== 1) { + callback("Please select icon file"); + } + callback(); + }; + + render() { + const {categories, tags, icons, screenshots} = this.state; + const {getFieldDecorator} = this.props.form; + return ( +
+ + + +
+ + +
+ {/*device type*/} + + {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' + }], + })( +