inosh
/
device-mgt-core
forked from community/device-mgt-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Created the application listing and platform create components.

Browse Source
4.x.x
Menaka Jayawardena 7 years ago
parent 61befd5a3b
commit 39925efacf
2 changed files with 162 additions and 17 deletions
Show Stats Download Patch File Download Diff File

146
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.js
Unescape View File

@ -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{
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>);
}
}
export default withRouter(ApplicationListing);
ApplicationListing.propTypes = {};
export default withRouter(ApplicationListing);

33
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.js
Unescape View File

@ -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"};
let properties = this.state.platformProperties;
properties.push(property);
this.setState({platformProperties: properties});
/**
* Add a new platform property.
* TODO: Create a property object and send to the endpoint.
* */
_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/>

Write Preview
Loading…
Cancel
Save