Fixed application listing and form formatting.

merge-requests/7/head
Menaka Jayawardena 7 years ago
parent 0746c2f66c
commit 9ce111b724

@ -17,11 +17,18 @@
*/ */
import './App.css'; import './App.css';
import PropTypes from 'prop-types';
import React, {Component} from 'react'; import React, {Component} from 'react';
import createHistory from 'history/createHashHistory'; import createHistory from 'history/createHashHistory';
import {HashRouter as Router, Redirect, Route, Switch} from 'react-router-dom' import {HashRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
import {BaseLayout, ApplicationCreate, ApplicationListing, Login, NotFound, PublisherOverview, PlatformCreate} from './components' import {
ApplicationCreate,
ApplicationListing,
BaseLayout,
Login,
NotFound,
PlatformCreate,
PlatformListing
} from './components';
const history = createHistory({basename: '/publisher'}); const history = createHistory({basename: '/publisher'});
@ -51,9 +58,9 @@ class Base extends Component {
<BaseLayout> <BaseLayout>
<Switch> <Switch>
<Redirect exact path={"/"} to={"/assets/apps"}/> <Redirect exact path={"/"} to={"/assets/apps"}/>
{/*<Route exact path={"/overview"} component={PublisherOverview}/>*/}
<Route exact path={"/assets/apps"} component={ApplicationListing}/> <Route exact path={"/assets/apps"} component={ApplicationListing}/>
<Route exact path={"/assets/apps/create"} component={ApplicationCreate}/> <Route exact path={"/assets/apps/create"} component={ApplicationCreate}/>
<Route exact path={"/assets/platforms"} component={PlatformListing}/>
<Route exact path={"/assets/platforms/create"} component={PlatformCreate}/> <Route exact path={"/assets/platforms/create"} component={PlatformCreate}/>
<Route exact path={"/assets/apps/:app"} /> <Route exact path={"/assets/apps/:app"} />
<Route exact path={"/assets/apps/edit/:app"} /> <Route exact path={"/assets/apps/edit/:app"} />
@ -67,7 +74,6 @@ class Base extends Component {
</div> </div>
) )
} }
return (<Redirect to={"/login"}/>) return (<Redirect to={"/login"}/>)
} }
} }
@ -91,6 +97,4 @@ class Publisher extends Component {
} }
} }
Publisher.propTypes = {};
export default Publisher; export default Publisher;

