Added filtering option

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json

@@ -13,6 +13,7 @@
     "antd": "^3.15.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
+    "react-highlight-words": "^0.16.0",
     "react-router-config": "^5.0.0",
     "react-router-dom": "latest",
     "react-scripts": "2.1.8"

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js

@@ -1,6 +1,7 @@
 import React from "react";
 import "antd/dist/antd.css";
-import {Table, Divider, Tag, Card, PageHeader, Typography, Avatar} from "antd";
+import {Table, Divider, Tag, Card, PageHeader, Typography, Avatar,Input, Button, Icon} from "antd";
+import Highlighter from 'react-highlight-words';
 
 const Paragraph = Typography;
 
@@ -19,6 +20,112 @@ const routes = [
     },
 ];
 
+
+
+
+const data = [{
+    key: '1',
+    icon: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
+    name: 'John Brown',
+    platform: 'android',
+    type: 'Enterprise',
+    status: 'published',
+    version: '13.0.0.1',
+    updated_at: '27-03-2019 08:27'
+},{
+    key: '2',
+    icon: 'http://aztechbeat.com/wp-content/uploads/2014/04/confide-app-icon.png',
+    name: 'Lorem Ipsum',
+    platform: 'ios',
+    type: 'Enterprise',
+    status: 'published',
+    version: '2.3.1.2',
+    updated_at: '27-03-2019 09:45'
+},{
+    key: '3',
+    icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRx2Xx1-hnH16EGZHUlT06nOcfGODPoboA2TXKaBVtODto4lJtK',
+    name: 'Lorem Ipsum',
+    platform: 'ios',
+    type: 'Enterprise',
+    status: 'removed',
+    version: '4.1.1.0',
+    updated_at: '27-03-2019 09:46'
+}];
+
+class Apps extends React.Component {
+    routes;
+
+
+    state = {
+        searchText: '',
+    };
+
+
+    constructor(props) {
+        super(props);
+        this.routes = props.routes;
+    }
+
+    getColumnSearchProps = (dataIndex) => ({
+        filterDropdown: ({
+                             setSelectedKeys, selectedKeys, confirm, clearFilters,
+                         }) => (
+            <div style={{ padding: 8 }}>
+                <Input
+                    ref={node => { this.searchInput = node; }}
+                    placeholder={`Search ${dataIndex}`}
+                    value={selectedKeys[0]}
+                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+                    onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
+                    style={{ width: 188, marginBottom: 8, display: 'block' }}
+                />
+                <Button
+                    type="primary"
+                    onClick={() => this.handleSearch(selectedKeys, confirm)}
+                    icon="search"
+                    size="small"
+                    style={{ width: 90, marginRight: 8 }}
+                >
+                    Search
+                </Button>
+                <Button
+                    onClick={() => this.handleReset(clearFilters)}
+                    size="small"
+                    style={{ width: 90 }}
+                >
+                    Reset
+                </Button>
+            </div>
+        ),
+        filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />,
+        onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
+        onFilterDropdownVisibleChange: (visible) => {
+            if (visible) {
+                setTimeout(() => this.searchInput.select());
+            }
+        },
+        render: (text) => (
+            <Highlighter
+                highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
+                searchWords={[this.state.searchText]}
+                autoEscape
+                textToHighlight={text.toString()}
+            />
+        ),
+    })
+
+    handleSearch = (selectedKeys, confirm) => {
+        confirm();
+        this.setState({ searchText: selectedKeys[0] });
+    }
+
+    handleReset = (clearFilters) => {
+        clearFilters();
+        this.setState({ searchText: '' });
+    }
+
+
+    render() {
         const columns = [{
             title: '',
             dataIndex: 'icon',
@@ -29,6 +136,7 @@ const columns = [{
             dataIndex: 'name',
             key: 'name',
             render: text => <a href="javascript:;">{text}</a>,
+            ...this.getColumnSearchProps('name'),
         }, {
             title: 'Platform',
             dataIndex: 'platform',
@@ -75,45 +183,6 @@ const columns = [{
             ),
         }];
 
-
-const data = [{
-    key: '1',
-    icon: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
-    name: 'John Brown',
-    platform: 'android',
-    type: 'Enterprise',
-    status: 'published',
-    version: '13.0.0.1',
-    updated_at: '27-03-2019 08:27'
-},{
-    key: '2',
-    icon: 'http://aztechbeat.com/wp-content/uploads/2014/04/confide-app-icon.png',
-    name: 'Lorem Ipsum',
-    platform: 'ios',
-    type: 'Enterprise',
-    status: 'published',
-    version: '2.3.1.2',
-    updated_at: '27-03-2019 09:45'
-},{
-    key: '3',
-    icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRx2Xx1-hnH16EGZHUlT06nOcfGODPoboA2TXKaBVtODto4lJtK',
-    name: 'Lorem Ipsum',
-    platform: 'ios',
-    type: 'Enterprise',
-    status: 'removed',
-    version: '4.1.1.0',
-    updated_at: '27-03-2019 09:46'
-}];
-
-class Apps extends React.Component {
-    routes;
-
-    constructor(props) {
-        super(props);
-        this.routes = props.routes;
-    }
-
-    render() {
         return (
             <div>
                 <PageHeader