forked from community/device-mgt-core
Merge pull request #1029 from menakaj/application-mgt
Platform create steps and improvements.feature/appm-store/pbac
sinthuja
7 years ago
committed by
GitHub
commit
747fe5d8c2
@ -0,0 +1,198 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import React, {Component} from 'react';
|
||||
import {Button, FormFeedback, FormGroup, Input, Label, ModalBody, ModalFooter} from "reactstrap";
|
||||
import {FormattedMessage} from "react-intl";
|
||||
import Switch from "../../../UIComponents/Switch/Switch";
|
||||
import Chip from "../../../UIComponents/Chip/Chip";
|
||||
|
||||
|
||||
/**
|
||||
* Enable : switch
|
||||
* Share between tenants: switch
|
||||
* Tags: input
|
||||
* */
|
||||
class Configure extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.onBackClick = this.onBackClick.bind(this);
|
||||
this.setStepData = this.setStepData.bind(this);
|
||||
this.state = {
|
||||
defValue: "",
|
||||
tags: [],
|
||||
enabled: false,
|
||||
shared: false,
|
||||
defaultTenantMapping: true,
|
||||
errors: {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create a tag on Enter key press and set it to the state.
|
||||
* Clears the tags text field.
|
||||
* Chip gets two parameters: Key and value.
|
||||
* */
|
||||
addTags(event) {
|
||||
let tags = this.state.tags;
|
||||
if (event.charCode === 13) {
|
||||
event.preventDefault();
|
||||
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
|
||||
this.setState({tags, defValue: ""}, console.log(tags));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the value for tag.
|
||||
* */
|
||||
handleTagChange(event) {
|
||||
let defaultValue = this.state.defValue;
|
||||
defaultValue = event.target.value;
|
||||
this.setState({defValue: defaultValue})
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles Chip delete function.
|
||||
* Removes the tag from state.tags
|
||||
* */
|
||||
handleRequestDelete(key) {
|
||||
let chipData = this.state.tags;
|
||||
const chipToDelete = chipData.map((chip) => chip.key).indexOf(key);
|
||||
chipData.splice(chipToDelete, 1);
|
||||
this.setState({tags: chipData});
|
||||
};
|
||||
|
||||
onCancelClick() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
onBackClick() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
setStepData() {
|
||||
const {shared, enabled, tags, defaultTenantMapping} = this.state;
|
||||
|
||||
let config = {
|
||||
shared: shared,
|
||||
enabled: enabled,
|
||||
defaultTenantMapping: defaultTenantMapping,
|
||||
tags: tags
|
||||
};
|
||||
|
||||
this.props.setStepData("configure", config);
|
||||
}
|
||||
|
||||
onEnabledChanged() {
|
||||
let enabled = this.state.enabled;
|
||||
this.setState({enabled: !enabled});
|
||||
}
|
||||
|
||||
onAllTenantsChanged() {
|
||||
let allTenants = this.state.allTenants;
|
||||
this.setState({allTenants: !allTenants});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<ModalBody>
|
||||
<FormGroup>
|
||||
<div id="app-release-switch-content">
|
||||
<div id="app-release-switch-label">
|
||||
<Label for="app-release-switch">
|
||||
<FormattedMessage id="Platform.Enable" defaultMessage="Platform.Enable"/>
|
||||
</Label>
|
||||
</div>
|
||||
<div id="app-release-switch">
|
||||
<Switch
|
||||
name="enabled"
|
||||
id="app-release-switch"
|
||||
onChange={this.onEnabledChanged.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
<br/>
|
||||
<FormGroup>
|
||||
<div id="app-release-switch-content">
|
||||
<div id="app-release-switch-label">
|
||||
<Label for="app-release-switch">
|
||||
<FormattedMessage id="Share.with.Tenants" defaultMessage="Share.with.Tenants"/>
|
||||
</Label>
|
||||
</div>
|
||||
<div id="app-release-switch">
|
||||
<Switch
|
||||
name="share"
|
||||
id="app-release-switch"
|
||||
onChange={this.onAllTenantsChanged.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
<br/>
|
||||
<FormGroup>
|
||||
<Label for="app-tags"><FormattedMessage id='Tags' defaultMessage='Tags'/>*</Label>
|
||||
<Input
|
||||
required
|
||||
type="text"
|
||||
value={this.state.defValue}
|
||||
name="app-tags"
|
||||
id="app-tags"
|
||||
onChange={this.handleTagChange.bind(this)}
|
||||
onKeyPress={this.addTags.bind(this)}
|
||||
/>
|
||||
<div id="batch-content">
|
||||
{this.state.tags.map(tag => {
|
||||
return (
|
||||
<Chip
|
||||
key={tag.key}
|
||||
content={tag}
|
||||
onDelete={this.handleRequestDelete.bind(this)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<FormFeedback id="form-error">{this.state.errors.tags}</FormFeedback>
|
||||
</FormGroup>
|
||||
</ModalBody>
|
||||
<ModalFooter className="custom-footer row">
|
||||
<div className="footer-back-btn col">
|
||||
<Button className="custom-flat primary-flat" onClick={this.onBackClick}>
|
||||
<FormattedMessage id="Back" defaultMessage="Back"/>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="footer-main-btn col">
|
||||
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
||||
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||
</Button>
|
||||
<Button className="custom-flat primary-flat" onClick={this.setStepData}>
|
||||
<FormattedMessage id="Next" defaultMessage="Next"/>
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Configure;
|
||||
@ -0,0 +1,191 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import React, {Component} from 'react';
|
||||
import {Button, FormFeedback, FormGroup, Input, Label, ModalBody, ModalFooter} from "reactstrap";
|
||||
import {FormattedMessage} from "react-intl";
|
||||
import * as validator from '../../../../common/validator';
|
||||
import Dropzone from "react-dropzone";
|
||||
|
||||
/**
|
||||
* Name
|
||||
* Description
|
||||
* Identifier
|
||||
* Icon
|
||||
* */
|
||||
class General extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.onTextFieldChange = this.onTextFieldChange.bind(this);
|
||||
this.onNextClick = this.onNextClick.bind(this);
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.state = {
|
||||
name: "",
|
||||
description: "",
|
||||
identifier: "",
|
||||
errors: {},
|
||||
icon: []
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onNextClick() {
|
||||
const {name, description, identifier, icon} = this.state;
|
||||
|
||||
console.log("Next")
|
||||
|
||||
let general = {
|
||||
name: name,
|
||||
description: description,
|
||||
identifier: identifier,
|
||||
icon: icon
|
||||
};
|
||||
|
||||
let {errorCount, errors} = this.validate();
|
||||
|
||||
if (errorCount !== 0) {
|
||||
this.setState({errors: errors});
|
||||
} else {
|
||||
this.props.setStepData("general", general);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onCancelClick() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
onTextFieldChange(event) {
|
||||
let field = event.target.name;
|
||||
let value = event.target.value;
|
||||
|
||||
console.log(field, value)
|
||||
|
||||
switch (field) {
|
||||
case("platformName") : {
|
||||
this.setState({name: value});
|
||||
break;
|
||||
}
|
||||
case("platformDescription") : {
|
||||
this.setState({description: value});
|
||||
break;
|
||||
}
|
||||
case("platformId") : {
|
||||
this.setState({identifier: value});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
validate() {
|
||||
|
||||
const {name, identifier, description} = this.state;
|
||||
let errorCount = 0;
|
||||
let errors = {};
|
||||
|
||||
if (validator.validateNull(name)) {
|
||||
errorCount++;
|
||||
errors.name = "Platform Name is Required!"
|
||||
}
|
||||
|
||||
if (validator.validateNull(identifier)) {
|
||||
errorCount++;
|
||||
errors.identifier = "Platform Identifier is Required!"
|
||||
}
|
||||
|
||||
if (validator.validateNull(description)) {
|
||||
errorCount++;
|
||||
errors.description = "Platform Desciption is Required!"
|
||||
}
|
||||
|
||||
return {errorCount, errors};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<ModalBody>
|
||||
<FormGroup>
|
||||
<Label for="platform-name">
|
||||
<FormattedMessage id="Name" defaultMessage="Name"/>*
|
||||
</Label>
|
||||
<Input required type="text" name="platformName" id="platform-name"
|
||||
onChange={this.onTextFieldChange}/>
|
||||
<FormFeedback id="form-error">{this.state.errors.name}</FormFeedback>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="platform-description">
|
||||
<FormattedMessage id="Description" defaultMessage="Description"/>*
|
||||
</Label>
|
||||
<Input required type="textarea" name="platformDescription" id="platform-description"
|
||||
onChange={this.onTextFieldChange}/>
|
||||
<FormFeedback id="form-error">{this.state.errors.description}</FormFeedback>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="platform-id">
|
||||
<FormattedMessage id="Identifier" defaultMessage="Identifier"/>*
|
||||
</Label>
|
||||
<Input
|
||||
required
|
||||
type="text"
|
||||
name="platformId"
|
||||
id="platform-id"
|
||||
onChange={this.onTextFieldChange}/>
|
||||
<FormFeedback id="form-error">{this.state.errors.identifier}</FormFeedback>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-icon">
|
||||
<FormattedMessage id='Icon' defaultMessage='Icon'/>
|
||||
</Label>
|
||||
<span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
|
||||
<div id="app-icon-container">
|
||||
{this.state.icon.map((tile) => (
|
||||
<div id="app-image-icon">
|
||||
<img src={tile.preview} height={200} width={200}/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{this.state.icon.length === 0 ?
|
||||
<Dropzone
|
||||
className="application-create-icon-dropzone"
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(icon, rejected) => {
|
||||
this.setState({icon, rejected});
|
||||
}}
|
||||
>
|
||||
<i className="fw fw-add"></i>
|
||||
</Dropzone> : <div/>}
|
||||
</div>
|
||||
<FormFeedback id="form-error">{this.state.errors.icon}</FormFeedback>
|
||||
</FormGroup>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
||||
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||
</Button>
|
||||
<Button className="custom-raised primary" onClick={this.onNextClick}>
|
||||
<FormattedMessage id="Next" defaultMessage="Next"/>
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default General;
|
||||
@ -0,0 +1,169 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import React, {Component} from 'react';
|
||||
import {Button, Col, FormGroup, Input, Label, ModalBody, ModalFooter, Row} from "reactstrap";
|
||||
import {FormattedMessage} from "react-intl";
|
||||
|
||||
/**
|
||||
* key : value +
|
||||
* */
|
||||
class Properties extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.onBackClick = this.onBackClick.bind(this);
|
||||
this.submitForm = this.submitForm.bind(this);
|
||||
this.onAddPropertyClick = this.onAddPropertyClick.bind(this);
|
||||
this.onKeyFieldChange = this.onKeyFieldChange.bind(this);
|
||||
this.onValueFieldChange = this.onValueFieldChange.bind(this);
|
||||
this.onPropertyDelete = this.onPropertyDelete.bind(this);
|
||||
this.state = {
|
||||
key: "",
|
||||
value: "",
|
||||
properties: []
|
||||
}
|
||||
}
|
||||
|
||||
onCancelClick() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
onBackClick() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
submitForm() {
|
||||
let platformProps = {
|
||||
"properties": this.state.properties
|
||||
};
|
||||
this.props.onSubmit(platformProps);
|
||||
}
|
||||
|
||||
onAddPropertyClick() {
|
||||
let {key, value, properties} = this.state;
|
||||
let property = {
|
||||
name: key,
|
||||
defaultValue: value,
|
||||
optional: false
|
||||
};
|
||||
|
||||
properties.push(property);
|
||||
|
||||
this.setState({property: properties, key: "", value: ""})
|
||||
}
|
||||
|
||||
onKeyFieldChange(event) {
|
||||
this.setState({key: event.target.value});
|
||||
}
|
||||
|
||||
onValueFieldChange(event) {
|
||||
this.setState({value: event.target.value});
|
||||
}
|
||||
|
||||
onPropertyDelete(key) {
|
||||
let properties = this.state.properties;
|
||||
const propertyToDelete = properties.map((property) => property.name).indexOf(key);
|
||||
properties.splice(propertyToDelete, 1);
|
||||
this.setState({properties: properties});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<ModalBody>
|
||||
<FormGroup>
|
||||
<Label for="platform-properties">
|
||||
<FormattedMessage id="Platform.Properties" defaultMessage="Platform.Properties"/></Label>
|
||||
<Row>
|
||||
<Col>
|
||||
<Input
|
||||
placeholder="Key"
|
||||
type="text"
|
||||
name="app-tags"
|
||||
id="app-tags"
|
||||
value={this.state.key}
|
||||
onChange={this.onKeyFieldChange}
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<Input
|
||||
placeholder="value"
|
||||
type="text"
|
||||
name="app-tags"
|
||||
id="app-tags"
|
||||
value={this.state.value}
|
||||
onChange={this.onValueFieldChange}
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<Button className="custom-flat circle-btn-add" onClick={this.onAddPropertyClick}>
|
||||
<i className="fw fw-add"></i>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<div className="platform-property-container">
|
||||
{this.state.properties.map(
|
||||
property => {
|
||||
return (
|
||||
<Row key={property.name} className="platform-property-row">
|
||||
<Col key={property.name}>
|
||||
{property.name}
|
||||
</Col>
|
||||
<Col>
|
||||
{property.defaultValue}
|
||||
</Col>
|
||||
<Col>
|
||||
<Button
|
||||
className="custom-flat circle-btn-clear"
|
||||
onClick={() => {
|
||||
this.onPropertyDelete(property.name)
|
||||
}}
|
||||
>
|
||||
<i className="fw fw-error"></i>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</FormGroup>
|
||||
</ModalBody>
|
||||
<ModalFooter className="custom-footer row">
|
||||
<div className="footer-back-btn col">
|
||||
<Button className="custom-flat primary-flat" onClick={this.onBackClick}>
|
||||
<FormattedMessage id="Back" defaultMessage="Back"/>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="footer-main-btn col">
|
||||
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
||||
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||
</Button>
|
||||
<Button className="custom-flat primary-flat" onClick={this.submitForm}>
|
||||
<FormattedMessage id="Create" defaultMessage="Create"/>
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Properties;
|
||||
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import Configure from './Configure';
|
||||
import General from './General';
|
||||
import Properties from './Properties';
|
||||
|
||||
export {Configure, General, Properties}
|
||||
@ -0,0 +1,221 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React, {Component} from 'react';
|
||||
import {Modal, ModalHeader} from "reactstrap";
|
||||
import {FormattedMessage} from "react-intl";
|
||||
import Stepper from "../../UIComponents/StepprHeader/Stepper";
|
||||
import PlatformMgtApi from "../../../api/platformMgtApi";
|
||||
import AuthHandler from "../../../api/authHandler";
|
||||
import {General, Configure, Properties} from "./CreateSteps";
|
||||
|
||||
/**
|
||||
* Platform view component.
|
||||
* */
|
||||
class PlatformCreate extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.onClose = this.onClose.bind(this);
|
||||
this.setStepData = this.setStepData.bind(this);
|
||||
this.onSubmit = this.onSubmit.bind(this);
|
||||
this.onPrevClick = this.onPrevClick.bind(this);
|
||||
this.onNextClick = this.onNextClick.bind(this);
|
||||
this.state = {
|
||||
finished: false,
|
||||
stepIndex: 0,
|
||||
stepData: [],
|
||||
general: {},
|
||||
configure: {},
|
||||
platformProps: {},
|
||||
open: false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
componentWillReceiveProps(props, nextprops) {
|
||||
this.setState({open: props.open})
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({open: this.props.open});
|
||||
}
|
||||
|
||||
onClose() {
|
||||
this.setState({open: false, stepIndex: 0, general: {}, configure: {}, platformProps: {}})
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles next button click event.
|
||||
* */
|
||||
onNextClick() {
|
||||
// console.log(this.state); //TODO: Remove this
|
||||
const {stepIndex} = this.state;
|
||||
|
||||
if (stepIndex + 1 > 2) {
|
||||
console.log(this.state);
|
||||
this.onSubmit();
|
||||
} else {
|
||||
this.setState({
|
||||
stepIndex: stepIndex + 1,
|
||||
finished: stepIndex + 1 > 1
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles form submit.
|
||||
* platform.identifier = this.state.identifier;
|
||||
platform.name = this.state.name;
|
||||
platform.description = this.state.description;
|
||||
platform.tags = this.state.tags;
|
||||
platform.properties = this.state.platformProperties;
|
||||
platform.icon = this.state.icon;
|
||||
platform.enabled = this.state.enabled;
|
||||
platform.allTenants = this.state.allTenants;
|
||||
platform.defaultTenantMapping = true;
|
||||
|
||||
*
|
||||
*
|
||||
* */
|
||||
onSubmit(platformProps) {
|
||||
let {general, configure} = this.state;
|
||||
|
||||
console.log(general);
|
||||
|
||||
let platformCreatePromise = PlatformMgtApi.createPlatform(general, configure, platformProps);
|
||||
platformCreatePromise.then(response => {
|
||||
console.log(response.data)
|
||||
}
|
||||
).catch(
|
||||
function (err) {
|
||||
AuthHandler.unauthorizedErrorHandler(err);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Saves form data in each step in to the state.
|
||||
* @param step: The step number of the step data.
|
||||
* @param data: The form data of the step.
|
||||
* */
|
||||
setStepData(step, data) {
|
||||
console.log(data); //TODO: Remove this
|
||||
switch (step) {
|
||||
case "general": {
|
||||
this.setState({general: data}, this.onNextClick());
|
||||
break;
|
||||
}
|
||||
case "configure": {
|
||||
this.setState({configure: data}, this.onNextClick());
|
||||
break;
|
||||
}
|
||||
case "platformProps": {
|
||||
this.setState({platformProps: data}, this.onNextClick());
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Handled [ < Prev ] button click.
|
||||
* This clears the data in the current step and returns to the previous step.
|
||||
* */
|
||||
onPrevClick() {
|
||||
console.log(this.state.stepIndex);
|
||||
const {stepIndex} = this.state;
|
||||
if (stepIndex > 0) {
|
||||
this.setState({stepIndex: stepIndex - 1, finished: false});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Defines all the Steps in the stepper. (Wizard)
|
||||
*
|
||||
* Extension Point: If any extra steps needed, follow the instructions below.
|
||||
* 1. Create the required form ./Forms directory.
|
||||
* 2. Add defined case statements.
|
||||
* 3. Define the Step in render function.
|
||||
*
|
||||
* */
|
||||
getStepContent(stepIndex) {
|
||||
switch (stepIndex) {
|
||||
case 0:
|
||||
return (
|
||||
<General
|
||||
defaultData={this.state.general}
|
||||
setStepData={this.setStepData}
|
||||
close={this.onClose}
|
||||
/>
|
||||
);
|
||||
case 1:
|
||||
return (
|
||||
<Configure
|
||||
defaultData={this.state.configure}
|
||||
handlePrev={this.onPrevClick}
|
||||
setStepData={this.setStepData}
|
||||
close={this.onClose}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<Properties
|
||||
defaultData={this.state.properties}
|
||||
handlePrev={this.onPrevClick}
|
||||
onSubmit={this.onSubmit}
|
||||
close={this.onClose}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return <div/>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
getStepperHeaders() {
|
||||
return (
|
||||
[{index: 1, text: "General"},
|
||||
{index: 2, text: "Configure"},
|
||||
{index: 3, text: "Properties"},
|
||||
]
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
const {stepIndex} = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Modal isOpen={this.state.open} toggle={this.toggle} id="app-create-modal" backdrop={'static'}>
|
||||
<ModalHeader className="app-create-modal-header">
|
||||
<FormattedMessage id="Create.Platform" defaultMessage="Create.Platform"/>
|
||||
</ModalHeader>
|
||||
<Stepper
|
||||
activeStep={stepIndex + 1}
|
||||
previousStep={stepIndex}
|
||||
stepContent={this.getStepperHeaders()}
|
||||
/>
|
||||
{this.getStepContent(stepIndex)}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PlatformCreate;
|
||||
@ -1,83 +0,0 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React, {Component} from 'react';
|
||||
import {Button, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap";
|
||||
import {FormattedMessage} from "react-intl";
|
||||
|
||||
/**
|
||||
* Platform view component.
|
||||
* */
|
||||
class PlatformCreate extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.onCancelClick = this.onCancelClick.bind(this);
|
||||
this.state = {
|
||||
open: false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
componentWillReceiveProps(props, nextprops) {
|
||||
this.setState({open: props.open})
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({open: this.props.open});
|
||||
}
|
||||
|
||||
onCancelClick() {
|
||||
this.setState({open: false})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Modal isOpen={this.state.open} toggle={this.toggle} id="platform-create-modal" backdrop={'static'}>
|
||||
<ModalHeader>
|
||||
<FormattedMessage id="Create.Platform" defaultMessage="Create.Platform"/>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<FormGroup>
|
||||
<Label for="platform-name">
|
||||
<FormattedMessage id="Name" defaultMessage="Name"/>*
|
||||
</Label>
|
||||
<Input required type="text" name="appName" id="platform-name"/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="platform-description">
|
||||
<FormattedMessage id="Description" defaultMessage="Description"/>*
|
||||
</Label>
|
||||
<Input required type="textarea" name="appName" id="platform-description"/>
|
||||
</FormGroup>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
||||
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||
</Button>
|
||||
<Button className="custom-raised primary">
|
||||
<FormattedMessage id="Create" defaultMessage="Create"/>
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PlatformCreate;
|
||||
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import PlatformCreate from './Create/PlatformCreate';
|
||||
import Platform from './Platform';
|
||||
import PlatformListing from './PlatformListing';
|
||||
|
||||
export {PlatformListing, PlatformCreate, Platform};
|
||||
Loading…
Reference in new issue