Added prop types and started creating the data table component.

feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent 3d337ed537
commit 319d844972

@ -16,11 +16,12 @@
* under the License. * under the License.
*/ */
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, Login, NotFound, PublisherOverview, PlatformCreate} from './components' import {BaseLayout, ApplicationCreate, ApplicationListing, Login, NotFound, PublisherOverview, PlatformCreate} from './components'
const history = createHistory({basename: '/publisher'}); const history = createHistory({basename: '/publisher'});
@ -51,9 +52,9 @@ class Base extends Component {
<Switch> <Switch>
<Redirect exact path={"/"} to={"/overview"}/> <Redirect exact path={"/"} to={"/overview"}/>
<Route exact path={"/overview"} component={PublisherOverview}/> <Route exact path={"/overview"} component={PublisherOverview}/>
<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/create"} component={PlatformCreate}/> <Route exact path={"/assets/platforms/create"} component={PlatformCreate}/>
<Route exact path={"/assets/apps"} />
<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"} />
<Route exact path={"/assets/platforms/:platform"}/> <Route exact path={"/assets/platforms/:platform"}/>
@ -90,8 +91,6 @@ class Publisher extends Component {
} }
} }
Publisher.propTypes = { Publisher.propTypes = {};
user: Object
};
export default Publisher; export default Publisher;

@ -16,6 +16,7 @@
* under the License. * under the License.
*/ */
import PropTypes from 'prop-types';
import React, {Component} from 'react'; import React, {Component} from 'react';
import Dialog from 'material-ui/Dialog'; import Dialog from 'material-ui/Dialog';
import {withRouter} from 'react-router-dom'; import {withRouter} from 'react-router-dom';
@ -228,4 +229,6 @@ class ApplicationCreate extends Component {
} }
} }
ApplicationCreate.propTypes = {};
export default withRouter(ApplicationCreate); export default withRouter(ApplicationCreate);

@ -16,10 +16,10 @@
* under the License. * under the License.
*/ */
import PropTypes from 'prop-types';
import React, {Component} from 'react'; import React, {Component} from 'react';
import MenuItem from 'material-ui/MenuItem'; import MenuItem from 'material-ui/MenuItem';
import TextField from 'material-ui/TextField'; import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import SelectField from 'material-ui/SelectField'; import SelectField from 'material-ui/SelectField';
import RaisedButton from 'material-ui/RaisedButton'; import RaisedButton from 'material-ui/RaisedButton';
@ -137,4 +137,10 @@ class Step1 extends Component {
} }
} }
Step1.propTypes = {
handleNext: PropTypes.func,
setData: PropTypes.func,
removeData: PropTypes.func
};
export default Step1; export default Step1;

@ -16,7 +16,9 @@
* under the License. * under the License.
*/ */
import PropTypes from 'prop-types';
import Chip from 'material-ui/Chip'; import Chip from 'material-ui/Chip';
import Dropzone from 'react-dropzone';
import React, {Component} from 'react'; import React, {Component} from 'react';
import MenuItem from 'material-ui/MenuItem'; import MenuItem from 'material-ui/MenuItem';
import TextField from 'material-ui/TextField'; import TextField from 'material-ui/TextField';
@ -51,7 +53,8 @@ class Step2 extends Component {
this.state = { this.state = {
tags: [], tags: [],
defValue: "", defValue: "",
category: 1 category: 1,
errors: {}
}; };
this.styles = { this.styles = {
@ -63,7 +66,6 @@ class Step2 extends Component {
flexWrap: 'wrap', flexWrap: 'wrap',
}, },
}; };
} }
/** /**
@ -138,17 +140,21 @@ class Step2 extends Component {
<div> <div>
<TextField <TextField
hintText="Enter a title for your application." hintText="Enter a title for your application."
errorText={this.state.errors["title"]}
floatingLabelText="Title*" floatingLabelText="Title*"
floatingLabelFixed={true} floatingLabelFixed={true}
/><br/> /><br/>
<TextField <TextField
hintText="Enter a short description for your application." hintText="Enter a short description for your application."
errorText={this.state.errors["shortDesc"]}
floatingLabelText="Short Description*" floatingLabelText="Short Description*"
floatingLabelFixed={true} floatingLabelFixed={true}
multiLine={true} multiLine={true}
rows={2} rows={2}
/><br/> /><br/>
<TextField <TextField
errorText={this.state.errors["description"]}
hintText="Enter the description." hintText="Enter the description."
floatingLabelText="Description*" floatingLabelText="Description*"
floatingLabelFixed={true} floatingLabelFixed={true}
@ -157,10 +163,11 @@ class Step2 extends Component {
/><br/> /><br/>
<TextField <TextField
hintText="Select the application visibility" hintText="Select the application visibility"
floatingLabelText="Visibility*" floatingLabelText="Visibility"
floatingLabelFixed={true} floatingLabelFixed={true}
/><br/> /><br/>
<TextField <TextField
errorText={this.state.errors["tags"]}
hintText="Enter application tags.." hintText="Enter application tags.."
floatingLabelText="Tags*" floatingLabelText="Tags*"
floatingLabelFixed={true} floatingLabelFixed={true}
@ -180,9 +187,27 @@ class Step2 extends Component {
<MenuItem value={1} primaryText="Business"/> <MenuItem value={1} primaryText="Business"/>
</SelectField> <br/> </SelectField> <br/>
{/*Platform Specific Properties.*/} {/*Platform Specific Properties.*/}
<div style={{border: '1px'}}> <div style={{border: 'solid #BDBDBD 1px'}}>
fdfdfd <p style={{color:'#BDBDBD'}}>Platform Specific Properties</p>
</div> </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> </div>
<br /> <br />
@ -206,4 +231,11 @@ class Step2 extends Component {
} }
} }
Step2.prototypes = {
handleNext: PropTypes.func,
handlePrev: PropTypes.func,
setData: PropTypes.func,
removeData: PropTypes.func
};
export default Step2; export default Step2;

