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

Created the Step 2 and 3 basic forms. Code Formatting.

Browse Source
feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent d2705b1427
commit 4d16d73b23
5 changed files with 198 additions and 54 deletions
Show Stats Download Patch File Download Diff File

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

@ -17,11 +17,11 @@
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import RaisedButton from 'material-ui/RaisedButton'; import MenuItem from 'material-ui/MenuItem';
import FlatButton from 'material-ui/FlatButton';
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 MenuItem from 'material-ui/MenuItem'; import RaisedButton from 'material-ui/RaisedButton';
class Step1 extends Component { class Step1 extends Component {
constructor() { constructor() {
@ -40,7 +40,7 @@ class Step1 extends Component {
}; };
setStepData() { setStepData() {
this.props.setData("step1", {step:"Dfds"}); this.props.setData("step1", {step: "Dfds"});
this.handleNext.bind(this); this.handleNext.bind(this);
} }
@ -73,31 +73,31 @@ class Step1 extends Component {
hintText="Enter a title for your application." hintText="Enter a title for your application."
floatingLabelText="Title*" floatingLabelText="Title*"
floatingLabelFixed={true} floatingLabelFixed={true}
/><br /> /><br/>
<SelectField <SelectField
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"/>
</SelectField> <br /> </SelectField> <br/>
<SelectField <SelectField
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"/>
<MenuItem value={3} primaryText="Web" /> <MenuItem value={3} primaryText="Web"/>
</SelectField> </SelectField>
</div> </div>
<div style={{marginTop: 12}}> <div style={{marginTop: 12}}>
<FlatButton <FlatButton
label="< Back" label="< Back"
disabled= {true} disabled={true}
onClick={this.handlePrev.bind(this)} onClick={this.handlePrev.bind(this)}
style={{marginRight: 12}} style={{marginRight: 12}}
/> />

136
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,13 +16,48 @@
* under the License. * under the License.
*/ */
import Chip from 'material-ui/Chip';
import React, {Component} from 'react'; import React, {Component} from 'react';
import RaisedButton from 'material-ui/RaisedButton'; import MenuItem from 'material-ui/MenuItem';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton'; import FlatButton from 'material-ui/FlatButton';
import SelectField from 'material-ui/SelectField';
import RaisedButton from 'material-ui/RaisedButton';
class Step2 extends Component { class Step2 extends Component {
constructor() { constructor() {
super(); super();
this.state = {
tags: [],
defValue: "",
category: 1
};
this.styles = {
chip: {
margin: 4,
},
wrapper: {
display: 'flex',
flexWrap: 'wrap',
},
};
}
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: ""}, console.log(this.state.tags));
}
}
handleTagChange(event) {
let defaultValue = this.state.defValue;
defaultValue = event.target.value;
this.setState({defValue: defaultValue})
} }
handleNext() { handleNext() {
@ -33,27 +68,98 @@ class Step2 extends Component {
this.props.handlePrev(); this.props.handlePrev();
} }
handleRequestDelete = (key) => {
if (key === 3) {
alert('Why would you want to delete React?! :)');
return;
}
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});
};
renderChip(data) {
console.log(data);
return (
<Chip
key={data.key}
onRequestDelete={() => this.handleRequestDelete(data.key)}
style={this.styles.chip}
>
{data.value}
</Chip>
);
}
render() { render() {
const contentStyle = {margin: '0 16px'}; const contentStyle = {margin: '0 16px'};
return ( return (
<div style={contentStyle}> <div style={contentStyle}>
Step2 <div>
<div> <div>
<div style={{marginTop: 12}}> <TextField
<FlatButton hintText="Enter a title for your application."
label="< Back" floatingLabelText="Title*"
disabled= {false} floatingLabelFixed={true}
onClick={this.handlePrev.bind(this)} /><br/>
style={{marginRight: 12}} <TextField
/> hintText="Enter a short description for your application."
<RaisedButton floatingLabelText="Short Description*"
label="Next >" floatingLabelFixed={true}
primary={true} multiLine={true}
onClick={this.handleNext.bind(this)} rows={2}
/> /><br/>
<TextField
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
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> </div>
<br/>
<SelectField
floatingLabelText="Category*"
value={this.state.category}
floatingLabelFixed={true}
>
<MenuItem value={1} primaryText="Business"/>
</SelectField> <br/>
</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> </div>
</div>
); );
} }
} }

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

