community/device-mgt-core
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-core.git synced 2025-10-06 02:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #974 from menakaj/application-mgt

Browse Source 
Reactstrap migration.
This commit is contained in:
Megala Uthayakumar 2017-09-26 21:15:15 +05:30 committed by GitHub
commit e1a948b424
49 changed files with 3313 additions and 1045 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@
"license": "Apache License 2.0",
"dependencies": {
"axios": "^0.16.2",
"bootstrap": "^4.0.0-alpha.6",
"flux": "^3.1.3",
"history": "^4.7.2",
"latest-version": "^3.1.0",
@ -17,6 +18,8 @@
"prop-types": "^15.5.10",
"qs": "^6.5.0",
"react": "^15.6.1",
"react-addons-css-transition-group": "^15.6.0",
"react-addons-transition-group": "^15.6.0",
"react-dom": "^15.6.1",
"react-dropzone": "^4.1.2",
"react-images-uploader": "^1.1.0",
@ -26,7 +29,8 @@
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.10",
"react-sliding-pane": "^1.2.3",
"react-tap-event-plugin": "^2.0.1"
"react-tap-event-plugin": "^2.0.1",
"reactstrap": "^4.8.0"
},
"devDependencies": {
"babel-core": "^6.26.0",

2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html
View File

@ -21,6 +21,8 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" type="text/css" href="./css/font-wso2.css">
<link rel="stylesheet" type="text/css" href="./themes/index.css">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

12
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
View File

@ -31,7 +31,8 @@ BaseLayout,
Login,
NotFound,
PlatformCreate,
PlatformListing
PlatformListing,
ApplicationEdit
} from './components';
@ -78,7 +79,7 @@ class Base extends Component {
if (this.state.user !== null) {
console.log("Have User.");
return (
<div className="container">
<div>
<BaseLayout user={this.state.user}>
<Switch>
<Redirect exact path={"/"} to={"/assets/apps"}/>
@ -86,8 +87,8 @@ class Base extends Component {
<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/apps/:app"}/>
<Route exact path={"/assets/apps/:app/edit"}/>
{/*<Route exact path={"/assets/apps/:app"}/>*/}
<Route exact path={"/assets/apps/edit/:app"} component={ApplicationEdit}/>
<Route exact path={"/assets/platforms/:platform"}/>
<Route exact path={"/assets/platforms/:platform/edit"}/>
<Route exact path={"/assets/reviews"}/>
@ -161,10 +162,11 @@ class Publisher extends Component {
}
}
render() {
return (
<div className="App">
<MuiThemeProvider muiTheme={this.state.muiTheme}>
<MuiThemeProvider>
<Router basename="publisher" history={history}>
<Switch>
<Route path="/login" component={Login}/>

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

@ -137,10 +137,13 @@ class AuthHandler {
}
static createAuthenticationHeaders(contentType) {
if (AuthHandler.getUser().getAuthToken()) {
return {
"Authorization": "Bearer " + AuthHandler.getUser().getAuthToken(),
"Content-Type": contentType,
};
}
return "User not found";
};
}

3
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/appMgtApiHelpers.js
View File

@ -48,6 +48,9 @@ export default class Helper {
return {application, images};
}
/**
* Creates a String array from tags array.
* */
static stringifyTags(tags) {
let tmpTags = [];
for (let tag in tags) {

119
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx Normal file
View File

@ -0,0 +1,119 @@
/*
* 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 PropTypes from 'prop-types';
import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import AuthHandler from "../../api/authHandler";
import '../../css/font-wso2.css';
import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
import ApplicationCreate from '../Application/Create/ApplicationCreate';
import {Button, Input, InputGroup, Popover, PopoverContent, PopoverTitle,} from 'reactstrap';
import NotificationItem from '../UIComponents/Notifications/NotificationItem';
/**
* Base Layout:
* App bar
* Left Navigation
* Middle content.
* */
class BaseLayout extends Component {
constructor() {
super();
this.state = {
notifications: 0,
user: 'Admin',
openModal: false
};
this.logout = this.logout.bind(this);
}
handleApplicationClick() {
this.handleHistory('/assets/apps');
}
handleApplicationCreateClick(event) {
event.preventDefault();
event.stopPropagation();
this.setState({openModal: true});
}
/**
* The method to update the history.
* to: The URL to route.
* */
handleHistory(to) {
this.props.history.push(to);
}
logout(event, index, value) {
AuthHandler.logout();
}
render() {
return (
<div id="container">
<div id="header-content">
<div id="header">
<span id="header-text">
WSO2 IoT App Publisher
</span>
<div id="header-btn">
<Button className="btn-notification" id="btn"><NotificationsIcon/></Button>
<Button className="btn-account" id="btn"><ActionAccountCircle/></Button>
</div>
</div>
<div id="search-box">
<InputGroup>
<Input
id="search"
name="search"
placeholder={'Search for Applications'}
onChange={(event) => console.log(event.target.value)}
/>
</InputGroup>
</div>
<div id="add-btn-container">
<Button
id="add-btn"
onClick={this.handleApplicationCreateClick.bind(this)}
>
<h3>
<strong>+</strong>
</h3>
</Button>
</div>
</div>
<div id="application-content" style={this.state.style}>
{this.props.children}
</div>
<ApplicationCreate open={this.state.openModal}/>
</div>
);
}
}
BaseLayout.propTypes = {
children: PropTypes.element
};
export default withRouter(BaseLayout);

162
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
View File

@ -19,11 +19,13 @@
import Theme from '../../theme';
import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import TextField from 'material-ui/TextField';
import AuthHandler from "../../api/authHandler";
import DataTable from '../UIComponents/DataTable';
import ApplicationMgtApi from '../../api/applicationMgtApi';
import {Card, CardActions, CardTitle} from 'material-ui/Card';
import {Button, Row, Table} from 'reactstrap';
import Drawer from '../UIComponents/Drawer/Drawer';
import ApplicationView from './View/ApplicationView';
import NotificationView from "../UIComponents/Notifications/NotificationView";
import AppImage from "../UIComponents/AppImage/AppImage";
/**
* The App Create Component.
@ -41,10 +43,17 @@ class ApplicationListing extends Component {
this.setData = this.setData.bind(this);
this.sortData = this.sortData.bind(this);
this.compare = this.compare.bind(this);
this.handleButtonClick = this.handleButtonClick.bind(this);
this.state = {
searchedApplications: [],
applications: [],
asc: true
asc: true,
open: false,
application: {},
drawer: {},
appListStyle: {},
image: [{id: "1", src: "https://www.greenfoot.org/images/logos/macos.png"},
{id: "2", src:"http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png"}]
};
this.scriptId = "application-listing";
}
@ -80,23 +89,48 @@ class ApplicationListing extends Component {
data_type: "string",
sortable: false,
label: "Status"
},
{
data_id: "edit",
data_type: "button",
sortable: false,
label: ""
}
];
applications = [
{
id: "3242342ffww3423",
applicationName: "Facebook",
platform: "android",
category: "Business",
status: "Published"
},
{
icon: "http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png",
id: "324234233423423",
applicationName: "Twitter",
platform: "android",
category: "Business",
status: "Created"
},
{
icon: "https://www.greenfoot.org/images/logos/macos.png",
id: "3242d3423423423",
applicationName: "Massenger",
platform: "android",
category: "Business",
status: "In Review"
},
];
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
// this.setState({data: this.data});
}
componentDidMount() {
let getApps = ApplicationMgtApi.getApplications();
getApps.then(response => {
let apps = this.setData(response.data.applications);
@ -165,32 +199,96 @@ class ApplicationListing extends Component {
return 0;
}
onRowClick(id) {
//TODO: Remove console logs.
ApplicationMgtApi.getApplication(id).then(response => {
console.log(response);
}).catch(err => {
console.log(err)
onRowClick() {
console.log("sfsdfsdf");
let style = {
width: '500px',
marginLeft: '500px'
};
let appListStyle = {
marginRight: '500px',
};
this.setState({drawer: style, appListStyle: appListStyle});
}
handleButtonClick() {
console.log("Application Listing");
this.props.history.push("apps/edit/fdsfdsf343");
}
remove(imageId) {
let tmp = this.state.image;
console.log(imageId);
let rem = tmp.filter((image) => {
return image.id !== imageId
});
// this.props.history.push("apps/" + id);
console.log(rem);
this.setState({image: rem});
}
closeDrawer() {
let style = {
width: '0',
marginLeft: '0'
};
let appListStyle = {
marginRight: '0',
};
this.setState({drawer: style, appListStyle: appListStyle});
}
render() {
return (
<div className="middle applicationListingMiddle">
<Card className="applicationListingCard">
<TextField
hintText="Search"
className="applicationListingSearch"
onChange={this.searchApplications}/>
<CardTitle title="Applications" className="applicationListTitle"/>
<DataTable
headers={this.headers}
data={this.state.searchedApplications}
handleRowClick={this.onRowClick}
noDataMessage={{type: 'button', text: 'Create Application'}}
<div id="application-list" style={this.state.appListStyle}>
<Table striped hover>
<thead>
<tr>
<th></th>
{/* TODO: Remove console.log and add sort method. */}
<th onClick={() => {console.log("sort")}}>Application Name</th>
<th>Category</th>
<th>Platform</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{this.applications.map(
(application) => {
return (
<tr key={application.id} onClick={this.onRowClick}>
<td>
{/* TODO: Move this styles to css. */}
<img
src={application.icon}
height='50px'
width='50px'
style={{border: 'solid 1px black', borderRadius: "100%"}}
/>
</Card>
</td>
<td>{application.applicationName}</td>
<td>{application.category}</td>
<td>{application.platform}</td>
<td>{application.status}</td>
<td><Button onClick={this.handleButtonClick}>Edit</Button></td>
</tr>
)
}
)}
</tbody>
</Table>
<Drawer onClose={this.closeDrawer.bind(this)} style={this.state.drawer}>
<ApplicationView/>
</Drawer>
</div>
);
}

122
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx
View File

@ -16,17 +16,12 @@
* under the License.
*/
import Theme from '../../theme';
import React, {Component} from 'react';
import Dialog from 'material-ui/Dialog';
import {withRouter} from 'react-router-dom';
import FlatButton from 'material-ui/FlatButton';
import AuthHandler from "../../api/authHandler";
import {Step1, Step2, Step3} from './CreateSteps';
import RaisedButton from 'material-ui/RaisedButton';
import ApplicationMgtApi from '../../api/applicationMgtApi';
import {Card, CardActions, CardTitle} from 'material-ui/Card';
import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
import AuthHandler from "../../../api/authHandler";
import {Step1, Step2, Step3, Step4} from './CreateSteps/index';
import ApplicationMgtApi from '../../../api/applicationMgtApi';
import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap';
/**
* The App Create Component.
@ -48,6 +43,7 @@ class ApplicationCreate extends Component {
this.handleNo = this.handleNo.bind(this);
this.handlePrev = this.handlePrev.bind(this);
this.handleNext = this.handleNext.bind(this);
this.close = this.close.bind(this);
this.state = {
finished: false,
stepIndex: 0,
@ -56,15 +52,22 @@ class ApplicationCreate extends Component {
};
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
componentWillReceiveProps(props, nextprops) {
this.setState({open: props.open})
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
componentWillMount() {
this.setState({open: this.props.open});
}
close() {
this.setState({open: false, stepIndex: 0})
}
handleBack() {
let currentStep = this.state.stepIndex;
let nextStep = currentStep === 0 ? currentStep : currentStep - 1 ;
this.setState({stepIndex: nextStep}, console.log(this.state.stepIndex));
}
/**
@ -190,6 +193,15 @@ class ApplicationCreate extends Component {
removeData={this.removeStepData}
/>
);
case 3: {
return (
<Step4
handleNext={this.handleNext}
setData={this.setStepData}
removeData={this.removeStepData}
/>
)
}
default:
return <div/>;
}
@ -198,69 +210,23 @@ class ApplicationCreate extends Component {
render() {
const {finished, stepIndex} = this.state;
/**
* Defines the dialog box actions. [Yes][No]
* */
const actions = [
<FlatButton
label="Yes"
primary={true}
onClick={this.handleYes}
/>,
<FlatButton
label="No"
secondary={true}
onClick={this.handleNo}
/>,
];
return (
<div className="middle createapplicationmiddle">
<Card className="creataapplicationcard">
<CardTitle title="Create Application"/>
{/**
* The stepper goes here.
*/}
<CardActions>
<div className="createapplicationcardaction">
<Stepper activeStep={stepIndex}>
<Step>
<StepLabel>Select Application Platform</StepLabel>
</Step>
<Step>
<StepLabel>Enter Application Details</StepLabel>
</Step>
<Step>
<StepLabel>Release</StepLabel>
</Step>
</Stepper>
<div className="createapplicationcontent">
{finished ? (
<div>
<p>Create App?</p>
<form>
<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 id="create-application-modal">
<Modal isOpen={this.state.open} toggle={this.toggle} id="app-create-modal"
backdrop={'static'}>
<ModalHeader toggle={this.toggle}>Create Application</ModalHeader>
<ModalBody id="modal-body-content">
{this.getStepContent(this.state.stepIndex)}
</ModalBody>
<ModalFooter>
{this.state.stepIndex === 0? <div/> :
<Button color="primary" onClick={this.handlePrev}>Back</Button>}
<Button color="secondary" onClick={this.close}>Cancel</Button>
{this.state.finished ?
<Button color="primary" onClick={this.handleSubmit}>Finish</Button> :
<Button color="primary" onClick={this.handleNext}>Continue</Button>}
</ModalFooter>
</Modal>
</div>);
}
}

110
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
View File

@ -16,14 +16,11 @@
* under the License.
*/
import Theme from '../../../theme';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import MenuItem from 'material-ui/MenuItem';
import SelectField from 'material-ui/SelectField';
import AuthHandler from "../../../api/authHandler";
import RaisedButton from 'material-ui/RaisedButton';
import PlatformMgtApi from "../../../api/platformMgtApi";
import AuthHandler from "../../../../api/authHandler";
import PlatformMgtApi from "../../../../api/platformMgtApi";
import {FormGroup, Input, Label} from 'reactstrap';
/**
* The first step of the application creation wizard.
@ -42,6 +39,8 @@ class Step1 extends Component {
constructor() {
super();
this.setPlatforms = this.setPlatforms.bind(this);
this.setStepData = this.setStepData.bind(this);
this.cancel = this.cancel.bind(this);
this.platforms = [];
this.state = {
finished: false,
@ -57,16 +56,6 @@ class Step1 extends Component {
this.scriptId = "application-create-step1";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
componentDidMount() {
//Get the list of available platforms and set to the state.
PlatformMgtApi.getPlatforms().then(response => {
@ -88,7 +77,7 @@ class Step1 extends Component {
platform = platforms[index];
tmpPlatforms.push(platform);
}
this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0, platform: tmpPlatforms[0].identifier})
this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0, platform: tmpPlatforms[0].name})
}
/**
@ -104,77 +93,66 @@ class Step1 extends Component {
this.props.setData("step1", {step: step});
}
/**
* Handles Next button click.
* Validates the form.
* Sets the data to the state.
* Invokes the handleNext method of Create component.
* */
handleClick() {
this.setStepData();
cancel() {
}
/**
* Triggers when changing the Platform selection.
* */
onChangePlatform(event, index, value) {
console.log(this.state.platforms[index]);
this.setState({platform: this.state.platforms[index].identifier, platformSelectedIndex: index});
onChangePlatform(event) {
console.log(event.target.value, this.state.platforms);
let id = event.target.value;
let selectedPlatform = this.state.platforms.filter((platform) => {
return platform.identifier === id;
});
console.log(selectedPlatform);
this.setState({platform: selectedPlatform});
};
/**
* Triggers when changing the Store selection.
* */
onChangeStore(event, index, value) {
this.setState({store: value});
onChangeStore(event) {
console.log(event.target.value);
this.setState({store: event.target.value});
};
render() {
return (
<div>
<div className="creatediv">
<div>
<div>
<SelectField
floatingLabelText="Store Type*"
value={this.state.store}
floatingLabelFixed={true}
<FormGroup>
<Label for="store">Store Type</Label>
<Input
type="select"
name="store"
id="store"
className="input-custom"
onChange={this.onChangeStore.bind(this)}
>
<MenuItem value={0} primaryText="Enterprise"/>
<MenuItem value={1} primaryText="Public"/>
</SelectField>
<br/>
<SelectField
floatingLabelText="Platform*"
value={this.state.platform}
floatingLabelFixed={true}
<option>Enterprise</option>
<option>Public</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="store">Platform</Label>
<Input
type="select"
name="store"
id="store"
onChange={this.onChangePlatform.bind(this)}
>
{this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
return (
<MenuItem
key={Math.random()}
value={platform.identifier}
primaryText={platform.name}
/>
<option value={platform.identifier}>
{platform.name}
</option>
)
}) : <div/>}
</SelectField>
</div>
<br/>
<br/>
<div className="nextButton">
<RaisedButton
label="Next >"
primary={true}
onClick={this.handleClick.bind(this)}
/>
</div>
</div>
</div>
}) : <option>No Platforms</option>}
</Input>
</FormGroup>
</div>
);
}

318
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx Normal file
View File

@ -0,0 +1,318 @@
/*
* 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 PropTypes from 'prop-types';
import React, {Component} from 'react';
import {Badge, FormGroup, Input, Label} from 'reactstrap';
/**
* The Second step of application create wizard.
* This contains following components.
* * App Title
* * Short Description
* * Application Description
* * Application Visibility
* * Application Tags : {Used Material UI Chip component}
* * Application Category.
* * Platform Specific properties.
*
* Parent Component: Create
* Props:
* * handleNext : {type: function, Invokes handleNext function in Parent.}
* * handlePrev : {type: function, Invokes handlePrev function in Parent}
* * setData : {type: function, Invokes setStepData function in Parent}
* * removeData : {type: Invokes removeStepData function in Parent}
* */
class Step2 extends Component {
constructor() {
super();
this.state = {
tags: [],
icon: [],
title: "",
errors: {},
banner: [],
defValue: "",
category: 0,
visibility: 0,
description: "",
screenshots: [],
identifier: "",
shortDescription: ""
};
this.scriptId = "application-create-step2";
}
/**
* Create a tag on Enter key press and set it to the state.
* Clears the tags text field.
* Chip gets two parameters: Key and value.
* */
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(tags));
}
}
/**
* Set the value for tag.
* */
handleTagChange(event) {
let defaultValue = this.state.defValue;
defaultValue = event.target.value;
this.setState({defValue: defaultValue})
}
/**
* Invokes the handleNext function in Create component.
* */
handleNext() {
let fields = [{name: "Title", value: this.state.title},
{name: "Short Description", value: this.state.shortDescription},
{name: "Description", value: this.state.description},
{name: "Banner", value: this.state.banner},
{name: "Screenshots", value: this.state.screenshots},
{name: "Identifier", value: this.state.identifier},
{name: "Icon", value: this.state.icon}];
this.validate(fields);
}
/**
* Invokes the handlePrev function in Create component.
* */
handlePrev() {
this.props.handlePrev();
}
/**
* Handles Chip delete function.
* Removes the tag from state.tags
* */
handleRequestDelete(event) {
this.chipData = this.state.tags;
console.log(event.target);
const chipToDelete = this.chipData.map((chip) => chip.value).indexOf(event.target.value);
this.chipData.splice(chipToDelete, 1);
this.setState({tags: this.chipData});
};
/**
* Validate the form.
* */
validate(fields) {
let errors = {};
let errorsPresent = false;
fields.forEach(function (field) {
switch (field.name) {
case 'Title': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Identifier': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Short Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Banner': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Icon': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Screenshots': {
if (field.value.length < 3) {
errors[field.name] = "3 " + field.name + " are required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
}
});
if (!errorsPresent) {
this.setStepData();
} else {
this.setState({errors: errors}, console.log(errors));
}
}
/**
* Creates an object with the current step data and persist in the parent.
* */
setStepData() {
let stepData = {};
this.props.setData("step2", {step: stepData});
};
/**
* Set text field values to state.
* */
onTextFieldChange(event, value) {
let field = event.target.id;
switch (field) {
case "name": {
this.setState({name: value});
break;
}
case "shortDescription": {
this.setState({shortDescription: value});
break;
}
case "description": {
this.setState({description: value});
break;
}
case "identifier": {
this.setState({identifier: value});
break;
}
}
};
render() {
console.log(this.state.visibilityComponent);
return (
<div className="createStep2Content">
<div>
<div>
<FormGroup>
<Label for="app-title">Title*</Label>
<Input
required
type="text"
name="appName"
id="app-title"
/>
</FormGroup>
<FormGroup>
<Label for="app-description">Description*</Label>
<Input
required
type="textarea"
name="appDescription"
id="app-description"
/>
</FormGroup>
<FormGroup>
<Label for="app-category">Category</Label>
<Input
type="select"
name="category"
id="app-category"
>
<option>Business</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="app-visibility">Visibility</Label>
<Input
type="select"
name="visibility"
id="app-visibility"
>
<option>Devices</option>
<option>Roles</option>
<option>Groups</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="app-tags">Tags*</Label>
<Input
required
type="text"
value={this.state.defValue}
name="app-tags"
id="app-tags"
onChange={this.handleTagChange.bind(this)}
onKeyPress={this.addTags.bind(this)}
/>
<div id="batch-content">
{this.state.tags.map(tag => {
return (
<Badge
style={{margin: '0 2px 0 2px'}}
value={tag.value}
onClick={this.handleRequestDelete.bind(this)}
>
{tag.value}
</Badge>
)
}
)}
</div>
</FormGroup>
</div>
</div>
</div>
);
}
}
Step2.prototypes = {
handleNext: PropTypes.func,
handlePrev: PropTypes.func,
setData: PropTypes.func,
removeData: PropTypes.func
};
export default Step2;

393
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx Normal file
View File

@ -0,0 +1,393 @@
/*
* 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 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 SelectField from 'material-ui/SelectField';
import {FormGroup, Label} from 'reactstrap';
import AppImage from "../../../UIComponents/AppImage/AppImage";
/**
* The Third step of application create wizard.
* This contains following components.
* * Screenshots
* * Banner
* * Icon
*
* Parent Component: Create
* Props:
* * handleNext : {type: function, Invokes handleNext function in Parent.}
* * handlePrev : {type: function, Invokes handlePrev function in Parent}
* * setData : {type: function, Invokes setStepData function in Parent}
* * removeData : {type: Invokes removeStepData function in Parent}
* */
class Step3 extends Component {
constructor() {
super();
this.state = {
tags: [],
icon: [],
title: "",
errors: {},
banner: [],
defValue: "",
category: 0,
visibility: 0,
description: "",
screenshots: [],
identifier: "",
shortDescription: ""
};
this.scriptId = "application-create-step2";
}
/**
* Create a tag on Enter key press and set it to the state.
* Clears the tags text field.
* Chip gets two parameters: Key and value.
* */
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(tags));
}
}
/**
* Set the value for tag.
* */
handleTagChange(event) {
let defaultValue = this.state.defValue;
defaultValue = event.target.value;
this.setState({defValue: defaultValue})
}
/**
* Invokes the handleNext function in Create component.
* */
handleNext() {
let fields = [{name: "Title", value: this.state.title},
{name: "Short Description", value: this.state.shortDescription},
{name: "Description", value: this.state.description},
{name: "Banner", value: this.state.banner},
{name: "Screenshots", value: this.state.screenshots},
{name: "Identifier", value: this.state.identifier},
{name: "Icon", value: this.state.icon}];
this.validate(fields);
}
/**
* Invokes the handlePrev function in Create component.
* */
handlePrev() {
this.props.handlePrev();
}
/**
* Handles Chip delete function.
* Removes the tag from state.tags
* */
handleRequestDelete(event) {
this.chipData = this.state.tags;
console.log(event.target);
const chipToDelete = this.chipData.map((chip) => chip.value).indexOf(event.target.value);
this.chipData.splice(chipToDelete, 1);
this.setState({tags: this.chipData});
};
/**
* Creates Chip array from state.tags.
* */
renderChip(data) {
return (
<Chip
key={data.key}
onRequestDelete={() => this.handleRequestDelete(data.key)}
className="applicationCreateChip">
{data.value}
</Chip>
);
}
onVisibilitySelect(event, index, value) {
console.log(value);
let comp = <SelectField> <MenuItem value={0} primaryText="Public"/>
<MenuItem value={1} primaryText="Roles"/>
<MenuItem value={2} primaryText="Devices"/> </SelectField>;
if (value === 1) {
this.setState({visibilityComponent: comp});
} else if (value === 2) {
} else {
}
};
/**
* Validate the form.
* */
validate(fields) {
let errors = {};
let errorsPresent = false;
fields.forEach(function (field) {
switch (field.name) {
case 'Title': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Identifier': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Short Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Banner': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Icon': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Screenshots': {
if (field.value.length < 3) {
errors[field.name] = "3 " + field.name + " are required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
}
});
if (!errorsPresent) {
this.setStepData();
} else {
this.setState({errors: errors}, console.log(errors));
}
}
/**
* Creates an object with the current step data and persist in the parent.
* */
setStepData() {
let stepData = {
icon: this.state.icon,
name: this.state.name,
tags: this.state.tags,
banner: this.state.banner,
category: this.categories[this.state.category],
identifier: this.state.identifier,
screenshots: this.state.screenshots,
description: this.state.description,
shortDescription: this.state.shortDescription
};
this.props.setData("step2", {step: stepData});
};
/**
* Set text field values to state.
* */
onTextFieldChange(event, value) {
let field = event.target.id;
switch (field) {
case "name": {
this.setState({name: value});
break;
}
case "shortDescription": {
this.setState({shortDescription: value});
break;
}
case "description": {
this.setState({description: value});
break;
}
case "identifier": {
this.setState({identifier: value});
break;
}
}
};
/**
* Removed user uploaded banner.
* */
removeBanner(event, d) {
console.log(event, d);
this.setState({banner: []});
};
/**
* Removes uploaded icon.
* */
removeIcon(event) {
this.setState({icon: []});
};
/**
* Removes selected screenshot.
* */
removeScreenshot(event) {
console.log(event.target)
};
render() {
console.log(this.state.visibilityComponent);
return (
<div className="createStep2Content">
<div>
<div>
<div>
<FormGroup>
<Label for="app-screenshots">Screenshots*</Label>
<span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
<div id="screenshot-container">
{this.state.screenshots.map((tile) => (
<div id="app-image-screenshot">
<AppImage image={tile[0].preview}/>
</div>
))}
{this.state.screenshots.length < 3 ?
<Dropzone
className="applicationCreateScreenshotDropZone"
accept="image/jpeg, image/png"
onDrop={(screenshots, rejected) => {
let tmpScreenshots = this.state.screenshots;
tmpScreenshots.push(screenshots);
console.log(screenshots);
this.setState({
screenshots: tmpScreenshots
});
}}
>
<p className="applicationCreateScreenshotp">+</p>
</Dropzone> : <div/>}
</div>
</FormGroup>
</div>
<div style={{display: 'flex'}}>
<div style={{float: 'left', marginRight: '15px'}}>
<FormGroup>
<Label for="app-icon">Icon*</Label>
<span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
<div id="app-icon-container">
{this.state.icon.map((tile) => (
<div id="app-image-icon">
<AppImage image={tile.preview}/>
</div>
))}
{this.state.icon.length === 0 ?
<Dropzone
className="applicationCreateIconDropZone"
accept="image/jpeg, image/png"
onDrop={(icon, rejected) => {
this.setState({icon, rejected});
}}
>
<p className="applicationCreateIconp">+</p>
</Dropzone> : <div/>}
</div>
</FormGroup>
</div>
<div style={{marginLeft: '15px'}}>
<FormGroup>
<Label for="app-banner">Banner*</Label>
<span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
<div id="app-banner-container">
{this.state.banner.map((tile) => (
<div id="app-image-banner">
<AppImage image={tile.preview}/>
</div>
))}
{this.state.banner.length === 0 ?
<Dropzone
className="applicationCreateBannerDropZone"
accept="image/jpeg, image/png"
onDrop={(banner, rejected) => {
this.setState({banner, rejected});
}}
>
<p className="applicationCreateBannerp">+</p>
</Dropzone> : <div/>
}
</div>
</FormGroup>
</div>
</div>
</div>
</div>
</div>
);
}
}
Step3.prototypes = {
handleNext: PropTypes.func,
handlePrev: PropTypes.func,
setData: PropTypes.func,
removeData: PropTypes.func
};
export default Step3;

118
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
View File

@ -18,13 +18,8 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
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 SelectField from 'material-ui/SelectField';
import RaisedButton from 'material-ui/RaisedButton';
import Theme from '../../../theme';
import {Collapse, FormGroup, Input, Label, FormText} from 'reactstrap';
import Switch from '../../../UIComponents/Switch/Switch'
/**
* The Third step of application create wizard. {Application Release Step}
@ -48,7 +43,7 @@ import Theme from '../../../theme';
* * setData : {type: function, Invokes setStepData function in Parent}
* * removeData : {type: Invokes removeStepData function in Parent}
* */
class Step3 extends Component {
class Step4 extends Component {
constructor() {
super();
this.handleToggle = this.handleToggle.bind(this);
@ -63,17 +58,6 @@ class Step3 extends Component {
this.scriptId = "application-create-step3";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
* Handles finish button click.
* This invokes handleNext function in parent component.
@ -101,57 +85,71 @@ class Step3 extends Component {
return (
<div className="applicationCreateStepMiddle">
<div>
<Toggle
label="Release the Application"
labelPosition="right"
onToggle={this.handleToggle}
defaultToggled={this.state.showForm}
/>
{/*If toggle is true, the release form will be shown.*/}
{!this.state.showForm ? <div/> :
<div>
<SelectField
floatingLabelText="Select Release Channel*"
value={this.state.releaseChannel}
floatingLabelFixed={true}
>
<MenuItem value={1} primaryText="Alpha"/>
<MenuItem value={2} primaryText="Beta"/>
<MenuItem value={3} primaryText="GA"/>
</SelectField>
<br/>
<TextField
hintText="1.0.0"
floatingLabelText="Version*"
errorText={this.state.errors["title"]}
floatingLabelFixed={true}
/><br/>
</div>}
<div className="applicationCreateBackAndFinish">
<FlatButton
label="< Back"
disabled={false}
onClick={this.handlePrev}
className="applicationCreateFinish"
/>
<RaisedButton
label="Finish"
primary={true}
onClick={this.handleFinish}
/>
<FormGroup>
<div id="app-release-switch-content">
<div id="app-release-switch-label">
<Label for="app-release-switch">
<strong>
Add Release to Application
</strong>
</Label>
</div>
<div id="app-release-switch-switch">
<Switch
id="app-release-switch"
onChange={this.handleToggle.bind(this)}
/>
</div>
</div>
</FormGroup>
<br/>
<div>
<FormText color="muted">
<i>Info: </i>
Enabling this will create a release for the current Application.
To upload the Application, please visit to the Release management section of
Application Edit View.
</FormText>
</div>
{/*If toggle is true, the release form will be shown.*/}
<Collapse isOpen={this.state.showForm}>
<FormGroup>
<Label for="release-channel">Release Channel</Label>
<Input
type="select"
id="release-channel"
style={{
width: '200px',
border: 'none',
borderRadius: '0',
borderBottom: 'solid 1px #BDBDBD'
}}>
<option>GA</option>
<option>Alpha</option>
<option>Beta</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="version">Version*</Label>
<Input
type="text"
id="version input-custom"
placeholder="v1.0"
required
/>
</FormGroup>
</Collapse>
</div>
</div>
);
}
}
Step3.propTypes = {
Step4.propTypes = {
handleFinish: PropTypes.func,
handlePrev: PropTypes.func,
setData: PropTypes.func,
removeData: PropTypes.func
};
export default Step3;
export default Step4;

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

@ -19,5 +19,6 @@
import Step1 from './Step1';
import Step2 from './Step2';
import Step3 from './Step3';
import Step4 from './Step4';
export {Step1, Step2, Step3};
export {Step1, Step2, Step3, Step4};

517
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
View File

@ -1,517 +0,0 @@
/*
* 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 PropTypes from 'prop-types';
import Theme from '../../../theme';
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';
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 Clear from 'material-ui/svg-icons/content/clear';
import {GridList, GridTile} from 'material-ui/GridList';
/**
* The Second step of application create wizard.
* This contains following components.
* * App Title
* * Short Description
* * Application Description
* * Application Visibility
* * Application Tags : {Used Material UI Chip component}
* * Application Category.
* * Platform Specific properties.
* * Screenshots
* * Banner
* * Icon
*
* Parent Component: Create
* Props:
* * handleNext : {type: function, Invokes handleNext function in Parent.}
* * handlePrev : {type: function, Invokes handlePrev function in Parent}
* * setData : {type: function, Invokes setStepData function in Parent}
* * removeData : {type: Invokes removeStepData function in Parent}
* */
class Step2 extends Component {
constructor() {
super();
this.state = {
tags: [],
icon: [],
title: "",
errors: {},
banner: [],
defValue: "",
category: 0,
visibility: 0,
description: "",
screenshots: [],
identifier: "",
shortDescription: ""
};
this.scriptId = "application-create-step2";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
* Create a tag on Enter key press and set it to the state.
* Clears the tags text field.
* Chip gets two parameters: Key and value.
* */
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(tags));
}
}
/**
* Set the value for tag.
* */
handleTagChange(event) {
let defaultValue = this.state.defValue;
defaultValue = event.target.value;
this.setState({defValue: defaultValue})
}
/**
* Invokes the handleNext function in Create component.
* */
handleNext() {
let fields = [{name: "Title", value: this.state.title},
{name: "Short Description", value: this.state.shortDescription},
{name: "Description", value: this.state.description},
{name: "Banner", value: this.state.banner},
{name: "Screenshots", value: this.state.screenshots},
{name: "Identifier", value: this.state.identifier},
{name: "Icon", value: this.state.icon}];
this.validate(fields);
}
/**
* Invokes the handlePrev function in Create component.
* */
handlePrev() {
this.props.handlePrev();
}
/**
* Handles Chip delete function.
* Removes the tag from state.tags
* */
handleRequestDelete(key) {
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});
};
/**
* Creates Chip array from state.tags.
* */
renderChip(data) {
return (
<Chip
key={data.key}
onRequestDelete={() => this.handleRequestDelete(data.key)}
className="applicationCreateChip">
{data.value}
</Chip>
);
}
onVisibilitySelect(event, index, value) {
console.log(value);
let comp = <SelectField> <MenuItem value={0} primaryText="Public"/>
<MenuItem value={1} primaryText="Roles"/>
<MenuItem value={2} primaryText="Devices"/> </SelectField>;
if (value === 1) {
this.setState({visibilityComponent: comp});
} else if (value === 2) {
} else {
}
};
/**
* Validate the form.
* */
validate(fields) {
let errors = {};
let errorsPresent = false;
fields.forEach(function (field) {
switch (field.name) {
case 'Title': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Identifier': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Short Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Banner': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Icon': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Screenshots': {
if (field.value.length < 3) {
errors[field.name] = "3 " + field.name + " are required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
}
});
if (!errorsPresent) {
this.setStepData();
} else {
this.setState({errors: errors}, console.log(errors));
}
}
/**
* Creates an object with the current step data and persist in the parent.
* */
setStepData() {
let stepData = {
icon: this.state.icon,
name: this.state.name,
tags: this.state.tags,
banner: this.state.banner,
category: this.categories[this.state.category],
identifier: this.state.identifier,
screenshots: this.state.screenshots,
description: this.state.description,
shortDescription: this.state.shortDescription
};
this.props.setData("step2", {step: stepData});
};
/**
* Set text field values to state.
* */
onTextFieldChange(event, value) {
let field = event.target.id;
switch (field) {
case "name": {
this.setState({name: value});
break;
}
case "shortDescription": {
this.setState({shortDescription: value});
break;
}
case "description": {
this.setState({description: value});
break;
}
case "identifier": {
this.setState({identifier: value});
break;
}
}
};
/**
* Removed user uploaded banner.
* */
removeBanner(event, d) {
console.log(event, d);
this.setState({banner: []});
};
/**
* Removes uploaded icon.
* */
removeIcon(event) {
this.setState({icon: []});
};
/**
* Removes selected screenshot.
* */
removeScreenshot(event) {
console.log(event.target)
};
render() {
console.log(this.state.visibilityComponent);
return (
<div className="createStep2Content">
<div>
<div>
<TextField
id="name"
hintText="Enter a name for your application."
errorText={this.state.errors["Title"]}
floatingLabelText="Name*"
floatingLabelFixed={true}
onChange={this.onTextFieldChange.bind(this)}
/>
<br/>
<TextField
id="identifier"
hintText="Unique Identifier for Application."
errorText={this.state.errors["Identifier"]}
floatingLabelText="Identifier*"
floatingLabelFixed={true}
onChange={this.onTextFieldChange.bind(this)}
/>
<br/>
<TextField
id="shortDescription"
hintText="Enter a short description for your application."
errorText={this.state.errors["Short Description"]}
floatingLabelText="Short Description*"
floatingLabelFixed={true}
multiLine={true}
rows={2}
onChange={this.onTextFieldChange.bind(this)}
/>
<br/>
<TextField
id="description"
errorText={this.state.errors["Description"]}
hintText="Enter the description."
floatingLabelText="Description*"
floatingLabelFixed={true}
multiLine={true}
rows={4}
onChange={this.onTextFieldChange.bind(this)}
/>
<br/>
<SelectField
floatingLabelText="Visibility*"
value={this.state.visibility}
floatingLabelFixed={true}
onChange={this.onVisibilitySelect.bind(this)}
>
<MenuItem value={0} primaryText="Public"/>
<MenuItem value={1} primaryText="Roles"/>
<MenuItem value={2} primaryText="Devices"/>
</SelectField>
<br/>
<TextField
id="tags"
errorText={this.state.errors["tags"]}
hintText="Enter Application tags.."
floatingLabelText="Tags*"
floatingLabelFixed={true}
value={this.state.defValue}
onChange={this.handleTagChange.bind(this)}
onKeyPress={this.addTags.bind(this)}
/>
<br/>
<div className="applicationCreateWrapper">
{this.state.tags.map(this.renderChip, this)}
</div>
<br/>
<SelectField
floatingLabelText="Category*"
value={this.state.category}
floatingLabelFixed={true}
>
<MenuItem value={0} primaryText="Business"/>
</SelectField>
<br/>
{/*Platform Specific Properties.*/}
<div className="platformSpecificPropertyDiv">
<p className="platformSpecificPropertyP">Platform Specific Properties</p>
</div>
<br/>
<div>
<p className="applicationCreateBannerError">{this.state.errors["Banner"]}</p>
<p className="applicationCreateBannerTitle">Banner*:</p>
<GridList className="applicationCreateGrid" cols={1.1}>
{this.state.banner.map((tile) => (
<GridTile
key={Math.floor(Math.random() * 1000)}
title={tile.name}
actionIcon={
<IconButton onClick={this.removeBanner.bind(this)}>
<Clear/>
</IconButton>}>
<img src={tile.preview}/>
</GridTile>
))}
{this.state.banner.length === 0 ?
<Dropzone
className="applicationCreateBannerDropZone"
accept="image/jpeg, image/png"
onDrop={(banner, rejected) => {
this.setState({banner, rejected});
}}
>
<p className="applicationCreateBannerp">+</p>
</Dropzone> : <div/>
}
</GridList>
</div>
<br/>
<div>
<p className="applicationCreateScreenshotError">{this.state.errors["Screenshots"]}</p>
<p className="applicationCreateScreenshotTitle">Screenshots*:</p>
<GridList className="applicationCreateScreenshotGrid" cols={1.1}>
{this.state.screenshots.map((file) => (
<GridTile
key={Math.floor(Math.random() * 1000)}
title={file[0].name}
actionIcon={
<IconButton onClick={this.removeScreenshot.bind(this)}>
<Clear/>
</IconButton>}>
<img src={file[0].preview}/></GridTile>
))}
{this.state.screenshots.length < 3 ?
<Dropzone
className="applicationCreateScreenshotDropZone"
accept="image/jpeg, image/png"
onDrop={(screenshots, rejected) => {
let tmpScreenshots = this.state.screenshots;
tmpScreenshots.push(screenshots);
this.setState({
screenshots: tmpScreenshots
});
}}
>
<p className="applicationCreateScreenshotp">+</p>
</Dropzone> : <div/>}
</GridList>
</div>
<br/>
<div>
<p className="applcationCreateIconError">{this.state.errors["Icon"]}</p>
<p className="applicationCreateIconTitle">Icon*:</p>
<GridList className="applicationCreateIconGrid" cols={1.1}>
{this.state.icon.map((tile) => (
<GridTile
key={Math.floor(Math.random() * 1000)}
title={tile.name}
actionIcon={
<IconButton onClick={this.removeIcon.bind(this)}>
<Clear/>
</IconButton>}>
<img src={tile.preview}/>
</GridTile>
))}
{this.state.icon.length === 0 ?
<Dropzone
className="applicationCreateIconDropZone"
accept="image/jpeg, image/png"
onDrop={(icon, rejected) => {
this.setState({icon, rejected});
}}
>
<p className="applicationCreateIconp">+</p>
</Dropzone> : <div/>}
</GridList>
</div>
<br/>
</div>
<br/>
<br/>
<div className="applicationCreateBackAndNext">
<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>
);
}
}
Step2.prototypes = {
handleNext: PropTypes.func,
handlePrev: PropTypes.func,
setData: PropTypes.func,
removeData: PropTypes.func
};
export default Step2;

119
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx Normal file
View File

@ -0,0 +1,119 @@
/*
* 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 './baseLayout.css';
import {Col, Row} from "reactstrap";
import React, {Component} from 'react';
import GeneralInfo from "../GeneralInfo";
import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
class ApplicationEdit extends Component {
constructor() {
super();
this.getTabContent = this.getTabContent.bind(this);
this.state = {
general: "active",
release: "",
pkgmgt: "",
activeTab: 1
}
}
handleClick(event) {
event.stopPropagation();
console.log(typeof event.target.value);
const key = event.target.value;
switch (key) {
case "1": {
console.log("Step1");
this.setState({activeTab: 1, general: "active", release: "", pkgmgt: ""});
break;
}
case "2": {
this.setState({activeTab: 2, general: "", release: "active", pkgmgt: ""});
break;
}
case "3": {
this.setState({activeTab: 3, general: "", release: "", pkgmgt: "active"});
break;
}
default: {
return "No Content";
}
}
}
getTabContent(tab) {
switch (tab) {
case 1: {
return <GeneralInfo/>
}
case 2: {
return <ReleaseManager/>
}
case 3: {
return ("Step3")
}
}
}
render() {
console.log(this.state);
return (
<div id="application-edit-base">
<Row id="application-edit-header">
<Col>Application Name</Col>
</Row>
<Row id="application-edit-main-container">
<Col xs="3">
<div className="tab">
<button className={this.state.general} value={1} onClick={this.handleClick.bind(this)}>
General
</button>
<button className={this.state.release} value={2} onClick={this.handleClick.bind(this)}>
App
Releases
</button>
<button className={this.state.pkgmgt} value={3} onClick={this.handleClick.bind(this)}>
Package Manager
</button>
</div>
</Col>
<Col xs="9">
<div id="app-edit-content">
<Row>
<Col xs="12">
<div id="application-edit-outer-content">
{/* Application edit content */}
<div id="application-edit-content">
{this.getTabContent(this.state.activeTab)}
</div>
</div>
</Col>
</Row>
</div>
</Col>
</Row>
</div>
)
}
}
export default ApplicationEdit;

