From d2705b14279283434fcf0c79bce8bfe8087e249e Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 20 Aug 2017 01:44:12 +0530 Subject: [PATCH] Added the stepper and App creation first step. --- .../src/main/resources/publisher/package.json | 1 + .../src/main/resources/publisher/src/App.js | 61 ++++--- .../src/components/Application/Create.js | 168 ++++++++++++++++++ .../src/components/Application/Forms/Step1.js | 117 ++++++++++++ .../src/components/Application/Forms/Step2.js | 61 +++++++ .../src/components/Application/Forms/Step3.js | 61 +++++++ .../src/components/Application/Forms/index.js | 23 +++ .../src/components/Base/BaseLayout.js | 107 +++++++++-- .../components/Overview/PublisherOverview.js | 41 +++++ .../src/components/User/Login/Login.js | 133 ++++++++------ .../publisher/src/components/index.js | 3 +- 11 files changed, 673 insertions(+), 103 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step2.js create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/index.js create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Overview/PublisherOverview.js 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 14b66eaaac..fe5f46e421 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 @@ -15,6 +15,7 @@ "latest-version": "^3.1.0", "material-ui": "^0.19.0", "material-ui-datatables": "^0.18.2", + "qs": "^6.5.0", "react": "^15.6.1", "react-dom": "^15.6.1", "react-images-uploader": "^1.1.0", 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 ba5878f632..771422d0c1 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,41 +16,40 @@ * under the License. */ -import React, {Component} from 'react'; -import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom' import './App.css' -import {BaseLayout, Create, Login, NotFound} from './components' -import createHistory from 'history/createBrowserHistory'; - -const history = createHistory({basename:'/publisher'}); +import React, {Component} from 'react'; +import createHistory from 'history/createHashHistory'; +import {HashRouter as Router, Redirect, Route, Switch} from 'react-router-dom' +import {BaseLayout, Create, Login, NotFound, PublisherOverview} from './components' +const history = createHistory({basename: '/publisher'}); class Base extends Component { constructor() { super(); this.state = { - user: "m" + user: "s" } } render() { if (this.state.user) { - return( + return (
- - - - - - - - - + + + {/**/} + {/**/} + + {/**/} + + + - +
@@ -62,19 +61,19 @@ class Base extends Component { } class Publisher extends Component { - render() { - return ( -
- - - - - - - -
- ); - } + render() { + return ( +
+ + + + + + + +
+ ); + } } export default Publisher; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create.js index 9eb827eb70..58fa7aa8ec 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create.js @@ -15,3 +15,171 @@ * specific language governing permissions and limitations * under the License. */ + +import React, {Component} from 'react'; +import Dialog from 'material-ui/Dialog'; +import {withRouter} from 'react-router-dom'; +import {Step1, Step2, Step3} from './Forms'; +import FlatButton from 'material-ui/FlatButton'; +import RaisedButton from 'material-ui/RaisedButton'; +import {Card, CardActions, CardTitle} from 'material-ui/Card'; +import {Step, StepLabel, Stepper,} from 'material-ui/Stepper'; + +class Create extends Component { + constructor() { + super(); + this.setStepData.bind(this); + this.removeStepData.bind(this); + this.handleSubmit.bind(this); + this.handleCancel.bind(this); + this.handleYes.bind(this); + this.handleNo.bind(this); + this.state = { + finished: false, + stepIndex: 0, + stepData: [], + isDialogOpen: false + }; + } + + handleNext = () => { + const {stepIndex} = this.state; + this.setState({ + stepIndex: stepIndex + 1, + finished: stepIndex >= 2, + }); + }; + + handleSubmit = () => { + console.log(this.state.stepData); + }; + + handleCancel = () => { + this.setState({isDialogOpen: true}); + }; + + handlePrev = () => { + const {stepIndex} = this.state; + if (stepIndex > 0) { + this.removeStepData(); + this.setState({stepIndex: stepIndex - 1}); + } + }; + + setStepData = (step, data) => { + console.log(step, data, this.state.stepData); + let tmpStepData = this.state.stepData; + tmpStepData.push({step: step, data: data}); + + this.setState({stepData: tmpStepData}) + }; + + /** + * Remove the last data point + * */ + removeStepData = () => { + let tempData = this.state.stepData; + tempData.pop(); + this.setState({stepData: tempData}); + }; + + handleYes = () => { + this.setState({finished: false, stepIndex: 0, stepData: [], isDialogOpen: false}); + }; + + handleNo = () => { + this.setState({isDialogOpen: false}); + }; + + getStepContent(stepIndex) { + switch (stepIndex) { + case 0: + return ; + case 1: + return ; + case 2: + return ; + default: + return 'You\'re a long way from home sonny jim!'; + } + } + + + render() { + const {finished, stepIndex} = this.state; + const contentStyle = {margin: '0 16px'}; + + const actions = [ + , + , + ]; + + + return ( +
+ + + + {/** + * The stepper goes here. + */} + +
+ + + Select Application Platform + + + Enter Application Details + + + Release + + +
+ {finished ? ( +
+

Create App?

+
+ + + +
+ ) : ( +
+ {this.getStepContent(stepIndex)} +
+ )} +
+
+ + + + Do you really want to cancel? + +
); + } +} + +export default withRouter(Create); 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 new file mode 100644 index 0000000000..a8fbec5e84 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js @@ -0,0 +1,117 @@ +/* + * 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 RaisedButton from 'material-ui/RaisedButton'; +import FlatButton from 'material-ui/FlatButton'; +import TextField from 'material-ui/TextField'; +import SelectField from 'material-ui/SelectField'; +import MenuItem from 'material-ui/MenuItem'; + +class Step1 extends Component { + constructor() { + super(); + this.state = { + finished: false, + stepIndex: 0, + store: 1, + platform: 1, + stepData: [] + }; + } + + handleNext = () => { + this.props.handleNext(); + }; + + setStepData() { + this.props.setData("step1", {step:"Dfds"}); + this.handleNext.bind(this); + } + + handleClick() { + this.setStepData(); + this.handleNext(); + } + + handlePrev() { + this.props.handlePrev(); + } + + onChangePlatform = (event, index, value) => { + this.setState({platform: value}); + }; + + onChangeStore = (event, index, value) => { + this.setState({store: value}); + }; + + render() { + const {finished, stepIndex} = this.state; + const contentStyle = {margin: '0 16px'}; + return ( +
+
+
+
+
+ + + +
+ + + + + +
+
+ + +
+
+
+
+ ); + } +} + +export default Step1; \ 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/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 new file mode 100644 index 0000000000..166e3e1c68 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step2.js @@ -0,0 +1,61 @@ +/* + * 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 RaisedButton from 'material-ui/RaisedButton'; +import FlatButton from 'material-ui/FlatButton'; + +class Step2 extends Component { + constructor() { + super(); + } + + handleNext() { + this.props.handleNext(); + } + + handlePrev() { + this.props.handlePrev(); + } + + render() { + const contentStyle = {margin: '0 16px'}; + return ( +
+ Step2 +
+
+ + +
+
+
+ ); + } +} + +export default Step2; \ 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/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 new file mode 100644 index 0000000000..305c55d688 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js @@ -0,0 +1,61 @@ +/* + * 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 RaisedButton from 'material-ui/RaisedButton'; +import FlatButton from 'material-ui/FlatButton'; + +class Step3 extends Component { + constructor() { + super(); + } + + handleFinish() { + this.props.handleFinish(); + } + + handlePrev() { + this.props.handlePrev(); + } + + render() { + const contentStyle = {margin: '0 16px'}; + return ( +
+ Step3 +
+
+ + +
+
+
+ ); + } +} + +export default Step3; \ 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/Application/Forms/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/index.js new file mode 100644 index 0000000000..9f5ad0bdac --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/index.js @@ -0,0 +1,23 @@ +/* + * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import Step1 from './Step1'; +import Step2 from './Step2'; +import Step3 from './Step3'; + +export {Step1, Step2, Step3}; \ 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/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 6260aa6829..c6b218464c 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 @@ -19,12 +19,17 @@ import React, {Component} from 'react'; import AppBar from 'material-ui/AppBar'; import Drawer from 'material-ui/Drawer'; -import MenuItem from 'material-ui/MenuItem'; -import Menu from 'material-ui/Menu'; import IconButton from 'material-ui/IconButton'; -import Notifications from 'material-ui/svg-icons/social/notifications'; +import NotificationsIcon from 'material-ui/svg-icons/social/notifications'; +import Apps from 'material-ui/svg-icons/navigation/apps'; +import DevicesOther from 'material-ui/svg-icons/hardware/devices-other'; import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle'; +import Dashboard from 'material-ui/svg-icons/action/dashboard'; +import Add from 'material-ui/svg-icons/content/add-circle'; +import Feedback from 'material-ui/svg-icons/action/feedback'; import {withRouter} from 'react-router-dom' +import Badge from 'material-ui/Badge'; +import {List, ListItem} from 'material-ui/List'; /** @@ -35,9 +40,48 @@ import {withRouter} from 'react-router-dom' * */ class BaseLayout extends Component { + constructor() { + super(); + this.state = { + notifications: 0, + user: 'Admin' + } + } + + componentWillMount() { + + } + handleApplicationClick() { - console.log("Application"); - window.location = '/publisher/assets/apps'; + this.handleHistory('/assets/apps'); + } + + handleOverviewClick() { + this.handleHistory('/overview'); + } + + handleApplicationCreateClick() { + this.handleHistory('/assets/apps/create'); + } + + handlePlatformClick() { + this.handleHistory('/assets/platforms'); + } + + handlePlatformCreateClick() { + this.handleHistory('/assets/platforms/create'); + } + + handleReviewClick() { + this.handleHistory('/assets/reviews'); + } + + /** + * The method to update the history. + * to: The URL to route. + * */ + handleHistory(to) { + this.props.history.push(to); } render() { @@ -46,9 +90,15 @@ class BaseLayout extends Component { - - - + + + + + { console.log("Clicked") }}> @@ -58,12 +108,41 @@ class BaseLayout extends Component { } />
- - - Applications - Platforms - Reviews - + + + }/> + } + initiallyOpen={false} + primaryTogglesNestedList={true} + onClick={this.handleApplicationClick.bind(this)} + nestedItems={[ + } + />]} + /> + } + initiallyOpen={false} + primaryTogglesNestedList={true} + onClick={this.handlePlatformClick.bind(this)} + nestedItems={[ + } + />]} + /> + }/> +
+ Overview +
+ ); + } +} + +export default PublisherOverview; \ 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 f93c7b48ad..c9197de104 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 @@ -16,27 +16,40 @@ * under the License. */ -import React, { Component } from 'react'; -import {Card, CardTitle, CardActions, CardMedia} from 'material-ui/Card'; +import React, {Component} from 'react'; +import {Redirect, Switch} from 'react-router-dom'; +import {Card, CardActions, CardMedia, CardTitle} from 'material-ui/Card'; import RaisedButton from 'material-ui/RaisedButton'; -import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator'; +import {TextValidator, ValidatorForm} from 'react-material-ui-form-validator'; import Checkbox from 'material-ui/Checkbox'; +import qs from 'qs'; + +//todo: remove the {TextValidator, ValidatorForm} and implement it manually. class Login extends Component { constructor() { super(); this.state = { + isLoggedIn: true, + referrer: "/", userName: "", password: "", rememberMe: true } } + componentDidMount() { + let queryString = this.props.location.search; + console.log(queryString); + queryString = queryString.replace(/^\?/, ''); + /* With QS version up we can directly use {ignoreQueryPrefix: true} option */ + let params = qs.parse(queryString); + if (params.referrer) { + this.setState({referrer: params.referrer}); + } + } handleLogin(event) { - console.log(this.state); - - event.preventDefault(); } @@ -45,7 +58,7 @@ class Login extends Component { { userName: event.target.value } - ); + ); } onPasswordChange(event) { @@ -65,56 +78,62 @@ class Login extends Component { } render() { - return ( -
- - {/*TODO: Style the components.*/} - - - - - - - - - console.log(errors)}> - - -
- -
- -
- - - - - -
); + + if (!this.state.isLoggedIn) { + return ( +
+ + {/*TODO: Style the components.*/} + + + + + + console.log(errors)}> + + +
+ +
+ +
+ + + + + +
); + } else { + return ( + + + + ); + } + } } - -export default Login; \ No newline at end of file +export default Login; 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 f166fc81be..dde690556b 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,9 +20,10 @@ import Login from './User/Login/Login' import BaseLayout from './Base/BaseLayout' import Create from './Application/Create' import NotFound from './Error/NotFound' +import PublisherOverview from './Overview/PublisherOverview' /** * Contains all UI components related to Application, Login and Platform */ -export {Login, BaseLayout, Create, NotFound}; \ No newline at end of file +export {Login, BaseLayout, Create, NotFound, PublisherOverview}; \ No newline at end of file