From 319d8449724773e2f5e92964f73d48a24874d8c9 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Tue, 22 Aug 2017 16:55:45 +0530 Subject: [PATCH] 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 +