@ -16,6 +16,7 @@
* under the License. * under the License.
*/ */
import PropTypes from 'prop-types';
import React, {Component} from 'react'; import React, {Component} from 'react';
import Toggle from 'material-ui/Toggle'; import Toggle from 'material-ui/Toggle';
import MenuItem from 'material-ui/MenuItem'; import MenuItem from 'material-ui/MenuItem';
@ -51,7 +52,8 @@ class Step3 extends Component {
super(); super();
this.state = { this.state = {
showForm: false, showForm: false,
releaseChannel: 1 releaseChannel: 1,
errors: {}
} }
} }
@ -78,7 +80,6 @@ class Step3 extends Component {
this.setState({showForm: !hide}); this.setState({showForm: !hide});
} }
render() { render() {
const contentStyle = {margin: '0 16px'}; const contentStyle = {margin: '0 16px'};
return ( return (
@ -90,7 +91,6 @@ class Step3 extends Component {
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.*/}
{!this.state.showForm ? <div/> : <div> {!this.state.showForm ? <div/> : <div>
<SelectField <SelectField
@ -105,6 +105,7 @@ class Step3 extends Component {
<TextField <TextField
hintText="1.0.0" hintText="1.0.0"
floatingLabelText="Version*" floatingLabelText="Version*"
errorText={this.state.errors["title"]}
floatingLabelFixed={true} floatingLabelFixed={true}
/><br/> /><br/>
</div>} </div>}
@ -128,4 +129,11 @@ class Step3 extends Component {
} }
} }
Step3.propTypes = {
handleFinish: PropTypes.func,
handlePrev: PropTypes.func,
setData: PropTypes.func,
removeData: PropTypes.func
};
export default Step3; export default Step3;

@ -16,6 +16,7 @@
* under the License. * under the License.
*/ */
import PropTypes from 'prop-types';
import Badge from 'material-ui/Badge'; import Badge from 'material-ui/Badge';
import React, {Component} from 'react'; import React, {Component} from 'react';
import AppBar from 'material-ui/AppBar'; import AppBar from 'material-ui/AppBar';
@ -161,4 +162,8 @@ class BaseLayout extends Component {
} }
BaseLayout.propTypes = {
children: PropTypes.element
}
export default withRouter(BaseLayout); export default withRouter(BaseLayout);

@ -15,24 +15,163 @@
* specific language governing permissions and limitations * specific language governing permissions and limitations
* under the License. * under the License.
*/ */
import PropTypes from 'prop-types';
import Dropzone from 'react-dropzone';
import React, {Component} from 'react'; import React, {Component} from 'react';
import Toggle from 'material-ui/Toggle';
import MenuItem from 'material-ui/MenuItem';
import Close from 'material-ui/svg-icons/navigation/close';
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 {Card, CardActions, CardTitle} from 'material-ui/Card';
import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
/** /**
* Platform Create component * Platform Create component.
* Contains following components:
* * Platform Name
* * Platform Description
* * Platform Icon
* * Whether the platform needs an app to be installed.
* * Whether the platform is enabled by default.
* * Whether the platform is shared with tenants.
* */ * */
class PlatformCreate extends Component { class PlatformCreate extends Component {
constructor() { constructor() {
super(); super();
this.state = {
enabled: true,
allTenants: false,
files: [],
platformProperties: [{key:"Enabled", value: "Boolean"}, {key:"Access Token", value:"String"}]
}
}
handleToggle(event) {
switch (event.target.id) {
case "enabled" : {
let enabled = this.state.enabled;
this.setState({enabled: !enabled});
break;
}
case "tenant" : {
let allTenants = this.state.allTenants;
this.setState({allTenants: !allTenants});
break;
}
}
}
removeProperty(p) {
let properties = this.state.platformProperties;
properties.splice(properties.indexOf(p), 1);
this.setState({platformProperties: properties});
}
addProperty() {
let property = {key: Math.random(), value: "Temp Prop"};
let properties = this.state.platformProperties;
properties.push(property);
this.setState({platformProperties: properties});
} }
render() { render() {
console.log(this.state.platformProperties);
return ( 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."
floatingLabelText="Name*"
floatingLabelFixed={true}
/><br/>
<TextField
hintText="Enter the Platform Description."
floatingLabelText="Description*"
floatingLabelFixed={true}
multiLine={true}
rows={2}
/><br/><br/>
<Toggle
id="tenant"
label="Shared with all Tenants"
labelPosition="right"
onToggle={this.handleToggle.bind(this)}
defaultToggled={this.state.allTenants}
/> <br/>
<Toggle
id="enabled"
label="Enabled"
labelPosition="right"
onToggle={this.handleToggle.bind(this)}
defaultToggled={this.state.enabled}
/> <br/>
<div> <div>
Create Platform <p style={{color: '#BDBDBD'}}>Platform Properties</p>
<div id="property-container">
{this.state.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'}}/>
</IconButton>
</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>
<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>
</div>
<br/>
<RaisedButton primary={true} label="Create"/>
<FlatButton label="Cancel"/>
</form>
</div>
</CardActions>
</Card>
</div> </div>
); );
} }
} }
PlatformCreate.prototypes = {
enabled: PropTypes.bool,
allTenants: PropTypes.bool,
files: PropTypes.array,
platformProperties: PropTypes.object,
handleToggle: PropTypes.func
};
export default PlatformCreate; export default PlatformCreate;

@ -15,8 +15,12 @@
* 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 PropTypes from 'prop-types';
import {Table, TableBody} from 'material-ui/Table';
import DataTableHeader from './DataTableHeader';
import DataTableRow from './DataTableRow';
/** /**
* Error page. * Error page.
* */ * */
@ -28,11 +32,23 @@ class DataTable extends Component {
render() { render() {
return ( return (
<div> <Table>
Data Table <DataTableHeader>
</div> {this.props.headers.map((header) => {
})}
</DataTableHeader>
<TableBody>
</TableBody>
</Table>
); );
} }
} }
DataTable.prototypes = {
data: PropTypes.arrayOf(Object),
headers: PropTypes.arrayOf(String)
};
export default DataTable; export default DataTable;

