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

Complete add app functionality in APPM UI

See merge request entgra/carbon-device-mgt!152
feature/appm-store/pbac
Dharmakeerthi Lasantha 6 years ago
commit 79543df6d1

@ -41,7 +41,7 @@ class AppDetailsDrawer extends React.Component {
<br/> <br/>
<br/> <br/>
<span> <span>
{app.appCategories.map(category => { {app.categories.map(category => {
return ( return (
<Tag color="blue" key={category} style={{paddingBottom: 5}}> <Tag color="blue" key={category} style={{paddingBottom: 5}}>
{category} {category}

@ -28,10 +28,10 @@ const columns = [
}, },
{ {
title: 'Categories', title: 'Categories',
dataIndex: 'appCategories', dataIndex: 'categories',
render: appCategories => ( render: categories => (
<span> <span>
{appCategories.map(category => { {categories.map(category => {
return ( return (
<Tag color="blue" key={category}> <Tag color="blue" key={category}>
{category} {category}
@ -104,17 +104,13 @@ class AppsTable extends React.Component {
params.page = 1; params.page = 1;
} }
const extraParams = { const data = {
offset: 10 * (params.page - 1), offset: 10 * (params.page - 1),
limit: 10 limit: 10
}; };
// note: encode with '%26' not '&'
const encodedExtraParams = Object.keys(extraParams).map(key => key + '=' + extraParams[key]).join('&');
const data = {
};
axios.post( axios.post(
config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher+"/applications?"+encodedExtraParams, config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher+"/applications",
data, data,
{ {
headers: { 'X-Platform': config.serverConfig.platform } headers: { 'X-Platform': config.serverConfig.platform }

@ -1,72 +1,35 @@
import React from "react"; import React from "react";
import "antd/dist/antd.css"; import "antd/dist/antd.css";
import { import {
PageHeader,
Typography,
Card, Card,
Steps,
Button, Button,
message, message,
Row, Row,
Col, Col,
Tag,
Tooltip,
Input, Input,
Icon, Icon,
Select, Select,
Switch, Switch,
Form, Form,
Upload, Upload,
Divider, notification Divider,
notification,
Spin
} from "antd"; } from "antd";
import IconImage from "./IconImg";
import UploadScreenshots from "./UploadScreenshots";
import axios from "axios"; import axios from "axios";
import {withRouter} from 'react-router-dom'
import config from "../../../public/conf/config.json"; 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 {Option} = Select;
const {TextArea} = Input; const {TextArea} = Input;
const InputGroup = Input.Group; const InputGroup = Input.Group;
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
span: 4, span: 5,
}, },
wrapperCol: { wrapperCol: {
span: 20, span: 19,
}, },
}; };
@ -79,7 +42,9 @@ class AddNewAppFormComponent extends React.Component {
categories: [], categories: [],
tags: [], tags: [],
icons: [], icons: [],
screenshots: [] screenshots: [],
loading: false,
binaryFiles: []
}; };
} }
@ -148,144 +113,119 @@ class AddNewAppFormComponent extends React.Component {
handleSubmit = e => { handleSubmit = e => {
e.preventDefault(); e.preventDefault();
const {formConfig} = this.props;
const {specificElements} = formConfig;
this.props.form.validateFields((err, values) => { this.props.form.validateFields((err, values) => {
if (!err) { if (!err) {
const {name, description, appCategories, tags, deviceType, price, isSharedWithAllTenants, binaryFile, icon, screenshots} = values; this.setState({
const payload = { loading: true
binaryFile: binaryFile[0].originFileObj, });
icon: icon[0].originFileObj, const {name, description, categories, tags, price, isSharedWithAllTenants, binaryFile, icon, screenshots, releaseDescription,releaseType} = values;
screenshot1: screenshots[0].originFileObj, const application = {
screenshot2: screenshots[1].originFileObj, name,
screenshot3: screenshots[2].originFileObj, description,
application: { categories,
name, subMethod: (price === undefined || parseInt(price) === 0) ? "FREE" : "PAID",
description, tags,
appCategories, unrestrictedRoles: [],
subType: (price === undefined || parseInt(price) === 0) ? "FREE" : "PAID", };
tags,
unrestrictedRoles: [], const data = new FormData();
deviceType,
entAppReleaseWrappers: [{ if (formConfig.installationType !== "WEB_CLIP") {
description, application.deviceType = values.deviceType;
price: (price === undefined) ? 0 : parseInt(price), }else{
isSharedWithAllTenants, application.type = "WEB_CLIP";
metaData: "string", application.deviceType ="ALL";
supportedOsVersions: "4.0-10.0" }
}]
} if (specificElements.hasOwnProperty("binaryFile")) {
data.append('binaryFile', binaryFile[0].originFileObj);
}
//add release data
const release = {
description: releaseDescription,
price: (price === undefined) ? 0 : parseInt(price),
isSharedWithAllTenants,
metaData: "string",
releaseType: releaseType
}; };
console.log(payload); if (formConfig.installationType !== "WEB_CLIP") {
release.supportedOsVersions = "4.0-10.0";
// let data = new FormData(); }
//
// const url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/ent-app"; if (specificElements.hasOwnProperty("version")) {
// release.version = values.version;
// data.append('binaryFile', binaryFile[0].originFileObj); }
// data.append('icon', icon[0].originFileObj); if (specificElements.hasOwnProperty("url")) {
// data.append('screenshot1', screenshots[0].originFileObj); release.url = values.url;
// data.append('screenshot2', screenshots[1].originFileObj); }
// data.append('screenshot3', screenshots[2].originFileObj); if (specificElements.hasOwnProperty("packageName")) {
// data.append('application', JSON.toString(payload.application)); release.packageName = values.packageName;
}
// let request = new XMLHttpRequest();
// request.open('POST', url); //add release wrapper
// request.send(data); application[formConfig.releaseWrapperName] = [release];
// var xhr = new XMLHttpRequest();
// // xhr.withCredentials = true;
//
// xhr.addEventListener("readystatechange", function () {
// if (this.readyState === 4) {
// console.log(this.responseText);
// }
// });
//
// xhr.open("POST", "https://localhost:9443/ui-request-handler/invoke/application-mgt-publisher/v1.0/applications/ent-app");
// xhr.open("GET", "https://localhost:9443/ui-request-handler/invoke/application-mgt-publisher/v1.0/applications/tags");
// xhr.setRequestHeader("Content-Type", "multipart/mixed");
// xhr.setRequestHeader("X-Platform", "publisher");
//
// // xhr.setRequestHeader("Accept", "*/*");
//
// xhr.send(data);
// xhr.send();
// const options = {method: 'POST', body: data};
//
// fetch(url, options).then(function (response) {
// console.log(response);
// });
// axios.post(
// url,
// data,
// {
// headers:{
// 'X-Platform': config.serverConfig.platform,
// 'Content-Type': 'multipart/mixed',
// 'content-type': 'multipart/form-data'
// },
// 'Content-Type': 'multipart/mixed',
// 'content-type': 'multipart/form-data'
// }
// ).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
// });
// });
let data = new FormData();
data.append('binaryFile', binaryFile[0].originFileObj);
data.append('icon', icon[0].originFileObj); data.append('icon', icon[0].originFileObj);
data.append('screenshot1', screenshots[0].originFileObj); data.append('screenshot1', screenshots[0].originFileObj);
data.append('screenshot2', screenshots[1].originFileObj); data.append('screenshot2', screenshots[1].originFileObj);
data.append('screenshot3', screenshots[2].originFileObj); data.append('screenshot3', screenshots[2].originFileObj);
const json = JSON.stringify(payload.application);
const json = JSON.stringify(application);
const blob = new Blob([json], { const blob = new Blob([json], {
type: 'application/json' type: 'application/json'
}); });
data.append('application', blob); data.append(formConfig.jsonPayloadName, blob);
let xhr = new XMLHttpRequest(); console.log(application);
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () { const url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications" + formConfig.endpoint;
if (this.readyState === 4) {
console.log(this.responseText); axios.post(
url,
data,
{
headers: {
'X-Platform': config.serverConfig.platform
},
} }
}); ).then(res => {
if (res.status === 201) {
this.setState({
loading: false,
});
const url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/ent-app"; notification["success"]({
xhr.open("POST", url); message: "Done!",
xhr.setRequestHeader("X-Platform", "publisher"); description:
xhr.send(data); "New app was added successfully",
});
this.props.history.push('/publisher/apps');
// window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/apps';
}
}).catch((error) => {
if (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
});
});
} }
}); });
}; };
@ -299,6 +239,7 @@ class AddNewAppFormComponent extends React.Component {
}; };
handleIconChange = ({fileList}) => this.setState({icons: fileList}); handleIconChange = ({fileList}) => this.setState({icons: fileList});
handleBinaryFileChange = ({fileList}) => this.setState({icons: fileList});
handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList}); handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList});
@ -311,86 +252,276 @@ class AddNewAppFormComponent extends React.Component {
}; };
render() { render() {
const {categories, tags, icons, screenshots} = this.state; const {categories, tags, icons, screenshots, loading, binaryFiles} = this.state;
const {getFieldDecorator} = this.props.form; const {getFieldDecorator} = this.props.form;
const {formConfig} = this.props;
return ( return (
<div> <div>
<Row> <Spin tip="Uploading..." spinning={loading}>
<Col span={20} offset={2}> <Row>
<Card> <Col span={20} offset={2}>
<Form labelAlign="left" layout="horizontal" <Card>
hideRequiredMark <Form labelAlign="left" layout="horizontal"
onSubmit={this.handleSubmit}> hideRequiredMark
<Row> onSubmit={this.handleSubmit}>
<Col span={12}> <Row>
<div> <Col span={12}>
{/*device type*/} <div>
<Form.Item {...formItemLayout} label="Device Type">
{getFieldDecorator('deviceType', { {formConfig.installationType !== "WEB_CLIP" && (
rules: [{ <Form.Item {...formItemLayout} label="Device Type">
required: false, {getFieldDecorator('deviceType', {
message: 'Please select device type' rules: [
}, {
{ required: true,
validator: this.validateIcon message: 'Please select device type'
},
{
validator: this.validateIcon
}
],
}
)(
<Select placeholder="select device type">
<Option key="android">Android</Option>
<Option key="ios">iOS</Option>
</Select>
)}
</Form.Item>
)}
{/*app name*/}
<Form.Item {...formItemLayout} label="App Name">
{getFieldDecorator('name', {
rules: [{
required: true,
message: 'Please input a name'
}], }],
})(
<Input placeholder="ex: Lorem App"/>
)}
</Form.Item>
{/*description*/}
<Form.Item {...formItemLayout} label="Description">
{getFieldDecorator('description', {
rules: [{
required: true,
message: 'Please enter a description'
}],
})(
<TextArea placeholder="Enter the description..." rows={7}/>
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Categories">
{getFieldDecorator('categories', {
rules: [{
required: true,
message: 'Please select categories'
}],
})(
<Select
mode="multiple"
style={{width: '100%'}}
placeholder="Select a Category"
onChange={this.handleCategoryChange}
>
{
categories.map(category => {
return (
<Option
key={category.categoryName}>
{category.categoryName}
</Option>
)
})
}
</Select>
)}
</Form.Item>
<Divider/>
<Form.Item {...formItemLayout} label="Tags">
{getFieldDecorator('tags', {
rules: [{
required: true,
message: 'Please select tags'
}],
})(
<Select
mode="tags"
style={{width: '100%'}}
placeholder="Tags"
>
{
tags.map(tag => {
return (
<Option
key={tag.tagName}>
{tag.tagName}
</Option>
)
})
}
</Select>
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Meta Data">
<InputGroup>
<Row gutter={8}>
<Col span={10}>
<Input placeholder="Key"/>
</Col>
<Col span={12}>
<Input placeholder="value"/>
</Col>
<Col span={2}>
<Button type="dashed" shape="circle" icon="plus"/>
</Col>
</Row>
</InputGroup>
</Form.Item>
</div>
</Col>
<Col span={12} style={{paddingLeft: 20}}>
<p>Release Data</p>
{formConfig.specificElements.hasOwnProperty("binaryFile") && (
<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'
})( })(
<Select placeholder="select device type"> <Upload
<Option key="android">Android</Option> name="logo"
<Option key="ios">iOS</Option> onChange={this.handleIconChange}
</Select> beforeUpload={() => false}
>
{icons.length !== 1 && (
<Button>
<Icon type="upload"/> Click to upload
</Button>
)}
</Upload>,
)} )}
</Form.Item> </Form.Item>
{/*app name*/} <Row style={{marginTop: 40}}>
<Form.Item {...formItemLayout} label="App Name"> <Col span={24}>
{getFieldDecorator('name', {
rules: [{ </Col>
required: false, </Row>
message: 'Please input a name'
}], <Form.Item {...formItemLayout} label="Screenshots">
{getFieldDecorator('screenshots', {
valuePropName: 'icon',
getValueFromEvent: this.normFile,
required: true,
message: 'Please select a icon'
})( })(
<Input placeholder="ex: Lorem App"/> <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>
{/*description*/} {formConfig.specificElements.hasOwnProperty("packageName") && (
<Form.Item {...formItemLayout} label="Description"> <Form.Item {...formItemLayout} label="Package Name">
{getFieldDecorator('description', { {getFieldDecorator('packageName', {
rules: [{
required: true,
message: 'Please input the package name'
}],
})(
<Input placeholder="Package Name"/>
)}
</Form.Item>
)}
{formConfig.specificElements.hasOwnProperty("url") && (
<Form.Item {...formItemLayout} label="URL">
{getFieldDecorator('url', {
rules: [{
required: true,
message: 'Please input the url'
}],
})(
<Input placeholder="url"/>
)}
</Form.Item>
)}
{formConfig.specificElements.hasOwnProperty("version") && (
<Form.Item {...formItemLayout} label="Version">
{getFieldDecorator('version', {
rules: [{
required: true,
message: 'Please input the version'
}],
})(
<Input placeholder="Version"/>
)}
</Form.Item>
)}
<Form.Item {...formItemLayout} label="Release Type">
{getFieldDecorator('releaseType', {
rules: [{ rules: [{
required: false, required: true,
message: 'Please enter a description' message: 'Please input the Release Type'
}], }],
})( })(
<TextArea placeholder="Enter the description..." rows={7}/> <Input placeholder="Release Type"/>
)} )}
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} label="Categories">
{getFieldDecorator('appCategories', { <Form.Item {...formItemLayout} label="Description">
{getFieldDecorator('releaseDescription', {
rules: [{ rules: [{
required: false, required: true,
message: 'Please select categories' message: 'Please enter a description for release'
}], }],
})( })(
<Select <TextArea placeholder="Enter a description for release" rows={5}/>
mode="multiple"
style={{width: '100%'}}
placeholder="Select a Category"
onChange={this.handleCategoryChange}
>
{
categories.map(category => {
return (
<Option
key={category.categoryName}>
{category.categoryName}
</Option>
)
})
}
</Select>
)} )}
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} label="Price"> <Form.Item {...formItemLayout} label="Price">
{getFieldDecorator('price', { {getFieldDecorator('price', {
rules: [{ rules: [{
@ -400,163 +531,39 @@ class AddNewAppFormComponent extends React.Component {
<Input prefix="$" placeholder="00.00"/> <Input prefix="$" placeholder="00.00"/>
)} )}
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} label="Is Shared?"> <Form.Item {...formItemLayout} label="Is Shared?">
{getFieldDecorator('isSharedWithAllTenants', { {getFieldDecorator('isSharedWithAllTenants', {
rules: [{ rules: [{
required: false, required: true,
message: 'Please select' message: 'Please select'
}], }],
initialValue: false
})( })(
<Switch checkedChildren={<Icon type="check"/>} <Switch checkedChildren={<Icon type="check"/>}
unCheckedChildren={<Icon type="close"/>} defaultChecked/> unCheckedChildren={<Icon type="close"/>}
/>
)} )}
</Form.Item> </Form.Item>
<Divider/> </Col>
<Form.Item {...formItemLayout} label="Tags">
{getFieldDecorator('tags', { </Row>
rules: [{ <Form.Item style={{float: "right"}}>
required: false, <Button type="primary" htmlType="submit">
message: 'Please select tags' Submit
}], </Button>
})( </Form.Item>
<Select </Form>
mode="tags" </Card>
style={{width: '100%'}} </Col>
placeholder="Tags" </Row>
> </Spin>
{
tags.map(tag => {
return (
<Option
key={tag.tagName}>
{tag.tagName}
</Option>
)
})
}
</Select>
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Meta Daa">
<InputGroup>
<Row gutter={8}>
<Col span={10}>
<Input placeholder="Key"/>
</Col>
<Col span={12}>
<Input placeholder="value"/>
</Col>
<Col span={2}>
<Button type="dashed" shape="circle" icon="plus"/>
</Col>
</Row>
</InputGroup>
</Form.Item>
<Form.Item wrapperCol={{span: 12, offset: 5}}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</div>
</Col>
<Col span={12} style={{paddingLeft: 20}}>
<Form.Item label="Application">
<div className="dropbox">
{getFieldDecorator('binaryFile', {
valuePropName: 'fileList',
getValueFromEvent: this.normFile,
required: false,
message: 'Please select tags'
})(
<Upload.Dragger
name="files"
beforeUpload={() => false}
multiple={false}
>
<p className="ant-upload-drag-icon">
<Icon type="inbox"/>
</p>
<p className="ant-upload-text">Click or drag file to this area
to upload</p>
<p className="ant-upload-hint">Support for a single or bulk
upload.</p>
</Upload.Dragger>,
)}
</div>
</Form.Item>
<Row>
<Col span={12}>
<Form.Item label="Icon">
{getFieldDecorator('icon', {
valuePropName: 'icon',
getValueFromEvent: this.normFile,
required: false,
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>
</Col>
</Row>
<Row style={{marginTop: 40}}>
<Col span={24}>
<Form.Item label="Screenshots">
{getFieldDecorator('screenshots', {
valuePropName: 'icon',
getValueFromEvent: this.normFile,
required: false,
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>
</Col>
</Row>
</Col>
</Row>
</Form>
</Card>
</Col>
</Row>
</div> </div>
); );
} }
} }
const AddNewAppForm = Form.create({name: 'add-new-app'})(AddNewAppFormComponent); const AddNewAppForm = withRouter(Form.create({name: 'add-new-app'})(AddNewAppFormComponent));
export default AddNewAppForm; export default AddNewAppForm;

@ -6,9 +6,11 @@ import Login from "./pages/Login";
import Dashboard from "./pages/dashboard/Dashboard"; import Dashboard from "./pages/dashboard/Dashboard";
import Apps from "./pages/dashboard/apps/Apps"; import Apps from "./pages/dashboard/apps/Apps";
import Release from "./pages/dashboard/apps/release/Release"; import Release from "./pages/dashboard/apps/release/Release";
import AddNewApp from "./pages/dashboard/add-new-app/AddNewApp"; import AddNewEnterpriseApp from "./pages/dashboard/add-new-app/AddNewEnterpriseApp";
import Mange from "./pages/dashboard/manage/Manage"; import Mange from "./pages/dashboard/manage/Manage";
import './index.css'; import './index.css';
import AddNewPublicApp from "./pages/dashboard/add-new-app/AddNewPublicApp";
import AddNewWebClip from "./pages/dashboard/add-new-app/AddNewWebClip";
const routes = [ const routes = [
@ -34,17 +36,17 @@ const routes = [
}, },
{ {
path: '/publisher/add-new-app/enterprise', path: '/publisher/add-new-app/enterprise',
component: AddNewApp, component: AddNewEnterpriseApp,
exact: true exact: true
}, },
{ {
path: '/publisher/add-new-app/public', path: '/publisher/add-new-app/public',
component: AddNewApp, component: AddNewPublicApp,
exact: true exact: true
}, },
{ {
path: '/publisher/add-new-app/web-clip', path: '/publisher/add-new-app/web-clip',
component: AddNewApp, component: AddNewWebClip,
exact: true exact: true
}, },
{ {

@ -1,153 +0,0 @@
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
} from "antd";
import axios from "axios";
import AddNewAppForm from "../../../components/new-app/AddNewAppForm"
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 AddNewApp extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 0,
categories: []
};
}
componentDidMount() {
// this.getCategories();
}
next() {
const current = this.state.current + 1;
this.setState({current});
}
prev() {
const current = this.state.current - 1;
this.setState({current});
}
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
});
});
};
handleCategoryChange = (value) => {
console.log(`selected ${value}`);
};
render() {
const {categories} = this.state;
return (
<div>
<PageHeader
title="Add New App"
>
<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/>
</div>
</div>
);
}
}
export default AddNewApp;

@ -0,0 +1,62 @@
import React from "react";
import "antd/dist/antd.css";
import {
PageHeader,
Typography
} from "antd";
import AddNewAppForm from "../../../components/new-app/AddNewAppForm";
const Paragraph = Typography;
const formConfig = {
installationType: "ENTERPRISE",
endpoint: "/ent-app",
jsonPayloadName:"application",
releaseWrapperName: "entAppReleaseWrappers",
specificElements: {
binaryFile: {
required: true
}
}
};
class AddNewEnterpriseApp extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 0,
categories: []
};
}
componentDidMount() {
// this.getCategories();
}
render() {
return (
<div>
<PageHeader
title="Add New Enterprise App"
>
<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 formConfig={formConfig}/>
</div>
</div>
);
}
}
export default AddNewEnterpriseApp;

@ -0,0 +1,65 @@
import React from "react";
import "antd/dist/antd.css";
import {
PageHeader,
Typography
} from "antd";
import AddNewAppForm from "../../../components/new-app/AddNewAppForm";
const Paragraph = Typography;
const formConfig = {
installationType: "PUBLIC",
endpoint: "/public-app",
jsonPayloadName:"public-app",
releaseWrapperName: "publicAppReleaseWrappers",
specificElements: {
packageName : {
required: true
},
version : {
required: true
}
}
};
class AddNewEnterpriseApp extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 0,
categories: []
};
}
componentDidMount() {
// this.getCategories();
}
render() {
return (
<div>
<PageHeader
title="Add New Public App"
>
<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 formConfig={formConfig}/>
</div>
</div>
);
}
}
export default AddNewEnterpriseApp;

@ -0,0 +1,65 @@
import React from "react";
import "antd/dist/antd.css";
import {
PageHeader,
Typography
} from "antd";
import AddNewAppForm from "../../../components/new-app/AddNewAppForm";
const Paragraph = Typography;
const formConfig = {
installationType: "WEB_CLIP",
endpoint: "/web-app",
jsonPayloadName:"webapp",
releaseWrapperName: "webAppReleaseWrappers",
specificElements: {
url : {
required: true
},
version : {
required: true
}
}
};
class AddNewEnterpriseApp extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 0,
categories: []
};
}
componentDidMount() {
// this.getCategories();
}
render() {
return (
<div>
<PageHeader
title="Add New Web Clip"
>
<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 formConfig={formConfig}/>
</div>
</div>
);
}
}
export default AddNewEnterpriseApp;
Loading…
Cancel
Save