Create component to edir release

feature/appm-store/pbac
Jayasanka 5 years ago
parent f3a4abb190
commit afa6b54c42

@ -13,7 +13,7 @@
"store": "/application-mgt-store/v1.0",
"admin" : ""
},
"loginUri": "/ui-request-handler/login",
"loginUri": "/publisher-ui-request-handler/login",
"platform": "publisher"
},
"defaultPlatformIcons": {

@ -1,85 +0,0 @@
import React from "react";
import {Modal, Typography,List, Avatar} from 'antd';
import {connect} from 'react-redux';
import {Link} from "react-router-dom";
// connecting state.releaseView with the component
const mapStateToProps = state => {
return {releaseView: state.releaseView}
};
const Text = Typography;
class ConnectedReleaseModal extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false,
app: null
};
}
componentWillReceiveProps(nextProps) {
if (nextProps !== this.props) {
this.setState({
visible: nextProps.releaseView.visible,
app: nextProps.releaseView.app
})
}
}
showModal = () => {
this.setState({
visible: true,
});
};
handleOk = (e) => {
this.setState({
visible: false,
});
};
handleCancel = (e) => {
this.setState({
visible: false,
});
};
render() {
if (this.props.releaseView.app != null) {
const app = this.props.releaseView.app;
return (
<div>
<Modal
title={app.name}
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>Some contents...</p>
<List
itemLayout="horizontal"
dataSource={app.applicationReleases}
renderItem={release => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src={release.iconPath} />}
title={<Link to={"/publisher/apps/releases/"+release.uuid}>{release.version}</Link>}
description={release.description}
/>
</List.Item>
)}
/>
</Modal>
</div>
);
} else {
return null;
}
}
}
const ReleaseModal = connect(mapStateToProps, null)(ConnectedReleaseModal);
export default ReleaseModal;

@ -5,6 +5,7 @@ import Reviews from "./review/Reviews";
import "../../../App.css";
import config from "../../../../public/conf/config.json";
import DetailedRating from "../detailed-rating/DetailedRating";
import EditRelease from "./edit-release/EditRelease";
const {Title, Text, Paragraph} = Typography;
@ -12,7 +13,7 @@ class ReleaseView extends React.Component {
render() {
const app = this.props.app;
const release = (app !== null) ? app.applicationReleases[0] : null;
if(release == null){
if (release == null) {
return null;
}
return (
@ -24,7 +25,7 @@ class ReleaseView extends React.Component {
</Col>
<Col xl={10} sm={11} className="release-title">
<Title level={2}>{app.name}</Title>
<Text>Version : {release.version}</Text><br/><br/>
<Text>Version : {release.version}</Text><br/>
<StarRatings
rating={release.rating}
starRatedColor="#777"
@ -33,21 +34,21 @@ class ReleaseView extends React.Component {
numberOfStars={5}
name='rating'
/>
<EditRelease/>
</Col>
<Col xl={8} md={10} sm={24} xs={24} style={{float: "right"}}>
<div>
<Button.Group style={{float: "right"}}>
<Button htmlType="button" icon="edit">edit</Button>
<Button htmlType="button"
<Button
style={{float: "right"}}
htmlType="button"
type="primary"
icon="shop"
disabled={this.props.currentLifecycleStatus !== "PUBLISHED"}
onClick={() => {
window.open("https://"+ config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+"/store/"+app.deviceType+"/apps/"+release.uuid)
window.open("https://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + "/store/" + app.deviceType + "/apps/" + release.uuid)
}}>
Open in store
</Button>
</Button.Group>
</div>
</Col>
</Row>

@ -0,0 +1,312 @@
import React from "react";
import {Modal, Button, Icon, notification, Spin, Row, Col, Card, Upload, Input, Switch, Form} from 'antd';
import config from "../../../../../public/conf/config.json";
import axios from "axios";
const {TextArea} = Input;
const formItemLayout = {
labelCol: {
span: 8,
},
wrapperCol: {
span: 16,
},
};
class EditReleaseModal extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false,
current: 0,
categories: [],
tags: [],
icons: [],
screenshots: [],
loading: false,
binaryFiles: []
};
}
showModal = () => {
this.setState({
visible: true,
});
};
handleOk = e => {
console.log(e);
this.setState({
visible: false,
});
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false,
});
};
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});
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.put(
url,
data,
{
headers: {
'X-Platform': config.serverConfig.platform
},
}
).then(res => {
if (res.status === 201) {
this.setState({
loading: false,
});
notification["success"]({
message: "Done!",
description:
"Saved!",
});
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);
});
}
});
};
render() {
const {categories, tags, icons, screenshots, loading, binaryFiles} = this.state;
const {getFieldDecorator} = this.props.form;
return (
<div>
<Button size="small" type="primary" onClick={this.showModal}>
<Icon type="edit"/> Edit
</Button>
<Modal
title="Edit release"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<div>
<Spin tip="Uploading..." spinning={loading}>
<Form labelAlign="left" layout="horizontal"
hideRequiredMark
onSubmit={this.handleSubmit}>
<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>
<Form.Item style={{float: "right"}}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</Spin>
</div>
</Modal>
</div>
);
}
}
const EditRelease = Form.create({name: 'add-new-release'})(EditReleaseModal);
export default EditRelease;

@ -1,5 +1,4 @@
import React from "react";
import "antd/dist/antd.css";
import {
Card,
Button,
@ -155,7 +154,6 @@ class AddNewReleaseFormComponent extends React.Component {
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}>
@ -305,5 +303,5 @@ class AddNewReleaseFormComponent extends React.Component {
}
}
const AddReleaseForm = withRouter(Form.create({name: 'add-new-app'})(AddNewReleaseFormComponent));
const AddReleaseForm = withRouter(Form.create({name: 'add-new-release'})(AddNewReleaseFormComponent));
export default AddReleaseForm;

@ -2,7 +2,7 @@ import React from "react";
import "antd/dist/antd.css";
import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
import AppList from "../../../components/apps/AppList";
import ReleaseModal from "../../../components/apps/ReleaseModal";
// import ReleaseModal from "../../../components/apps/ReleaseModal";
const Search = Input.Search;
@ -47,7 +47,7 @@ class Apps extends React.Component {
<Button style={{margin:5}}>Advanced Search</Button>
</Col>
</Row>
<ReleaseModal/>
{/*<ReleaseModal/>*/}
<AppList/>
</div>

@ -2,7 +2,6 @@ import React from "react";
import "antd/dist/antd.css";
import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
import ListApps from "../../../components/apps/list-apps/ListApps";
import ReleaseModal from "../../../components/apps/ReleaseModal";
const Search = Input.Search;

Loading…
Cancel
Save