Added form validation and image visualization to application and platform create. Removed hash router and used browser router.

4.x.x
Menaka Jayawardena 7 years ago
parent 89b4e6dc10
commit b70bf91f3a

@ -25,8 +25,8 @@
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/publisher/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/publisher/images/favicon.png">
<link rel="manifest" href="manifest.json">
<link rel="shortcut icon" href="images/favicon.png">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
@ -39,6 +39,7 @@
<title>WSO2 IoT App Publisher</title>
</head>
<body>
<script src='./dist/index.js'></script>
<noscript>
You need to enable JavaScript to run this app.
</noscript>

@ -18,8 +18,8 @@
import './App.css';
import React, {Component} from 'react';
import createHistory from 'history/createHashHistory';
import {HashRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
import createHistory from 'history/createBrowserHistory';
import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
import {
ApplicationCreate,
ApplicationListing,
@ -41,6 +41,9 @@ const history = createHistory({basename: '/publisher'});
* The Router and Route is used for navigation.
* We specify the component which needs to be rendered for an URL.
* Ex: When navigate to publisher/overview, the overview component will be rendered inside the main layout.
*
* HashRouter is used because the other router types need the server to serve those urls. In hashRouter, server does
* not want to serve the URL.
* */
class Base extends Component {
@ -63,9 +66,9 @@ class Base extends Component {
<Route exact path={"/assets/platforms"} component={PlatformListing}/>
<Route exact path={"/assets/platforms/create"} component={PlatformCreate}/>
<Route exact path={"/assets/apps/:app"} />
<Route exact path={"/assets/apps/edit/:app"} />
<Route exact path={"/assets/apps/:app/edit"} />
<Route exact path={"/assets/platforms/:platform"}/>
<Route exact path={"/assets/platforms/edit/:platform"}/>
<Route exact path={"/assets/platforms/:platform/edit"}/>
<Route exact path={"/assets/reviews"}/>
<Route exact path={"/assets/reviews/:review"}/>
<Route component={NotFound}/>
@ -80,6 +83,9 @@ class Base extends Component {
/**
* This component is referred by the index.js to initiate the application.
* TODO: Currently the URL shows like https://localhost:9443/publisher/#/publisher/assets/apps/create. this needs to
* be fixed as https://localhost:9443/publisher/#/assets/apps/create
*
* */
class Publisher extends Component {
render() {

@ -16,12 +16,11 @@
* under the License.
*/
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import Dialog from 'material-ui/Dialog';
import {withRouter} from 'react-router-dom';
import {Step1, Step2, Step3} from './Forms';
import FlatButton from 'material-ui/FlatButton';
import {Step1, Step2, Step3} from './CreateSteps';
import RaisedButton from 'material-ui/RaisedButton';
import {Card, CardActions, CardTitle} from 'material-ui/Card';
import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
@ -56,6 +55,7 @@ class ApplicationCreate extends Component {
* Handles next button click event.
* */
handleNext = () => {
console.log("Handle Next");
const {stepIndex} = this.state;
this.setState({
stepIndex: stepIndex + 1,
@ -98,7 +98,7 @@ class ApplicationCreate extends Component {
let tmpStepData = this.state.stepData;
tmpStepData.push({step: step, data: data});
this.setState({stepData: tmpStepData})
this.setState({stepData: tmpStepData}, this.handleNext())
};
/**
@ -180,7 +180,7 @@ class ApplicationCreate extends Component {
return (
<div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
<Card>
<Card style={{maxHeight: '700px', overflow: 'auto'}}>
<CardTitle title="Create Application"/>
{/**

@ -125,8 +125,6 @@ class ApplicationListing extends Component {
return dataItem.applicationName.includes(word);
});
} else {
console.log("no")
console.log(this.data)
searchedData = this.data;
}
@ -153,7 +151,7 @@ class ApplicationListing extends Component {
}
_onRowClick(id) {
console.log(id)
this.props.history.push("apps/"+id);
}
render() {

@ -44,10 +44,16 @@ class Step1 extends Component {
stepIndex: 0,
store: 1,
platform: 1,
stepData: []
stepData: [],
title: "",
titleError: ""
};
}
componentWillMount() {
//Get the list of available platforms and set to the state.
}
/**
* Invokes the handleNext function in Create component.
* */
@ -59,8 +65,11 @@ class Step1 extends Component {
* Persist the current form data to the state.
* */
_setStepData() {
this.props.setData("step1", {step: "Dfds"});
this._handleNext.bind(this);
var step = {
store: this.state.store,
platform: this.state.platform
};
this.props.setData("step1", {step: step});
}
/**
@ -71,13 +80,13 @@ class Step1 extends Component {
* */
_handleClick() {
this._setStepData();
this._handleNext();
}
/**
* Triggers when changing the Platform selection.
* */
_onChangePlatform = (event, index, value) => {
console.log(value);
this.setState({platform: value});
};
@ -88,6 +97,13 @@ class Step1 extends Component {
this.setState({store: value});
};
/**
* Triggers when user types on Title text field.
* */
_onChangeTitle = (event, value) => {
this.setState({title: value});
};
render() {
const contentStyle = {margin: '0 16px'};
return (
@ -95,11 +111,6 @@ class Step1 extends Component {
<div style={contentStyle}>
<div>
<div>
<TextField
hintText="Enter a title for your application."
floatingLabelText="Title*"
floatingLabelFixed={true}
/><br/>
<SelectField
floatingLabelText="Store Type*"
value={this.state.store}
@ -117,7 +128,7 @@ class Step1 extends Component {
>
<MenuItem value={1} primaryText="Android"/>
<MenuItem value={2} primaryText="iOS"/>
<MenuItem value={3} primaryText="Web"/>
<MenuItem value={{name: "Web", id:3}} primaryText="Web"/>
</SelectField>
</div>

@ -0,0 +1,489 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import Chip from 'material-ui/Chip';
import Dropzone from 'react-dropzone';
import React, {Component} from 'react';
import MenuItem from 'material-ui/MenuItem';
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 Clear from 'material-ui/svg-icons/content/clear';
import {GridList, GridTile} from 'material-ui/GridList';
/**
* The Second step of application create wizard.
* This contains following components.
* * App Title
* * Short Description
* * Application Description
* * Application Visibility
* * Application Tags : {Used Material UI Chip component}
* * Application Category.
* * Platform Specific properties.
* * Screenshots
* * Banner
* * Icon
*
* Parent Component: Create
* Props:
* * handleNext : {type: function, Invokes handleNext function in Parent.}
* * handlePrev : {type: function, Invokes handlePrev function in Parent}
* * setData : {type: function, Invokes setStepData function in Parent}
* * removeData : {type: Invokes removeStepData function in Parent}
* */
class Step2 extends Component {
constructor() {
super();
this.state = {
tags: [],
defValue: "",
category: 0,
visibility: 0,
errors: {},
title: "",
shortDescription: "",
description: "",
banner: [],
screenshots: [],
icon: []
};
this.styles = {
chip: {
margin: 4,
},
wrapper: {
display: 'flex',
flexWrap: 'wrap',
},
};
}
/**
* Create a tag on Enter key press and set it to the state.
* Clears the tags text field.
* Chip gets two parameters: Key and value.
* */
_addTags(event) {
let tags = this.state.tags;
if (event.charCode === 13) {
event.preventDefault();
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
this.setState({tags, defValue: ""});
}
}
/**
* Set the value for tag.
* */
_handleTagChange(event) {
let defaultValue = this.state.defValue;
defaultValue = event.target.value;
this.setState({defValue: defaultValue})
}
/**
* Invokes the handleNext function in Create component.
* */
_handleNext() {
let fields = [{name: "Title", value: this.state.title},
{name: "Short Description", value: this.state.shortDescription},
{name: "Description", value: this.state.description},
{name: "Banner", value: this.state.banner},
{name: "Screenshots", value: this.state.screenshots},
{name: "Icon", value: this.state.icon}];
this._validate(fields);
// this.props.handleNext();
}
/**
* Invokes the handlePrev function in Create component.
* */
_handlePrev() {
this.props.handlePrev();
}
/**
* Handles Chip delete function.
* Removes the tag from state.tags
* */
_handleRequestDelete = (key) => {
this.chipData = this.state.tags;
const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key);
this.chipData.splice(chipToDelete, 1);
this.setState({tags: this.chipData});
};
/**
* Creates Chip array from state.tags.
* */
_renderChip(data) {
return (
<Chip
key={data.key}
onRequestDelete={() => this._handleRequestDelete(data.key)}
style={this.styles.chip}
>
{data.value}
</Chip>
);
}
_onVisibilitySelect = (event, index, value) => {
console.log(value);
let comp = <SelectField> <MenuItem value={0} primaryText="Public"/>
<MenuItem value={1} primaryText="Roles"/>
<MenuItem value={2} primaryText="Devices"/> </SelectField>;
if (value === 1) {
this.setState({visibilityComponent: comp});
} else if (value === 2) {
} else {
}
};
/**
* Validate the form.
* */
_validate(fields) {
let errors = {};
let errorsPresent = false;
fields.forEach(function (field) {
switch (field.name) {
case 'Title': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Short Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Banner': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Icon': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Screenshots': {
if (field.value.length < 3) {
errors[field.name] = "3 " +field.name + " are required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
}
});
console.log(errorsPresent);
if (!errorsPresent) {
this._setStepData();
} else {
this.setState({errors: errors}, console.log(errors));
}
}
/**
* Creates an object with the current step data and persist in the parent.
* */
_setStepData() {
let stepData = {
title: this.state.title,
description: this.state.description,
shortDescription: this.state.shortDescription,
tags: this.state.tags,
banner: this.state.banner,
screenshots: this.state.screenshots,
icon: this.state.icon
};
this.props.setData("step2", {step: stepData});
}
/**
* Set text field values to state.
* */
_onTextFieldChange(event, value) {
let field = event.target.id;
switch (field) {
case "title": {
this.setState({title: value});
break;
}
case "shortDescription": {
this.setState({shortDescription: value});
break;
}
case "description": {
this.setState({description: value});
break;
}
}
}
/**
* Removed user uploaded banner.
* */
_removeBanner(event, d) {
console.log(event, d);
this.setState({banner: []});
}
/**
* Removes uploaded icon.
* */
_removeIcon(event) {
this.setState({icon: []});
}
/**
* Removes selected screenshot.
* */
_removeScreenshot(event) {
console.log(event.target)
}
render() {
console.log(this.state.visibilityComponent);
const contentStyle = {margin: '0 16px'};
return (
<div style={contentStyle}>
<div>
<div>
<TextField
id="title"
hintText="Enter a title for your application."
errorText={this.state.errors["Title"]}
floatingLabelText="Title*"
floatingLabelFixed={true}
onChange={this._onTextFieldChange.bind(this)}
/><br/>
<TextField
id="shortDescription"
hintText="Enter a short description for your application."
errorText={this.state.errors["Short Description"]}
floatingLabelText="Short Description*"
floatingLabelFixed={true}
multiLine={true}
rows={2}
onChange={this._onTextFieldChange.bind(this)}
/><br/>
<TextField
id="description"
errorText={this.state.errors["Description"]}
hintText="Enter the description."
floatingLabelText="Description*"
floatingLabelFixed={true}
multiLine={true}
rows={4}
onChange={this._onTextFieldChange.bind(this)}
/><br/>
<SelectField
floatingLabelText="Visibility*"
value={this.state.visibility}
floatingLabelFixed={true}
onChange={this._onVisibilitySelect.bind(this)}
>
<MenuItem value={0} primaryText="Public"/>
<MenuItem value={1} primaryText="Roles"/>
<MenuItem value={2} primaryText="Devices"/>
</SelectField><br/>
<TextField
id="tags"
errorText={this.state.errors["tags"]}
hintText="Enter application tags.."
floatingLabelText="Tags*"
floatingLabelFixed={true}
value={this.state.defValue}
onChange={this._handleTagChange.bind(this)}
onKeyPress={this._addTags.bind(this)}
/><br/>
<div style={this.styles.wrapper}>
{this.state.tags.map(this._renderChip, this)}
</div>
<br/>
<SelectField
floatingLabelText="Category*"
value={this.state.category}
floatingLabelFixed={true}
>
<MenuItem value={0} primaryText="Business"/>
</SelectField> <br/>
{/*Platform Specific Properties.*/}
<div style={{border: 'solid #BDBDBD 1px'}}>
<p style={{color: '#BDBDBD'}}>Platform Specific Properties</p>
</div>
<br/>
<div>
<p style={{color: '#f44336'}}>{this.state.errors["Banner"]}</p>
<p style={{color: '#BDBDBD'}}>Banner*:</p>
<GridList style={{
display: 'flex',
flexWrap: 'nowrap',
overflowX: 'auto',
}} cols={1.1}>
{this.state.banner.map((tile) => (
<GridTile key={Math.floor(Math.random() * 1000)}
title={tile.name}
actionIcon={
<IconButton onClick={this._removeBanner.bind(this)}>
<Clear />
</IconButton>}>
<img src={tile.preview}/></GridTile>
))}
{this.state.banner.length === 0 ?
<Dropzone style={{width: '300px', height: '150px', border: 'dashed #BDBDBD 1px'}}
accept="image/jpeg, image/png"
onDrop={(banner, rejected) => {
this.setState({banner, rejected});
}}>
<p style={{margin: '70px 40px 40px 150px'}}>+</p>
</Dropzone> : <div />}
</GridList>
</div>
<br/>
<div>
<p style={{color: '#f44336'}}>{this.state.errors["Screenshots"]}</p>
<p style={{color: '#BDBDBD'}}>Screenshots*:</p>
<GridList style={{
display: 'flex',
flexWrap: 'nowrap',
overflowX: 'auto',
}} cols={1.1}>
{this.state.screenshots.map((file) => (
<GridTile key={Math.floor(Math.random() * 1000)}
title={file[0].name}
actionIcon={
<IconButton onClick={this._removeScreenshot.bind(this)}>
<Clear/>
</IconButton>}>
<img src={file[0].preview}/></GridTile>
))}
{this.state.screenshots.length < 3 ?
<Dropzone style={{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}}
accept="image/jpeg, image/png"
onDrop={(screenshots, rejected) => {
let tmpScreenshots = this.state.screenshots;
tmpScreenshots.push(screenshots);
this.setState({
screenshots: tmpScreenshots});
}}>
<p style={{margin: '70px 40px 70px 70px'}}>+</p>
</Dropzone> : <div />}
</GridList>
</div>
<br/>
<div>
<p style={{color: '#f44336'}}>{this.state.errors["Icon"]}</p>
<p style={{color: '#BDBDBD'}}>Icon*:</p>
<GridList style={{
display: 'flex',
flexWrap: 'nowrap',
overflowX: 'auto',
}} cols={1.1}>
{this.state.icon.map((tile) => (
<GridTile key={Math.floor(Math.random() * 1000)}
title={tile.name}
actionIcon={
<IconButton onClick={this._removeIcon.bind(this)}>
<Clear />
</IconButton>}>
<img src={tile.preview}/></GridTile>
))}
{this.state.icon.length === 0 ?
<Dropzone style={{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}}
accept="image/jpeg, image/png"
onDrop={(icon, rejected) => {this.setState({icon, rejected});}}>
<p style={{margin: '70px 40px 70px 70px'}}>+</p>
</Dropzone> : <div />}
</GridList>
</div>
<br/>
</div>
<br/>
<br/>
<div style={{marginTop: 12}}>
<FlatButton
label="< Back"
disabled={false}
onClick={this._handlePrev.bind(this)}
style={{marginRight: 12}}
/>
<RaisedButton
label="Next >"
primary={true}
onClick={this._handleNext.bind(this)}
/>
</div>
</div>
</div>
);
}
}
Step2.prototypes = {
handleNext: PropTypes.func,
handlePrev: PropTypes.func,
setData: PropTypes.func,
removeData: PropTypes.func
};
export default Step2;

@ -1,240 +0,0 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import Chip from 'material-ui/Chip';
import Dropzone from 'react-dropzone';
import React, {Component} from 'react';
import MenuItem from 'material-ui/MenuItem';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import SelectField from 'material-ui/SelectField';
import RaisedButton from 'material-ui/RaisedButton';
/**
* The Second step of application create wizard.
* This contains following components.
* * App Title
* * Short Description
* * Application Description
* * Application Visibility
* * Application Tags : {Used Material UI Chip component}
* * Application Category.
* * Platform Specific properties.
* * Screenshots
* * Banner
* * Icon
*
* Parent Component: Create
* Props:
* * handleNext : {type: function, Invokes handleNext function in Parent.}
* * handlePrev : {type: function, Invokes handlePrev function in Parent}
* * setData : {type: function, Invokes setStepData function in Parent}
* * removeData : {type: Invokes removeStepData function in Parent}
* */
class Step2 extends Component {
constructor() {
super();
this.state = {
tags: [],
defValue: "",
category: 1,
errors: {}
};
this.styles = {
chip: {
margin: 4,
},
wrapper: {
display: 'flex',
flexWrap: 'wrap',
},
};
}
/**
* Create a tag on Enter key press and set it to the state.
* Clears the tags text field.
* Chip gets two parameters: Key and value.
* */
_addTags(event) {
let tags = this.state.tags;
if (event.charCode === 13) {
event.preventDefault();
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
this.setState({tags, defValue: ""});
}
}
/**
* Set the value for tag.
* */
_handleTagChange(event) {
let defaultValue = this.state.defValue;
defaultValue = event.target.value;
this.setState({defValue: defaultValue})
}
/**
* Invokes the handleNext function in Create component.
* */
_handleNext() {
this.props.handleNext();
}
/**
* Invokes the handlePrev function in Create component.
* */
_handlePrev() {
this.props.handlePrev();
}
/**
* Handles Chip delete function.
* Removes the tag from state.tags
* */
_handleRequestDelete = (key) => {
this.chipData = this.state.tags;
const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key);
this.chipData.splice(chipToDelete, 1);
this.setState({tags: this.chipData});
};
/**
* Creates Chip array from state.tags.
* */
_renderChip(data) {
return (
<Chip
key={data.key}
onRequestDelete={() => this._handleRequestDelete(data.key)}
style={this.styles.chip}
>
{data.value}
</Chip>
);
}
render() {
const contentStyle = {margin: '0 16px'};
return (
<div style={contentStyle}>
<div>
<div>
<TextField
hintText="Enter a title for your application."
errorText={this.state.errors["title"]}
floatingLabelText="Title*"
floatingLabelFixed={true}
/><br/>
<TextField
hintText="Enter a short description for your application."
errorText={this.state.errors["shortDesc"]}
floatingLabelText="Short Description*"
floatingLabelFixed={true}
multiLine={true}
rows={2}
/><br/>
<TextField
errorText={this.state.errors["description"]}
hintText="Enter the description."
floatingLabelText="Description*"
floatingLabelFixed={true}
multiLine={true}
rows={4}
/><br/>
<TextField
hintText="Select the application visibility"
floatingLabelText="Visibility"
floatingLabelFixed={true}
/><br/>
<TextField
errorText={this.state.errors["tags"]}
hintText="Enter application tags.."
floatingLabelText="Tags*"
floatingLabelFixed={true}
value={this.state.defValue}
onChange={this._handleTagChange.bind(this)}
onKeyPress={this._addTags.bind(this)}
/><br/>
<div style={this.styles.wrapper}>
{this.state.tags.map(this._renderChip, this)}
</div>
<br/>
<SelectField
floatingLabelText="Category*"
value={this.state.category}
floatingLabelFixed={true}
>
<MenuItem value={1} primaryText="Business"/>
</SelectField> <br/>
{/*Platform Specific Properties.*/}
<div style={{border: 'solid #BDBDBD 1px'}}>
<p style={{color:'#BDBDBD'}}>Platform Specific Properties</p>
</div><br/>
<div>
<p style={{color:'#BDBDBD'}}>Screenshots*:</p>
<Dropzone style={{width:'100px', height:'100px', border: 'dashed #BDBDBD 1px'}}>
<p style={{margin: '40px 40px 40px 50px'}}>+</p>
</Dropzone>
</div><br/>
<div>
<p style={{color:'#BDBDBD'}}>Banner*:</p>
<Dropzone style={{width:'100px', height:'100px', border: 'dashed #BDBDBD 1px'}}>
<p style={{margin: '40px 40px 40px 50px'}}>+</p>
</Dropzone>
</div><br/>
<div>
<p style={{color:'#BDBDBD'}}>Icon*:</p>
<Dropzone style={{width:'100px', height:'100px', border: 'dashed #BDBDBD 1px'}}>
<p style={{margin: '40px 40px 40px 50px'}}>+</p>
</Dropzone>
</div><br/>
</div>
<br />
<br />
<div style={{marginTop: 12}}>
<FlatButton
label="< Back"
disabled={false}
onClick={this._handlePrev.bind(this)}
style={{marginRight: 12}}
/>
<RaisedButton
label="Next >"
primary={true}
onClick={this._handleNext.bind(this)}
/>
</div>
</div>
</div>
);
}
}
Step2.prototypes = {
handleNext: PropTypes.func,
handlePrev: PropTypes.func,
setData: PropTypes.func,
removeData: PropTypes.func
};
export default Step2;

@ -26,6 +26,8 @@ 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 Clear from 'material-ui/svg-icons/content/clear';
import {GridList, GridTile} from 'material-ui/GridList';
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';
@ -53,6 +55,7 @@ class PlatformCreate extends Component {
name: "",
description: "",
property: "",
icon: [],
propertyTypes: [
{key: 0, value: 'String'},
{key: 1, value: 'Number'},
@ -148,6 +151,16 @@ class PlatformCreate extends Component {
}
/**
* Remove the uploaded icon.
* */
_removeIcon(event) {
this.setState({icon: []});
}
/**
* Clears the user entered values in the form.
* */
_clearForm() {
this.setState({enabled: true,
allTenants: false,
@ -249,10 +262,32 @@ class PlatformCreate extends Component {
</div>
</div>
<div>
{/*<p style={{color: '#f44336'}}>{this.state.errors["Icon"]}</p>*/}
<p style={{color: '#BDBDBD'}}>Platform Icon*:</p>
<Dropzone style={{width: '100px', height: '100px', border: 'dashed #BDBDBD 1px'}}>
<p style={{margin: '40px 40px 40px 50px', color: '#BDBDBD'}}>+</p>
</Dropzone>
<GridList style={{
display: 'flex',
flexWrap: 'nowrap',
overflowX: 'auto',
}} cols={1.1}>
{this.state.icon.map((tile) => (
<GridTile key={Math.floor(Math.random() * 1000)}
title={tile.name}
actionIcon={
<IconButton onClick={this._removeIcon.bind(this)}>
<Clear />
</IconButton>}>
<img src={tile.preview}/>
</GridTile>
))}
{this.state.icon.length === 0 ?
<Dropzone style={
{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}
}
accept="image/jpeg, image/png"
onDrop={(icon, rejected) => {this.setState({icon, rejected})}}>
<p style={{margin: '70px 40px 70px 70px'}}>+</p>
</Dropzone> : <div />}
</GridList>
</div>
<br/>
<RaisedButton primary={true} label="Create"
@ -268,11 +303,6 @@ class PlatformCreate extends Component {
}
PlatformCreate.prototypes = {
enabled: PropTypes.bool,
allTenants: PropTypes.bool,
files: PropTypes.array,
platformProperties: PropTypes.object,
handleToggle: PropTypes.func
};
export default PlatformCreate;

Loading…
Cancel
Save