From 4a065f40c935bcfe1f65a79ecbb6c2d703c92330 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 8 Oct 2017 14:41:54 +0530 Subject: [PATCH 1/9] Modified Switch component based on Material Guidelines. --- .../components/UIComponents/Switch/switch.css | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css index b873104bbd..4cdbf86f14 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css @@ -20,8 +20,8 @@ .switch { position: relative; display: inline-block; - width: 40px; - height: 24px; + width: 36px; + height: 14px; } /* Hide default HTML checkbox */ @@ -35,7 +35,7 @@ left: 0; right: 0; bottom: 0; - background-color: #ccc; + background-color: #a0a0a0; -webkit-transition: .4s; transition: .4s; } @@ -43,17 +43,17 @@ .slider:before { position: absolute; content: ""; - height: 16px; - width: 16px; - left: 4px; - bottom: 4px; + top: -3px; + height: 20px; + width: 20px; background-color: white; -webkit-transition: .4s; transition: .4s; + box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px; } input:checked + .slider { - background-color: #2196F3; + background-color: rgba(33, 150, 243, 0.51); } input:focus + .slider { @@ -61,9 +61,10 @@ input:focus + .slider { } input:checked + .slider:before { - -webkit-transform: translateX(16px); - -ms-transform: translateX(16px); - transform: translateX(16px); + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); + background-color: #2196F3; } /* Rounded sliders */ From 543dd455b0820724e1b4ef8ada93a1936152a7e2 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 8 Oct 2017 14:43:34 +0530 Subject: [PATCH 2/9] Removed unnecessary div elements. --- .../AppPublisherBase/BaseLayout.jsx | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx index 464300be20..d05fe2f8ae 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx @@ -95,6 +95,8 @@ class BaseLayout extends Component { return "Applications"; } else if (href.indexOf("platforms") !== -1) { return "Platforms"; + } else { + return ""; } } @@ -163,23 +165,19 @@ class BaseLayout extends Component { : - + : this.getCurrentPageTitle() === "" ?
: + }
-
- - - {this.props.children} - - -
+ + {this.props.children} + From 20b58330dba42e48fc633ddcee901d6aa5cdce95 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 8 Oct 2017 14:44:43 +0530 Subject: [PATCH 3/9] Refactored platform listing imports. --- .../publisher/src/components/Platform/PlatformListing.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx index e016f002ad..516768d03c 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx @@ -16,11 +16,11 @@ * under the License. */ import React, {Component} from 'react'; -import {Button, Col, Row} from "reactstrap"; +import {Button, Row} from "reactstrap"; import Platform from "./Platform"; import PlatformMgtApi from "../../api/platformMgtApi"; import AuthHandler from "../../api/authHandler"; -import PlatformCreate from "./PlatformCreate"; +import PlatformCreate from "./Create/PlatformCreate"; /** * Platform view component. From ddfbf78e304d3518b906f69d1095dd87d80e63f3 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 8 Oct 2017 15:47:18 +0530 Subject: [PATCH 4/9] Minor changes in switch and step components. --- .../publisher/src/components/UIComponents/StepprHeader/Step.jsx | 2 +- .../publisher/src/components/UIComponents/Switch/switch.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx index 5ddc195449..640a44d97e 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx @@ -37,7 +37,7 @@ class Step extends Component { let stepIndexContent = index === passed || index < passed ? : index; return ( -
+
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css index 4cdbf86f14..67a553afb0 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css @@ -22,6 +22,7 @@ display: inline-block; width: 36px; height: 14px; + margin: 0 0 0 10px !important; } /* Hide default HTML checkbox */ From bf974f53772ddc75aac8d5cec9b835ce8b0e9d11 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 8 Oct 2017 15:48:01 +0530 Subject: [PATCH 5/9] Changed import --- .../src/main/resources/publisher/src/components/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/index.js index d4731483f4..ac0af319e9 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/index.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/index.js @@ -19,8 +19,7 @@ import Login from './User/Login/Login'; import NotFound from './Error/NotFound'; import BaseLayout from './AppPublisherBase/BaseLayout'; -import PlatformCreate from './Platform/PlatformCreate'; -import PlatformListing from './Platform/PlatformListing'; +import {PlatformCreate, PlatformListing} from './Platform'; import ApplicationCreate from './Application/Create/ApplicationCreate'; import ApplicationListing from './Application/ApplicationListing'; import ApplicationEdit from './Application/Edit/Base/ApplicationEditBaseLayout'; From 8488320340218906518d07905813ac452e9fa752 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Mon, 9 Oct 2017 01:17:47 +0530 Subject: [PATCH 6/9] Font change in Chip component. --- .../publisher/src/components/UIComponents/Chip/chip.css | 1 + 1 file changed, 1 insertion(+) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css index fcb4a8a526..84c2ba9ae5 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css @@ -48,6 +48,7 @@ } .chip-close-btn { + font-size: 16px !important; align-content: center; padding-left: 4px; padding-top: 1px; From 4779521c565c750b34c443b1002065665a3583bf Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Mon, 9 Oct 2017 01:22:58 +0530 Subject: [PATCH 7/9] 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 From a526ec14e92aaada23de3c27adc4bc47b199d162 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Mon, 9 Oct 2017 01:30:26 +0530 Subject: [PATCH 8/9] Removed console.logs --- .../publisher/src/api/helpers/appMgtApiHelpers.js | 10 ++++++++-- .../main/resources/publisher/src/api/platformMgtApi.js | 8 +++----- 2 files changed, 11 insertions(+), 7 deletions(-) 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 b0d27c3fa4..5f694fc707 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,6 +57,14 @@ export default class Helper { return tmpTags; } + /** + * Generates Platform data object. + * @param general: Platform general information. + * @param config: Platform configurations. + * @param properties: Platform properties. + * + * @return {{platform: *, icon}} data object and the icon image. + * */ static buildPlatform(general, config, properties) { let platform = Object.assign({}, general, config, properties); @@ -65,8 +73,6 @@ export default class Helper { platform.tags = Helper.stringifyTags(platform.tags); - console.log(platform, icon); - let tempData = { "platform": platform, "icon": icon 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 ab6721acb7..17bb32b394 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 @@ -28,9 +28,9 @@ import Helper from './helpers/appMgtApiHelpers'; export default class PlatformMgtApi{ /** * Create a new Platform - * @param general: The platform data object. - * @param config: The platform data object. - * @param prop: The platform data object. + * @param general: Platform general information. + * @param config: Platform configurations. + * @param prop: Platform properties. * */ static createPlatform(general, config, prop) { const headers = AuthHandler.createAuthenticationHeaders("multipart/form-data"); @@ -40,8 +40,6 @@ export default class PlatformMgtApi{ platformData.append("platform", platform.platform); platformData.append("icon", platform.icon); - console.log(platformData); - return Axios.post(Constants.platformManagerEndpoints.CREATE_PLATFORM, platformData, {headers: headers}); } From a37cdbdbddff96ef2561deb219bfd8a1fc309d9b Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Mon, 9 Oct 2017 11:27:53 +0530 Subject: [PATCH 9/9] Optimized imports --- .../src/components/Platform/Create/CreateSteps/General.jsx | 2 +- .../src/components/Platform/Create/CreateSteps/Properties.jsx | 2 +- .../src/components/Platform/Create/CreateSteps/index.js | 2 +- .../src/components/Platform/Create/PlatformCreate.jsx | 4 +--- 4 files changed, 4 insertions(+), 6 deletions(-) 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 index 98eedf8cd2..b689518890 100644 --- 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 @@ -188,4 +188,4 @@ class General extends Component { } -export default General; \ No newline at end of file +export default General; 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 index 4b4e7a62c0..89b0d972f3 100644 --- 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 @@ -166,4 +166,4 @@ class Properties extends Component { } -export default Properties; \ No newline at end of file +export default Properties; 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 index b5c31cf4b3..0aa48c2d6a 100644 --- 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 @@ -20,4 +20,4 @@ import Configure from './Configure'; import General from './General'; import Properties from './Properties'; -export {Configure, General, Properties} \ No newline at end of file +export {Configure, General, Properties} 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 index 62adc9c16c..38e0ecf4cb 100644 --- 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 @@ -21,9 +21,7 @@ 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"; +import {General, Configure, Properties} from "./CreateSteps"; /** * Platform view component.