From 4d16d73b232cf0e6d2cf2dea95afbd404f1d75ab Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 20 Aug 2017 13:39:37 +0530 Subject: [PATCH] Created the Step 2 and 3 basic forms. Code Formatting. --- .../src/components/Application/Forms/Step1.js | 24 ++-- .../src/components/Application/Forms/Step2.js | 136 ++++++++++++++++-- .../src/components/Application/Forms/Step3.js | 72 +++++++--- .../src/components/Base/BaseLayout.js | 14 +- .../src/components/User/Login/Login.js | 6 +- 5 files changed, 198 insertions(+), 54 deletions(-) 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 a8fbec5e84..ca3e050c1c 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 @@ -17,11 +17,11 @@ */ import React, {Component} from 'react'; -import RaisedButton from 'material-ui/RaisedButton'; -import FlatButton from 'material-ui/FlatButton'; +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 MenuItem from 'material-ui/MenuItem'; +import RaisedButton from 'material-ui/RaisedButton'; class Step1 extends Component { constructor() { @@ -40,7 +40,7 @@ class Step1 extends Component { }; setStepData() { - this.props.setData("step1", {step:"Dfds"}); + this.props.setData("step1", {step: "Dfds"}); this.handleNext.bind(this); } @@ -73,31 +73,31 @@ class Step1 extends Component { hintText="Enter a title for your application." floatingLabelText="Title*" floatingLabelFixed={true} - />
+ />
- - -
+ + +
- - - + + +
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 166e3e1c68..7b89a6bc0c 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,13 +16,48 @@ * under the License. */ +import Chip from 'material-ui/Chip'; import React, {Component} from 'react'; -import RaisedButton from 'material-ui/RaisedButton'; +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'; class Step2 extends Component { constructor() { super(); + this.state = { + tags: [], + defValue: "", + category: 1 + }; + + this.styles = { + chip: { + margin: 4, + }, + wrapper: { + display: 'flex', + flexWrap: 'wrap', + }, + }; + + } + + 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)); + } + } + + handleTagChange(event) { + let defaultValue = this.state.defValue; + defaultValue = event.target.value; + this.setState({defValue: defaultValue}) } handleNext() { @@ -33,27 +68,98 @@ class Step2 extends Component { this.props.handlePrev(); } + + handleRequestDelete = (key) => { + if (key === 3) { + alert('Why would you want to delete React?! :)'); + return; + } + + this.chipData = this.state.tags; + const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key); + this.chipData.splice(chipToDelete, 1); + this.setState({tags: this.chipData}); + }; + + renderChip(data) { + console.log(data); + return ( + this.handleRequestDelete(data.key)} + style={this.styles.chip} + > + {data.value} + + ); + } + render() { const contentStyle = {margin: '0 16px'}; return ( -
- Step2 +
+
-
- - +
+
+
+
+
+
+ {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 305c55d688..fb46507d06 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 @@ -17,12 +17,20 @@ */ import React, {Component} from 'react'; -import RaisedButton from 'material-ui/RaisedButton'; +import Toggle from 'material-ui/Toggle'; +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'; class Step3 extends Component { constructor() { super(); + this.state = { + showForm: false, + releaseChannel: 1 + } } handleFinish() { @@ -33,27 +41,57 @@ class Step3 extends Component { this.props.handlePrev(); } + handleToggle() { + let hide = this.state.showForm; + this.setState({showForm: !hide}); + } + + render() { const contentStyle = {margin: '0 16px'}; return ( -
- Step3 -
-
- - -
+
+
+ + + {/*If toggle is true, the release form will be shown.*/} + {!this.state.showForm ?
:
+ + + + +
+
+
} + +
+ +
+
); } } 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 c6b218464c..cfea271a83 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,20 +16,20 @@ * under the License. */ +import Badge from 'material-ui/Badge'; import React, {Component} from 'react'; import AppBar from 'material-ui/AppBar'; import Drawer from 'material-ui/Drawer'; +import {withRouter} from 'react-router-dom'; import IconButton from 'material-ui/IconButton'; -import NotificationsIcon from 'material-ui/svg-icons/social/notifications'; +import {List, ListItem} from 'material-ui/List'; 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'; +import Dashboard from 'material-ui/svg-icons/action/dashboard'; +import DevicesOther from 'material-ui/svg-icons/hardware/devices-other'; +import NotificationsIcon from 'material-ui/svg-icons/social/notifications'; +import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle'; /** 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 c9197de104..67b4e31719 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,13 +16,13 @@ * under the License. */ +import qs from 'qs'; import React, {Component} from 'react'; +import Checkbox from 'material-ui/Checkbox'; import {Redirect, Switch} from 'react-router-dom'; -import {Card, CardActions, CardMedia, CardTitle} from 'material-ui/Card'; import RaisedButton from 'material-ui/RaisedButton'; +import {Card, CardActions, CardTitle} from 'material-ui/Card'; 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.