111
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css Normal file
View File

@ -0,0 +1,111 @@
/*
* 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.
*/
#application-edit-base {
width: 70%;
margin: 0 auto;
height: 100%;
background-color: #f6f6f6;
border: solid 1px #828282;
}
#application-edit-header {
height: 50px;
width: 100%;
margin: 0;
background-color: #9a9a9a;
border: solid 1px #a2a2a2;
font-size: 20px;
}
.application-header-text {
margin: 10px 0px 0px 10px;
}
#save-btn-content {
float: right;
}
#app-save-btn {
border-radius: 0%;
}
.save-btn {
margin: 5px 5px 5px 0px;
height: 70%;
width: 50%;
float: right;
}
.save-btn:hover {
cursor: pointer;
}
/*Tab styling*/
div.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
height: 100%;
}
/* Style the tab buttons */
div.tab button {
display: block;
background-color: inherit;
color: black;
padding: 15px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
cursor: pointer;
}
/* Create an active/current "tab button" class */
div.tab button.active {
background-color: #ccc;
}
#application-edit-main-container {
display: flex;
}
#application-edit-outer-content {
height: auto;
width: 100%;
}
#application-edit-content {
margin: 5px 10px 5px 10px;
width: 90%;
}
#app-edit-content {
height: 100%;
position: relative;
}

