community
/
device-mgt-core
12
0
Fork 46
Code Issues Pull Requests 24 Packages Projects Releases Wiki Activity

Merge branch 'application-mgt-new' into 'application-mgt-new'

Browse Source 
Modify the add release component of the APPM publisher

See merge request entgra/carbon-device-mgt!306
merge-requests/308/merge
Dharmakeerthi Lasantha 5 years ago
parent 812c2999ba 06dee0e6a5
commit 2856765ca3
9 changed files with 70 additions and 322 deletions
Show Stats Download Patch File Download Diff File

2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
Unescape View File

@ -35,7 +35,7 @@
.release .release-screenshot img{ .release .release-screenshot img{
height:450px; height:450px;
border-radius: 15px; border-radius: 25px;
padding: 15px; padding: 15px;
} }

4
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.css
Unescape View File

@ -30,4 +30,8 @@
width: 210%; width: 210%;
} }
.app-release-cards{
display: grid;
}
} }

4
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js vendored
Unescape View File

@ -446,7 +446,7 @@ class AppDetailsDrawer extends React.Component {
<div> <div>
<Drawer <Drawer
placement="right" placement="right"
width={640} width={this.state.drawerWidth}
closable={false} closable={false}
onClose={onClose} onClose={onClose}
visible={visible} visible={visible}
@ -498,6 +498,7 @@ class AppDetailsDrawer extends React.Component {
grid={{gutter: 16, column: 2}} grid={{gutter: 16, column: 2}}
dataSource={app.applicationReleases} dataSource={app.applicationReleases}
renderItem={release => ( renderItem={release => (
<div className="app-release-cards">
<List.Item> <List.Item>
<Link to={"apps/releases/" + release.uuid}> <Link to={"apps/releases/" + release.uuid}>
<Card className="release-card"> <Card className="release-card">
@ -521,6 +522,7 @@ class AppDetailsDrawer extends React.Component {
</Card> </Card>
</Link> </Link>
</List.Item> </List.Item>
</div>
)} )}
/> />

2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js vendored
Unescape View File

@ -69,7 +69,7 @@ class ListApps extends React.Component {
<Search <Search
placeholder="input search text" placeholder="input search text"
onSearch={this.setSearchText} onSearch={this.setSearchText}
style={{width: 170}} style={{width: 170, zIndex:0}}
/> />
</Col> </Col>
</Row> </Row>

4
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js vendored
Unescape View File

@ -127,9 +127,9 @@ class ReleaseView extends React.Component {
</Row> </Row>
<Divider/> <Divider/>
<Row className="release-images"> <Row className="release-images">
{release.screenshots.map((screenshotUrl) => { {release.screenshots.map((screenshotUrl, index) => {
return ( return (
<div key={"col-" + screenshotUrl} className="release-screenshot"> <div key={index} className="release-screenshot">
<img key={screenshotUrl} src={screenshotUrl}/> <img key={screenshotUrl} src={screenshotUrl}/>
</div> </div>
) )

318
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js vendored
Unescape View File

@ -17,38 +17,19 @@
*/ */
import React from "react"; import React from "react";
import { import {Form, notification, Spin, Card, Row, Col} from "antd";
Card,
Button,
message,
Row,
Col,
Input,
Icon,
Select,
Switch,
Form,
Upload,
Divider,
notification,
Spin, InputNumber
} from "antd";
import axios from "axios"; import axios from "axios";
import {withRouter} from 'react-router-dom' import {withRouter} from 'react-router-dom'
import {withConfigContext} from "../../context/ConfigContext"; import {withConfigContext} from "../../context/ConfigContext";
import {handleApiError} from "../../js/Utils"; import {handleApiError} from "../../js/Utils";
import NewAppUploadForm from "../new-app/subForms/NewAppUploadForm";
const {Option} = Select; const formConfig = {
const {TextArea} = Input; specificElements: {
const InputGroup = Input.Group; binaryFile: {
required: true
const formItemLayout = { }
labelCol: { }
span: 8,
},
wrapperCol: {
span: 16,
},
}; };
class AddNewReleaseFormComponent extends React.Component { class AddNewReleaseFormComponent extends React.Component {
@ -56,18 +37,12 @@ class AddNewReleaseFormComponent extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
current: 0,
categories: [],
tags: [],
icons: [],
screenshots: [],
loading: false, loading: false,
binaryFiles: [], supportedOsVersions: [],
isFree: true, application: null,
supportedOsVersions: [] release: null,
deviceType: null
}; };
this.lowerOsVersion = null;
this.upperOsVersion = null;
} }
componentDidMount() { componentDidMount() {
@ -95,44 +70,22 @@ class AddNewReleaseFormComponent extends React.Component {
}); });
}; };
handleSubmit = e => { onSuccessReleaseData = (releaseData) => {
const config = this.props.context; const config = this.props.context;
e.preventDefault();
const {appId, deviceType} = this.props; const {appId, deviceType} = this.props;
this.props.form.validateFields((err, values) => {
if (!err) {
this.setState({ this.setState({
loading: true loading: true
}); });
const {price, isSharedWithAllTenants, icon, screenshots, releaseDescription, releaseType, binaryFile} = values; const {data, release} = releaseData;
const data = new FormData();
//add release data
const release = {
description: releaseDescription,
price: (price === undefined) ? 0 : parseInt(price),
isSharedWithAllTenants,
metaData: "[]",
releaseType: releaseType,
supportedOsVersions: `${this.lowerOsVersion}-${this.upperOsVersion}`
};
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 json = JSON.stringify(release);
const blob = new Blob([json], { const blob = new Blob([json], {
type: 'application/json' type: 'application/json'
}); });
data.append("applicationRelease", blob); data.append("applicationRelease", blob);
const url = window.location.origin + config.serverConfig.invoker.uri + const url = window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher +
config.serverConfig.invoker.publisher + "/applications/" + deviceType + "/ent-app/" + appId; "/applications/" + deviceType + "/ent-app/" + appId;
axios.post( axios.post(
url, url,
data data
@ -147,257 +100,46 @@ class AddNewReleaseFormComponent extends React.Component {
description: description:
"New release was added successfully", "New release was added successfully",
}); });
const uuid = res.data.data.uuid; const uuid = res.data.data.uuid;
this.props.history.push('/publisher/apps/releases/' + uuid); this.props.history.push('/publisher/apps/releases/' + uuid);
}
}).catch((error) => { } else {
handleApiError(error, "Sorry, we were unable to complete your request.");
this.setState({ this.setState({
loading: false loading: false
}); });
});
} }
}); }).catch((error) => {
}; handleApiError(error, "Sorry, we were unable to complete your request.");
normFile = 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});
handlePriceTypeChange = (value) => {
this.setState({ this.setState({
isFree: (value === 'free') loading: false
});
}); });
};
handleLowerOsVersionChange = (lowerOsVersion) => {
this.lowerOsVersion = lowerOsVersion;
}; };
handleUpperOsVersionChange = (upperOsVersion) => { onClickBackButton = () => {
this.upperOsVersion = upperOsVersion; this.props.history.push('/publisher/apps/');
}; };
render() { render() {
const {isFree, icons, screenshots, loading, binaryFiles, supportedOsVersions} = this.state; const {loading, supportedOsVersions} = this.state;
const {getFieldDecorator} = this.props.form;
return ( return (
<div> <div>
<Spin tip="Uploading..." spinning={loading}> <Spin tip="Uploading..." spinning={loading}>
<Row> <Row>
<Col span={12} offset={6}> <Col span={17} offset={4} >
<Card> <Card>
<Form labelAlign="left" layout="horizontal" <NewAppUploadForm
hideRequiredMark formConfig={formConfig}
onSubmit={this.handleSubmit}> supportedOsVersions={supportedOsVersions}
<Row> onSuccessReleaseData={this.onSuccessReleaseData}
<Col span={12} style={{paddingLeft: 20}}> onClickBackButton={this.onClickBackButton}
<Form.Item {...formItemLayout} label="Application">
{getFieldDecorator('binaryFile', {
valuePropName: 'binaryFile',
getValueFromEvent: this.normFile,
required: true,
message: 'Please select application'
})(
<Upload
name="binaryFile"
onChange={this.handleBinaryFileChange}
beforeUpload={() => false}
>
{binaryFiles.length !== 1 && (
<Button>
<Icon type="upload"/> Click to upload
</Button>
)}
</Upload>,
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Icon">
{getFieldDecorator('icon', {
valuePropName: 'icon',
getValueFromEvent: this.normFile,
required: true,
message: 'Please select a icon'
})(
<Upload
name="logo"
onChange={this.handleIconChange}
beforeUpload={() => false}
>
{icons.length !== 1 && (
<Button>
<Icon type="upload"/> Click to upload
</Button>
)}
</Upload>,
)}
</Form.Item>
<Row style={{marginTop: 40}}>
<Col span={24}>
</Col>
</Row>
<Form.Item {...formItemLayout} label="Screenshots">
{getFieldDecorator('screenshots', {
valuePropName: 'icon',
getValueFromEvent: this.normFile,
required: true,
message: 'Please select a icon'
})(
<Upload
name="screenshots"
onChange={this.handleScreenshotChange}
beforeUpload={() => false}
multiple
>
{screenshots.length < 3 && (
<Button>
<Icon type="upload"/> Click to upload
</Button>
)}
</Upload>,
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Release Type">
{getFieldDecorator('releaseType', {
rules: [{
required: true,
message: 'Please input the Release Type'
}],
})(
<Input placeholder="Release Type"/>
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Description">
{getFieldDecorator('releaseDescription', {
rules: [{
required: true,
message: 'Please enter a description for release'
}],
})(
<TextArea placeholder="Enter a description for release" rows={5}/>
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Supported OS Versions">
{getFieldDecorator('supportedOS')(
<div>
<InputGroup>
<Row gutter={8}>
<Col span={11}>
<Select
placeholder="Lower version"
style={{width: "100%"}}
onChange={this.handleLowerOsVersionChange}>
{supportedOsVersions.map(version => (
<Option key={version.versionName}
value={version.versionName}>
{version.versionName}
</Option>
))}
</Select>
</Col>
<Col span={2}>
<p> - </p>
</Col>
<Col span={11}>
<Select style={{width: "100%"}}
placeholder="Upper version"
onChange={this.handleUpperOsVersionChange}>
{supportedOsVersions.map(version => (
<Option key={version.versionName}
value={version.versionName}>
{version.versionName}
</Option>
))}
</Select>
</Col>
</Row>
</InputGroup>
</div>
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Price Type">
{getFieldDecorator('select', {
rules: [{required: true, message: 'Please select price Type'}],
})(
<Select
placeholder="Please select a price type"
onChange={this.handlePriceTypeChange}>
<Option value="free">Free</Option>
<Option value="paid">Paid</Option>
</Select>,
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Price">
{getFieldDecorator('price', {
rules: [{
required: !isFree
}],
})(
<InputNumber
disabled={isFree}
options={{
initialValue: 1
}}
min={0}
max={10000}
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
parser={value => value.replace(/\$\s?|(,*)/g, '')}
/> />
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Is Shared?">
{getFieldDecorator('isSharedWithAllTenants', {
rules: [{
required: true,
message: 'Please select'
}],
initialValue: false
})(
<Switch checkedChildren={<Icon type="check"/>}
unCheckedChildren={<Icon type="close"/>}
/>
)}
</Form.Item>
</Col>
</Row>
<Form.Item style={{float: "right"}}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</Card> </Card>
</Col> </Col>
</Row> </Row>
</Spin> </Spin>
</div> </div>
); );
} }
} }

2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-release/AddNewRelease.js vendored
Unescape View File

@ -55,7 +55,7 @@ class AddNewRelease extends React.Component {
</div> </div>
</PageHeader> </PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}> <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
<AddNewReleaseForm deviceType={deviceType} appId={appId}/> <AddNewReleaseForm deviceType={deviceType} appId={appId} />
</div> </div>
</div> </div>

2
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css
Unescape View File

@ -35,7 +35,7 @@
.release .release-screenshot img{ .release .release-screenshot img{
height: 400px; height: 400px;
border-radius: 15px; border-radius: 25px;
padding: 10px; padding: 10px;
} }

4
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/images/ImgViewer.js vendored
Unescape View File

@ -46,9 +46,9 @@ class ImgViewer extends Component {
return ( return (
<div className="release-images"> <div className="release-images">
<RcViewer options={options} ref='viewer'> <RcViewer options={options} ref='viewer'>
{this.props.images.map((screenshotUrl) => { {this.props.images.map((screenshotUrl, index) => {
return ( return (
<div key={"col-" + screenshotUrl} className="release-screenshot"> <div key={index} className="release-screenshot">
<img alt="screenshot" key={screenshotUrl} src={screenshotUrl}/> <img alt="screenshot" key={screenshotUrl} src={screenshotUrl}/>
</div> </div>
) )

Write Preview
Loading…
Cancel
Save