From 319d8449724773e2f5e92964f73d48a24874d8c9 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Tue, 22 Aug 2017 16:55:45 +0530 Subject: [PATCH 01/11] Added prop types and started creating the data table component. --- .../src/main/resources/publisher/src/App.js | 11 +- .../Application/ApplicationCreate.js | 3 + .../src/components/Application/Forms/Step1.js | 8 +- .../src/components/Application/Forms/Step2.js | 44 +++++- .../src/components/Application/Forms/Step3.js | 14 +- .../src/components/Base/BaseLayout.js | 5 + .../src/components/Platform/PlatformCreate.js | 145 +++++++++++++++++- .../src/components/UIComponents/DataTable.js | 24 ++- .../UIComponents/DataTableHeader.js | 34 ++++ .../components/UIComponents/DataTableRow.js | 30 ++++ .../src/components/User/Login/Login.js | 1 + .../publisher/src/components/index.js | 3 +- .../pom.xml | 3 +- 13 files changed, 299 insertions(+), 26 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.js index faa4e14359d..bd5789d551b 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.js @@ -16,11 +16,12 @@ * under the License. */ -import './App.css' +import './App.css'; +import PropTypes from 'prop-types'; import React, {Component} from 'react'; import createHistory from 'history/createHashHistory'; import {HashRouter as Router, Redirect, Route, Switch} from 'react-router-dom' -import {BaseLayout, ApplicationCreate, Login, NotFound, PublisherOverview, PlatformCreate} from './components' +import {BaseLayout, ApplicationCreate, ApplicationListing, Login, NotFound, PublisherOverview, PlatformCreate} from './components' const history = createHistory({basename: '/publisher'}); @@ -51,9 +52,9 @@ class Base extends Component { + - @@ -90,8 +91,6 @@ class Publisher extends Component { } } -Publisher.propTypes = { - user: Object -}; +Publisher.propTypes = {}; export default Publisher; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.js index 849a994663f..53d9fee3215 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.js @@ -16,6 +16,7 @@ * under the License. */ +import PropTypes from 'prop-types'; import React, {Component} from 'react'; import Dialog from 'material-ui/Dialog'; import {withRouter} from 'react-router-dom'; @@ -228,4 +229,6 @@ class ApplicationCreate extends Component { } } +ApplicationCreate.propTypes = {}; + export default withRouter(ApplicationCreate); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js index 8ce132ba24d..ff9247f3243 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js @@ -16,10 +16,10 @@ * under the License. */ +import PropTypes from 'prop-types'; import React, {Component} from 'react'; import MenuItem from 'material-ui/MenuItem'; import TextField from 'material-ui/TextField'; -import FlatButton from 'material-ui/FlatButton'; import SelectField from 'material-ui/SelectField'; import RaisedButton from 'material-ui/RaisedButton'; @@ -137,4 +137,10 @@ class Step1 extends Component { } } +Step1.propTypes = { + handleNext: PropTypes.func, + setData: PropTypes.func, + removeData: PropTypes.func +}; + export default Step1; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step2.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step2.js index 67c709392b2..e54bc522d87 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step2.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step2.js @@ -16,7 +16,9 @@ * under the License. */ +import PropTypes from 'prop-types'; import Chip from 'material-ui/Chip'; +import Dropzone from 'react-dropzone'; import React, {Component} from 'react'; import MenuItem from 'material-ui/MenuItem'; import TextField from 'material-ui/TextField'; @@ -51,7 +53,8 @@ class Step2 extends Component { this.state = { tags: [], defValue: "", - category: 1 + category: 1, + errors: {} }; this.styles = { @@ -63,7 +66,6 @@ class Step2 extends Component { flexWrap: 'wrap', }, }; - } /** @@ -138,17 +140,21 @@ class Step2 extends Component {





{/*Platform Specific Properties.*/} -
- fdfdfd -
+
+

Platform Specific Properties

+

+
+

Screenshots*:

+ +

+

+ +

+
+

Banner*:

+ +

+

+ +

+
+

Icon*:

+ +

+

+ +


