Created the application listing and platform create components.

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 {
+    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 (
+            <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
+                <Card style={{display: 'flex', flexWrap: 'wrap'}}>
+                    <TextField hintText="Search"
+                               style={{float:'right', paddingRight: '2px'}}
+                               onChange={this._searchApplications.bind(this)}/>
+                    <CardTitle title="Applications" style={{display: 'flex', flexWrap: 'wrap'}}/>
+                    <CardActions>
+
+                    </CardActions>
+                    <DataTable headers={this.headers}
+                               data={this.data}
+                               handleRowClick={this._onRowClick.bind(this)}/>
+                </Card>
+
+            </div>);
+    }
+}
+
+ApplicationListing.propTypes = {};
+
 export default withRouter(ApplicationListing);

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"};
+     * Add a new platform property.
-        let properties = this.state.platformProperties;
+     * TODO: Create a property object and send to the endpoint.
-        properties.push(property);
+     * */
-        this.setState({platformProperties: properties});
+    _addProperty() {
+
     }
 
     render() {
-        console.log(this.state.platformProperties);
         return (
             <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
                 <Card>
@@ -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}
                                 /> <br/>
                                 <Toggle
@@ -124,7 +131,7 @@ class PlatformCreate extends Component {
                                     <div id="property-container">
                                             {this.state.platformProperties.map((p) => {
                                                 return <div key={p.key}>{p.key} : {p.value}
-                                                    <IconButton onClick={this.removeProperty.bind(this, p)}>
+                                                    <IconButton onClick={this._removeProperty.bind(this, p)}>
                                                         <Close style={{height:'10px', width:'10px'}}/>
                                                     </IconButton>
                                                 </div>})}
@@ -143,7 +150,7 @@ class PlatformCreate extends Component {
                                         <MenuItem value={3} primaryText="Boolean"/>
                                         <MenuItem value={4} primaryText="File"/>
                                     </SelectField>
-                                    <IconButton onClick={this.addProperty.bind(this)}>
+                                    <IconButton onClick={this._addProperty.bind(this)}>
                                         <AddCircleOutline/>
                                     </IconButton>
                                     <br/>