Completed add release functionality in APPM UI

feature/appm-store/pbac
Jayasanka 5 years ago
parent 79543df6d1
commit fc26e299a1

@ -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 {
})}
</span>
<Divider dashed={true}/>
<Text strong={true}>Releases</Text>
<Text strong={true}>Releases </Text>
{/*display add new release only if app type is enterprise*/}
{(app.type ==="ENTERPRISE") && (<Link to={`/publisher/apps/${app.id}/add-release`}><Button htmlType="button" size="small">Add new release</Button></Link>)}
<br/>
<List
itemLayout="horizontal"

@ -1,12 +1,8 @@
import React from "react";
import {Avatar, Card, Col, Row, Table, Typography, Tag, Icon, message} from "antd";
import {connect} from "react-redux";
import {getApps} from "../../../js/actions";
import axios from "axios";
import config from "../../../../public/conf/config.json";
const {Title} = Typography;
const columns = [
{
title: '',
@ -62,7 +58,7 @@ const columns = [
},
{
title: 'Subscription',
dataIndex: 'subType'
dataIndex: 'subMethod'
},
];

@ -239,7 +239,7 @@ class AddNewAppFormComponent extends React.Component {
};
handleIconChange = ({fileList}) => this.setState({icons: fileList});
handleBinaryFileChange = ({fileList}) => this.setState({icons: fileList});
handleBinaryFileChange = ({fileList}) => this.setState({binaryFiles: fileList});
handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList});

@ -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 (
<div>
<Spin tip="Uploading..." spinning={loading}>
<Row>
<Col span={12} offset={6}>
<Card>
<Form labelAlign="left" layout="horizontal"
hideRequiredMark
onSubmit={this.handleSubmit}>
<Row>
<Col span={12} style={{paddingLeft: 20}}>
<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="Price">
{getFieldDecorator('price', {
rules: [{
required: false
}],
})(
<Input prefix="$" placeholder="00.00"/>
)}
</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>
</Col>
</Row>
</Spin>
</div>
);
}
}
const AddReleaseForm = withRouter(Form.create({name: 'add-new-app'})(AddNewReleaseFormComponent));
export default AddReleaseForm;

@ -11,6 +11,7 @@ import Mange from "./pages/dashboard/manage/Manage";
import './index.css';
import AddNewPublicApp from "./pages/dashboard/add-new-app/AddNewPublicApp";
import AddNewWebClip from "./pages/dashboard/add-new-app/AddNewWebClip";
import AddNewRelease from "./pages/dashboard/add-new-release/AddNewRelease";
const routes = [
@ -34,6 +35,11 @@ const routes = [
exact: true,
component: Release
},
{
path: '/publisher/apps/:appId/add-release',
component: AddNewRelease,
exact: true
},
{
path: '/publisher/add-new-app/enterprise',
component: AddNewEnterpriseApp,

@ -0,0 +1,50 @@
import React from "react";
import "antd/dist/antd.css";
import {
PageHeader,
Typography
} from "antd";
import AddNewAppForm from "../../../components/new-release/AddReleaseForm";
const Paragraph = Typography;
class AddNewRelease extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 0,
categories: []
};
}
componentDidMount() {
// this.getCategories();
}
render() {
const {appId} = this.props.match.params;
return (
<div>
<PageHeader
title="Add New Release"
>
<div className="wrap">
<div className="content">
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
</Paragraph>
</div>
</div>
</PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
<AddNewAppForm appId={appId}/>
</div>
</div>
);
}
}
export default AddNewRelease;
Loading…
Cancel
Save