200
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GeneralInfo.jsx Normal file
View File

@ -0,0 +1,200 @@
/*
* 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 {Badge, Button, FormGroup, Input, Label} from 'reactstrap';
import Dropzone from 'react-dropzone';
import './generalInfo.css';
class GeneralInfo extends Component {
constructor() {
super();
this.state = {
defValue: "",
tags: [],
screenshots: [],
icon: [],
banner: []
}
}
render() {
return (
<div className="app-edit-general-info">
<form>
<FormGroup>
<Label for="app-title">Title*</Label>
<Input
required
type="text"
name="appName"
id="app-title"
/>
</FormGroup>
<FormGroup>
<Label for="app-title">Description*</Label>
<Input
required
type="textarea"
multiline
name="appName"
id="app-title"
/>
</FormGroup>
<FormGroup>
<Label for="app-category">Category</Label>
<Input
type="select"
name="category"
id="app-category"
>
<option>Business</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="app-visibility">Visibility</Label>
<Input
type="select"
name="visibility"
id="app-visibility"
>
<option>Devices</option>
<option>Roles</option>
<option>Groups</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="app-tags">Tags*</Label>
<Input
required
type="text"
value={this.state.defValue}
name="app-tags"
id="app-tags"
/>
<div id="batch-content">
{this.state.tags.map(tag => {
return (
<Badge
style={{margin: '0 2px 0 2px'}}
value={tag.value}
>
{tag.value}
</Badge>
)
}
)}
</div>
</FormGroup>
<div>
<FormGroup>
<Label for="app-screenshots">Screenshots*</Label>
<span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
<div id="screenshot-container">
{this.state.screenshots.map((tile) => (
<button id="img-btn-screenshot" style={{height: '210px', width: '410px'}}
onMouseEnter={() => {
console.log("Mouse Entered")
}}>
{console.log(tile[0].preview)}
<img style={{height: '200px', width: '400px'}} src={tile[0].preview}/>
</button>
))}
{this.state.screenshots.length < 3 ?
<Dropzone
className="applicationCreateScreenshotDropZone"
accept="image/jpeg, image/png"
onDrop={(screenshots, rejected) => {
let tmpScreenshots = this.state.screenshots;
tmpScreenshots.push(screenshots);
console.log(screenshots);
this.setState({
screenshots: tmpScreenshots
});
}}
>
<p className="applicationCreateScreenshotp">+</p>
</Dropzone> : <div/>}
</div>
</FormGroup>
</div>
<div style={{display: 'flex'}}>
<div style={{float: 'left', marginRight: '15px'}}>
<FormGroup>
<Label for="app-icon">Icon*</Label>
<span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
<div id="app-icon-container">
{this.state.icon.map((tile) => (
<button onMouseEnter={() => {
console.log("Mouse Entered")
}}>
<img style={{height: '200px', width: '200px'}} src={tile.preview}/>
</button>
))}
{this.state.icon.length === 0 ?
<Dropzone
className="applicationCreateIconDropZone"
accept="image/jpeg, image/png"
onDrop={(icon, rejected) => {
this.setState({icon, rejected});
}}
>
<p className="applicationCreateIconp">+</p>
</Dropzone> : <div/>}
</div>
</FormGroup>
</div>
<div style={{marginLeft: '15px'}}>
<FormGroup>
<Label for="app-banner">Banner*</Label>
<span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
<div id="app-banner-container">
{this.state.banner.map((tile) => (
<button onMouseEnter={() => {
console.log("Mouse Entered")
}}>
<img style={{height: '200px', width: '400px'}} src={tile.preview}/>
</button>
))}
{this.state.banner.length === 0 ?
<Dropzone
className="applicationCreateBannerDropZone"
accept="image/jpeg, image/png"
onDrop={(banner, rejected) => {
this.setState({banner, rejected});
}}
>
<p className="applicationCreateBannerp">+</p>
</Dropzone> : <div/>
}
</div>
</FormGroup>
</div>
</div>
<div className="save-info">
<Button>Save</Button>
</div>
</form>
</div>
)
}
}
export default GeneralInfo;

21
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationView.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/PackageManager.jsx
View File

@ -16,15 +16,22 @@
* under the License.
*/
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
/**
* Application view component.
* Shows the details of the application.
* */
class ApplicationView extends Component{
class PackageManager extends Component {
constructor() {
super();
}
export default withRouter(ApplicationView);
render() {
return(
<div id="package-mgt-content">
</div>
)
}
}
export default PackageManager;

26
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/generalInfo.css Normal file
View File

@ -0,0 +1,26 @@
/*
* 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.
*/
.app-edit-general-info {
margin-top: 20px;
}
.save-info {
float: right;
margin-bottom: 10px;
}

173
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/CreateRelease.jsx Normal file
View File

@ -0,0 +1,173 @@
/*
* 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 PropTypes from 'prop-types';
import React, {Component} from 'react';
import './createRelease.css';
import {Button, FormGroup, FormText, Input, Label, Row} from "reactstrap";
import UploadPackage from "./UploadPackage";
class CreateRelease extends Component {
constructor() {
super();
this.onTestMethodChange = this.onTestMethodChange.bind(this);
this.showUploadArtifacts = this.showUploadArtifacts.bind(this);
this.handleBack = this.handleBack.bind(this);
this.backToRelease = this.backToRelease.bind(this);
this.state = {
open: true,
hiddenMain: false
}
}
onTestMethodChange(event) {
let type = event.target.value;
if (type !== 'open') {
this.setState({open: false})
} else {
this.setState({open: true})
}
}
showUploadArtifacts() {
this.setState({hiddenMain: true})
}
handleBack() {
this.props.handleBack();
}
backToRelease() {
this.setState({hiddenMain: false});
}
render() {
const {channel} = this.props;
console.log(channel);
return (
<div>
{this.state.hiddenMain ?
<div>
<UploadPackage
backToRelease={this.backToRelease}
selectedChannel={channel}
/>
</div> :
<div>
<Row>
<div className="release-header">
<a onClick={this.handleBack}>{"<-"}</a>
<span id="create-release-header">
<strong>{channel} Release</strong>
</span>
</div>
</Row>
<Row>
<div className="release-create">
<div>
<span>
<strong>Create Release</strong>
</span>
<p>
{channel === 'Production' ? "" :
"You could create " + channel + " release for your application and let " +
"the test users to test the application for it's stability."}
</p>
</div>
<div>
<Button id="create-release-btn" onClick={this.showUploadArtifacts}>Create a {channel} Release</Button>
</div>
</div>
</Row>
{channel !== 'Production' ?
<Row>
<div>
<span>
<strong>Manage Test Method</strong>
</span>
<p>
This section allows you to change the test method and the users who would be
able to test your application.
</p>
<div>
<form>
<FormGroup>
<Label for="test-method">Test Method*</Label>
<Input
required
type="select"
name="testMethod"
id="test-method"
onChange={this.onTestMethodChange}
>
<option value="open">Open {channel}</option>
<option value="closed">Closed {channel}</option>
</Input>
</FormGroup>
{!this.state.open ? (
<FormGroup>
<Label for="user-list">Users List*</Label>
<Input
required
name="userList"
id="user-list"
type="text"
/>
<FormText color="muted">
Provide a comma separated list of email
addresses.
</FormText>
</FormGroup>
) : <div/>}
<FormGroup>
<Label for="app-title">Feedback Method*</Label>
<Input
required
name="appName"
id="app-title"
/>
<FormText color="muted">
Provide an Email address or a URL for your users to provide
feedback on the application.
</FormText>
</FormGroup>
<div>
<Button className="form-btn">Save</Button>
</div>
</form>
</div>
</div>
</Row> :
<div/>
}
</div>
}
</div>
);
}
}
CreateRelease.propTypes = {
channel: PropTypes.string,
handleBack: PropTypes.func
};
export default CreateRelease;

95
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/UploadPackage.jsx Normal file
View File

@ -0,0 +1,95 @@
/*
* 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 PropTypes from 'prop-types';
import React, {Component} from 'react';
import './createRelease.css';
import {Button, Col, FormGroup, Input, Label, Row} from "reactstrap";
class UploadPackage extends Component {
constructor() {
super();
this.handleBack = this.handleBack.bind(this)
}
handleBack() {
this.props.backToRelease();
}
render() {
const {selectedChannel} = this.props;
return (
<div>
<Row>
<div className="release-header">
<a onClick={this.handleBack}>{"<-"}</a>
<span id="create-release-header">
<strong>New Release for {selectedChannel}</strong>
</span>
</div>
</Row>
<Row>
<div className="release-header">
<span id="create-release-header">
<strong>Upload Package File</strong>
</span>
</div>
</Row>
<Row>
<Col xs="3">
<Button>Upload</Button>
</Col>
<Col xs="3">
<Button>Select from package library</Button>
</Col>
</Row>
<Row>
<div className="release-detail-content">
<form>
<FormGroup>
<Label>Release Name *</Label>
<Input
required
type="text"
/>
</FormGroup>
<FormGroup>
<Label>Release Notes *</Label>
<Input
required
type="textarea"
/>
</FormGroup>
<div className="form-btn">
<Button>Send for Review</Button>
</div>
</form>
</div>
</Row>
</div>
);
}
}
UploadPackage.protoTypes = {
backToRelease: PropTypes.func,
channel: PropTypes.string
};
export default UploadPackage;

38
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/createRelease.css Normal file
View File

@ -0,0 +1,38 @@
/*
* 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.
*/
.release-header {
margin-top: 20px;
margin-bottom: 20px;
}
.release-create {
height: 150px;
margin-bottom: 20px;
}
.release-detail-content {
width: 100%;
margin-top: 20%;
height: 300px;
}
.form-btn {
float: right;
margin-bottom: 10px;
}

126
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/ReleaseManager.jsx Normal file
View File

@ -0,0 +1,126 @@
/*
* 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 PropTypes from 'prop-types';
import React, {Component} from 'react';
import './release-mgt.css';
import {Button, Col, Row} from "reactstrap";
import CreateRelease from "../Create/CreateRelease";
class ReleaseManager extends Component {
constructor() {
super();
this.getNoReleaseContent = this.getNoReleaseContent.bind(this);
this.createRelease = this.createRelease.bind(this);
this.handleBackPress = this.handleBackPress.bind(this);
this.state = {
createRelease: false,
onGoing: ""
}
}
createRelease(event) {
event.preventDefault();
this.setState({createRelease: true, onGoing: event.target.value})
}
handleBackPress() {
this.setState({createRelease: false});
}
/**
* Holds a generic message saying there are no current release in the specified release channel.
* */
getNoReleaseContent(release) {
return (
<div>
<Row>
<Col sm="12" md={{size: 8, offset: 4}}>
<p>You have no on-going {release} Releases!</p>
</Col>
</Row>
<Row>
<Col sm="12" md={{size: 8, offset: 5}}>
<Button
className="button-add"
id={release.toLowerCase()}
value={release}
onClick={this.createRelease}
>
Create a Release
</Button>
</Col>
</Row>
</div>
);
}
render() {
return (
<div>
{this.state.createRelease ?
<CreateRelease
channel={this.state.onGoing}
handleBack={this.handleBackPress}
/> :
<div id="release-mgt-content">
<Row>
<Col sm="12">
<div className="release" id="production">
<span>Production Releases</span>
<div className="release-content">
<div className="release-inner">
{this.getNoReleaseContent("Production")}
</div>
</div>
</div>
</Col>
</Row>
<Row>
<Col sm="12">
<div className="release" id="beta">
<span>Beta Releases</span>
<div className="release-content">
<div className="release-inner">
{this.getNoReleaseContent("Beta")}
</div>
</div>
</div>
</Col>
</Row>
<Row>
<Col sm="12">
<div className="release" id="alpha">
<span>Alpha Releases</span>
<div className="release-content">
<div className="release-inner">
{this.getNoReleaseContent("Alpha")}
</div>
</div>
</div>
</Col>
</Row>
</div>
}
</div>
)
}
}
export default ReleaseManager;

