From a2341e8afc576ca5ad1d0d0d336c634b879ab7a8 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Mon, 30 Sep 2019 14:08:28 +0530 Subject: [PATCH 1/2] Fix subscription method issue --- .../react-app/src/components/new-app/AddNewAppForm.js | 2 ++ .../src/components/new-app/subForms/NewAppDetailsForm.js | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) 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 dbbebfc201..24641f7839 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 @@ -69,9 +69,11 @@ class AddNewAppFormComponent extends React.Component { isError: false }); const {application} = this.state; + const {price} = application; const {data, release} = releaseData; const {formConfig} = this.props; + application.subMethod = (price === 0) ? "FREE" : "PAID"; //add release wrapper application[formConfig.releaseWrapperName] = [release]; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js index 443fac99d1..6f9ac641ab 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js @@ -62,7 +62,6 @@ class NewAppDetailsForm extends React.Component { name, description, categories, - subMethod: (price === undefined || parseInt(price) === 0) ? "FREE" : "PAID", tags, unrestrictedRoles: [], }; From 740ad2a6b7c251aa9d565b0c30195c9b81cd0ea4 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Mon, 30 Sep 2019 17:28:01 +0530 Subject: [PATCH 2/2] Add image upload previews and validation in add new app form --- .../react-app/package.json | 5 + .../new-app/subForms/NewAppUploadForm.js | 156 +++++++++++++----- 2 files changed, 121 insertions(+), 40 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json index df3708acca..56b1ae82d2 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json @@ -10,6 +10,7 @@ }, "license": "Apache License 2.0", "dependencies": { + "@babel/polyfill": "^7.6.0", "acorn": "^6.2.0", "antd": "^3.20.1", "axios": "^0.19.0", @@ -38,7 +39,11 @@ "@babel/preset-env": "^7.5.0", "@babel/preset-react": "^7.0.0", "@babel/register": "^7.4.4", + "babel-core": "^6.26.3", "babel-loader": "^8.0.6", + "babel-polyfill": "^6.26.0", + "babel-preset-es2015": "^6.24.1", + "babel-preset-stage-0": "^6.24.1", "body-parser": "^1.19.0", "chai": "^4.1.2", "css-loader": "^0.28.11", diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js index 196c058771..060b0ec9f6 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js @@ -17,7 +17,8 @@ */ import React from "react"; -import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber} from "antd"; +import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber, Modal} from "antd"; +import "@babel/polyfill"; const formItemLayout = { labelCol: { @@ -32,6 +33,15 @@ const formItemLayout = { const {Option} = Select; const {TextArea} = Input; +function getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve(reader.result); + reader.onerror = error => reject(error); + }); +} + class NewAppUploadForm extends React.Component { constructor(props) { @@ -42,7 +52,12 @@ class NewAppUploadForm extends React.Component { loading: false, binaryFiles: [], application: null, - isFree: true + isFree: true, + previewVisible: false, + previewImage: '', + binaryFileHelperText: '', + iconHelperText: '', + screenshotHelperText: '' } } @@ -93,24 +108,61 @@ class NewAppUploadForm extends React.Component { const data = new FormData(); - if (specificElements.hasOwnProperty("binaryFile")) { - data.append('binaryFile', binaryFile[0].originFileObj); + if (specificElements.hasOwnProperty("binaryFile") && this.state.binaryFiles.length !== 1) { + this.setState({ + binaryFileHelperText: 'Please select the application' + }); + } else if (this.state.icons.length !== 1) { + this.setState({ + iconHelperText: 'Please select an icon' + }); + } else if (this.state.screenshots.length !== 3) { + this.setState({ + screenshotHelperText: 'Please select 3 screenshots' + }); + } else { + data.append('icon', icon[0].originFileObj); + data.append('screenshot1', screenshots[0].originFileObj); + data.append('screenshot2', screenshots[1].originFileObj); + data.append('screenshot3', screenshots[2].originFileObj); + if (specificElements.hasOwnProperty("binaryFile")) { + data.append('binaryFile', binaryFile[0].originFileObj); + } + this.props.onSuccessReleaseData({data, 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); - - this.props.onSuccessReleaseData({data, release}); } }); }; - handleIconChange = ({fileList}) => this.setState({icons: fileList}); - handleBinaryFileChange = ({fileList}) => this.setState({binaryFiles: fileList}); + handleIconChange = ({fileList}) => { + if (fileList.length === 1) { + this.setState({ + iconHelperText: '' + }); + } + this.setState({ + icons: fileList + }); + }; + handleBinaryFileChange = ({fileList}) => { + if (fileList.length === 1) { + this.setState({ + binaryFileHelperText: '' + }); + } + this.setState({binaryFiles: fileList}); + }; - handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList}); + handleScreenshotChange = ({fileList}) => { + if (fileList.length === 3) { + this.setState({ + screenshotHelperText: '' + }); + } + this.setState({ + screenshots: fileList + }); + }; handlePriceTypeChange = (value) => { this.setState({ @@ -118,11 +170,38 @@ class NewAppUploadForm extends React.Component { }); }; + handlePreviewCancel = () => this.setState({previewVisible: false}); + handlePreview = async file => { + if (!file.url && !file.preview) { + file.preview = await getBase64(file.originFileObj); + } + + this.setState({ + previewImage: file.url || file.preview, + previewVisible: true, + }); + }; + render() { const {formConfig} = this.props; const {getFieldDecorator} = this.props.form; - const {icons, screenshots, binaryFiles, isFree} = this.state; - + const { + icons, + screenshots, + binaryFiles, + isFree, + previewImage, + previewVisible, + binaryFileHelperText, + iconHelperText, + screenshotHelperText + } = this.state; + const uploadButton = ( +
+ +
Select
+
+ ); return (
@@ -137,7 +216,10 @@ class NewAppUploadForm extends React.Component { onSubmit={this.handleSubmit} > {formConfig.specificElements.hasOwnProperty("binaryFile") && ( - + {getFieldDecorator('binaryFile', { valuePropName: 'binaryFile', getValueFromEvent: this.normFile, @@ -159,7 +241,10 @@ class NewAppUploadForm extends React.Component { )} - + {getFieldDecorator('icon', { valuePropName: 'icon', getValueFromEvent: this.normFile, @@ -168,25 +253,20 @@ class NewAppUploadForm extends React.Component { })( false} + onPreview={this.handlePreview} > - {icons.length !== 1 && ( - - )} + {icons.length === 1 ? null : uploadButton} , )} - - - - - - - + {getFieldDecorator('screenshots', { valuePropName: 'icon', getValueFromEvent: this.normFile, @@ -195,18 +275,11 @@ class NewAppUploadForm extends React.Component { })( false} - multiple - > - - {screenshots.length < 3 && ( - - )} - - + onPreview={this.handlePreview}> + {screenshots.length >= 3 ? null : uploadButton} , )} @@ -331,6 +404,9 @@ class NewAppUploadForm extends React.Component { + + Preview Image +
); }