mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Created the application listing and platform create components.
This commit is contained in:
Menaka Jayawardena
parent
61befd5a3b
commit
39925efacf
@ -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);
|
||||
|
||||
@ -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/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user