@ -39,43 +39,43 @@ class ApplicationListing extends Component {
} }
} }
// data = [ data = [
// { {
// id: Math.random(), id: Math.random(),
// applicationName:"Cne", applicationName:"Cne",
// platform:'Android', platform:'Android',
// category:"Public", category:"Public",
// status: "Created" status: "Created"
// }, },
// { {
// id: Math.random(), id: Math.random(),
// applicationName:"Gone", applicationName:"Gone",
// platform:'IOS', platform:'IOS',
// category:"Public", category:"Public",
// status: "Created" status: "Created"
// }, },
// { {
// id: Math.random(), id: Math.random(),
// applicationName:"Ane", applicationName:"Ane",
// platform:'Android', platform:'Android',
// category:"Public", category:"Public",
// status: "Created" status: "Created"
// }, },
// { {
// id: Math.random(), id: Math.random(),
// applicationName:"one", applicationName:"one",
// platform:'Android', platform:'Android',
// category:"Public", category:"Public",
// status: "Created" status: "Created"
// }, },
// { {
// id: Math.random(), id: Math.random(),
// applicationName:"one", applicationName:"one",
// platform:'Android', platform:'Android',
// category:"Public", category:"Public",
// status: "Created" status: "Created"
// }, },
// ]; ];
headers = [ headers = [
{ {
@ -156,7 +156,8 @@ class ApplicationListing extends Component {
</CardActions> </CardActions>
<DataTable headers={this.headers} <DataTable headers={this.headers}
data={this.data} data={this.data}
handleRowClick={this._onRowClick.bind(this)}/> handleRowClick={this._onRowClick.bind(this)}
noDataMessage={{type: 'button', text: 'Create Application'}}/>
</Card> </Card>
</div>); </div>);

@ -51,16 +51,16 @@ class Step1 extends Component {
/** /**
* Invokes the handleNext function in Create component. * Invokes the handleNext function in Create component.
* */ * */
handleNext = () => { _handleNext = () => {
this.props.handleNext(); this.props.handleNext();
}; };
/** /**
* Persist the current form data to the state. * Persist the current form data to the state.
* */ * */
setStepData() { _setStepData() {
this.props.setData("step1", {step: "Dfds"}); this.props.setData("step1", {step: "Dfds"});
this.handleNext.bind(this); this._handleNext.bind(this);
} }
/** /**
@ -69,22 +69,22 @@ class Step1 extends Component {
* Sets the data to the state. * Sets the data to the state.
* Invokes the handleNext method of Create component. * Invokes the handleNext method of Create component.
* */ * */
handleClick() { _handleClick() {
this.setStepData(); this._setStepData();
this.handleNext(); this._handleNext();
} }
/** /**
* Triggers when changing the Platform selection. * Triggers when changing the Platform selection.
* */ * */
onChangePlatform = (event, index, value) => { _onChangePlatform = (event, index, value) => {
this.setState({platform: value}); this.setState({platform: value});
}; };
/** /**
* Triggers when changing the Store selection. * Triggers when changing the Store selection.
* */ * */
onChangeStore = (event, index, value) => { _onChangeStore = (event, index, value) => {
this.setState({store: value}); this.setState({store: value});
}; };
@ -104,7 +104,7 @@ class Step1 extends Component {
floatingLabelText="Store Type*" floatingLabelText="Store Type*"
value={this.state.store} value={this.state.store}
floatingLabelFixed={true} floatingLabelFixed={true}
onChange={this.onChangeStore.bind(this)} onChange={this._onChangeStore.bind(this)}
> >
<MenuItem value={1} primaryText="Enterprise"/> <MenuItem value={1} primaryText="Enterprise"/>
<MenuItem value={2} primaryText="Public"/> <MenuItem value={2} primaryText="Public"/>
@ -113,7 +113,7 @@ class Step1 extends Component {
floatingLabelText="Platform*" floatingLabelText="Platform*"
value={this.state.platform} value={this.state.platform}
floatingLabelFixed={true} floatingLabelFixed={true}
onChange={this.onChangePlatform.bind(this)} onChange={this._onChangePlatform.bind(this)}
> >
<MenuItem value={1} primaryText="Android"/> <MenuItem value={1} primaryText="Android"/>
<MenuItem value={2} primaryText="iOS"/> <MenuItem value={2} primaryText="iOS"/>
@ -127,7 +127,7 @@ class Step1 extends Component {
<RaisedButton <RaisedButton
label="Next >" label="Next >"
primary={true} primary={true}
onClick={this.handleClick.bind(this)} onClick={this._handleClick.bind(this)}
/> />
</div> </div>
</div> </div>

@ -73,19 +73,19 @@ class Step2 extends Component {
* Clears the tags text field. * Clears the tags text field.
* Chip gets two parameters: Key and value. * Chip gets two parameters: Key and value.
* */ * */
addTags(event) { _addTags(event) {
let tags = this.state.tags; let tags = this.state.tags;
if (event.charCode === 13) { if (event.charCode === 13) {
event.preventDefault(); event.preventDefault();
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value}); tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
this.setState({tags, defValue: ""}, console.log(this.state.tags)); this.setState({tags, defValue: ""});
} }
} }
/** /**
* * Set the value for tag.
* */ * */
handleTagChange(event) { _handleTagChange(event) {
let defaultValue = this.state.defValue; let defaultValue = this.state.defValue;
defaultValue = event.target.value; defaultValue = event.target.value;
this.setState({defValue: defaultValue}) this.setState({defValue: defaultValue})
@ -94,14 +94,14 @@ class Step2 extends Component {
/** /**
* Invokes the handleNext function in Create component. * Invokes the handleNext function in Create component.
* */ * */
handleNext() { _handleNext() {
this.props.handleNext(); this.props.handleNext();
} }
/** /**
* Invokes the handlePrev function in Create component. * Invokes the handlePrev function in Create component.
* */ * */
handlePrev() { _handlePrev() {
this.props.handlePrev(); this.props.handlePrev();
} }
@ -109,7 +109,7 @@ class Step2 extends Component {
* Handles Chip delete function. * Handles Chip delete function.
* Removes the tag from state.tags * Removes the tag from state.tags
* */ * */
handleRequestDelete = (key) => { _handleRequestDelete = (key) => {
this.chipData = this.state.tags; this.chipData = this.state.tags;
const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key); const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key);
this.chipData.splice(chipToDelete, 1); this.chipData.splice(chipToDelete, 1);
@ -119,12 +119,11 @@ class Step2 extends Component {
/** /**
* Creates Chip array from state.tags. * Creates Chip array from state.tags.
* */ * */
renderChip(data) { _renderChip(data) {
console.log(data);
return ( return (
<Chip <Chip
key={data.key} key={data.key}
onRequestDelete={() => this.handleRequestDelete(data.key)} onRequestDelete={() => this._handleRequestDelete(data.key)}
style={this.styles.chip} style={this.styles.chip}
> >
{data.value} {data.value}
@ -172,11 +171,11 @@ class Step2 extends Component {
floatingLabelText="Tags*" floatingLabelText="Tags*"
floatingLabelFixed={true} floatingLabelFixed={true}
value={this.state.defValue} value={this.state.defValue}
onChange={this.handleTagChange.bind(this)} onChange={this._handleTagChange.bind(this)}
onKeyPress={this.addTags.bind(this)} onKeyPress={this._addTags.bind(this)}
/><br/> /><br/>
<div style={this.styles.wrapper}> <div style={this.styles.wrapper}>
{this.state.tags.map(this.renderChip, this)} {this.state.tags.map(this._renderChip, this)}
</div> </div>
<br/> <br/>
<SelectField <SelectField
@ -216,13 +215,13 @@ class Step2 extends Component {
<FlatButton <FlatButton
label="< Back" label="< Back"
disabled={false} disabled={false}
onClick={this.handlePrev.bind(this)} onClick={this._handlePrev.bind(this)}
style={{marginRight: 12}} style={{marginRight: 12}}
/> />
<RaisedButton <RaisedButton
label="Next >" label="Next >"
primary={true} primary={true}
onClick={this.handleNext.bind(this)} onClick={this._handleNext.bind(this)}
/> />
</div> </div>
</div> </div>

@ -61,21 +61,21 @@ class Step3 extends Component {
* Handles finish button click. * Handles finish button click.
* This invokes handleNext function in parent component. * This invokes handleNext function in parent component.
* */ * */
handleFinish() { _handleFinish() {
this.props.handleFinish(); this.props.handleFinish();
} }
/** /**
* Invokes Prev button click. * Invokes Prev button click.
* */ * */
handlePrev() { _handlePrev() {
this.props.handlePrev(); this.props.handlePrev();
} }
/** /**
* Handles release application selection. * Handles release application selection.
* */ * */
handleToggle() { _handleToggle() {
let hide = this.state.showForm; let hide = this.state.showForm;
this.setState({showForm: !hide}); this.setState({showForm: !hide});
} }
@ -88,7 +88,7 @@ class Step3 extends Component {
<Toggle <Toggle
label="Release the Application" label="Release the Application"
labelPosition="right" labelPosition="right"
onToggle={this.handleToggle.bind(this)} onToggle={this._handleToggle.bind(this)}
defaultToggled={this.state.showForm} defaultToggled={this.state.showForm}
/> />
{/*If toggle is true, the release form will be shown.*/} {/*If toggle is true, the release form will be shown.*/}
@ -114,13 +114,13 @@ class Step3 extends Component {
<FlatButton <FlatButton
label="< Back" label="< Back"
disabled={false} disabled={false}
onClick={this.handlePrev.bind(this)} onClick={this._handlePrev.bind(this)}
style={{marginRight: 12}} style={{marginRight: 12}}
/> />
<RaisedButton <RaisedButton
label="Finish" label="Finish"
primary={true} primary={true}
onClick={this.handleFinish.bind(this)} onClick={this._handleFinish.bind(this)}
/> />
</div> </div>
</div> </div>

Loading…
Cancel
Save