mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Fixed platform create and platform listing components.
This commit is contained in:
Menaka Jayawardena
parent
c389a5ec50
commit
0746c2f66c
@ -48,7 +48,16 @@ class PlatformCreate extends Component {
|
||||
enabled: true,
|
||||
allTenants: false,
|
||||
files: [],
|
||||
platformProperties: [{key:"Enabled", value: "Boolean"}, {key:"Access Token", value:"String"}]
|
||||
platformProperties: [],
|
||||
selectedProperty: 0,
|
||||
name: "",
|
||||
description: "",
|
||||
property: "",
|
||||
propertyTypes: [
|
||||
{key: 0, value: 'String'},
|
||||
{key: 1, value: 'Number'},
|
||||
{key: 2, value: 'Boolean'},
|
||||
{key: 3, value: 'File'}]
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,6 +80,14 @@ class PlatformCreate extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggers the onChange action on property type selection.
|
||||
* */
|
||||
_onPropertySelect = (event, index, value) => {
|
||||
console.log(this.state.propertyTypes[value]);
|
||||
this.setState({selectedProperty: value});
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove the selected property from the property list.
|
||||
* */
|
||||
@ -82,79 +99,155 @@ class PlatformCreate extends Component {
|
||||
|
||||
/**
|
||||
* Add a new platform property.
|
||||
* TODO: Create a property object and send to the endpoint.
|
||||
* */
|
||||
_addProperty() {
|
||||
let property = this.state.property;
|
||||
let selected = this.state.selectedProperty;
|
||||
|
||||
this.setState({platformProperties:
|
||||
this.state.platformProperties.concat([
|
||||
{
|
||||
key: property,
|
||||
value: this.state.propertyTypes[selected].value
|
||||
}]),
|
||||
property: "",
|
||||
selectedProperty: 0});
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggers in onChange event of text fields.
|
||||
* Text fields are identified by their ids and the value will be persisted in the component state.
|
||||
* */
|
||||
_onTextChange = (event, value) => {
|
||||
let property = this.state.property;
|
||||
let name = this.state.name;
|
||||
let description = this.state.description;
|
||||
|
||||
switch (event.target.id) {
|
||||
case "name": {
|
||||
name = value;
|
||||
this.setState({name: name});
|
||||
break;
|
||||
}
|
||||
|
||||
case "description": {
|
||||
description = value;
|
||||
this.setState({description: description});
|
||||
break;
|
||||
}
|
||||
|
||||
case "property": {
|
||||
property = value;
|
||||
this.setState({property: property});
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_onCreatePlatform() {
|
||||
|
||||
}
|
||||
|
||||
_clearForm() {
|
||||
this.setState({enabled: true,
|
||||
allTenants: false,
|
||||
files: [],
|
||||
platformProperties: [],
|
||||
selectedProperty: 0,
|
||||
name: "",
|
||||
description: "",
|
||||
property: "",})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
platformProperties,
|
||||
allTenants,
|
||||
enabled,
|
||||
selectedProperty,
|
||||
propertyTypes,
|
||||
name,
|
||||
description,
|
||||
property} = this.state;
|
||||
|
||||
return (
|
||||
<div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
|
||||
<Card>
|
||||
<CardTitle title="Create Platform"/>
|
||||
|
||||
{/**
|
||||
* The stepper goes here.
|
||||
*/}
|
||||
<CardActions>
|
||||
<div style={{width: '100%', margin: 'auto', paddingLeft: '10px'}}>
|
||||
<form>
|
||||
<TextField
|
||||
hintText="Enter the Platform Name."
|
||||
id="name"
|
||||
floatingLabelText="Name*"
|
||||
floatingLabelFixed={true}
|
||||
value={name}
|
||||
onChange={this._onTextChange.bind(this)}
|
||||
/><br/>
|
||||
<TextField
|
||||
id="description"
|
||||
hintText="Enter the Platform Description."
|
||||
floatingLabelText="Description*"
|
||||
floatingLabelFixed={true}
|
||||
multiLine={true}
|
||||
rows={2}
|
||||
value={description}
|
||||
onChange={this._onTextChange.bind(this)}
|
||||
/><br/><br/>
|
||||
<Toggle
|
||||
id="tenant"
|
||||
label="Shared with all Tenants"
|
||||
labelPosition="right"
|
||||
onToggle={this._handleToggle.bind(this)}
|
||||
defaultToggled={this.state.allTenants}
|
||||
toggled={allTenants}
|
||||
/> <br/>
|
||||
<Toggle
|
||||
id="enabled"
|
||||
label="Enabled"
|
||||
labelPosition="right"
|
||||
onToggle={this.handleToggle.bind(this)}
|
||||
defaultToggled={this.state.enabled}
|
||||
onToggle={this._handleToggle.bind(this)}
|
||||
toggled={enabled}
|
||||
/> <br/>
|
||||
<div>
|
||||
<p style={{color: '#BDBDBD'}}>Platform Properties</p>
|
||||
<p style={{color: '#BaBaBa'}}>Platform Properties</p>
|
||||
<div id="property-container">
|
||||
{this.state.platformProperties.map((p) => {
|
||||
{platformProperties.map((p) => {
|
||||
return <div key={p.key}>{p.key} : {p.value}
|
||||
<IconButton onClick={this._removeProperty.bind(this, p)}>
|
||||
<Close style={{height:'10px', width:'10px'}}/>
|
||||
<Close style={{height: '10px', width: '10px'}}/>
|
||||
</IconButton>
|
||||
</div>})}
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
<div style={{display: 'flex'}}>
|
||||
<TextField
|
||||
hintText=""
|
||||
id="property"
|
||||
hintText="Property Name"
|
||||
floatingLabelText="Platform Property*"
|
||||
floatingLabelFixed={true}
|
||||
value={this.state.property}
|
||||
onChange={this._onTextChange.bind(this)}
|
||||
/> <em/>
|
||||
<SelectField
|
||||
style={{flex: '1 1 23% 1', margin: '0 1%'}}
|
||||
floatingLabelText="Property Type"
|
||||
value={this.state.store}
|
||||
floatingLabelFixed={true}>
|
||||
<MenuItem value={1} primaryText="String"/>
|
||||
<MenuItem value={2} primaryText="Number"/>
|
||||
<MenuItem value={3} primaryText="Boolean"/>
|
||||
<MenuItem value={4} primaryText="File"/>
|
||||
value={selectedProperty}
|
||||
floatingLabelFixed={true}
|
||||
onChange={this._onPropertySelect.bind(this)}>
|
||||
{propertyTypes.map((type) => {
|
||||
return <MenuItem key={type.key}
|
||||
value={type.key}
|
||||
primaryText={type.value}/>
|
||||
})}
|
||||
</SelectField>
|
||||
<IconButton onClick={this._addProperty.bind(this)}>
|
||||
<AddCircleOutline/>
|
||||
</IconButton>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p style={{color: '#BDBDBD'}}>Platform Icon*:</p>
|
||||
<Dropzone style={{width: '100px', height: '100px', border: 'dashed #BDBDBD 1px'}}>
|
||||
@ -162,8 +255,9 @@ class PlatformCreate extends Component {
|
||||
</Dropzone>
|
||||
</div>
|
||||
<br/>
|
||||
<RaisedButton primary={true} label="Create"/>
|
||||
<FlatButton label="Cancel"/>
|
||||
<RaisedButton primary={true} label="Create"
|
||||
onClick={this._onCreatePlatform.bind(this)}/>
|
||||
<FlatButton label="Cancel" onClick={this._clearForm.bind(this)}/>
|
||||
</form>
|
||||
</div>
|
||||
</CardActions>
|
||||
|
||||
@ -15,24 +15,85 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
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';
|
||||
|
||||
/**
|
||||
* Platform Listing 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 PlatformListing extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
data: [],
|
||||
asc: true
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
Platform View
|
||||
</div>
|
||||
);
|
||||
<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="Platforms" style={{display: 'flex', flexWrap: 'wrap'}}/>
|
||||
<CardActions>
|
||||
|
||||
</CardActions>
|
||||
<DataTable headers={this.headers}
|
||||
data={this.data}
|
||||
handleRowClick={this._onRowClick.bind(this)}
|
||||
noDataMessage={{type: 'button', text: 'Create Platform'}}/>
|
||||
</Card>
|
||||
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
export default PlatformListing;
|
||||
PlatformListing.propTypes = {};
|
||||
|
||||
export default withRouter(PlatformListing);
|
||||
|
||||
@ -20,6 +20,7 @@ import Login from './User/Login/Login';
|
||||
import NotFound from './Error/NotFound';
|
||||
import BaseLayout from './Base/BaseLayout';
|
||||
import PlatformCreate from './Platform/PlatformCreate';
|
||||
import PlatformListing from './Platform/PlatformListing';
|
||||
import PublisherOverview from './Overview/PublisherOverview';
|
||||
import ApplicationCreate from './Application/ApplicationCreate';
|
||||
import ApplicationListing from './Application/ApplicationListing';
|
||||
@ -28,4 +29,5 @@ import ApplicationListing from './Application/ApplicationListing';
|
||||
* Contains all UI components related to Application, Login and Platform
|
||||
*/
|
||||
|
||||
export {Login, BaseLayout, ApplicationCreate, ApplicationListing, NotFound, PublisherOverview, PlatformCreate};
|
||||
export {Login, BaseLayout, ApplicationCreate, ApplicationListing, PlatformListing, NotFound, PublisherOverview,
|
||||
PlatformCreate};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user