Added filtering option

feature/appm-store/pbac
Jayasanka 6 years ago
parent 1c4779d7cc
commit e3fcf68c3e

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

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import "antd/dist/antd.css"; 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; 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 = [{ const columns = [{
title: '', title: '',
dataIndex: 'icon', dataIndex: 'icon',
@ -29,6 +136,7 @@ const columns = [{
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
render: text => <a href="javascript:;">{text}</a>, render: text => <a href="javascript:;">{text}</a>,
...this.getColumnSearchProps('name'),
}, { }, {
title: 'Platform', title: 'Platform',
dataIndex: '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 ( return (
<div> <div>
<PageHeader <PageHeader

Loading…
Cancel
Save