50
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/release-mgt.css Normal file
View File

@ -0,0 +1,50 @@
/*
* 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.
*/
.release-content {
height: 180px;
width: 95%;
border: dashed 1px #626262;
border-radius: 2%;
position: relative;
background-color: #e8e8e8;
}
.release-content:after {
content: "";
letter-spacing: 4px;
}
.release {
margin: 30px 10px 20px 30px;
}
.no-release-content {
position: absolute;
margin-top: 10px;
left: 40%;
}
.button-add:hover {
cursor: pointer;
}
.release-inner {
margin-top: 5%;
}

123
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx Normal file
View File

@ -0,0 +1,123 @@
/*
* 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 {withRouter} from 'react-router-dom';
import {Col, Row} from "reactstrap";
import './applicationView.css';
/**
* Application view component.
* Shows the details of the application.
* */
class ApplicationView extends Component {
constructor() {
super();
this.state = {
application: {}
}
}
componentWillReceiveProps(props, nextProps) {
this.setState({application: props.application});
console.log(props.application, nextProps)
}
componentDidMount() {
//TODO: Download image artifacts.
}
handleEdit() {
this.props.history.push("/assets/apps/edit/" + this.state.application.uuid);
}
render() {
const platform = this.state.application;
console.log(platform);
return (
<div id="application-view-content">
<div id="application-view-row">
<Row>
<Col>
<div id="app-icon">
</div>
</Col>
<Col>
<Row>
<span><strong>Facebook</strong></span>
</Row>
<Row>
<span className="app-updated-date">Last updated on 2017-09-23</span>
</Row>
</Col>
</Row>
</div>
<div id="application-view-row">
<Row>
<Col>
<span className="app-install-count">2k Installs</span>
</Col>
</Row>
<Row>
<Col>Rating</Col>
<Col>View in Store</Col>
</Row>
</div>
<hr/>
<div id="application-view-row">
<Row>
<Col>
<span><strong>Description: </strong></span>
</Col>
<Col>
<p>sdfjlkdsjfsjdfjsdf sfjdslkjfdsflkjdsfslkdjfl j</p>
</Col>
</Row>
<Row>
<Col>
<span><strong>Tags: </strong></span>
</Col>
<Col>
<p>[list of tags...]</p>
</Col>
</Row>
<Row>
<Col>
<span><strong>Release: </strong></span>
</Col>
<Col>
<p>Production</p>
</Col>
</Row>
<Row>
<Col>
<span><strong>Version: </strong></span>
</Col>
<Col>
<p>v1.0</p>
</Col>
</Row>
</div>
</div>
);
}
}
export default withRouter(ApplicationView);

