forked from community/device-mgt-core
Merge pull request #954 from menakaj/application-mgt
Publisher UI modifications.feature/appm-store/pbac
Megala Uthayakumar
7 years ago
committed by
GitHub
commit
56ce03927b
9
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
9
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
@ -1,30 +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 React, {Component} from 'react';
|
|
||||||
import {withRouter} from 'react-router-dom';
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Application List Component.
|
|
||||||
* */
|
|
||||||
class ApplicationListing extends Component{
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default withRouter(ApplicationListing);
|
|
||||||
@ -0,0 +1,180 @@
|
|||||||
|
/*
|
||||||
|
* 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 TextField from 'material-ui/TextField';
|
||||||
|
import DataTable from '../UIComponents/DataTable';
|
||||||
|
import {Card, CardActions, CardTitle} from 'material-ui/Card';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The App Create Component.
|
||||||
|
*
|
||||||
|
* Application creation is handled through a Wizard. (We use Material UI Stepper.)
|
||||||
|
*
|
||||||
|
* In each step, data will be set to the state separately.
|
||||||
|
* When the wizard is completed, data will be arranged and sent to the api.
|
||||||
|
* */
|
||||||
|
class ApplicationListing extends Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
data: [],
|
||||||
|
asc: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
data = [
|
||||||
|
{
|
||||||
|
id: Math.random(),
|
||||||
|
applicationName:"Cne",
|
||||||
|
platform:'Android',
|
||||||
|
category:"Public",
|
||||||
|
status: "Created"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: Math.random(),
|
||||||
|
applicationName:"Gone",
|
||||||
|
platform:'IOS',
|
||||||
|
category:"Public",
|
||||||
|
status: "Created"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: Math.random(),
|
||||||
|
applicationName:"Ane",
|
||||||
|
platform:'Android',
|
||||||
|
category:"Public",
|
||||||
|
status: "Created"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: Math.random(),
|
||||||
|
applicationName:"one",
|
||||||
|
platform:'Android',
|
||||||
|
category:"Public",
|
||||||
|
status: "Created"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: Math.random(),
|
||||||
|
applicationName:"one",
|
||||||
|
platform:'Android',
|
||||||
|
category:"Public",
|
||||||
|
status: "Created"
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
headers = [
|
||||||
|
{
|
||||||
|
data_id: "image",
|
||||||
|
data_type: "image",
|
||||||
|
sortable: false,
|
||||||
|
label: ""},
|
||||||
|
{
|
||||||
|
data_id: "applicationName",
|
||||||
|
data_type: "string",
|
||||||
|
sortable: true,
|
||||||
|
label: "Application Name",
|
||||||
|
sort: this._sortData.bind(this)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data_id: "platform",
|
||||||
|
data_type: "image_array",
|
||||||
|
sortable: false,
|
||||||
|
label: "Platform"},
|
||||||
|
{
|
||||||
|
data_id: "category",
|
||||||
|
data_type: "string",
|
||||||
|
sortable: false,
|
||||||
|
label: "Category"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data_id: "status",
|
||||||
|
data_type: "string",
|
||||||
|
sortable: false,
|
||||||
|
label: "Status"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
//Fetch all the applications from backend and create application objects.
|
||||||
|
this.setState({data: this.data});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles the search action.
|
||||||
|
* When typing in the search bar, this method will be invoked.
|
||||||
|
* */
|
||||||
|
_searchApplications(event, word) {
|
||||||
|
let searchedData;
|
||||||
|
if (word){
|
||||||
|
searchedData = this.data.filter((dataItem) => {
|
||||||
|
return dataItem.applicationName.includes(word);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
searchedData = this.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({data: searchedData}, console.log("Searched data ", this.state.data));
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles sort data function and toggles the asc state.
|
||||||
|
* asc: true : sort in ascending order.
|
||||||
|
* */
|
||||||
|
_sortData() {
|
||||||
|
let isAsc = this.state.asc;
|
||||||
|
let datas = isAsc?this.data.sort(this._compare):this.data.reverse();
|
||||||
|
this.setState({data: datas, asc: !isAsc});
|
||||||
|
}
|
||||||
|
|
||||||
|
_compare(a, b) {
|
||||||
|
if (a.applicationName < b.applicationName)
|
||||||
|
return -1;
|
||||||
|
if (a.applicationName > b.applicationName)
|
||||||
|
return 1;
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
_onRowClick(id) {
|
||||||
|
this.props.history.push("apps/"+id);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
|
||||||
|
<Card style={{display: 'flex', flexWrap: 'wrap'}}>
|
||||||
|
<TextField hintText="Search"
|
||||||
|
style={{float:'right', paddingRight: '2px'}}
|
||||||
|
onChange={this._searchApplications.bind(this)}/>
|
||||||
|
<CardTitle title="Applications" style={{display: 'flex', flexWrap: 'wrap'}}/>
|
||||||
|
<CardActions>
|
||||||
|
|
||||||
|
</CardActions>
|
||||||
|
<DataTable headers={this.headers}
|
||||||
|
data={this.state.data}
|
||||||
|
handleRowClick={this._onRowClick.bind(this)}
|
||||||
|
noDataMessage={{type: 'button', text: 'Create Application'}}/>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ApplicationListing.propTypes = {};
|
||||||
|
|
||||||
|
export default withRouter(ApplicationListing);
|
||||||
0
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationView.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationView.jsx
0
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationView.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationView.jsx
57
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
57
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
@ -0,0 +1,489 @@
|
|||||||
|
/*
|
||||||
|
* 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 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: [],
|
||||||
|
defValue: "",
|
||||||
|
category: 0,
|
||||||
|
visibility: 0,
|
||||||
|
errors: {},
|
||||||
|
title: "",
|
||||||
|
shortDescription: "",
|
||||||
|
description: "",
|
||||||
|
banner: [],
|
||||||
|
screenshots: [],
|
||||||
|
icon: []
|
||||||
|
};
|
||||||
|
|
||||||
|
this.styles = {
|
||||||
|
chip: {
|
||||||
|
margin: 4,
|
||||||
|
},
|
||||||
|
wrapper: {
|
||||||
|
display: 'flex',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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: ""});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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: "Icon", value: this.state.icon}];
|
||||||
|
this._validate(fields);
|
||||||
|
// this.props.handleNext();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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)}
|
||||||
|
style={this.styles.chip}
|
||||||
|
>
|
||||||
|
{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 '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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(errorsPresent);
|
||||||
|
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 = {
|
||||||
|
title: this.state.title,
|
||||||
|
description: this.state.description,
|
||||||
|
shortDescription: this.state.shortDescription,
|
||||||
|
tags: this.state.tags,
|
||||||
|
banner: this.state.banner,
|
||||||
|
screenshots: this.state.screenshots,
|
||||||
|
icon: this.state.icon
|
||||||
|
};
|
||||||
|
|
||||||
|
this.props.setData("step2", {step: stepData});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set text field values to state.
|
||||||
|
* */
|
||||||
|
_onTextFieldChange(event, value) {
|
||||||
|
let field = event.target.id;
|
||||||
|
switch (field) {
|
||||||
|
case "title": {
|
||||||
|
this.setState({title: value});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "shortDescription": {
|
||||||
|
this.setState({shortDescription: value});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "description": {
|
||||||
|
this.setState({description: 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);
|
||||||
|
const contentStyle = {margin: '0 16px'};
|
||||||
|
return (
|
||||||
|
<div style={contentStyle}>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<TextField
|
||||||
|
id="title"
|
||||||
|
hintText="Enter a title for your application."
|
||||||
|
errorText={this.state.errors["Title"]}
|
||||||
|
floatingLabelText="Title*"
|
||||||
|
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 style={this.styles.wrapper}>
|
||||||
|
{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 style={{border: 'solid #BDBDBD 1px'}}>
|
||||||
|
<p style={{color: '#BDBDBD'}}>Platform Specific Properties</p>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<div>
|
||||||
|
<p style={{color: '#f44336'}}>{this.state.errors["Banner"]}</p>
|
||||||
|
<p style={{color: '#BDBDBD'}}>Banner*:</p>
|
||||||
|
<GridList style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexWrap: 'nowrap',
|
||||||
|
overflowX: 'auto',
|
||||||
|
}} 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 style={{width: '300px', height: '150px', border: 'dashed #BDBDBD 1px'}}
|
||||||
|
accept="image/jpeg, image/png"
|
||||||
|
onDrop={(banner, rejected) => {
|
||||||
|
this.setState({banner, rejected});
|
||||||
|
}}>
|
||||||
|
<p style={{margin: '70px 40px 40px 150px'}}>+</p>
|
||||||
|
</Dropzone> : <div />}
|
||||||
|
|
||||||
|
</GridList>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<div>
|
||||||
|
<p style={{color: '#f44336'}}>{this.state.errors["Screenshots"]}</p>
|
||||||
|
<p style={{color: '#BDBDBD'}}>Screenshots*:</p>
|
||||||
|
<GridList style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexWrap: 'nowrap',
|
||||||
|
overflowX: 'auto',
|
||||||
|
}} 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 style={{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}}
|
||||||
|
accept="image/jpeg, image/png"
|
||||||
|
onDrop={(screenshots, rejected) => {
|
||||||
|
let tmpScreenshots = this.state.screenshots;
|
||||||
|
tmpScreenshots.push(screenshots);
|
||||||
|
this.setState({
|
||||||
|
screenshots: tmpScreenshots});
|
||||||
|
}}>
|
||||||
|
<p style={{margin: '70px 40px 70px 70px'}}>+</p>
|
||||||
|
</Dropzone> : <div />}
|
||||||
|
</GridList>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<div>
|
||||||
|
<p style={{color: '#f44336'}}>{this.state.errors["Icon"]}</p>
|
||||||
|
<p style={{color: '#BDBDBD'}}>Icon*:</p>
|
||||||
|
<GridList style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexWrap: 'nowrap',
|
||||||
|
overflowX: 'auto',
|
||||||
|
}} 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 style={{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}}
|
||||||
|
accept="image/jpeg, image/png"
|
||||||
|
onDrop={(icon, rejected) => {this.setState({icon, rejected});}}>
|
||||||
|
<p style={{margin: '70px 40px 70px 70px'}}>+</p>
|
||||||
|
</Dropzone> : <div />}
|
||||||
|
</GridList>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<div style={{marginTop: 12}}>
|
||||||
|
<FlatButton
|
||||||
|
label="< Back"
|
||||||
|
disabled={false}
|
||||||
|
onClick={this._handlePrev.bind(this)}
|
||||||
|
style={{marginRight: 12}}
|
||||||
|
/>
|
||||||
|
<RaisedButton
|
||||||
|
label="Next >"
|
||||||
|
primary={true}
|
||||||
|
onClick={this._handleNext.bind(this)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Step2.prototypes = {
|
||||||
|
handleNext: PropTypes.func,
|
||||||
|
handlePrev: PropTypes.func,
|
||||||
|
setData: PropTypes.func,
|
||||||
|
removeData: PropTypes.func
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Step2;
|
||||||
26
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
26
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
0
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/index.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/index.js
0
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/index.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/index.js
@ -1,209 +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 Chip from 'material-ui/Chip';
|
|
||||||
import React, {Component} from 'react';
|
|
||||||
import MenuItem from 'material-ui/MenuItem';
|
|
||||||
import TextField from 'material-ui/TextField';
|
|
||||||
import FlatButton from 'material-ui/FlatButton';
|
|
||||||
import SelectField from 'material-ui/SelectField';
|
|
||||||
import RaisedButton from 'material-ui/RaisedButton';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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: [],
|
|
||||||
defValue: "",
|
|
||||||
category: 1
|
|
||||||
};
|
|
||||||
|
|
||||||
this.styles = {
|
|
||||||
chip: {
|
|
||||||
margin: 4,
|
|
||||||
},
|
|
||||||
wrapper: {
|
|
||||||
display: 'flex',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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(this.state.tags));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* */
|
|
||||||
handleTagChange(event) {
|
|
||||||
let defaultValue = this.state.defValue;
|
|
||||||
defaultValue = event.target.value;
|
|
||||||
this.setState({defValue: defaultValue})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Invokes the handleNext function in Create component.
|
|
||||||
* */
|
|
||||||
handleNext() {
|
|
||||||
this.props.handleNext();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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) {
|
|
||||||
console.log(data);
|
|
||||||
return (
|
|
||||||
<Chip
|
|
||||||
key={data.key}
|
|
||||||
onRequestDelete={() => this.handleRequestDelete(data.key)}
|
|
||||||
style={this.styles.chip}
|
|
||||||
>
|
|
||||||
{data.value}
|
|
||||||
</Chip>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const contentStyle = {margin: '0 16px'};
|
|
||||||
return (
|
|
||||||
<div style={contentStyle}>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<TextField
|
|
||||||
hintText="Enter a title for your application."
|
|
||||||
floatingLabelText="Title*"
|
|
||||||
floatingLabelFixed={true}
|
|
||||||
/><br/>
|
|
||||||
<TextField
|
|
||||||
hintText="Enter a short description for your application."
|
|
||||||
floatingLabelText="Short Description*"
|
|
||||||
floatingLabelFixed={true}
|
|
||||||
multiLine={true}
|
|
||||||
rows={2}
|
|
||||||
/><br/>
|
|
||||||
<TextField
|
|
||||||
hintText="Enter the description."
|
|
||||||
floatingLabelText="Description*"
|
|
||||||
floatingLabelFixed={true}
|
|
||||||
multiLine={true}
|
|
||||||
rows={4}
|
|
||||||
/><br/>
|
|
||||||
<TextField
|
|
||||||
hintText="Select the application visibility"
|
|
||||||
floatingLabelText="Visibility*"
|
|
||||||
floatingLabelFixed={true}
|
|
||||||
/><br/>
|
|
||||||
<TextField
|
|
||||||
hintText="Enter application tags.."
|
|
||||||
floatingLabelText="Tags*"
|
|
||||||
floatingLabelFixed={true}
|
|
||||||
value={this.state.defValue}
|
|
||||||
onChange={this.handleTagChange.bind(this)}
|
|
||||||
onKeyPress={this.addTags.bind(this)}
|
|
||||||
/><br/>
|
|
||||||
<div style={this.styles.wrapper}>
|
|
||||||
{this.state.tags.map(this.renderChip, this)}
|
|
||||||
</div>
|
|
||||||
<br/>
|
|
||||||
<SelectField
|
|
||||||
floatingLabelText="Category*"
|
|
||||||
value={this.state.category}
|
|
||||||
floatingLabelFixed={true}
|
|
||||||
>
|
|
||||||
<MenuItem value={1} primaryText="Business"/>
|
|
||||||
</SelectField> <br/>
|
|
||||||
{/*Platform Specific Properties.*/}
|
|
||||||
<div style={{border: '1px'}}>
|
|
||||||
fdfdfd
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<div style={{marginTop: 12}}>
|
|
||||||
<FlatButton
|
|
||||||
label="< Back"
|
|
||||||
disabled={false}
|
|
||||||
onClick={this.handlePrev.bind(this)}
|
|
||||||
style={{marginRight: 12}}
|
|
||||||
/>
|
|
||||||
<RaisedButton
|
|
||||||
label="Next >"
|
|
||||||
primary={true}
|
|
||||||
onClick={this.handleNext.bind(this)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Step2;
|
|
||||||
2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Overview/PublisherOverview.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Overview/PublisherOverview.jsx
2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Overview/PublisherOverview.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Overview/PublisherOverview.jsx
@ -1,38 +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 React, {Component} from 'react';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Platform Create component
|
|
||||||
* */
|
|
||||||
class PlatformCreate extends Component {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
Create Platform
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default PlatformCreate;
|
|
||||||
@ -0,0 +1,308 @@
|
|||||||
|
/*
|
||||||
|
* 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 Dropzone from 'react-dropzone';
|
||||||
|
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 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';
|
||||||
|
import Close from 'material-ui/svg-icons/navigation/close';
|
||||||
|
import {Card, CardActions, CardTitle} from 'material-ui/Card';
|
||||||
|
import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Platform Create component.
|
||||||
|
* Contains following components:
|
||||||
|
* * Platform Name
|
||||||
|
* * Platform Description
|
||||||
|
* * Platform Icon
|
||||||
|
* * Whether the platform needs an app to be installed.
|
||||||
|
* * Whether the platform is enabled by default.
|
||||||
|
* * Whether the platform is shared with tenants.
|
||||||
|
* */
|
||||||
|
class PlatformCreate extends Component {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
enabled: true,
|
||||||
|
allTenants: false,
|
||||||
|
files: [],
|
||||||
|
platformProperties: [],
|
||||||
|
selectedProperty: 0,
|
||||||
|
name: "",
|
||||||
|
description: "",
|
||||||
|
property: "",
|
||||||
|
icon: [],
|
||||||
|
propertyTypes: [
|
||||||
|
{key: 0, value: 'String'},
|
||||||
|
{key: 1, value: 'Number'},
|
||||||
|
{key: 2, value: 'Boolean'},
|
||||||
|
{key: 3, value: 'File'}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles toggle button actions.
|
||||||
|
* One method is used for all the toggle buttons and, each toggle is identified by the id.
|
||||||
|
* */
|
||||||
|
_handleToggle(event) {
|
||||||
|
switch (event.target.id) {
|
||||||
|
case "enabled" : {
|
||||||
|
let enabled = this.state.enabled;
|
||||||
|
this.setState({enabled: !enabled});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "tenant" : {
|
||||||
|
let allTenants = this.state.allTenants;
|
||||||
|
this.setState({allTenants: !allTenants});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Triggers the onChange action on property type selection.
|
||||||
|
* */
|
||||||
|
_onPropertySelect = (event, index, value) => {
|
||||||
|
console.log(this.state.propertyTypes[value]);
|
||||||
|
this.setState({selectedProperty: value});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the selected property from the property list.
|
||||||
|
* */
|
||||||
|
_removeProperty(property) {
|
||||||
|
let properties = this.state.platformProperties;
|
||||||
|
properties.splice(properties.indexOf(property), 1);
|
||||||
|
this.setState({platformProperties: properties});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add a new platform property.
|
||||||
|
* */
|
||||||
|
_addProperty() {
|
||||||
|
let property = this.state.property;
|
||||||
|
let selected = this.state.selectedProperty;
|
||||||
|
|
||||||
|
this.setState({platformProperties:
|
||||||
|
this.state.platformProperties.concat([
|
||||||
|
{
|
||||||
|
key: property,
|
||||||
|
value: this.state.propertyTypes[selected].value
|
||||||
|
}]),
|
||||||
|
property: "",
|
||||||
|
selectedProperty: 0});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Triggers in onChange event of text fields.
|
||||||
|
* Text fields are identified by their ids and the value will be persisted in the component state.
|
||||||
|
* */
|
||||||
|
_onTextChange = (event, value) => {
|
||||||
|
let property = this.state.property;
|
||||||
|
let name = this.state.name;
|
||||||
|
let description = this.state.description;
|
||||||
|
|
||||||
|
switch (event.target.id) {
|
||||||
|
case "name": {
|
||||||
|
name = value;
|
||||||
|
this.setState({name: name});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case "description": {
|
||||||
|
description = value;
|
||||||
|
this.setState({description: description});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case "property": {
|
||||||
|
property = value;
|
||||||
|
this.setState({property: property});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
_onCreatePlatform() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the uploaded icon.
|
||||||
|
* */
|
||||||
|
_removeIcon(event) {
|
||||||
|
this.setState({icon: []});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clears the user entered values in the form.
|
||||||
|
* */
|
||||||
|
_clearForm() {
|
||||||
|
this.setState({enabled: true,
|
||||||
|
allTenants: false,
|
||||||
|
files: [],
|
||||||
|
platformProperties: [],
|
||||||
|
selectedProperty: 0,
|
||||||
|
name: "",
|
||||||
|
description: "",
|
||||||
|
property: "",})
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
platformProperties,
|
||||||
|
allTenants,
|
||||||
|
enabled,
|
||||||
|
selectedProperty,
|
||||||
|
propertyTypes,
|
||||||
|
name,
|
||||||
|
description,
|
||||||
|
property} = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
|
||||||
|
<Card>
|
||||||
|
<CardTitle title="Create Platform"/>
|
||||||
|
|
||||||
|
<CardActions>
|
||||||
|
<div style={{width: '100%', margin: 'auto', paddingLeft: '10px'}}>
|
||||||
|
<form>
|
||||||
|
<TextField
|
||||||
|
hintText="Enter the Platform Name."
|
||||||
|
id="name"
|
||||||
|
floatingLabelText="Name*"
|
||||||
|
floatingLabelFixed={true}
|
||||||
|
value={name}
|
||||||
|
onChange={this._onTextChange.bind(this)}
|
||||||
|
/><br/>
|
||||||
|
<TextField
|
||||||
|
id="description"
|
||||||
|
hintText="Enter the Platform Description."
|
||||||
|
floatingLabelText="Description*"
|
||||||
|
floatingLabelFixed={true}
|
||||||
|
multiLine={true}
|
||||||
|
rows={2}
|
||||||
|
value={description}
|
||||||
|
onChange={this._onTextChange.bind(this)}
|
||||||
|
/><br/><br/>
|
||||||
|
<Toggle
|
||||||
|
id="tenant"
|
||||||
|
label="Shared with all Tenants"
|
||||||
|
labelPosition="right"
|
||||||
|
onToggle={this._handleToggle.bind(this)}
|
||||||
|
toggled={allTenants}
|
||||||
|
/> <br/>
|
||||||
|
<Toggle
|
||||||
|
id="enabled"
|
||||||
|
label="Enabled"
|
||||||
|
labelPosition="right"
|
||||||
|
onToggle={this._handleToggle.bind(this)}
|
||||||
|
toggled={enabled}
|
||||||
|
/> <br/>
|
||||||
|
<div>
|
||||||
|
<p style={{color: '#BaBaBa'}}>Platform Properties</p>
|
||||||
|
<div id="property-container">
|
||||||
|
{platformProperties.map((p) => {
|
||||||
|
return <div key={p.key}>{p.key} : {p.value}
|
||||||
|
<IconButton onClick={this._removeProperty.bind(this, p)}>
|
||||||
|
<Close style={{height: '10px', width: '10px'}}/>
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div style={{display: 'flex'}}>
|
||||||
|
<TextField
|
||||||
|
id="property"
|
||||||
|
hintText="Property Name"
|
||||||
|
floatingLabelText="Platform Property*"
|
||||||
|
floatingLabelFixed={true}
|
||||||
|
value={this.state.property}
|
||||||
|
onChange={this._onTextChange.bind(this)}
|
||||||
|
/> <em/>
|
||||||
|
<SelectField
|
||||||
|
style={{flex: '1 1 23% 1', margin: '0 1%'}}
|
||||||
|
floatingLabelText="Property Type"
|
||||||
|
value={selectedProperty}
|
||||||
|
floatingLabelFixed={true}
|
||||||
|
onChange={this._onPropertySelect.bind(this)}>
|
||||||
|
{propertyTypes.map((type) => {
|
||||||
|
return <MenuItem key={type.key}
|
||||||
|
value={type.key}
|
||||||
|
primaryText={type.value}/>
|
||||||
|
})}
|
||||||
|
</SelectField>
|
||||||
|
<IconButton onClick={this._addProperty.bind(this)}>
|
||||||
|
<AddCircleOutline/>
|
||||||
|
</IconButton>
|
||||||
|
<br/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{/*<p style={{color: '#f44336'}}>{this.state.errors["Icon"]}</p>*/}
|
||||||
|
<p style={{color: '#BDBDBD'}}>Platform Icon*:</p>
|
||||||
|
<GridList style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexWrap: 'nowrap',
|
||||||
|
overflowX: 'auto',
|
||||||
|
}} 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 style={
|
||||||
|
{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}
|
||||||
|
}
|
||||||
|
accept="image/jpeg, image/png"
|
||||||
|
onDrop={(icon, rejected) => {this.setState({icon, rejected})}}>
|
||||||
|
<p style={{margin: '70px 40px 70px 70px'}}>+</p>
|
||||||
|
</Dropzone> : <div />}
|
||||||
|
</GridList>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<RaisedButton primary={true} label="Create"
|
||||||
|
onClick={this._onCreatePlatform.bind(this)}/>
|
||||||
|
<FlatButton label="Cancel" onClick={this._clearForm.bind(this)}/>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</CardActions>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
PlatformCreate.prototypes = {
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PlatformCreate;
|
||||||
@ -1,38 +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 React, {Component} from 'react';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Platform Listing component.
|
|
||||||
* */
|
|
||||||
class PlatformListing extends Component {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
Platform View
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default PlatformListing;
|
|
||||||
@ -0,0 +1,99 @@
|
|||||||
|
/*
|
||||||
|
* 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 TextField from 'material-ui/TextField';
|
||||||
|
import DataTable from '../UIComponents/DataTable';
|
||||||
|
import {Card, CardActions, CardTitle} from 'material-ui/Card';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The App Create Component.
|
||||||
|
*
|
||||||
|
* Application creation is handled through a Wizard. (We use Material UI Stepper.)
|
||||||
|
*
|
||||||
|
* In each step, data will be set to the state separately.
|
||||||
|
* When the wizard is completed, data will be arranged and sent to the api.
|
||||||
|
* */
|
||||||
|
class PlatformListing extends Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
data: [],
|
||||||
|
asc: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
//Fetch all the applications from backend and create application objects.
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles the search action.
|
||||||
|
* When typing in the search bar, this method will be invoked.
|
||||||
|
* */
|
||||||
|
_searchApplications(word) {
|
||||||
|
let searchedData = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles sort data function and toggles the asc state.
|
||||||
|
* asc: true : sort in ascending order.
|
||||||
|
* */
|
||||||
|
_sortData() {
|
||||||
|
let isAsc = this.state.asc;
|
||||||
|
let datas = isAsc?this.data.sort(this._compare):this.data.reverse();
|
||||||
|
this.setState({data: datas, asc: !isAsc});
|
||||||
|
}
|
||||||
|
|
||||||
|
_compare(a, b) {
|
||||||
|
if (a.applicationName < b.applicationName)
|
||||||
|
return -1;
|
||||||
|
if (a.applicationName > b.applicationName)
|
||||||
|
return 1;
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
_onRowClick(id) {
|
||||||
|
console.log(id)
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
|
||||||
|
<Card style={{display: 'flex', flexWrap: 'wrap'}}>
|
||||||
|
<TextField hintText="Search"
|
||||||
|
style={{float:'right', paddingRight: '2px'}}
|
||||||
|
onChange={this._searchApplications.bind(this)}/>
|
||||||
|
<CardTitle title="Platforms" style={{display: 'flex', flexWrap: 'wrap'}}/>
|
||||||
|
<CardActions>
|
||||||
|
|
||||||
|
</CardActions>
|
||||||
|
<DataTable headers={this.headers}
|
||||||
|
data={this.data}
|
||||||
|
handleRowClick={this._onRowClick.bind(this)}
|
||||||
|
noDataMessage={{type: 'button', text: 'Create Platform'}}/>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
PlatformListing.propTypes = {};
|
||||||
|
|
||||||
|
export default withRouter(PlatformListing);
|
||||||
0
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformView.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformView.jsx
0
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformView.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformView.jsx
0
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Reviews/ReviewListing.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Reviews/ReviewListing.jsx
0
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Reviews/ReviewListing.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Reviews/ReviewListing.jsx
@ -1,38 +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 React, {Component} from 'react';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Error page.
|
|
||||||
* */
|
|
||||||
class DataTable extends Component {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
Data Table
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DataTable;
|
|
||||||
@ -0,0 +1,125 @@
|
|||||||
|
/*
|
||||||
|
* 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 DataTableRow from './DataTableRow';
|
||||||
|
import DataTableHeader from './DataTableHeader';
|
||||||
|
import RaisedButton from 'material-ui/RaisedButton';
|
||||||
|
import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The Custom Table Component.
|
||||||
|
* This component wraps the material-ui Table component and add some extra functionalities.
|
||||||
|
* 1. Table header click. (For sorting)
|
||||||
|
* 2. Table row click.
|
||||||
|
*
|
||||||
|
* The main sort function is defined in the component where the data table is created and passed to the
|
||||||
|
* DataTable component via props.
|
||||||
|
*
|
||||||
|
* Following are the DataTable proptypes.
|
||||||
|
* 1. Headers: Table headers. This is an array of Json Objects.
|
||||||
|
* An Header Object contains the properties of each header. Currently following properties
|
||||||
|
* are supported.
|
||||||
|
* * sortable: boolean : whether the table column is sortable or not.
|
||||||
|
* * sort: func : If sortable, the sort function.
|
||||||
|
* * sort: func : If sortable, the sort function.
|
||||||
|
* * sort: func : If sortable, the sort function.
|
||||||
|
* * label: String: The Table header string.
|
||||||
|
* * id: String: Unique id for header.
|
||||||
|
*
|
||||||
|
* 2. Data: The list of data that needs to be displayed in the table.
|
||||||
|
* This is also a json array of data objects.
|
||||||
|
* The Json object should contain key: value pair where the key is the header id.
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
class DataTable extends Component {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
data: [],
|
||||||
|
headers: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
this.setState({data: this.props.data, headers: this.props.headers})
|
||||||
|
}
|
||||||
|
|
||||||
|
shouldComponentUpdate(nextProps, nextState) {
|
||||||
|
console.log("next Props", nextProps.data);
|
||||||
|
this.setState({data: nextProps.data});
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Triggers when user click on table row.
|
||||||
|
* This method invokes the parent method handleRowClick, which is passed via props.
|
||||||
|
* */
|
||||||
|
_handleRowClick(id) {
|
||||||
|
this.props.handleRowClick(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {data, headers} = this.state;
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
|
||||||
|
let noDataContent = null;
|
||||||
|
|
||||||
|
if (this.props.noDataMessage.type === 'button') {
|
||||||
|
noDataContent = <div><RaisedButton label={this.props.noDataMessage.text}/></div>
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
return (<Table
|
||||||
|
selectable={ false }>
|
||||||
|
<TableHeader displaySelectAll={ false }
|
||||||
|
adjustForCheckbox={ false }>
|
||||||
|
<TableRow>
|
||||||
|
{headers.map((header) => {
|
||||||
|
return (<DataTableHeader key={header.data_id}
|
||||||
|
style={{display: 'flex'}} header={header}/>)
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{data.map((dataItem) =>{
|
||||||
|
return (<DataTableRow key={dataItem.id}
|
||||||
|
dataItem={dataItem}
|
||||||
|
handleClick={this._handleRowClick.bind(this)}/>)
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</Table>)
|
||||||
|
}
|
||||||
|
return (<div>{noDataContent}</div>);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
DataTable.prototypes = {
|
||||||
|
data: PropTypes.arrayOf(Object),
|
||||||
|
headers: PropTypes.arrayOf(Object),
|
||||||
|
sortData: PropTypes.func,
|
||||||
|
handleRowClick: PropTypes.func,
|
||||||
|
noDataMessage: PropTypes.object
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DataTable;
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
/*
|
||||||
|
* 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 FlatButton from 'material-ui/FlatButton';
|
||||||
|
import {TableHeaderColumn} from 'material-ui/Table';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Data Table header component.
|
||||||
|
* This component creates the header elements of the table.
|
||||||
|
* */
|
||||||
|
class DataTableHeader extends Component {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The onClick function of the table header.
|
||||||
|
* Invokes the function passed in the header object.
|
||||||
|
* */
|
||||||
|
_tableHeaderClick() {
|
||||||
|
this.props.header.sort();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let headerCell = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If the header is sortable, create a button with onClick handler.
|
||||||
|
* else create a span element with label as the table header.
|
||||||
|
* */
|
||||||
|
if (this.props.header.sortable) {
|
||||||
|
headerCell = <FlatButton label={this.props.header.label}
|
||||||
|
onClick={this._tableHeaderClick.bind(this)}
|
||||||
|
style={{color: '#bdbdbd'}}/>;
|
||||||
|
} else {
|
||||||
|
headerCell = <span style={{position: 'relative',
|
||||||
|
paddingLeft: '16px',
|
||||||
|
paddingRight: '16px',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
fontWeight: 'normal',
|
||||||
|
color: '#bdbdbd',
|
||||||
|
fontSize: '14px'}}>{this.props.header.label}</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TableHeaderColumn key={this.props.header.id} style={{paddingLeft: '0px'}} >
|
||||||
|
{headerCell}
|
||||||
|
</TableHeaderColumn>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
DataTableHeader.prototypes = {
|
||||||
|
header: PropTypes.object
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DataTableHeader;
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
/*
|
||||||
|
* 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 {TableRow, TableRowColumn} from 'material-ui/Table';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Data table row component.
|
||||||
|
* This component created a row in the data table according to the props.
|
||||||
|
* */
|
||||||
|
class DataTableRow extends Component {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
dataItem: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
this.setState({dataItem: this.props.dataItem})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Triggers the click event on the data table row.
|
||||||
|
* */
|
||||||
|
_handleClick() {
|
||||||
|
this.props.handleClick(this.state.dataItem.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {dataItem} = this.state;
|
||||||
|
return (
|
||||||
|
<TableRow key={this.props.key} onClick={this._handleClick.bind(this)} >
|
||||||
|
{Object.keys(dataItem).map((key) => {
|
||||||
|
if (key !== 'id') {
|
||||||
|
return <TableRowColumn style={{alignItems: 'center'}}
|
||||||
|
key={key}>{dataItem[key]}</TableRowColumn>
|
||||||
|
} else {
|
||||||
|
return <TableRowColumn key={key}/>
|
||||||
|
}
|
||||||
|
|
||||||
|
} )}
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
DataTableRow.propTypes = {
|
||||||
|
onClick: PropTypes.func,
|
||||||
|
data: PropTypes.object
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DataTableRow;
|
||||||
Loading…
Reference in new issue