From 61befd5a3b8f868b00ec496c026895e53a14b4a4 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 27 Aug 2017 21:35:44 +0530 Subject: [PATCH] Created the DataTable component. --- .../src/main/resources/publisher/package.json | 1 - .../src/components/UIComponents/DataTable.js | 83 +++++++++++++++---- .../UIComponents/DataTableHeader.js | 57 +++++++++++-- .../components/UIComponents/DataTableRow.js | 40 ++++++++- 4 files changed, 155 insertions(+), 26 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json index 804eea3d0de..5e5fd515b50 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json @@ -14,7 +14,6 @@ "history": "^4.6.3", "latest-version": "^3.1.0", "material-ui": "^0.19.0", - "material-ui-datatables": "^0.18.2", "prop-types": "^15.5.10", "qs": "^6.5.0", "react": "^15.6.1", diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js index 6e9f52444b8..5c2cb6959b9 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js @@ -16,39 +16,92 @@ * under the License. */ -import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import {Table, TableBody} from 'material-ui/Table'; -import DataTableHeader from './DataTableHeader'; +import React, {Component} from 'react'; import DataTableRow from './DataTableRow'; +import DataTableHeader from './DataTableHeader'; +import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table'; + /** - * Error page. + * 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}) } - render() { - return ( - - - {this.props.headers.map((header) => { + /** + * 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; + if (data.length > 0) { + return (
+ + + {headers.map((header) => { + return () + } + )} + + + + {data.map((dataItem) =>{ + return () + })} -
- ); + )} + + return (
No apps
); + } } DataTable.prototypes = { data: PropTypes.arrayOf(Object), - headers: PropTypes.arrayOf(String) + headers: PropTypes.arrayOf(Object), + sortData: PropTypes.func, + handleRowClick: PropTypes.func }; export default DataTable; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js index dd695c249d4..f9e793f6cf2 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js @@ -15,20 +15,61 @@ * specific language governing permissions and limitations * under the License. */ -import React, {Component} from 'react'; + 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 = ; + } else { + headerCell = {this.props.header.label}; + } + + return ( + + {headerCell} + + ); + } } DataTableHeader.prototypes = { - /*sortable : bool - * text: string (The header text) - * */ - label: PropTypes.string, - sortable: PropTypes.bool, - sort: PropTypes.func + header: PropTypes.object }; -export default DataTableHeader; \ No newline at end of file +export default DataTableHeader; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js index 805c211f2e7..a8df991091b 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js @@ -15,11 +15,47 @@ * specific language governing permissions and limitations * under the License. */ -import React, {Component} from 'react'; + 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}) + } + + _handleClick() { + this.props.handleClick(this.state.dataItem.id); + } + + render() { + const {dataItem} = this.state; + return ( + + {Object.keys(dataItem).map((key) => { + if (key !== 'id') { + return {dataItem[key]} + } else { + return + } + + } )} + + ); + } } DataTableRow.propTypes = { @@ -27,4 +63,4 @@ DataTableRow.propTypes = { data: PropTypes.object }; -export default DataTableRow; \ No newline at end of file +export default DataTableRow;