56
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/applicationView.css Normal file
View File

@ -0,0 +1,56 @@
/*
* 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.
*/
#application-view-content {
width: 100%;
}
#application-view-row {
margin: 10px 10px 20px 20px;
}
#app-icon {
height: 100px;
width: 100px;
border: solid 1px black;
border-radius: 50%;
}
.app-updated-date {
color: #888888;
font-style: italic;
}
.app-install-count {
font-style: italic;
}
.app-details-tbl {
outline: none;
border-color: #2196F3;
}
.app-details-tbl tr {
margin: 20px 0 0 0;
}
.app-details-tbl td {
margin-left: 10px;
max-width: 400px;
}

194
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
View File

@ -1,194 +0,0 @@
/*
* 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 Theme from '../../theme';
import PropTypes from 'prop-types';
import Badge from 'material-ui/Badge';
import React, {Component} from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import {withRouter} from 'react-router-dom';
import AuthHandler from "../../api/authHandler";
import FlatButton from 'material-ui/FlatButton';
import IconButton from 'material-ui/IconButton';
import {List, ListItem} from 'material-ui/List';
import Apps from 'material-ui/svg-icons/navigation/apps';
import Add from 'material-ui/svg-icons/content/add-circle';
import Feedback from 'material-ui/svg-icons/action/feedback';
import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
/**
* Base Layout:
* App bar
* Left Navigation
* Middle content.
* */
class BaseLayout extends Component {
constructor() {
super();
this.state = {
notifications: 0,
user: 'Admin'
};
this.scriptId = "basic-layout";
this.logout = this.logout.bind(this);
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId)
}
handleApplicationClick() {
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);
}
logout(event, index, value) {
AuthHandler.logout();
}
render() {
return (
<div>
<AppBar
title="App Publisher"
iconElementRight={
<div>
<Badge
badgeContent={this.state.notifications}
secondary={true}
badgeStyle={{top: 12, right: 12}}
>
<IconButton tooltip="Notifications">
<NotificationsIcon/>
</IconButton>
</Badge>
<IconMenu
iconButtonElement={<FlatButton
icon={<ActionAccountCircle/>}
label="sdfdsf"
/>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
onChange={this.logout}
>
<MenuItem value={0} primaryText="Logout" />
</IconMenu>
{/*<FlatButton*/}
{/*icon={<ActionAccountCircle/>}*/}
{/*onClick={() => {console.log("Clicked")}}*/}
{/*label={this.props.user.getUserName()}*/}
{/*/>*/}
</div>
}
/>
<div>
<Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: '10%'}} open={true}>
<List>
<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 className="basicLayoutDiv">
{this.props.children}
</div>
</div>
);
}
}
BaseLayout.propTypes = {
children: PropTypes.element
};
export default withRouter(BaseLayout);

