From 4779521c565c750b34c443b1002065665a3583bf Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Mon, 9 Oct 2017 01:22:58 +0530 Subject: [PATCH] Created platform create stepper and content. --- .../publisher/public/locales/en.json | 7 +- .../public/themes/default/default-theme.css | 39 ++- .../src/api/helpers/appMgtApiHelpers.js | 18 ++ .../publisher/src/api/platformMgtApi.js | 25 +- .../Platform/Create/CreateSteps/Configure.jsx | 198 ++++++++++++++++ .../Platform/Create/CreateSteps/General.jsx | 191 +++++++++++++++ .../Create/CreateSteps/Properties.jsx | 169 +++++++++++++ .../Platform/Create/CreateSteps/index.js | 23 ++ .../Platform/Create/PlatformCreate.jsx | 223 ++++++++++++++++++ .../components/Platform/PlatformCreate.jsx | 83 ------- .../src/components/Platform/index.js | 23 ++ 11 files changed, 904 insertions(+), 95 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/Configure.jsx create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/General.jsx create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/Properties.jsx create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/index.js create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/PlatformCreate.jsx delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/index.js diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json index 99cad4fbb5..5be6f63bd4 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json @@ -58,5 +58,10 @@ "No" : "No", "No.Platform.Tags" : "No Platform Tags", "Create.Platform" : "Create Platform", - "Optional": "Optional" + "Optional": "Optional", + "Identifier": "Identifier", + "Next": "Next", + "Platform.Enable": "Enable Platform", + "Share.with.Tenants": "Share between all tenants", + "Platform.Properties": "Platform Properties" } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css index 8fd1ebfd71..32cb3c22b9 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css @@ -121,6 +121,7 @@ body { width: 100%; font-family: "Roboto-Regular" !important; + font-size: 14px !important; background-color: #e8e8e8 !important; } @@ -822,7 +823,29 @@ div.tab button.active { -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important; } -.platform-content:hover { +.platform-property-container { + padding-top: 20px; + font-family: Roboto-Regular; + font-size: 14px; +} + +.platform-property-row { + align-items: center; +} + +.circle-btn-clear { + background-color: white !important; + color: rgba(0, 0, 0, 0.50) !important; +} + +.circle-btn-clear:hover { + background-color: white !important; + color: rgba(0, 0, 0, 0.38) !important; +} + +.circle-btn-clear:focus { + background-color: white !important; + color: rgba(0, 0, 0, 0.60) !important; } .data-table-row-cell { @@ -849,6 +872,20 @@ div.tab button.active { color: #9e9e9e; } +.circle-btn-add { + background-color: #bababa !important; + border-radius: 50% !important; + height: 30px !important; + width: 30px; + text-align: -webkit-center; + font-size: 18px; + padding: 6px !important; +} + +.circle-btn-add:hover { + background-color: #828282 !important; +} + /** If you need to change the color of active steps in stepper, uncomment the following and set the background color and font color as needed. diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/appMgtApiHelpers.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/appMgtApiHelpers.js index a617b13e7d..b0d27c3fa4 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/appMgtApiHelpers.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/appMgtApiHelpers.js @@ -57,4 +57,22 @@ export default class Helper { return tmpTags; } + static buildPlatform(general, config, properties) { + let platform = Object.assign({}, general, config, properties); + + let icon = platform.icon[0]; + delete platform.icon; + + platform.tags = Helper.stringifyTags(platform.tags); + + console.log(platform, icon); + + let tempData = { + "platform": platform, + "icon": icon + }; + + return tempData; + } + } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/platformMgtApi.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/platformMgtApi.js index 709343b3d3..ab6721acb7 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/platformMgtApi.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/platformMgtApi.js @@ -20,6 +20,7 @@ import Axios from 'axios'; import AuthHandler from './authHandler'; import Constants from '../common/constants'; +import Helper from './helpers/appMgtApiHelpers'; /** * Api definitions for Platform management. @@ -27,17 +28,21 @@ import Constants from '../common/constants'; export default class PlatformMgtApi{ /** * Create a new Platform - * @param platformData: The platform data object. + * @param general: The platform data object. + * @param config: The platform data object. + * @param prop: The platform data object. * */ - static createPlatform(platformData) { - const headers = AuthHandler.createAuthenticationHeaders("application/json"); - Axios.post(Constants.platformManagerEndpoints.CREATE_PLATFORM, platformData, {headers: headers}).then( - function (response) { - console.log(response); - } - ).catch(function (err) { - console.log(err); - }); + static createPlatform(general, config, prop) { + const headers = AuthHandler.createAuthenticationHeaders("multipart/form-data"); + let platform = Helper.buildPlatform(general, config, prop); + + let platformData = new FormData(); + platformData.append("platform", platform.platform); + platformData.append("icon", platform.icon); + + console.log(platformData); + + return Axios.post(Constants.platformManagerEndpoints.CREATE_PLATFORM, platformData, {headers: headers}); } /** diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/Configure.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/Configure.jsx new file mode 100644 index 0000000000..71f89d67a1 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/Configure.jsx @@ -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 ( +
+ + +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+ + + +
+ {this.state.tags.map(tag => { + return ( + + ) + } + )} +
+ {this.state.errors.tags} + + + +
+ +
+
+ + +
+ +
+ ) + } + +} + +export default Configure; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/General.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/General.jsx new file mode 100644 index 0000000000..98eedf8cd2 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/General.jsx @@ -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 ( +
+ + + + + {this.state.errors.name} + + + + + {this.state.errors.description} + + + + + {this.state.errors.identifier} + + + + (512 X 512 32 bit PNG) +
+ {this.state.icon.map((tile) => ( +
+ +
+ ))} + + {this.state.icon.length === 0 ? + { + this.setState({icon, rejected}); + }} + > + + :
} +
+ {this.state.errors.icon} + + + + + + +
+ ) + } + +} + +export default General; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/Properties.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/Properties.jsx new file mode 100644 index 0000000000..4b4e7a62c0 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/Properties.jsx @@ -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 ( +
+ + + + + + + + + + + + + + +
+ {this.state.properties.map( + property => { + return ( + + + {property.name} + + + {property.defaultValue} + + + + + + ) + } + )} +
+ + + +
+ +
+
+ + +
+ +
+ ) + } + +} + +export default Properties; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/index.js new file mode 100644 index 0000000000..b5c31cf4b3 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/index.js @@ -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} \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/PlatformCreate.jsx new file mode 100644 index 0000000000..62adc9c16c --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/PlatformCreate.jsx @@ -0,0 +1,223 @@ +/* + * 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 from "./CreateSteps/General"; +import Configure from "./CreateSteps/Configure"; +import Properties from "./CreateSteps/Properties"; + +/** + * 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 ( + + ); + case 1: + return ( + + ); + case 2: + return ( + + ); + default: + return
; + } + } + + + getStepperHeaders() { + return ( + [{index: 1, text: "General"}, + {index: 2, text: "Configure"}, + {index: 3, text: "Properties"}, + ] + ) + } + + render() { + const {stepIndex} = this.state; + return ( +
+ + + + + + {this.getStepContent(stepIndex)} + +
+ ); + } +} + +export default PlatformCreate; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx deleted file mode 100644 index 984cb05d66..0000000000 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx +++ /dev/null @@ -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 ( -
- - - - - - - - - - - - - - - - - - - -
- ); - } -} - -export default PlatformCreate; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/index.js new file mode 100644 index 0000000000..97ce9d7a4a --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/index.js @@ -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}; \ No newline at end of file