@ -17,12 +17,20 @@
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import RaisedButton from 'material-ui/RaisedButton'; import Toggle from 'material-ui/Toggle';
import MenuItem from 'material-ui/MenuItem';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton'; import FlatButton from 'material-ui/FlatButton';
import SelectField from 'material-ui/SelectField';
import RaisedButton from 'material-ui/RaisedButton';
class Step3 extends Component { class Step3 extends Component {
constructor() { constructor() {
super(); super();
this.state = {
showForm: false,
releaseChannel: 1
}
} }
handleFinish() { handleFinish() {
@ -33,27 +41,57 @@ class Step3 extends Component {
this.props.handlePrev(); this.props.handlePrev();
} }
handleToggle() {
let hide = this.state.showForm;
this.setState({showForm: !hide});
}
render() { render() {
const contentStyle = {margin: '0 16px'}; const contentStyle = {margin: '0 16px'};
return ( return (
<div style={contentStyle}> <div style={contentStyle}>
Step3 <div>
<div> <Toggle
<div style={{marginTop: 12}}> label="Release the Application"
<FlatButton labelPosition="right"
label="< Back" onToggle={this.handleToggle.bind(this)}
disabled= {false} defaultToggled={this.state.showForm}
onClick={this.handlePrev.bind(this)} />
style={{marginRight: 12}}
/> {/*If toggle is true, the release form will be shown.*/}
<RaisedButton {!this.state.showForm ? <div></div> : <div>
label="Finish" <SelectField
primary={true} floatingLabelText="Select Release Channel*"
onClick={this.handleFinish.bind(this)} value={this.state.releaseChannel}
/> floatingLabelFixed={true}
</div> >
<MenuItem value={1} primaryText="Alpha"/>
<MenuItem value={2} primaryText="Beta"/>
<MenuItem value={3} primaryText="GA"/>
</SelectField> <br/>
<TextField
hintText="1.0.0"
floatingLabelText="Version*"
floatingLabelFixed={true}
/><br/>
</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> </div>
</div>
); );
} }
} }

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

@ -16,20 +16,20 @@
* under the License. * under the License.
*/ */
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';
import Drawer from 'material-ui/Drawer'; import Drawer from 'material-ui/Drawer';
import {withRouter} from 'react-router-dom';
import IconButton from 'material-ui/IconButton'; import IconButton from 'material-ui/IconButton';
import NotificationsIcon from 'material-ui/svg-icons/social/notifications'; import {List, ListItem} from 'material-ui/List';
import Apps from 'material-ui/svg-icons/navigation/apps'; 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 Add from 'material-ui/svg-icons/content/add-circle';
import Feedback from 'material-ui/svg-icons/action/feedback'; import Feedback from 'material-ui/svg-icons/action/feedback';
import {withRouter} from 'react-router-dom' import Dashboard from 'material-ui/svg-icons/action/dashboard';
import Badge from 'material-ui/Badge'; import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
import {List, ListItem} from 'material-ui/List'; import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
/** /**

6
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,13 +16,13 @@
* under the License. * under the License.
*/ */
import qs from 'qs';
import React, {Component} from 'react'; import React, {Component} from 'react';
import Checkbox from 'material-ui/Checkbox';
import {Redirect, Switch} from 'react-router-dom'; import {Redirect, Switch} from 'react-router-dom';
import {Card, CardActions, CardMedia, CardTitle} from 'material-ui/Card';
import RaisedButton from 'material-ui/RaisedButton'; import RaisedButton from 'material-ui/RaisedButton';
import {Card, CardActions, CardTitle} from 'material-ui/Card';
import {TextValidator, ValidatorForm} 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. //todo: remove the {TextValidator, ValidatorForm} and implement it manually.

Write Preview
Loading…
Cancel
Save