From 0746c2f66c99cdb7967c86c1d0a7387d12fd4c32 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Mon, 28 Aug 2017 12:15:29 +0530 Subject: [PATCH] Fixed platform create and platform listing components. --- .../src/components/Platform/PlatformCreate.js | 164 ++++++++++++++---- .../components/Platform/PlatformListing.js | 75 +++++++- .../publisher/src/components/index.js | 4 +- 3 files changed, 200 insertions(+), 43 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.js index b0d7e35ad3..57df4177bd 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.js @@ -48,7 +48,16 @@ class PlatformCreate extends Component { enabled: true, allTenants: false, files: [], - platformProperties: [{key:"Enabled", value: "Boolean"}, {key:"Access Token", value:"String"}] + platformProperties: [], + selectedProperty: 0, + name: "", + description: "", + property: "", + propertyTypes: [ + {key: 0, value: 'String'}, + {key: 1, value: 'Number'}, + {key: 2, value: 'Boolean'}, + {key: 3, value: 'File'}] } } @@ -71,6 +80,14 @@ class PlatformCreate extends Component { } } + /** + * Triggers the onChange action on property type selection. + * */ + _onPropertySelect = (event, index, value) => { + console.log(this.state.propertyTypes[value]); + this.setState({selectedProperty: value}); + }; + /** * Remove the selected property from the property list. * */ @@ -82,78 +99,154 @@ class PlatformCreate extends Component { /** * Add a new platform property. - * TODO: Create a property object and send to the endpoint. * */ _addProperty() { + let property = this.state.property; + let selected = this.state.selectedProperty; + this.setState({platformProperties: + this.state.platformProperties.concat([ + { + key: property, + value: this.state.propertyTypes[selected].value + }]), + property: "", + selectedProperty: 0}); + } + + /** + * Triggers in onChange event of text fields. + * Text fields are identified by their ids and the value will be persisted in the component state. + * */ + _onTextChange = (event, value) => { + let property = this.state.property; + let name = this.state.name; + let description = this.state.description; + + switch (event.target.id) { + case "name": { + name = value; + this.setState({name: name}); + break; + } + + case "description": { + description = value; + this.setState({description: description}); + break; + } + + case "property": { + property = value; + this.setState({property: property}); + break; + } + } + }; + + _onCreatePlatform() { + + } + + _clearForm() { + this.setState({enabled: true, + allTenants: false, + files: [], + platformProperties: [], + selectedProperty: 0, + name: "", + description: "", + property: "",}) } render() { + const { + platformProperties, + allTenants, + enabled, + selectedProperty, + propertyTypes, + name, + description, + property} = this.state; + return (
- {/** - * The stepper goes here. - */}





-

Platform Properties

+

Platform Properties

- {this.state.platformProperties.map((p) => { - return
{p.key} : {p.value} - - - -
})} + {platformProperties.map((p) => { + return
{p.key} : {p.value} + + + +
+ })} +
+
+ + + {propertyTypes.map((type) => { + return + })} + + + + +
- - - - - - - - - - -

Platform Icon*:

@@ -162,8 +255,9 @@ class PlatformCreate extends Component {

- - + +
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.js index e51137e453..6a749d205e 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.js @@ -15,24 +15,85 @@ * specific language governing permissions and limitations * under the License. */ + import React, {Component} from 'react'; +import {withRouter} from 'react-router-dom'; +import TextField from 'material-ui/TextField'; +import DataTable from '../UIComponents/DataTable'; +import {Card, CardActions, CardTitle} from 'material-ui/Card'; /** - * Platform Listing component. + * The App Create Component. + * + * Application creation is handled through a Wizard. (We use Material UI Stepper.) + * + * In each step, data will be set to the state separately. + * When the wizard is completed, data will be arranged and sent to the api. * */ class PlatformListing extends Component { - constructor() { super(); + this.state = { + data: [], + asc: true + } + } + + componentWillMount() { + //Fetch all the applications from backend and create application objects. + } + + /** + * Handles the search action. + * When typing in the search bar, this method will be invoked. + * */ + _searchApplications(word) { + let searchedData = []; + } + + /** + * Handles sort data function and toggles the asc state. + * asc: true : sort in ascending order. + * */ + _sortData() { + let isAsc = this.state.asc; + let datas = isAsc?this.data.sort(this._compare):this.data.reverse(); + this.setState({data: datas, asc: !isAsc}); + } + + _compare(a, b) { + if (a.applicationName < b.applicationName) + return -1; + if (a.applicationName > b.applicationName) + return 1; + return 0; + } + + _onRowClick(id) { + console.log(id) } render() { return ( -
- Platform View -
- ); +
+ + + + + + + + + +
); } } -export default PlatformListing; +PlatformListing.propTypes = {}; + +export default withRouter(PlatformListing); 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 3b16439330..a26e3415c0 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 @@ -20,6 +20,7 @@ import Login from './User/Login/Login'; import NotFound from './Error/NotFound'; import BaseLayout from './Base/BaseLayout'; import PlatformCreate from './Platform/PlatformCreate'; +import PlatformListing from './Platform/PlatformListing'; import PublisherOverview from './Overview/PublisherOverview'; import ApplicationCreate from './Application/ApplicationCreate'; import ApplicationListing from './Application/ApplicationListing'; @@ -28,4 +29,5 @@ import ApplicationListing from './Application/ApplicationListing'; * Contains all UI components related to Application, Login and Platform */ -export {Login, BaseLayout, ApplicationCreate, ApplicationListing, NotFound, PublisherOverview, PlatformCreate}; +export {Login, BaseLayout, ApplicationCreate, ApplicationListing, PlatformListing, NotFound, PublisherOverview, + PlatformCreate};