From 39925efacf5a566edbb69ac08b329c377508773c Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 27 Aug 2017 21:42:47 +0530 Subject: [PATCH] Created the application listing and platform create components. --- .../Application/ApplicationListing.js | 146 +++++++++++++++++- .../src/components/Platform/PlatformCreate.js | 33 ++-- 2 files changed, 162 insertions(+), 17 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.js index d81c32a7905..29e51ae5127 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.js @@ -18,13 +18,151 @@ 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'; /** - * Application List 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 ApplicationListing extends Component{ +class ApplicationListing extends Component { + constructor() { + super(); + this.state = { + data: [], + asc: true + } + } + + // data = [ + // { + // id: Math.random(), + // applicationName:"Cne", + // platform:'Android', + // category:"Public", + // status: "Created" + // }, + // { + // id: Math.random(), + // applicationName:"Gone", + // platform:'IOS', + // category:"Public", + // status: "Created" + // }, + // { + // id: Math.random(), + // applicationName:"Ane", + // platform:'Android', + // category:"Public", + // status: "Created" + // }, + // { + // id: Math.random(), + // applicationName:"one", + // platform:'Android', + // category:"Public", + // status: "Created" + // }, + // { + // id: Math.random(), + // applicationName:"one", + // platform:'Android', + // category:"Public", + // status: "Created" + // }, + // ]; + + headers = [ + { + data_id: "image", + data_type: "image", + sortable: false, + label: ""}, + { + data_id: "applicationName", + data_type: "string", + sortable: true, + label: "Application Name", + sort: this._sortData.bind(this) + }, + { + data_id: "platform", + data_type: "image_array", + sortable: false, + label: "Platform"}, + { + data_id: "category", + data_type: "string", + sortable: false, + label: "Category" + }, + { + data_id: "status", + data_type: "string", + sortable: false, + label: "Status" + } + ]; + + 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 ( +
+ + + + + + + + + +
); + } } -export default withRouter(ApplicationListing); \ No newline at end of file +ApplicationListing.propTypes = {}; + +export default withRouter(ApplicationListing); 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 fca3e9b7a77..b0d7e35ad34 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 @@ -21,12 +21,12 @@ import Dropzone from 'react-dropzone'; import React, {Component} from 'react'; import Toggle from 'material-ui/Toggle'; import MenuItem from 'material-ui/MenuItem'; -import Close from 'material-ui/svg-icons/navigation/close'; import TextField from 'material-ui/TextField'; import FlatButton from 'material-ui/FlatButton'; import IconButton from 'material-ui/IconButton'; import SelectField from 'material-ui/SelectField'; import RaisedButton from 'material-ui/RaisedButton'; +import Close from 'material-ui/svg-icons/navigation/close'; import {Card, CardActions, CardTitle} from 'material-ui/Card'; import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline'; @@ -52,7 +52,11 @@ class PlatformCreate extends Component { } } - handleToggle(event) { + /** + * Handles toggle button actions. + * One method is used for all the toggle buttons and, each toggle is identified by the id. + * */ + _handleToggle(event) { switch (event.target.id) { case "enabled" : { let enabled = this.state.enabled; @@ -67,21 +71,24 @@ class PlatformCreate extends Component { } } - removeProperty(p) { + /** + * Remove the selected property from the property list. + * */ + _removeProperty(property) { let properties = this.state.platformProperties; - properties.splice(properties.indexOf(p), 1); + properties.splice(properties.indexOf(property), 1); this.setState({platformProperties: properties}); } - addProperty() { - let property = {key: Math.random(), value: "Temp Prop"}; - let properties = this.state.platformProperties; - properties.push(property); - this.setState({platformProperties: properties}); + /** + * Add a new platform property. + * TODO: Create a property object and send to the endpoint. + * */ + _addProperty() { + } render() { - console.log(this.state.platformProperties); return (
@@ -109,7 +116,7 @@ class PlatformCreate extends Component { id="tenant" label="Shared with all Tenants" labelPosition="right" - onToggle={this.handleToggle.bind(this)} + onToggle={this._handleToggle.bind(this)} defaultToggled={this.state.allTenants} />
{this.state.platformProperties.map((p) => { return
{p.key} : {p.value} - +
})} @@ -143,7 +150,7 @@ class PlatformCreate extends Component { - +