@@ -206,4 +231,11 @@ class Step2 extends Component { } } +Step2.prototypes = { + handleNext: PropTypes.func, + handlePrev: PropTypes.func, + setData: PropTypes.func, + removeData: PropTypes.func +}; + export default Step2; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js index dc3e912a9ca..8d3d436abcb 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js @@ -16,6 +16,7 @@ * under the License. */ +import PropTypes from 'prop-types'; import React, {Component} from 'react'; import Toggle from 'material-ui/Toggle'; import MenuItem from 'material-ui/MenuItem'; @@ -51,7 +52,8 @@ class Step3 extends Component { super(); this.state = { showForm: false, - releaseChannel: 1 + releaseChannel: 1, + errors: {} } } @@ -78,7 +80,6 @@ class Step3 extends Component { this.setState({showForm: !hide}); } - render() { const contentStyle = {margin: '0 16px'}; return ( @@ -90,7 +91,6 @@ class Step3 extends Component { onToggle={this.handleToggle.bind(this)} defaultToggled={this.state.showForm} /> - {/*If toggle is true, the release form will be shown.*/} {!this.state.showForm ?
:

} @@ -128,4 +129,11 @@ class Step3 extends Component { } } +Step3.propTypes = { + handleFinish: PropTypes.func, + handlePrev: PropTypes.func, + setData: PropTypes.func, + removeData: PropTypes.func +}; + export default Step3; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.js index 1916005a0af..3c1003b30fe 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.js @@ -16,6 +16,7 @@ * under the License. */ +import PropTypes from 'prop-types'; import Badge from 'material-ui/Badge'; import React, {Component} from 'react'; import AppBar from 'material-ui/AppBar'; @@ -161,4 +162,8 @@ class BaseLayout extends Component { } +BaseLayout.propTypes = { + children: PropTypes.element +} + export default withRouter(BaseLayout); 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 0928586b5af..fca3e9b7a77 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 @@ -15,24 +15,163 @@ * specific language governing permissions and limitations * under the License. */ + +import PropTypes from 'prop-types'; +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 {Card, CardActions, CardTitle} from 'material-ui/Card'; +import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline'; /** - * Platform Create component + * Platform Create component. + * Contains following components: + * * Platform Name + * * Platform Description + * * Platform Icon + * * Whether the platform needs an app to be installed. + * * Whether the platform is enabled by default. + * * Whether the platform is shared with tenants. * */ class PlatformCreate extends Component { constructor() { super(); + this.state = { + enabled: true, + allTenants: false, + files: [], + platformProperties: [{key:"Enabled", value: "Boolean"}, {key:"Access Token", value:"String"}] + } + } + + handleToggle(event) { + switch (event.target.id) { + case "enabled" : { + let enabled = this.state.enabled; + this.setState({enabled: !enabled}); + break; + } + case "tenant" : { + let allTenants = this.state.allTenants; + this.setState({allTenants: !allTenants}); + break; + } + } + } + + removeProperty(p) { + let properties = this.state.platformProperties; + properties.splice(properties.indexOf(p), 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}); } render() { + console.log(this.state.platformProperties); return ( -
- Create Platform +
+ + + + {/** + * The stepper goes here. + */} + +
+
+
+

+
+
+
+

Platform Properties

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

Platform Icon*:

+ +

+

+ +
+
+ + + +
+ +
); } } +PlatformCreate.prototypes = { + enabled: PropTypes.bool, + allTenants: PropTypes.bool, + files: PropTypes.array, + platformProperties: PropTypes.object, + handleToggle: PropTypes.func +}; + export default PlatformCreate; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js index 649d93f32be..6e9f52444b8 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js @@ -15,8 +15,12 @@ * specific language governing permissions and limitations * under the License. */ -import React, {Component} from 'react'; +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import {Table, TableBody} from 'material-ui/Table'; +import DataTableHeader from './DataTableHeader'; +import DataTableRow from './DataTableRow'; /** * Error page. * */ @@ -28,11 +32,23 @@ class DataTable extends Component { render() { return ( -
- Data Table -
+ + + {this.props.headers.map((header) => { + + })} + + + + +
); } } +DataTable.prototypes = { + data: PropTypes.arrayOf(Object), + headers: PropTypes.arrayOf(String) +}; + export default DataTable; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js new file mode 100644 index 00000000000..dd695c249d4 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js @@ -0,0 +1,34 @@ +/* + * 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 PropTypes from 'prop-types'; + +class DataTableHeader extends Component { + +} + +DataTableHeader.prototypes = { + /*sortable : bool + * text: string (The header text) + * */ + label: PropTypes.string, + sortable: PropTypes.bool, + sort: PropTypes.func +}; + +export default DataTableHeader; \ 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/UIComponents/DataTableRow.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js new file mode 100644 index 00000000000..805c211f2e7 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js @@ -0,0 +1,30 @@ +/* + * 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 PropTypes from 'prop-types'; + +class DataTableRow extends Component { + +} + +DataTableRow.propTypes = { + onClick: PropTypes.func, + data: PropTypes.object +}; + +export default DataTableRow; \ 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/User/Login/Login.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.js index 72255be8dd5..3b93e9e1b4c 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.js @@ -17,6 +17,7 @@ */ import qs from 'qs'; +import PropTypes from 'prop-types'; import React, {Component} from 'react'; import Checkbox from 'material-ui/Checkbox'; import {Redirect, Switch} from 'react-router-dom'; 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 3ed7d23ef64..3b164393303 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 @@ -22,9 +22,10 @@ import BaseLayout from './Base/BaseLayout'; import PlatformCreate from './Platform/PlatformCreate'; import PublisherOverview from './Overview/PublisherOverview'; import ApplicationCreate from './Application/ApplicationCreate'; +import ApplicationListing from './Application/ApplicationListing'; /** * Contains all UI components related to Application, Login and Platform */ -export {Login, BaseLayout, ApplicationCreate, NotFound, PublisherOverview, PlatformCreate}; +export {Login, BaseLayout, ApplicationCreate, ApplicationListing, NotFound, PublisherOverview, PlatformCreate}; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/pom.xml b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/pom.xml index 55d169e8de7..1a4ce146e90 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/pom.xml +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/pom.xml @@ -122,5 +122,4 @@ build_prod ./src/main/ - - \ No newline at end of file + From 94f126688ecc22306dfa4afa0c56fa46e913f420 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 27 Aug 2017 20:42:26 +0530 Subject: [PATCH 02/11] Removed Overview section. --- .../src/main/resources/publisher/src/App.js | 4 ++-- .../resources/publisher/src/components/Base/BaseLayout.js | 5 +---- .../publisher/src/components/Overview/PublisherOverview.js | 2 ++ 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.js index bd5789d551b..141d64f2337 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.js @@ -50,8 +50,8 @@ class Base extends Component {
- - + + {/**/} diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.js index 3c1003b30fe..242965cce55 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.js @@ -110,10 +110,7 @@ class BaseLayout extends Component {
- }/> - } initiallyOpen={false} primaryTogglesNestedList={true} diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Overview/PublisherOverview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Overview/PublisherOverview.js index c9640bab151..c5ba536d067 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Overview/PublisherOverview.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Overview/PublisherOverview.js @@ -16,6 +16,7 @@ * under the License. */ import React, {Component} from 'react'; +import DataTable from '../UIComponents/DataTable'; /** * @@ -39,6 +40,7 @@ class PublisherOverview extends Component {
Overview +
); } From 61befd5a3b8f868b00ec496c026895e53a14b4a4 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 27 Aug 2017 21:35:44 +0530 Subject: [PATCH 03/11] Created the DataTable component. --- .../src/main/resources/publisher/package.json | 1 - .../src/components/UIComponents/DataTable.js | 83 +++++++++++++++---- .../UIComponents/DataTableHeader.js | 57 +++++++++++-- .../components/UIComponents/DataTableRow.js | 40 ++++++++- 4 files changed, 155 insertions(+), 26 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json index 804eea3d0de..5e5fd515b50 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json @@ -14,7 +14,6 @@ "history": "^4.6.3", "latest-version": "^3.1.0", "material-ui": "^0.19.0", - "material-ui-datatables": "^0.18.2", "prop-types": "^15.5.10", "qs": "^6.5.0", "react": "^15.6.1", diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js index 6e9f52444b8..5c2cb6959b9 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js @@ -16,39 +16,92 @@ * under the License. */ -import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import {Table, TableBody} from 'material-ui/Table'; -import DataTableHeader from './DataTableHeader'; +import React, {Component} from 'react'; import DataTableRow from './DataTableRow'; +import DataTableHeader from './DataTableHeader'; +import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table'; + /** - * Error page. + * The Custom Table Component. + * This component wraps the material-ui Table component and add some extra functionalities. + * 1. Table header click. (For sorting) + * 2. Table row click. + * + * The main sort function is defined in the component where the data table is created and passed to the + * DataTable component via props. + * + * Following are the DataTable proptypes. + * 1. Headers: Table headers. This is an array of Json Objects. + * An Header Object contains the properties of each header. Currently following properties + * are supported. + * * sortable: boolean : whether the table column is sortable or not. + * * sort: func : If sortable, the sort function. + * * sort: func : If sortable, the sort function. + * * sort: func : If sortable, the sort function. + * * label: String: The Table header string. + * * id: String: Unique id for header. + * + * 2. Data: The list of data that needs to be displayed in the table. + * This is also a json array of data objects. + * The Json object should contain key: value pair where the key is the header id. + * * */ class DataTable extends Component { constructor() { super(); + this.state = { + data: [], + headers: [], + } + + }; + + componentWillMount() { + this.setState({data: this.props.data, headers: this.props.headers}) } - render() { - return ( - - - {this.props.headers.map((header) => { + /** + * Triggers when user click on table row. + * This method invokes the parent method handleRowClick, which is passed via props. + * */ + _handleRowClick(id) { + this.props.handleRowClick(id); + } - })} - - + render() { + const {data, headers} = this.state; + if (data.length > 0) { + return (
+ + + {headers.map((header) => { + return () + } + )} + + + + {data.map((dataItem) =>{ + return () + })} -
- ); + )} + + return (
No apps
); + } } DataTable.prototypes = { data: PropTypes.arrayOf(Object), - headers: PropTypes.arrayOf(String) + headers: PropTypes.arrayOf(Object), + sortData: PropTypes.func, + handleRowClick: PropTypes.func }; export default DataTable; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js index dd695c249d4..f9e793f6cf2 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js @@ -15,20 +15,61 @@ * specific language governing permissions and limitations * under the License. */ -import React, {Component} from 'react'; + import PropTypes from 'prop-types'; +import React, {Component} from 'react'; +import FlatButton from 'material-ui/FlatButton'; +import {TableHeaderColumn} from 'material-ui/Table'; +/** + * Data Table header component. + * This component creates the header elements of the table. + * */ class DataTableHeader extends Component { + constructor() { + super(); + } + + /** + * The onClick function of the table header. + * Invokes the function passed in the header object. + * */ + _tableHeaderClick() { + this.props.header.sort(); + } + + render() { + let headerCell = null; + + /** + * If the header is sortable, create a button with onClick handler. + * else create a span element with label as the table header. + * */ + if (this.props.header.sortable) { + headerCell = ; + } else { + headerCell = {this.props.header.label}; + } + + return ( + + {headerCell} + + ); + } } DataTableHeader.prototypes = { - /*sortable : bool - * text: string (The header text) - * */ - label: PropTypes.string, - sortable: PropTypes.bool, - sort: PropTypes.func + header: PropTypes.object }; -export default DataTableHeader; \ No newline at end of file +export default DataTableHeader; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js index 805c211f2e7..a8df991091b 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js @@ -15,11 +15,47 @@ * specific language governing permissions and limitations * under the License. */ -import React, {Component} from 'react'; + import PropTypes from 'prop-types'; +import React, {Component} from 'react'; +import {TableRow, TableRowColumn} from 'material-ui/Table'; +/** + * Data table row component. + * This component created a row in the data table according to the props. + * */ class DataTableRow extends Component { + constructor() { + super(); + this.state = { + dataItem: {} + } + } + + componentWillMount() { + this.setState({dataItem: this.props.dataItem}) + } + + _handleClick() { + this.props.handleClick(this.state.dataItem.id); + } + + render() { + const {dataItem} = this.state; + return ( + + {Object.keys(dataItem).map((key) => { + if (key !== 'id') { + return {dataItem[key]} + } else { + return + } + + } )} + + ); + } } DataTableRow.propTypes = { @@ -27,4 +63,4 @@ DataTableRow.propTypes = { data: PropTypes.object }; -export default DataTableRow; \ No newline at end of file +export default DataTableRow; From 39925efacf5a566edbb69ac08b329c377508773c Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 27 Aug 2017 21:42:47 +0530 Subject: [PATCH 04/11] 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 { - +
From c389a5ec508fcee4a462b5319a51f6371e664a60 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Mon, 28 Aug 2017 12:14:34 +0530 Subject: [PATCH 05/11] Added extra features to data table. --- .../src/components/UIComponents/DataTable.js | 22 ++++++++++++++----- .../components/UIComponents/DataTableRow.js | 6 ++++- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js index 5c2cb6959b9..4d32077d566 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js @@ -20,6 +20,7 @@ import PropTypes from 'prop-types'; import React, {Component} from 'react'; import DataTableRow from './DataTableRow'; import DataTableHeader from './DataTableHeader'; +import RaisedButton from 'material-ui/RaisedButton'; import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table'; /** @@ -73,7 +74,14 @@ class DataTable extends Component { render() { const {data, headers} = this.state; - if (data.length > 0) { + + let noDataContent = null; + + if (this.props.noDataMessage.type === 'button') { + noDataContent =
+ } + + if (data) { return ( {data.map((dataItem) =>{ - return () + return () })} -
)} + ) + } - return (
No apps
); + return (
{noDataContent}
); } } @@ -101,7 +112,8 @@ DataTable.prototypes = { data: PropTypes.arrayOf(Object), headers: PropTypes.arrayOf(Object), sortData: PropTypes.func, - handleRowClick: PropTypes.func + handleRowClick: PropTypes.func, + noDataMessage: PropTypes.object }; export default DataTable; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js index a8df991091b..fc6f638034d 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js @@ -37,6 +37,9 @@ class DataTableRow extends Component { this.setState({dataItem: this.props.dataItem}) } + /** + * Triggers the click event on the data table row. + * */ _handleClick() { this.props.handleClick(this.state.dataItem.id); } @@ -47,7 +50,8 @@ class DataTableRow extends Component { {Object.keys(dataItem).map((key) => { if (key !== 'id') { - return {dataItem[key]} + return {dataItem[key]} } else { return } From 0746c2f66c99cdb7967c86c1d0a7387d12fd4c32 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Mon, 28 Aug 2017 12:15:29 +0530 Subject: [PATCH 06/11] 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 b0d7e35ad34..57df4177bd3 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 e51137e453a..6a749d205e5 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 3b164393303..a26e3415c02 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}; From 9ce111b724a14404cbcb278b2b7f9ee8d38da35a Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Mon, 28 Aug 2017 12:17:12 +0530 Subject: [PATCH 07/11] Fixed application listing and form formatting. --- .../src/main/resources/publisher/src/App.js | 16 ++-- .../Application/ApplicationListing.js | 77 ++++++++++--------- .../src/components/Application/Forms/Step1.js | 22 +++--- .../src/components/Application/Forms/Step2.js | 29 ++++--- .../src/components/Application/Forms/Step3.js | 12 +-- 5 files changed, 80 insertions(+), 76 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.js index 141d64f2337..c1c824a616b 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.js @@ -17,11 +17,18 @@ */ import './App.css'; -import PropTypes from 'prop-types'; import React, {Component} from 'react'; import createHistory from 'history/createHashHistory'; import {HashRouter as Router, Redirect, Route, Switch} from 'react-router-dom' -import {BaseLayout, ApplicationCreate, ApplicationListing, Login, NotFound, PublisherOverview, PlatformCreate} from './components' +import { + ApplicationCreate, + ApplicationListing, + BaseLayout, + Login, + NotFound, + PlatformCreate, + PlatformListing +} from './components'; const history = createHistory({basename: '/publisher'}); @@ -51,9 +58,9 @@ class Base extends Component { - {/**/} + @@ -67,7 +74,6 @@ class Base extends Component {
) } - return () } } @@ -91,6 +97,4 @@ class Publisher extends Component { } } -Publisher.propTypes = {}; - export default Publisher; 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 29e51ae5127..e3f4e608196 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 @@ -39,43 +39,43 @@ class ApplicationListing extends Component { } } - // 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" - // }, - // ]; + 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 = [ { @@ -156,7 +156,8 @@ class ApplicationListing extends Component { + handleRowClick={this._onRowClick.bind(this)} + noDataMessage={{type: 'button', text: 'Create Application'}}/>
); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js index ff9247f3243..c5964f068ac 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js @@ -51,16 +51,16 @@ class Step1 extends Component { /** * Invokes the handleNext function in Create component. * */ - handleNext = () => { + _handleNext = () => { this.props.handleNext(); }; /** * Persist the current form data to the state. * */ - setStepData() { + _setStepData() { this.props.setData("step1", {step: "Dfds"}); - this.handleNext.bind(this); + this._handleNext.bind(this); } /** @@ -69,22 +69,22 @@ class Step1 extends Component { * Sets the data to the state. * Invokes the handleNext method of Create component. * */ - handleClick() { - this.setStepData(); - this.handleNext(); + _handleClick() { + this._setStepData(); + this._handleNext(); } /** * Triggers when changing the Platform selection. * */ - onChangePlatform = (event, index, value) => { + _onChangePlatform = (event, index, value) => { this.setState({platform: value}); }; /** * Triggers when changing the Store selection. * */ - onChangeStore = (event, index, value) => { + _onChangeStore = (event, index, value) => { this.setState({store: value}); }; @@ -104,7 +104,7 @@ class Step1 extends Component { floatingLabelText="Store Type*" value={this.state.store} floatingLabelFixed={true} - onChange={this.onChangeStore.bind(this)} + onChange={this._onChangeStore.bind(this)} > @@ -113,7 +113,7 @@ class Step1 extends Component { floatingLabelText="Platform*" value={this.state.platform} floatingLabelFixed={true} - onChange={this.onChangePlatform.bind(this)} + onChange={this._onChangePlatform.bind(this)} > @@ -127,7 +127,7 @@ class Step1 extends Component {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step2.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step2.js index e54bc522d87..131f2676702 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step2.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step2.js @@ -73,19 +73,19 @@ class Step2 extends Component { * Clears the tags text field. * Chip gets two parameters: Key and value. * */ - addTags(event) { + _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(this.state.tags)); + this.setState({tags, defValue: ""}); } } /** - * + * Set the value for tag. * */ - handleTagChange(event) { + _handleTagChange(event) { let defaultValue = this.state.defValue; defaultValue = event.target.value; this.setState({defValue: defaultValue}) @@ -94,14 +94,14 @@ class Step2 extends Component { /** * Invokes the handleNext function in Create component. * */ - handleNext() { + _handleNext() { this.props.handleNext(); } /** * Invokes the handlePrev function in Create component. * */ - handlePrev() { + _handlePrev() { this.props.handlePrev(); } @@ -109,7 +109,7 @@ class Step2 extends Component { * Handles Chip delete function. * Removes the tag from state.tags * */ - handleRequestDelete = (key) => { + _handleRequestDelete = (key) => { this.chipData = this.state.tags; const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key); this.chipData.splice(chipToDelete, 1); @@ -119,12 +119,11 @@ class Step2 extends Component { /** * Creates Chip array from state.tags. * */ - renderChip(data) { - console.log(data); + _renderChip(data) { return ( this.handleRequestDelete(data.key)} + onRequestDelete={() => this._handleRequestDelete(data.key)} style={this.styles.chip} > {data.value} @@ -172,11 +171,11 @@ class Step2 extends Component { floatingLabelText="Tags*" floatingLabelFixed={true} value={this.state.defValue} - onChange={this.handleTagChange.bind(this)} - onKeyPress={this.addTags.bind(this)} + onChange={this._handleTagChange.bind(this)} + onKeyPress={this._addTags.bind(this)} />
- {this.state.tags.map(this.renderChip, this)} + {this.state.tags.map(this._renderChip, this)}

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js index 8d3d436abcb..677f7e309d3 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js @@ -61,21 +61,21 @@ class Step3 extends Component { * Handles finish button click. * This invokes handleNext function in parent component. * */ - handleFinish() { + _handleFinish() { this.props.handleFinish(); } /** * Invokes Prev button click. * */ - handlePrev() { + _handlePrev() { this.props.handlePrev(); } /** * Handles release application selection. * */ - handleToggle() { + _handleToggle() { let hide = this.state.showForm; this.setState({showForm: !hide}); } @@ -88,7 +88,7 @@ class Step3 extends Component { {/*If toggle is true, the release form will be shown.*/} @@ -114,13 +114,13 @@ class Step3 extends Component { From e32b6d167c445713afa816ee75354473afdb6b89 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Mon, 28 Aug 2017 13:41:06 +0530 Subject: [PATCH 08/11] Added missing key attributes to the table rows. --- .../resources/publisher/src/components/Base/BaseLayout.js | 2 +- .../publisher/src/components/UIComponents/DataTable.js | 3 ++- .../publisher/src/components/UIComponents/DataTableHeader.js | 2 +- .../publisher/src/components/UIComponents/DataTableRow.js | 4 ++-- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.js index 242965cce55..cc63ca13114 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.js @@ -161,6 +161,6 @@ class BaseLayout extends Component { BaseLayout.propTypes = { children: PropTypes.element -} +}; export default withRouter(BaseLayout); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js index 4d32077d566..0c558b8f8d3 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js @@ -88,7 +88,8 @@ class DataTable extends Component { adjustForCheckbox={ false }> {headers.map((header) => { - return () + return () } )} diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js index f9e793f6cf2..2f6285a8dda 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js @@ -61,7 +61,7 @@ class DataTableHeader extends Component { } return ( - + {headerCell} ); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js index fc6f638034d..6a2a0d1e809 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js @@ -47,13 +47,13 @@ class DataTableRow extends Component { render() { const {dataItem} = this.state; return ( - + {Object.keys(dataItem).map((key) => { if (key !== 'id') { return {dataItem[key]} } else { - return + return } } )} From 89b4e6dc105258f3c472b6c2caf29dbadfff576f Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Mon, 28 Aug 2017 15:09:36 +0530 Subject: [PATCH 09/11] Application search feature for data table. Basic stage. --- .../Application/ApplicationListing.js | 19 ++++++++++++++++--- .../src/components/UIComponents/DataTable.js | 8 ++++++++ 2 files changed, 24 insertions(+), 3 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 e3f4e608196..56e3a832823 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 @@ -111,14 +111,27 @@ class ApplicationListing extends Component { componentWillMount() { //Fetch all the applications from backend and create application objects. + this.setState({data: this.data}); } /** * Handles the search action. * When typing in the search bar, this method will be invoked. * */ - _searchApplications(word) { - let searchedData = []; + _searchApplications(event, word) { + let searchedData; + if (word){ + searchedData = this.data.filter((dataItem) => { + return dataItem.applicationName.includes(word); + }); + } else { + console.log("no") + console.log(this.data) + searchedData = this.data; + } + + this.setState({data: searchedData}, console.log("Searched data ", this.state.data)); + } /** @@ -155,7 +168,7 @@ class ApplicationListing extends Component { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js index 0c558b8f8d3..f14a8dbb396 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js @@ -63,6 +63,12 @@ class DataTable extends Component { this.setState({data: this.props.data, headers: this.props.headers}) } + shouldComponentUpdate(nextProps, nextState) { + console.log("next Props", nextProps.data); + this.setState({data: nextProps.data}); + return true; + } + /** * Triggers when user click on table row. * This method invokes the parent method handleRowClick, which is passed via props. @@ -75,6 +81,8 @@ class DataTable extends Component { render() { const {data, headers} = this.state; + console.log(data); + let noDataContent = null; if (this.props.noDataMessage.type === 'button') { From b70bf91f3afd598e552e21f339e83ee1ce30afeb Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Thu, 7 Sep 2017 17:51:40 +0530 Subject: [PATCH 10/11] Added form validation and image visualization to application and platform create. Removed hash router and used browser router. --- .../resources/publisher/public/index.html | 5 +- .../src/main/resources/publisher/src/App.js | 14 +- .../Application/ApplicationCreate.js | 8 +- .../Application/ApplicationListing.js | 4 +- .../{Forms => CreateSteps}/Step1.js | 31 +- .../Application/CreateSteps/Step2.js | 489 ++++++++++++++++++ .../{Forms => CreateSteps}/Step3.js | 0 .../{Forms => CreateSteps}/index.js | 0 .../src/components/Application/Forms/Step2.js | 240 --------- .../src/components/Platform/PlatformCreate.js | 46 +- 10 files changed, 566 insertions(+), 271 deletions(-) rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/{Forms => CreateSteps}/Step1.js (87%) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.js rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/{Forms => CreateSteps}/Step3.js (100%) rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/{Forms => CreateSteps}/index.js (100%) delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step2.js diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html index 39ac2df1c60..0e627f4af56 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html @@ -25,8 +25,8 @@ manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ --> - - + +