@ -0,0 +1,34 @@
/*
* 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 React, {Component} from 'react';
import PropTypes from 'prop-types';
class DataTableHeader extends Component {
}
DataTableHeader.prototypes = {
/*sortable : bool
* text: string (The header text)
* */
label: PropTypes.string,
sortable: PropTypes.bool,
sort: PropTypes.func
};
export default DataTableHeader;

@ -0,0 +1,30 @@
/*
* 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 React, {Component} from 'react';
import PropTypes from 'prop-types';
class DataTableRow extends Component {
}
DataTableRow.propTypes = {
onClick: PropTypes.func,
data: PropTypes.object
};
export default DataTableRow;

@ -17,6 +17,7 @@
*/ */
import qs from 'qs'; import qs from 'qs';
import PropTypes from 'prop-types';
import React, {Component} from 'react'; import React, {Component} from 'react';
import Checkbox from 'material-ui/Checkbox'; import Checkbox from 'material-ui/Checkbox';
import {Redirect, Switch} from 'react-router-dom'; import {Redirect, Switch} from 'react-router-dom';

@ -22,9 +22,10 @@ import BaseLayout from './Base/BaseLayout';
import PlatformCreate from './Platform/PlatformCreate'; import PlatformCreate from './Platform/PlatformCreate';
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';
/** /**
* Contains all UI components related to Application, Login and Platform * Contains all UI components related to Application, Login and Platform
*/ */
export {Login, BaseLayout, ApplicationCreate, NotFound, PublisherOverview, PlatformCreate}; export {Login, BaseLayout, ApplicationCreate, ApplicationListing, NotFound, PublisherOverview, PlatformCreate};

@ -122,5 +122,4 @@
<npm.build.command>build_prod</npm.build.command> <npm.build.command>build_prod</npm.build.command>
<npm.working.dir>./src/main/</npm.working.dir> <npm.working.dir>./src/main/</npm.working.dir>
</properties> </properties>
</project> </project>
Loading…
Cancel
Save