2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
View File

@ -21,7 +21,7 @@ import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import TextField from 'material-ui/TextField';
import AuthHandler from "../../api/authHandler";
import DataTable from '../UIComponents/DataTable';
import DataTable from '../UIComponents/DataTable/DataTable';
import PlatformMgtApi from "../../api/platformMgtApi";
import {Card, CardActions, CardTitle} from 'material-ui/Card';

63
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/AppImage.js Normal file
View File

@ -0,0 +1,63 @@
/*
* 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 PropTypes from 'prop-types';
import React, {Component} from 'react';
import './appImage.css';
/**
* Component for holding uploaded image.
* This component has the feature to remove selected image from the array.
* */
class AppImage extends Component {
constructor() {
super();
this.removeImage = this.removeImage.bind(this);
}
/**
* Triggers the parent method to remove the selected image.
* @param event: The click event of the component.
* */
removeImage(event) {
event.preventDefault();
this.props.onRemove(event.target.id);
}
render() {
const {image, imageId} = this.props;
return (
<div className="image-container" style={this.props.imageStyles}>
<img src={image} style={{width: '100%'}} className="image" id={imageId}/>
<div className="btn-content">
<i className="close-btn" id={imageId} onClick={this.removeImage}>X</i>
</div>
</div>
)
}
}
AppImage.propTypes = {
image: PropTypes.string,
imageId: PropTypes.string,
onRemove: PropTypes.func,
imageStyles: PropTypes.object
};
export default AppImage;

