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

Added the stepper and App creation first step.

Browse Source
feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent c7c0f62ca2
commit d2705b1427
11 changed files with 673 additions and 103 deletions
Show Stats Download Patch File Download Diff File

1
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json
Unescape View File

@ -15,6 +15,7 @@
"latest-version": "^3.1.0",
"material-ui": "^0.19.0",
"material-ui-datatables": "^0.18.2",
"qs": "^6.5.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-images-uploader": "^1.1.0",

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

@ -16,41 +16,40 @@
* under the License.
*/
import React, {Component} from 'react';
import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
import './App.css'
import {BaseLayout, Create, Login, NotFound} from './components'
import createHistory from 'history/createBrowserHistory';
const history = createHistory({basename:'/publisher'});
import React, {Component} from 'react';
import createHistory from 'history/createHashHistory';
import {HashRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
import {BaseLayout, Create, Login, NotFound, PublisherOverview} from './components'
const history = createHistory({basename: '/publisher'});
class Base extends Component {
constructor() {
super();
this.state = {
user: "m"
user: "s"
}
}
render() {
if (this.state.user) {
return(
return (
<div className="container">
<BaseLayout>
<Switch>
<Redirect exact path={"/"} to={"/assets"}/>
<Route exact path={"/assets"} component={NotFound}/>
<Route path={"/assets/apps"} component={Create}/>
<Route path={"/assets/apps/:app"}/>
<Route path={"/assets/apps/create"}/>
<Route path={"/assets/apps/edit"}/>
<Route path={"/assets/platform/:platform"}/>
<Route path={"/assets/platform/create"}/>
<Route path={"/assets/platform/edit"}/>
<Redirect exact path={"/"} to={"/overview"}/>
<Route exact path={"/overview"} component={PublisherOverview}/>
{/*<Route path={"/assets/apps"} component={}/>*/}
{/*<Route path={"/assets/apps/:app"} component={}/>*/}
<Route path={"/assets/apps/create"} component={Create}/>
{/*<Route path={"/assets/apps/edit/:app"} component="app edit"/>*/}
<Route path={"/assets/platforms/:platform"}/>
<Route path={"/assets/platforms/create"}/>
<Route path={"/assets/platforms/edit/:platform"}/>
<Route path={"/assets/reviews"}/>
<Route path={"/assets/reviews/:review"}/>
<Route component={NotFound} />
<Route component={NotFound}/>
</Switch>
</BaseLayout>
</div>
@ -62,19 +61,19 @@ class Base extends Component {
}
class Publisher extends Component {
render() {
return (
<div className="App">
<Router basename="publisher" history={history}>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/logout" component={Login}/>
<Route component={Base}/>
</Switch>
</Router>
</div>
);
}
render() {
return (
<div className="App">
<Router basename="publisher" history={history}>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/logout" component={Login}/>
<Route component={Base}/>
</Switch>
</Router>
</div>
);
}
}
export default Publisher;

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

@ -15,3 +15,171 @@
* specific language governing permissions and limitations
* under the License.
*/
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 RaisedButton from 'material-ui/RaisedButton';
import {Card, CardActions, CardTitle} from 'material-ui/Card';
import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
class Create extends Component {
constructor() {
super();
this.setStepData.bind(this);
this.removeStepData.bind(this);
this.handleSubmit.bind(this);
this.handleCancel.bind(this);
this.handleYes.bind(this);
this.handleNo.bind(this);
this.state = {
finished: false,
stepIndex: 0,
stepData: [],
isDialogOpen: false
};
}
handleNext = () => {
const {stepIndex} = this.state;
this.setState({
stepIndex: stepIndex + 1,
finished: stepIndex >= 2,
});
};
handleSubmit = () => {
console.log(this.state.stepData);
};
handleCancel = () => {
this.setState({isDialogOpen: true});
};
handlePrev = () => {
const {stepIndex} = this.state;
if (stepIndex > 0) {
this.removeStepData();
this.setState({stepIndex: stepIndex - 1});
}
};
setStepData = (step, data) => {
console.log(step, data, this.state.stepData);
let tmpStepData = this.state.stepData;
tmpStepData.push({step: step, data: data});
this.setState({stepData: tmpStepData})
};
/**
* Remove the last data point
* */
removeStepData = () => {
let tempData = this.state.stepData;
tempData.pop();
this.setState({stepData: tempData});
};
handleYes = () => {
this.setState({finished: false, stepIndex: 0, stepData: [], isDialogOpen: false});
};
handleNo = () => {
this.setState({isDialogOpen: false});
};
getStepContent(stepIndex) {
switch (stepIndex) {
case 0:
return <Step1 handleNext={this.handleNext}
setData={this.setStepData}
removeData={this.removeStepData}/>;
case 1:
return <Step2 handleNext={this.handleNext}
handlePrev={this.handlePrev}
setData={this.setStepData}
removeData={this.removeStepData}/>;
case 2:
return <Step3 handleFinish={this.handleNext}
handlePrev={this.handlePrev}
setData={this.setStepData}
removeData={this.removeStepData}/>;
default:
return 'You\'re a long way from home sonny jim!';
}
}
render() {
const {finished, stepIndex} = this.state;
const contentStyle = {margin: '0 16px'};
const actions = [
<FlatButton
label="Yes"
primary={true}
onClick={this.handleYes}
/>,
<FlatButton
label="No"
secondary={true}
onClick={this.handleNo}
/>,
];
return (
<div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
<Card>
<CardTitle title="Create Application"/>
{/**
* The stepper goes here.
*/}
<CardActions>
<div style={{width: '100%', margin: 'auto'}}>
<Stepper activeStep={stepIndex}>
<Step>
<StepLabel>Select Application Platform</StepLabel>
</Step>
<Step>
<StepLabel>Enter Application Details</StepLabel>
</Step>
<Step>
<StepLabel>Release</StepLabel>
</Step>
</Stepper>
<div style={contentStyle}>
{finished ? (
<div>
<p>Create App?</p>
<form onSubmit={this.handleSubmit}>
<RaisedButton primary={true} label="Create" onClick={this.handleSubmit}/>
<FlatButton label="Cancel" onClick={this.handleCancel}/>
</form>
</div>
) : (
<div>
{this.getStepContent(stepIndex)}
</div>
)}
</div>
</div>
</CardActions>
</Card>
<Dialog
actions={actions}
modal={false}
open={this.state.isDialogOpen}
onRequestClose={this.handleNo}
>
Do you really want to cancel?
</Dialog>
</div>);
}
}
export default withRouter(Create);

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

@ -0,0 +1,117 @@
/*
* 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 RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
class Step1 extends Component {
constructor() {
super();
this.state = {
finished: false,
stepIndex: 0,
store: 1,
platform: 1,
stepData: []
};
}
handleNext = () => {
this.props.handleNext();
};
setStepData() {
this.props.setData("step1", {step:"Dfds"});
this.handleNext.bind(this);
}
handleClick() {
this.setStepData();
this.handleNext();
}
handlePrev() {
this.props.handlePrev();
}
onChangePlatform = (event, index, value) => {
this.setState({platform: value});
};
onChangeStore = (event, index, value) => {
this.setState({store: value});
};
render() {
const {finished, stepIndex} = this.state;
const contentStyle = {margin: '0 16px'};
return (
<div>
<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}
floatingLabelFixed={true}
onChange={this.onChangeStore.bind(this)}
>
<MenuItem value={1} primaryText="Enterprise" />
<MenuItem value={2} primaryText="Public" />
</SelectField> <br />
<SelectField
floatingLabelText="Platform*"
value={this.state.platform}
floatingLabelFixed={true}
onChange={this.onChangePlatform.bind(this)}
>
<MenuItem value={1} primaryText="Android" />
<MenuItem value={2} primaryText="iOS" />
<MenuItem value={3} primaryText="Web" />
</SelectField>
</div>
<div style={{marginTop: 12}}>
<FlatButton
label="< Back"
disabled= {true}
onClick={this.handlePrev.bind(this)}
style={{marginRight: 12}}
/>
<RaisedButton
label="Next >"
primary={true}
onClick={this.handleClick.bind(this)}
/>
</div>
</div>
</div>
</div>
);
}
}
export default Step1;

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

@ -0,0 +1,61 @@
/*
* 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 RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
class Step2 extends Component {
constructor() {
super();
}
handleNext() {
this.props.handleNext();
}
handlePrev() {
this.props.handlePrev();
}
render() {
const contentStyle = {margin: '0 16px'};
return (
<div style={contentStyle}>
Step2
<div>
<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>
);
}
}
export default Step2;

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

@ -0,0 +1,61 @@
/*
* 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 RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
class Step3 extends Component {
constructor() {
super();
}
handleFinish() {
this.props.handleFinish();
}
handlePrev() {
this.props.handlePrev();
}
render() {
const contentStyle = {margin: '0 16px'};
return (
<div style={contentStyle}>
Step3
<div>
<div style={{marginTop: 12}}>
<FlatButton
label="< Back"
disabled= {false}
onClick={this.handlePrev.bind(this)}
style={{marginRight: 12}}
/>
<RaisedButton
label="Finish"
primary={true}
onClick={this.handleFinish.bind(this)}
/>
</div>
</div>
</div>
);
}
}
export default Step3;

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

@ -0,0 +1,23 @@
/*
* 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 Step1 from './Step1';
import Step2 from './Step2';
import Step3 from './Step3';
export {Step1, Step2, Step3};

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

@ -19,12 +19,17 @@
import React, {Component} from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import Menu from 'material-ui/Menu';
import IconButton from 'material-ui/IconButton';
import Notifications from 'material-ui/svg-icons/social/notifications';
import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
import Apps from 'material-ui/svg-icons/navigation/apps';
import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
import Dashboard from 'material-ui/svg-icons/action/dashboard';
import Add from 'material-ui/svg-icons/content/add-circle';
import Feedback from 'material-ui/svg-icons/action/feedback';
import {withRouter} from 'react-router-dom'
import Badge from 'material-ui/Badge';
import {List, ListItem} from 'material-ui/List';
/**
@ -35,9 +40,48 @@ import {withRouter} from 'react-router-dom'
* */
class BaseLayout extends Component {
constructor() {
super();
this.state = {
notifications: 0,
user: 'Admin'
}
}
componentWillMount() {
}
handleApplicationClick() {
console.log("Application");
window.location = '/publisher/assets/apps';
this.handleHistory('/assets/apps');
}
handleOverviewClick() {
this.handleHistory('/overview');
}
handleApplicationCreateClick() {
this.handleHistory('/assets/apps/create');
}
handlePlatformClick() {
this.handleHistory('/assets/platforms');
}
handlePlatformCreateClick() {
this.handleHistory('/assets/platforms/create');
}
handleReviewClick() {
this.handleHistory('/assets/reviews');
}
/**
* The method to update the history.
* to: The URL to route.
* */
handleHistory(to) {
this.props.history.push(to);
}
render() {
@ -46,9 +90,15 @@ class BaseLayout extends Component {
<AppBar title="App Publisher"
iconElementRight={
<div>
<IconButton>
<Notifications/>
</IconButton>
<Badge
badgeContent={this.state.notifications}
secondary={true}
badgeStyle={{top: 12, right: 12}}
>
<IconButton tooltip="Notifications">
<NotificationsIcon/>
</IconButton>
</Badge>
<IconButton onClick={() => {
console.log("Clicked")
}}>
@ -58,12 +108,41 @@ class BaseLayout extends Component {
}
/>
<div>
<Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: 64}} open={true}>
<Menu>
<MenuItem onClick={this.handleApplicationClick.bind(this)}>Applications</MenuItem>
<MenuItem>Platforms</MenuItem>
<MenuItem>Reviews</MenuItem>
</Menu>
<Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: '10%'}} open={true}>
<List>
<ListItem primaryText="Overview"
onClick={this.handleOverviewClick.bind(this)}
leftIcon={<Dashboard/>}/>
<ListItem primaryText="Applications"
leftIcon={<Apps/>}
initiallyOpen={false}
primaryTogglesNestedList={true}
onClick={this.handleApplicationClick.bind(this)}
nestedItems={[
<ListItem
key={1}
primaryText="Create"
onClick={this.handleApplicationCreateClick.bind(this)}
leftIcon={<Add/>}
/>]}
/>
<ListItem primaryText="Platforms"
leftIcon={<DevicesOther/>}
initiallyOpen={false}
primaryTogglesNestedList={true}
onClick={this.handlePlatformClick.bind(this)}
nestedItems={[
<ListItem
key={1}
primaryText="Create"
onClick={this.handlePlatformCreateClick.bind(this)}
leftIcon={<Add/>}
/>]}
/>
<ListItem primaryText="Reviews"
onClick={this.handleReviewClick.bind(this)}
leftIcon={<Feedback/>}/>
</List>
</Drawer>
</div>
<div style=

41
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Overview/PublisherOverview.js
Unescape View File

@ -0,0 +1,41 @@
/*
* 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';
class PublisherOverview extends Component {
constructor() {
super();
}
componentWillMount() {
console.log("In Crate")
}
render() {
return (
<div>
Overview
</div>
);
}
}
export default PublisherOverview;

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

@ -16,27 +16,40 @@
* under the License.
*/
import React, { Component } from 'react';
import {Card, CardTitle, CardActions, CardMedia} from 'material-ui/Card';
import React, {Component} from 'react';
import {Redirect, Switch} from 'react-router-dom';
import {Card, CardActions, CardMedia, CardTitle} from 'material-ui/Card';
import RaisedButton from 'material-ui/RaisedButton';
import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';
import {TextValidator, ValidatorForm} from 'react-material-ui-form-validator';
import Checkbox from 'material-ui/Checkbox';
import qs from 'qs';
//todo: remove the {TextValidator, ValidatorForm} and implement it manually.
class Login extends Component {
constructor() {
super();
this.state = {
isLoggedIn: true,
referrer: "/",
userName: "",
password: "",
rememberMe: true
}
}
componentDidMount() {
let queryString = this.props.location.search;
console.log(queryString);
queryString = queryString.replace(/^\?/, '');
/* With QS version up we can directly use {ignoreQueryPrefix: true} option */
let params = qs.parse(queryString);
if (params.referrer) {
this.setState({referrer: params.referrer});
}
}
handleLogin(event) {
console.log(this.state);
event.preventDefault();
}
@ -45,7 +58,7 @@ class Login extends Component {
{
userName: event.target.value
}
);
);
}
onPasswordChange(event) {
@ -65,56 +78,62 @@ class Login extends Component {
}
render() {
return (
<div>
{/*TODO: Style the components.*/}
<Card>
<CardTitle title="WSO2 IoT App Publisher"/>
<CardMedia>
</CardMedia>
<CardActions>
<ValidatorForm
ref="form"
onSubmit={this.handleLogin.bind(this)}
onError={errors => console.log(errors)}>
<TextValidator
floatingLabelText="User Name"
floatingLabelFixed={true}
onChange={this.onUserNameChange.bind(this)}
name="userName"
validators={['required']}
errorMessages={['User Name is required']}
value={this.state.userName}
/>
<br/>
<TextValidator
floatingLabelText="Password"
floatingLabelFixed={true}
onChange={this.onPasswordChange.bind(this)}
name="password"
type="password"
value={this.state.password}
validators={['required']}
errorMessages={['Password is required']}
/>
<br/>
<Checkbox label="Remember me."
onCheck={this.rememberMe.bind(this)}
checked={this.state.rememberMe}/>
<br/>
<RaisedButton type="submit" label="Login"/>
</ValidatorForm>
</CardActions>
</Card>
</div>);
if (!this.state.isLoggedIn) {
return (
<div>
{/*TODO: Style the components.*/}
<Card>
<CardTitle title="WSO2 IoT App Publisher"/>
<CardActions>
<ValidatorForm
ref="form"
onSubmit={this.handleLogin.bind(this)}
onError={errors => console.log(errors)}>
<TextValidator
floatingLabelText="User Name"
floatingLabelFixed={true}
onChange={this.onUserNameChange.bind(this)}
name="userName"
validators={['required']}
errorMessages={['User Name is required']}
value={this.state.userName}
/>
<br/>
<TextValidator
floatingLabelText="Password"
floatingLabelFixed={true}
onChange={this.onPasswordChange.bind(this)}
name="password"
type="password"
value={this.state.password}
validators={['required']}
errorMessages={['Password is required']}
/>
<br/>
<Checkbox label="Remember me."
onCheck={this.rememberMe.bind(this)}
checked={this.state.rememberMe}/>
<br/>
<RaisedButton type="submit" label="Login"/>
</ValidatorForm>
</CardActions>
</Card>
</div>);
} else {
return (
<Switch>
<Redirect to={this.state.referrer}/>
</Switch>
);
}
}
}
export default Login;

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

@ -20,9 +20,10 @@ import Login from './User/Login/Login'
import BaseLayout from './Base/BaseLayout'
import Create from './Application/Create'
import NotFound from './Error/NotFound'
import PublisherOverview from './Overview/PublisherOverview'
/**
* Contains all UI components related to Application, Login and Platform
*/
export {Login, BaseLayout, Create, NotFound};
export {Login, BaseLayout, Create, NotFound, PublisherOverview};
Write Preview
Loading…
Cancel
Save