Removed inline styling and fixed multiple form submit.

merge-requests/7/head
Menaka Jayawardena 7 years ago
parent 133dc55a23
commit 9619371cab

@ -66,3 +66,8 @@
.createplatformdropzonep { .createplatformdropzonep {
margin: 70px 40px 70px 70px margin: 70px 40px 70px 70px
} }
.createPlatformTagWrapper {
display: flex;
flex-wrap: wrap;
}

@ -92,7 +92,6 @@ class ApplicationCreate extends Component {
console.log(err); console.log(err);
} }
); );
}; };
/** /**
@ -197,7 +196,6 @@ class ApplicationCreate extends Component {
render() { render() {
const {finished, stepIndex} = this.state; const {finished, stepIndex} = this.state;
const contentStyle = {margin: '0 16px'};
/** /**
* Defines the dialog box actions. [Yes][No] * Defines the dialog box actions. [Yes][No]

@ -380,7 +380,7 @@ class Step2 extends Component {
onKeyPress={this.addTags.bind(this)} onKeyPress={this.addTags.bind(this)}
/> />
<br/> <br/>
<div style={this.styles.wrapper}> <div className="applicationCreateWrapper">
{this.state.tags.map(this.renderChip, this)} {this.state.tags.map(this.renderChip, this)}
</div> </div>
<br/> <br/>

@ -49,6 +49,17 @@ class PlatformCreate extends Component {
constructor() { constructor() {
super(); super();
this.onCreatePlatform = this.onCreatePlatform.bind(this);
this.handleToggle = this.handleToggle.bind(this);
this.addProperty = this.addProperty.bind(this);
this.addTags = this.addTags.bind(this);
this.clearForm = this.clearForm.bind(this);
this.onPropertySelect = this.onPropertySelect.bind(this);
this.handleTagChange = this.handleTagChange.bind(this);
this.removeIcon = this.removeIcon.bind(this);
this.onTextChange = this.onTextChange.bind(this);
this.renderChip = this.renderChip.bind(this);
this.removeProperty = this.removeProperty.bind(this);
this.state = { this.state = {
tags: [], tags: [],
defValue: "", defValue: "",
@ -224,8 +235,9 @@ class PlatformCreate extends Component {
/** /**
* Create platform object and call the create platform api. * Create platform object and call the create platform api.
* */ * */
onCreatePlatform() { onCreatePlatform(event) {
//Call the platform create api. //Call the platform create api.
event.preventDefault();
let platform = {}; let platform = {};
platform.identifier = this.state.identifier; platform.identifier = this.state.identifier;
platform.name = this.state.name; platform.name = this.state.name;
@ -245,13 +257,15 @@ class PlatformCreate extends Component {
* Remove the uploaded icon. * Remove the uploaded icon.
* */ * */
removeIcon(event) { removeIcon(event) {
event.preventDefault();
this.setState({icon: []}); this.setState({icon: []});
} }
/** /**
* Clears the user entered values in the form. * Clears the user entered values in the form.
* */ * */
clearForm() { clearForm(event) {
event.preventDefault();
this.setState({ this.setState({
enabled: true, enabled: true,
allTenants: false, allTenants: false,
@ -292,7 +306,7 @@ class PlatformCreate extends Component {
floatingLabelText="Identifier*" floatingLabelText="Identifier*"
floatingLabelFixed={true} floatingLabelFixed={true}
value={identifier} value={identifier}
onChange={this.onTextChange.bind(this)} onChange={this.onTextChange}
/> />
<br/> <br/>
<TextField <TextField
@ -301,7 +315,7 @@ class PlatformCreate extends Component {
floatingLabelText="Name*" floatingLabelText="Name*"
floatingLabelFixed={true} floatingLabelFixed={true}
value={name} value={name}
onChange={this.onTextChange.bind(this)} onChange={this.onTextChange}
/> />
<br/> <br/>
<TextField <TextField
@ -312,7 +326,7 @@ class PlatformCreate extends Component {
multiLine={true} multiLine={true}
rows={2} rows={2}
value={description} value={description}
onChange={this.onTextChange.bind(this)} onChange={this.onTextChange}
/> />
<br/> <br/>
<br/> <br/>
@ -320,7 +334,7 @@ class PlatformCreate extends Component {
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}
toggled={allTenants} toggled={allTenants}
/> />
<br/> <br/>
@ -328,7 +342,7 @@ class PlatformCreate extends Component {
id="enabled" id="enabled"
label="Enabled" label="Enabled"
labelPosition="right" labelPosition="right"
onToggle={this.handleToggle.bind(this)} onToggle={this.handleToggle}
toggled={enabled} toggled={enabled}
/> />
<br/> <br/>
@ -338,11 +352,11 @@ class PlatformCreate extends Component {
floatingLabelText="Tags*" floatingLabelText="Tags*"
floatingLabelFixed={true} floatingLabelFixed={true}
value={defValue} value={defValue}
onChange={this.handleTagChange.bind(this)} onChange={this.handleTagChange}
onKeyPress={this.addTags.bind(this)} onKeyPress={this.addTags}
/> />
<br/> <br/>
<div style={this.styles.wrapper}> <div className="createPlatformTagWrapper">
{tags.map(this.renderChip, this)} {tags.map(this.renderChip, this)}
</div> </div>
<br/> <br/>
@ -364,21 +378,21 @@ class PlatformCreate extends Component {
floatingLabelText="Platform Property*" floatingLabelText="Platform Property*"
floatingLabelFixed={true} floatingLabelFixed={true}
value={this.state.property} value={this.state.property}
onChange={this.onTextChange.bind(this)} onChange={this.onTextChange}
/> <em/> /> <em/>
<SelectField <SelectField
className="createplatformpropertyselect" className="createplatformpropertyselect"
floatingLabelText="Property Type" floatingLabelText="Property Type"
value={selectedProperty} value={selectedProperty}
floatingLabelFixed={true} floatingLabelFixed={true}
onChange={this.onPropertySelect.bind(this)}> onChange={this.onPropertySelect}>
{propertyTypes.map((type) => { {propertyTypes.map((type) => {
return <MenuItem key={type.key} return <MenuItem key={type.key}
value={type.key} value={type.key}
primaryText={type.value}/> primaryText={type.value}/>
})} })}
</SelectField> </SelectField>
<IconButton onClick={this.addProperty.bind(this)}> <IconButton onClick={this.addProperty}>
<AddCircleOutline/> <AddCircleOutline/>
</IconButton> </IconButton>
<br/> <br/>
@ -392,7 +406,7 @@ class PlatformCreate extends Component {
key={Math.floor(Math.random() * 1000)} key={Math.floor(Math.random() * 1000)}
title={tile.name} title={tile.name}
actionIcon={ actionIcon={
<IconButton onClick={this.removeIcon.bind(this)}> <IconButton onClick={this.removeIcon}>
<Clear/> <Clear/>
</IconButton>}> </IconButton>}>
<img src={tile.preview}/> <img src={tile.preview}/>
@ -413,8 +427,8 @@ class PlatformCreate extends Component {
<br/> <br/>
<RaisedButton <RaisedButton
primary={true} label="Create" primary={true} label="Create"
onClick={this.onCreatePlatform.bind(this)}/> onClick={this.onCreatePlatform}/>
<FlatButton label="Cancel" onClick={this.clearForm.bind(this)}/> <FlatButton label="Cancel" onClick={this.clearForm}/>
</form> </form>
</div> </div>
</CardActions> </CardActions>

Loading…
Cancel
Save