inosh
/
device-mgt-core
forked from community/device-mgt-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added prop types and started creating the data table component.

Browse Source
4.x.x
Menaka Jayawardena 7 years ago
parent 3d337ed537
commit 319d844972
13 changed files with 299 additions and 26 deletions
Show Stats Download Patch File Download Diff File

11
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.js
Unescape View File

@ -16,11 +16,12 @@
* under the License.
*/
import './App.css'
import './App.css';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import createHistory from 'history/createHashHistory';
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'});
@ -51,9 +52,9 @@ class Base extends Component {
<Switch>
<Redirect exact path={"/"} to={"/overview"}/>
<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/platforms/create"} component={PlatformCreate}/>
<Route exact path={"/assets/apps"} />
<Route exact path={"/assets/apps/:app"} />
<Route exact path={"/assets/apps/edit/:app"} />
<Route exact path={"/assets/platforms/:platform"}/>
@ -90,8 +91,6 @@ class Publisher extends Component {
}
}
Publisher.propTypes = {
user: Object
};
Publisher.propTypes = {};
export default Publisher;

3
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.js
Unescape View File

@ -16,6 +16,7 @@
* 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';
@ -228,4 +229,6 @@ class ApplicationCreate extends Component {
}
}
ApplicationCreate.propTypes = {};
export default withRouter(ApplicationCreate);

8
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js
Unescape View File

@ -16,10 +16,10 @@
* under the License.
*/
import PropTypes from 'prop-types';
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';
@ -137,4 +137,10 @@ class Step1 extends Component {
}
}
Step1.propTypes = {
handleNext: PropTypes.func,
setData: PropTypes.func,
removeData: PropTypes.func
};
export default Step1;

44
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step2.js
Unescape View File

@ -16,7 +16,9 @@
* 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';
@ -51,7 +53,8 @@ class Step2 extends Component {
this.state = {
tags: [],
defValue: "",
category: 1
category: 1,
errors: {}
};
this.styles = {
@ -63,7 +66,6 @@ class Step2 extends Component {
flexWrap: 'wrap',
},
};
}
/**
@ -138,17 +140,21 @@ class Step2 extends Component {
<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}
@ -157,10 +163,11 @@ class Step2 extends Component {
/><br/>
<TextField
hintText="Select the application visibility"
floatingLabelText="Visibility*"
floatingLabelText="Visibility"
floatingLabelFixed={true}
/><br/>
<TextField
errorText={this.state.errors["tags"]}
hintText="Enter application tags.."
floatingLabelText="Tags*"
floatingLabelFixed={true}
@ -180,9 +187,27 @@ class Step2 extends Component {
<MenuItem value={1} primaryText="Business"/>
</SelectField> <br/>
{/*Platform Specific Properties.*/}
<div style={{border: '1px'}}>
fdfdfd
</div>
<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 />
@ -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;

14
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js
Unescape View File

@ -16,6 +16,7 @@
* under the License.
*/
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import Toggle from 'material-ui/Toggle';
import MenuItem from 'material-ui/MenuItem';
@ -51,7 +52,8 @@ class Step3 extends Component {
super();
this.state = {
showForm: false,
releaseChannel: 1
releaseChannel: 1,
errors: {}
}
}
@ -78,7 +80,6 @@ class Step3 extends Component {
this.setState({showForm: !hide});
}
render() {
const contentStyle = {margin: '0 16px'};
return (
@ -90,7 +91,6 @@ class Step3 extends Component {
onToggle={this.handleToggle.bind(this)}
defaultToggled={this.state.showForm}
/>
{/*If toggle is true, the release form will be shown.*/}
{!this.state.showForm ? <div/> : <div>
<SelectField
@ -105,6 +105,7 @@ class Step3 extends Component {
<TextField
hintText="1.0.0"
floatingLabelText="Version*"
errorText={this.state.errors["title"]}
floatingLabelFixed={true}
/><br/>
</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;

5
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.js
Unescape View File

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

143
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.js
Unescape View File

@ -15,24 +15,163 @@
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import Dropzone from 'react-dropzone';
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 {
constructor() {
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() {
console.log(this.state.platformProperties);
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>
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>
);
}
}
PlatformCreate.prototypes = {
enabled: PropTypes.bool,
allTenants: PropTypes.bool,
files: PropTypes.array,
platformProperties: PropTypes.object,
handleToggle: PropTypes.func
};
export default PlatformCreate;

24
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js
Unescape View File

@ -15,8 +15,12 @@
* specific language governing permissions and limitations
* 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.
* */
@ -28,11 +32,23 @@ class DataTable extends Component {
render() {
return (
<div>
Data Table
</div>
<Table>
<DataTableHeader>
{this.props.headers.map((header) => {
})}
</DataTableHeader>
<TableBody>
</TableBody>
</Table>
);
}
}
DataTable.prototypes = {
data: PropTypes.arrayOf(Object),
headers: PropTypes.arrayOf(String)
};
export default DataTable;

34
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js
Unescape View File

@ -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;

30
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js
Unescape View File

@ -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;

1
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.js
Unescape View File

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

3
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/index.js
Unescape View File

@ -22,9 +22,10 @@ import BaseLayout from './Base/BaseLayout';
import PlatformCreate from './Platform/PlatformCreate';
import PublisherOverview from './Overview/PublisherOverview';
import ApplicationCreate from './Application/ApplicationCreate';
import ApplicationListing from './Application/ApplicationListing';
/**
* 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};

1
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/pom.xml
Unescape View File

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