From ed2af13836a314cc157b84bb3e6452d5ead69c34 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Thu, 5 Oct 2017 03:45:31 +0530 Subject: [PATCH] Added custom application listing table. --- .../Application/ApplicationListing.jsx | 104 ++++++++---------- 1 file changed, 43 insertions(+), 61 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx index 3d05b1b889..c89ad7b10b 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx @@ -18,7 +18,7 @@ import React, {Component} from 'react'; import {withRouter} from 'react-router-dom'; -import {Button, Col, Row, Table} from 'reactstrap'; +import {Button, Col, Row} from 'reactstrap'; import Drawer from '../UIComponents/Drawer/Drawer'; import ApplicationView from './View/ApplicationView'; import {FormattedMessage} from 'react-intl'; @@ -96,6 +96,7 @@ class ApplicationListing extends Component { data_id: "applicationName", data_type: "string", sortable: true, + locale: "Application.name", label: "Application Name", sort: this.sortData }, @@ -103,18 +104,21 @@ class ApplicationListing extends Component { data_id: "platform", data_type: "image_array", sortable: false, + locale: "Platform", label: "Platform" }, { data_id: "category", data_type: "string", sortable: false, + locale: "Category", label: "Category" }, { data_id: "status", data_type: "string", sortable: false, + locale: "Status", label: "Status" }, { @@ -125,14 +129,12 @@ class ApplicationListing extends Component { } ]; - componentWillMount() { let getApps = ApplicationMgtApi.getApplications(); getApps.then(response => { - console.log(response.data.applications); + console.log(response); this.setState({searchedApplications: response.data.applications}); - // console.log(this.setState({data: response.data}), console.log(this.state)); }).catch(err => { AuthHandler.unauthorizedErrorHandler(err); }); @@ -214,66 +216,46 @@ class ApplicationListing extends Component { } render() { + //TODO: Move this to a data table component. return ( -
- - -
- -
- -
- - - - - - - {/* TODO: Remove console.log and add sort method. */} - - - - - - - - - {this.state.searchedApplications.map( - (application) => { - return ( - this.onRowClick(application.uuid)}> - - - - - - - - ) - } - )} - -
{ - console.log("sort") - }}> - -
- {/* TODO: Move this styles to css. */} - - {application.name}{application.category.name}{application.platform.name}{application.currentLifecycle.lifecycleState.name} - -
- + + {this.headers.map(header => { + if (header.data_id === "applicationName") { + return ( + ) + } else if (header.data_id === "image") { + return ({header.label}) + } + return () + })} +
+ {this.state.searchedApplications.map(application => { + return ( + { + this.onRowClick(application.uuid) + }}> + + + + {application.name} + {application.platform.name} + {application.category.name} + {application.currentLifecycle.lifecycleState.name} + + + + + + ) + })}