Fixed platform create and platform listing components.

4.x.x
Menaka Jayawardena 7 years ago
parent c389a5ec50
commit 0746c2f66c

@ -48,7 +48,16 @@ class PlatformCreate extends Component {
enabled: true, enabled: true,
allTenants: false, allTenants: false,
files: [], 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. * Remove the selected property from the property list.
* */ * */
@ -82,78 +99,154 @@ class PlatformCreate extends Component {
/** /**
* Add a new platform property. * Add a new platform property.
* TODO: Create a property object and send to the endpoint.
* */ * */
_addProperty() { _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() { render() {
const {
platformProperties,
allTenants,
enabled,
selectedProperty,
propertyTypes,
name,
description,
property} = this.state;
return ( return (
<div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}> <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
<Card> <Card>
<CardTitle title="Create Platform"/> <CardTitle title="Create Platform"/>
{/**
* The stepper goes here.
*/}
<CardActions> <CardActions>
<div style={{width: '100%', margin: 'auto', paddingLeft: '10px'}}> <div style={{width: '100%', margin: 'auto', paddingLeft: '10px'}}>
<form> <form>
<TextField <TextField
hintText="Enter the Platform Name." hintText="Enter the Platform Name."
id="name"
floatingLabelText="Name*" floatingLabelText="Name*"
floatingLabelFixed={true} floatingLabelFixed={true}
value={name}
onChange={this._onTextChange.bind(this)}
/><br/> /><br/>
<TextField <TextField
id="description"
hintText="Enter the Platform Description." hintText="Enter the Platform Description."
floatingLabelText="Description*" floatingLabelText="Description*"
floatingLabelFixed={true} floatingLabelFixed={true}
multiLine={true} multiLine={true}
rows={2} rows={2}
value={description}
onChange={this._onTextChange.bind(this)}
/><br/><br/> /><br/><br/>
<Toggle <Toggle
id="tenant" id="tenant"
label="Shared with all Tenants" label="Shared with all Tenants"
labelPosition="right" labelPosition="right"
onToggle={this._handleToggle.bind(this)} onToggle={this._handleToggle.bind(this)}
defaultToggled={this.state.allTenants} toggled={allTenants}
/> <br/> /> <br/>
<Toggle <Toggle
id="enabled" id="enabled"
label="Enabled" label="Enabled"
labelPosition="right" labelPosition="right"
onToggle={this.handleToggle.bind(this)} onToggle={this._handleToggle.bind(this)}
defaultToggled={this.state.enabled} toggled={enabled}
/> <br/> /> <br/>
<div> <div>
<p style={{color: '#BDBDBD'}}>Platform Properties</p> <p style={{color: '#BaBaBa'}}>Platform Properties</p>
<div id="property-container"> <div id="property-container">
{this.state.platformProperties.map((p) => { {platformProperties.map((p) => {
return <div key={p.key}>{p.key} : {p.value} 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'}}/> <Close style={{height: '10px', width: '10px'}}/>
</IconButton> </IconButton>
</div>})} </div>
})}
</div>
<div style={{display: 'flex'}}>
<TextField
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={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>
<TextField
hintText=""
floatingLabelText="Platform Property*"
floatingLabelFixed={true}
/> <em/>
<SelectField
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"/>
</SelectField>
<IconButton onClick={this._addProperty.bind(this)}>
<AddCircleOutline/>
</IconButton>
<br/>
</div> </div>
<div> <div>
<p style={{color: '#BDBDBD'}}>Platform Icon*:</p> <p style={{color: '#BDBDBD'}}>Platform Icon*:</p>
@ -162,8 +255,9 @@ class PlatformCreate extends Component {
</Dropzone> </Dropzone>
</div> </div>
<br/> <br/>
<RaisedButton primary={true} label="Create"/> <RaisedButton primary={true} label="Create"
<FlatButton label="Cancel"/> onClick={this._onCreatePlatform.bind(this)}/>
<FlatButton label="Cancel" onClick={this._clearForm.bind(this)}/>
</form> </form>
</div> </div>
</CardActions> </CardActions>

@ -15,24 +15,85 @@
* specific language governing permissions and limitations * specific language governing permissions and limitations
* under the License. * under the License.
*/ */
import React, {Component} from 'react'; 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 { class PlatformListing extends Component {
constructor() { constructor() {
super(); 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() { render() {
return ( return (
<div> <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
Platform View <Card style={{display: 'flex', flexWrap: 'wrap'}}>
</div> <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 NotFound from './Error/NotFound';
import BaseLayout from './Base/BaseLayout'; import BaseLayout from './Base/BaseLayout';
import PlatformCreate from './Platform/PlatformCreate'; import PlatformCreate from './Platform/PlatformCreate';
import PlatformListing from './Platform/PlatformListing';
import PublisherOverview from './Overview/PublisherOverview'; import PublisherOverview from './Overview/PublisherOverview';
import ApplicationCreate from './Application/ApplicationCreate'; import ApplicationCreate from './Application/ApplicationCreate';
import ApplicationListing from './Application/ApplicationListing'; import ApplicationListing from './Application/ApplicationListing';
@ -28,4 +29,5 @@ import ApplicationListing from './Application/ApplicationListing';
* Contains all UI components related to Application, Login and Platform * 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…
Cancel
Save