65
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css Normal file
View File

@ -0,0 +1,65 @@
/*
* 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.
*/
.image-container {
position: relative;
width: 100%;
height: 100%;
margin: 5px;
}
.image {
opacity: 1;
display: block;
max-width: 100%;
max-height: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.btn-content {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
background-color: rgba(243, 243, 243, 0.43);
border-radius: 50%;
border: solid 1px #ffffff;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.image-container:hover .image {
opacity: 0.3;
}
.image-container:hover .btn-content {
opacity: 1;
}
.close-btn {
color: #000000;
font-size: 16px;
padding: 20px 30px;
}
.close-btn:hover {
cursor: pointer;
}

35
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx Normal file
View File

@ -0,0 +1,35 @@
/*
* 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 './chip.css';
class Chip extends Component {
render() {
return (
<div className="chip">
{this.props.image?<img src={this.props.image} alt="Person" width="96" height="96" />:<div/>}
{this.props.text}
<span className="close-btn" >&times;</span>
</div>
)
}
}
export default Chip;

48
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css Normal file
View File

@ -0,0 +1,48 @@
/*
* 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.
*/
.chip {
display: inline-block;
padding: 0 25px;
height: 50px;
font-size: 16px;
line-height: 50px;
border-radius: 25px;
background-color: #f1f1f1;
}
.chip img {
float: left;
margin: 0 10px 0 -25px;
height: 50px;
width: 50px;
border-radius: 50%;
}
.close-btn {
padding-left: 10px;
color: #888;
font-weight: bold;
float: right;
font-size: 20px;
cursor: pointer;
}
.close-btn:hover {
color: #000;
}

12
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx
View File

@ -16,7 +16,7 @@
* under the License.
*/
import Theme from '../../theme';
import Theme from '../../../theme';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import DataTableRow from './DataTableRow';
@ -54,6 +54,7 @@ class DataTable extends Component {
constructor() {
super();
this.handleRowClick = this.handleRowClick.bind(this);
this.handleBtnClick = this.handleBtnClick.bind(this);
this.state = {
data: [],
headers: [],
@ -75,6 +76,10 @@ class DataTable extends Component {
}
shouldComponentUpdate(nextProps, nextState) {
if (!nextProps.data) {
this.setState({data: nextState.data});
return true;
}
this.setState({data: nextProps.data});
return true;
}
@ -87,6 +92,10 @@ class DataTable extends Component {
this.props.handleRowClick(id);
}
handleBtnClick(id) {
this.props.handleButtonClick(id);
}
render() {
const {data, headers} = this.state;
@ -121,6 +130,7 @@ class DataTable extends Component {
<DataTableRow
key={dataItem.id}
dataItem={dataItem}
handleButtonClick={this.handleBtnClick}
handleClick={this.handleRowClick}
/>
)

2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableHeader.jsx
View File

@ -16,7 +16,7 @@
* under the License.
*/
import Theme from '../../theme';
import Theme from '../../../theme';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import FlatButton from 'material-ui/FlatButton';

31
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx
View File

@ -16,10 +16,14 @@
* under the License.
*/
import Theme from '../../theme';
import Theme from '../../../theme';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import IconButton from 'material-ui/IconButton';
import Create from 'material-ui/svg-icons/content/create'
import {TableRow, TableRowColumn} from 'material-ui/Table';
import Avatar from 'material-ui/Avatar';
/**
* Data table row component.
@ -51,10 +55,17 @@ class DataTableRow extends Component {
/**
* Triggers the click event on the data table row.
* */
handleClick() {
handleClick(event) {
event.stopPropagation();
this.props.handleClick(this.state.dataItem.id);
}
handleBtnClick(event) {
event.stopPropagation();
console.log(event.target['id'])
this.props.handleButtonClick(event.target['id']);
}
render() {
const {dataItem} = this.state;
return (
@ -62,6 +73,12 @@ class DataTableRow extends Component {
key={this.props.key}
onClick={this.handleClick.bind(this)}
>
<TableRowColumn
className="datatableRowColumn"
key={Math.random()}
>
<Avatar>{dataItem.name}</Avatar>
</TableRowColumn>
{Object.keys(dataItem).map((key) => {
if (key !== 'id') {
return (
@ -71,11 +88,17 @@ class DataTableRow extends Component {
>
{dataItem[key]}
</TableRowColumn>)
} else {
return <TableRowColumn key={key}/>
}
})}
<TableRowColumn
className="datatableRowColumn"
key={dataItem.id}
>
<IconButton id={dataItem.id} onClick={this.handleBtnClick.bind(this)}>
<Create id={dataItem.id}/>
</IconButton>
</TableRowColumn>
</TableRow>
);
}

59
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/Drawer.jsx Normal file
View File

@ -0,0 +1,59 @@
/*
* 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 PropTypes from 'prop-types';
import React, {Component} from 'react';
import './drawer.css';
import {Row} from "reactstrap";
/**
* Custom React component for Application View.
* */
class Drawer extends Component {
constructor() {
super();
this.closeDrawer = this.closeDrawer.bind(this);
}
/**
* Closes the drawer.
* */
closeDrawer() {
this.props.onClose();
}
render() {
return (
<div>
<div id="app-view" className="app-view-drawer" style={this.props.style}>
<a onClick={this.closeDrawer} className="drawer-close-btn">&times;</a>
{this.props.children}
</div>
</div>
);
}
}
Drawer.propTypes = {
style: PropTypes.object,
children: PropTypes.node,
onClose: PropTypes.func
};
export default Drawer;

74
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css Normal file
View File

@ -0,0 +1,74 @@
/*
* 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.
*/
.app-view-drawer {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 5%;
right: 0%;
background-color: #b5b5b5;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
border: solid 1px black;
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.app-view-drawer a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* Position and style the close button (top right corner) */
.app-view-drawer .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.drawer-close-btn {
height: 40px;
width: 30px;
}
.drawer-close-btn:hover {
cursor: pointer;
color: #818181;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

76
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/ImageUploader.jsx Normal file
View File

@ -0,0 +1,76 @@
/*
* 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 PropTypes from 'prop-types';
import React, {Component} from 'react';
import './imageUploader.css';
import Dropzone from "react-dropzone";
import {Row} from "reactstrap";
class ImageUploader extends Component {
constructor() {
super();
this.setImages = this.setImages.bind(this);
this.state = {
images: []
}
}
setImages(images) {
this.props.setImages(images);
}
render() {
let {images, height, width, accepted, multiple, maxAmount} = this.props;
return (
<div id="screenshot-container">
<Row>
{images.map((tile) => (
<input type="image" src={tile[0].preview} onClick=""/>
)
)}
</Row>
{this.state.screenshots.length < maxAmount ?
<Dropzone
className="add-image"
accept="image/jpeg, image/png"
onDrop={(accepted, rejected) => {
this.setImages(accepted);
}}
>
<p className="add-image-symbol">+</p>
</Dropzone> : <div/>}
</div>
);
}
}
ImageUploader.prototypes = {
height: PropTypes.string,
width: PropTypes.string,
accepted: PropTypes.array,
multiple: PropTypes.bool,
maxAmount: PropTypes.number,
setImages: PropTypes.func
};
export default ImageUploader;

18
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/imageUploader.css Normal file
View File

@ -0,0 +1,18 @@
/*
* 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.
*/

46
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationItem.jsx Normal file
View File

@ -0,0 +1,46 @@
/*
* 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 {Col, Row} from "reactstrap";
import './notification.css';
class NotificationItem extends Component {
constructor() {
super();
}
render() {
return (
<div>
<Row>
<Col>
<div className="notification-app-icon small">
<img/>
</div>
</Col>
<Col>
<p>Your application, Facebook has been published.</p>
</Col>
</Row>
</div>
);
}
}
export default NotificationItem;

71
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationView.jsx Normal file
View File

@ -0,0 +1,71 @@
/*
* 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 {Col, Row} from "reactstrap";
import './notification.css';
class NotificationView extends Component {
constructor() {
super();
}
render() {
return (
<div id="notification-view-content">
<div>
<Row id="notification-content">
<Col xs="3">
<div className="notification-app-icon medium">
</div>
</Col>
<Col xs="9">
<Row>
<span><strong>Application Name</strong></span>
</Row>
<Row>
<span>Version 1.0</span>
</Row>
<Row>
<p id="app-reject-msg">Your Application was rejected</p>
</Row>
</Col>
</Row>
<hr/>
<Row id="notification-content">
<Col xs="12">
<p>Following validations were detected in your review submission.
Please attend to them and re-submit</p>
<ul>
<li>sdjjfsdfsdfkjs shdfjhlkds hflkhfdslkd </li>
<li>sdfkds jfdsljfklsdfjksdjlksdjdlkf</li>
<li>sfksdf slkjskd jfjds lkfjdsfdsfdslkf sjf lkdsf</li>
<li>skfjslkdjfsdjfjksldjf sdkl jflkds jfkslfjs</li>
<li>ksdf jks;kshflk hlkjhds lkjhdsklhsd lkf</li>
<li> jsdljflksd jfklsdfskljfkjshf;ks ldj</li>
</ul>
</Col>
</Row>
</div>
</div>
);
}
}
export default NotificationView;

49
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/notification.css Normal file
View File

@ -0,0 +1,49 @@
/*
* 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.
*/
.notification-app-icon {
border-radius: 50%;
border: solid 1px black;
}
.small {
height: 50px;
width: 50px;
}
.medium {
height: 100px;
width: 100px;
}
#notification-view-content {
width: 50%;
border: solid 1px black;
margin: 0 auto;
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#notification-content {
margin: 20px 10px 20px 10px;
}
#app-reject-msg {
width: 100%;
height: 30px;
background-color: #888888;
}

35
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/Switch.jsx Normal file
View File

@ -0,0 +1,35 @@
/*
* 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 './switch.css';
class Switch extends Component {
render() {
const {height, width} = this.props;
return (
<label className="switch">
<input type="checkbox" onChange={this.props.onChange}/>
<span className="slider round"></span>
</label>
)
}
}
export default Switch;

76
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css Normal file
View File

@ -0,0 +1,76 @@
/*
* 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.
*/
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 24px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(16px);
-ms-transform: translateX(16px);
transform: translateX(16px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}

71
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx
View File

@ -16,15 +16,10 @@
* under the License.
*/
import qs from 'qs';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import Checkbox from 'material-ui/Checkbox';
import TextField from 'material-ui/TextField';
import {Redirect, Switch} from 'react-router-dom';
import AuthHandler from '../../../api/authHandler';
import RaisedButton from 'material-ui/RaisedButton';
import {Card, CardActions, CardTitle} from 'material-ui/Card';
import {Button, Card, CardBlock, CardSubtitle, CardTitle, Col, Form, FormGroup, Input, Label} from 'reactstrap';
/**
* The Login Component.
@ -72,9 +67,10 @@ class Login extends Component {
* Handles the username field change event.
* */
onUserNameChange(event, value) {
console.log(event.target.value);
this.setState(
{
userName: value
userName: event.target.value
}
);
}
@ -85,7 +81,7 @@ class Login extends Component {
onPasswordChange(event, value) {
this.setState(
{
password: value
password: event.target.value
}
);
}
@ -136,43 +132,32 @@ class Login extends Component {
if (!this.state.isLoggedIn) {
return (
<div>
<div id="login-container">
{/*TODO: Style the components.*/}
<Card id="login-card">
<CardBlock>
<CardTitle>WSO2 IoT APP Publisher</CardTitle>
<Form onSubmit={this.handleLogin.bind(this)}>
<FormGroup row>
<Label for="userName" sm={2}>User Name:</Label>
<Col sm={10}>
<Input type="text" name="userName" id="userName" placeholder="User Name" onChange={this.onUserNameChange.bind(this)}/>
</Col>
<Card>
<CardTitle title="WSO2 IoT App Publisher"/>
<CardActions>
<form onSubmit={this.handleLogin.bind(this)}>
<TextField
hintText="Enter the User Name."
id="username"
errorText={this.state.errors["userNameError"]}
floatingLabelText="User Name*"
floatingLabelFixed={true}
value={this.state.userName}
onChange={this.onUserNameChange.bind(this)}
/>
<br/>
<TextField
hintText="Enter the Password."
id="password"
type="password"
errorText={this.state.errors["passwordError"]}
floatingLabelText="Password*"
floatingLabelFixed={true}
value={this.state.password}
onChange={this.onPasswordChange.bind(this)}
/>
<br/>
<Checkbox
label="Remember me."
onCheck={this.handleRememberMe.bind(this)}
checked={this.state.rememberMe}
/>
<br/>
<RaisedButton type="submit" label="Login"/>
</form>
</CardActions>
</FormGroup>
<FormGroup row>
<Label for="password" sm={2}>Password:</Label>
<Col sm={10}>
<Input type="password" name="text" id="password" placeholder="Password" onChange={this.onPasswordChange.bind(this)}/>
</Col>
</FormGroup>
<FormGroup check row>
<Col sm={{ size: 10, offset: 2 }}>
<Button type="submit" id="login-btn">Submit</Button>
</Col>
</FormGroup>
</Form>
</CardBlock>
</Card>
</div>);
} else {

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

@ -18,14 +18,15 @@
import Login from './User/Login/Login';
import NotFound from './Error/NotFound';
import BaseLayout from './Base/BaseLayout';
import BaseLayout from './AppPublisherBase/BaseLayout';
import PlatformCreate from './Platform/PlatformCreate';
import PlatformListing from './Platform/PlatformListing';
import ApplicationCreate from './Application/ApplicationCreate';
import ApplicationCreate from './Application/Create/ApplicationCreate';
import ApplicationListing from './Application/ApplicationListing';
import ApplicationEdit from './Application/Edit/Base/ApplicationEditBaseLayout';
/**
* Contains all UI components related to Application, Login and Platform
*/
export {Login, BaseLayout, ApplicationCreate, ApplicationListing, PlatformListing, NotFound, PlatformCreate};
export {Login, BaseLayout, ApplicationCreate, ApplicationListing, PlatformListing, NotFound, PlatformCreate, ApplicationEdit};

237
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css
View File

@ -1,5 +1,238 @@
/*
* 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.
*/
body {
margin: 0;
padding: 0;
width: 100%;
font-family: sans-serif;
}
#userName {
border-radius: 0;
}
#password {
border-radius: 0;
}
#login-btn {
border-radius: 0;
background-color: navy;
color: white;
cursor: pointer;
}
#login-container {
width: 50%;
margin: 0 auto
}
#login-card {
border-radius: 0;
background-color: #BaBaBa;
}
#container {
background-color: #ffffff;
}
#header-content {
height: 100px;
width: 100%;
margin: 0 10px 0 0;
background-color: #BDBDBD;
border-bottom: solid 2px;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
z-index: 2;
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#application-content {
max-height: 800px;
margin-top: 150px;
}
#add-btn {
border-radius: 50%;
border: solid 2px;
position: absolute;
background-color: #BDBDBD;
left: 15px;
top: 75px;
cursor: pointer;
height: 50px;
width: 50px;
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.add-btn.div {
position: relative;
margin-top: 20px;
margin-left: 20px;
}
#fw-api:before {
content: '\e601';
}
#btn {
background-color: #BDBDBD;
border-color: #BDBDBD;
}
#header-text {
font-size: 25px;
top: 10px;
margin-left: 10px;
}
#header-btn {
float: right;
}
#search-box {
float: right;
}
#search {
background-color: #BDBDBD;
left: 110px;
top: 20px;
height: 25px;
outline: none;
border: none;
border-bottom: solid 1px black;
border-radius: 0%;
}
#application-list {
margin-top: 20px;
transition: margin-right .5s;
}
#app-image-screenshot {
width: 300px;
height: 300px;
}
#app-image-icon {
width: 300px;
height: 300px;
}
#app-image-banner {
width: 400px;
height: 300px;
}
.applicationCreateBannerDropZone {
width: 300px;
height: 150px;
border-radius: 5%;
background-color: rgba(157, 159, 157, 0.53);
border: dashed #888888 2px;
}
.applicationCreateBannerp {
margin: 70px 40px 40px 150px;
}
.applicationCreateScreenshotDropZone {
width: 150px;
height: 150px;
margin: 0 5px 0 5px;
border-radius: 10%;
background-color: rgba(157, 159, 157, 0.53);
border: dashed #888888 2px;
}
.applicationCreateIconDropZone {
width: 150px;
height: 150px;
border-radius: 10%;
background-color: rgba(157, 159, 157, 0.53);
border: dashed #888888 2px;
}
.applicationCreateIconp {
margin: 70px 40px 70px 70px;
}
.applicationCreateScreenshotp {
margin: 70px 40px 70px 70px;
}
#screenshot-container {
display: flex;
overflow-x: auto;
height: 200px;
}
#app-icon-container {
height: 300px;
overflow-x: auto;
}
#modal-body-content {
max-height: 700px;
overflow-y: auto;
}
#img-btn-screenshot {
margin: 0 5px 0 5px;
}
#app-create-modal {
max-width: 700px;
overflow-x: auto;
}
#store {
border: none;
border-bottom: solid #BDBDBD 1px;
border-radius: 0px;
width: 200px;
}
#version {
border: none;
border-bottom: solid #BDBDBD 1px;
border-radius: 0px;
width: 200px;
}
#app-release-switch-content {
display: flex;
}
#app-release-switch-label {
position: absolute;
float: left;
}
#app-release-switch-switch {
position: absolute;
right: 10px;
}
.image-sub-title {
font-style: italic;
font-size: 12px;
color: #818181;
}

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

@ -20,6 +20,8 @@ import './index.css';
import React from 'react';
import Publisher from './App';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import './css/font-wso2.css';
import registerServiceWorker from './registerServiceWorker';
/**

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

@ -16,6 +16,7 @@
* under the License.
*/
var path = require('path');
import '!!style-loader!css-loader!src/css/font-wso2.css';
const config = {
entry: {
@ -61,7 +62,7 @@ const config = {
},
resolve: {
// you can now require('file') instead of require('file.coffee')
extensions: ['.jsx', '.js']
extensions: ['.jsx', '.js', '.ttf', '.woff', '.woff2', '.svg']
}
};