From 4d16d73b232cf0e6d2cf2dea95afbd404f1d75ab Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
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}
-                            /><br />
+                            /><br/>
                             <SelectField
                                 floatingLabelText="Store Type*"
                                 value={this.state.store}
                                 floatingLabelFixed={true}
                                 onChange={this.onChangeStore.bind(this)}
                             >
-                                <MenuItem value={1} primaryText="Enterprise" />
-                                <MenuItem value={2} primaryText="Public" />
-                            </SelectField> <br />
+                                <MenuItem value={1} primaryText="Enterprise"/>
+                                <MenuItem value={2} primaryText="Public"/>
+                            </SelectField> <br/>
                             <SelectField
                                 floatingLabelText="Platform*"
                                 value={this.state.platform}
                                 floatingLabelFixed={true}
                                 onChange={this.onChangePlatform.bind(this)}
                             >
-                                <MenuItem value={1} primaryText="Android" />
-                                <MenuItem value={2} primaryText="iOS" />
-                                <MenuItem value={3} primaryText="Web" />
+                                <MenuItem value={1} primaryText="Android"/>
+                                <MenuItem value={2} primaryText="iOS"/>
+                                <MenuItem value={3} primaryText="Web"/>
                             </SelectField>
                         </div>
                         <div style={{marginTop: 12}}>
                             <FlatButton
                                 label="< Back"
-                                disabled= {true}
+                                disabled={true}
                                 onClick={this.handlePrev.bind(this)}
                                 style={{marginRight: 12}}
                             />
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 (
+            <Chip
+                key={data.key}
+                onRequestDelete={() => this.handleRequestDelete(data.key)}
+                style={this.styles.chip}
+            >
+                {data.value}
+            </Chip>
+        );
+    }
+
     render() {
         const contentStyle = {margin: '0 16px'};
         return (
-                <div style={contentStyle}>
-                    Step2
+            <div style={contentStyle}>
+                <div>
                     <div>
-                        <div style={{marginTop: 12}}>
-                            <FlatButton
-                                label="< Back"
-                                disabled= {false}
-                                onClick={this.handlePrev.bind(this)}
-                                style={{marginRight: 12}}
-                            />
-                            <RaisedButton
-                                label="Next >"
-                                primary={true}
-                                onClick={this.handleNext.bind(this)}
-                            />
+                        <TextField
+                            hintText="Enter a title for your application."
+                            floatingLabelText="Title*"
+                            floatingLabelFixed={true}
+                        /><br/>
+                        <TextField
+                            hintText="Enter a short description for your application."
+                            floatingLabelText="Short Description*"
+                            floatingLabelFixed={true}
+                            multiLine={true}
+                            rows={2}
+                        /><br/>
+                        <TextField
+                            hintText="Enter the description."
+                            floatingLabelText="Description*"
+                            floatingLabelFixed={true}
+                            multiLine={true}
+                            rows={4}
+                        /><br/>
+                        <TextField
+                            hintText="Select the application visibility"
+                            floatingLabelText="Visibility*"
+                            floatingLabelFixed={true}
+                        /><br/>
+                        <TextField
+                            hintText="Enter application tags.."
+                            floatingLabelText="Tags*"
+                            floatingLabelFixed={true}
+                            value={this.state.defValue}
+                            onChange={this.handleTagChange.bind(this)}
+                            onKeyPress={this.addTags.bind(this)}
+                        /><br/>
+                        <div style={this.styles.wrapper}>
+                            {this.state.tags.map(this.renderChip, this)}
                         </div>
+                        <br/>
+                        <SelectField
+                            floatingLabelText="Category*"
+                            value={this.state.category}
+                            floatingLabelFixed={true}
+                        >
+                            <MenuItem value={1} primaryText="Business"/>
+                        </SelectField> <br/>
+                    </div>
+
+                    <div style={{marginTop: 12}}>
+                        <FlatButton
+                            label="< Back"
+                            disabled={false}
+                            onClick={this.handlePrev.bind(this)}
+                            style={{marginRight: 12}}
+                        />
+                        <RaisedButton
+                            label="Next >"
+                            primary={true}
+                            onClick={this.handleNext.bind(this)}
+                        />
                     </div>
                 </div>
+            </div>
         );
     }
 }
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 (
-                <div style={contentStyle}>
-                    Step3
-                    <div>
-                        <div style={{marginTop: 12}}>
-                            <FlatButton
-                                label="< Back"
-                                disabled= {false}
-                                onClick={this.handlePrev.bind(this)}
-                                style={{marginRight: 12}}
-                            />
-                            <RaisedButton
-                                label="Finish"
-                                primary={true}
-                                onClick={this.handleFinish.bind(this)}
-                            />
-                        </div>
+            <div style={contentStyle}>
+                <div>
+                    <Toggle
+                        label="Release the Application"
+                        labelPosition="right"
+                        onToggle={this.handleToggle.bind(this)}
+                        defaultToggled={this.state.showForm}
+                    />
+
+                    {/*If toggle is true, the release form will be shown.*/}
+                    {!this.state.showForm ? <div></div> : <div>
+                        <SelectField
+                            floatingLabelText="Select Release Channel*"
+                            value={this.state.releaseChannel}
+                            floatingLabelFixed={true}
+                        >
+                            <MenuItem value={1} primaryText="Alpha"/>
+                            <MenuItem value={2} primaryText="Beta"/>
+                            <MenuItem value={3} primaryText="GA"/>
+                        </SelectField> <br/>
+                        <TextField
+                            hintText="1.0.0"
+                            floatingLabelText="Version*"
+                            floatingLabelFixed={true}
+                        /><br/>
+                    </div>}
+
+                    <div style={{marginTop: 12}}>
+                        <FlatButton
+                            label="< Back"
+                            disabled={false}
+                            onClick={this.handlePrev.bind(this)}
+                            style={{marginRight: 12}}
+                        />
+                        <RaisedButton
+                            label="Finish"
+                            primary={true}
+                            onClick={this.handleFinish.bind(this)}
+                        />
                     </div>
                 </div>
+            </div>
         );
     }
 }
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.