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,61 +20,7 @@ const routes = [
}, },
]; ];
const columns = [{
title: '',
dataIndex: 'icon',
key: 'icon',
render: text => <Avatar size="large" src={text}/>,
}, {
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a href="javascript:;">{text}</a>,
}, {
title: 'Platform',
dataIndex: 'platform',
key: 'platform',
}, {
title: 'Type',
dataIndex: 'type',
key: 'type',
}, {
title: 'Status',
key: 'status',
dataIndex: 'status',
render: tag => {
let color;
switch (tag) {
case 'published':
color = 'green';
break;
case 'removed':
color = 'red'
break;
case 'default':
color = 'blue'
}
return <Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>;
},
}, {
title: 'Published Version',
dataIndex: 'version',
key: 'version',
}, {
title: 'Last Updated',
dataIndex: 'updated_at',
key: 'updated_at',
},{
title: 'Action',
key: 'action',
render: () => (
<span>
<a href="javascript:;">Edit</a>
<Divider type="vertical" />
<a href="javascript:;">Manage</a>
</span>
),
}];
const data = [{ const data = [{
@ -108,12 +55,134 @@ const data = [{
class Apps extends React.Component { class Apps extends React.Component {
routes; routes;
state = {
searchText: '',
};
constructor(props) { constructor(props) {
super(props); super(props);
this.routes = props.routes; 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() { render() {
const columns = [{
title: '',
dataIndex: 'icon',
key: 'icon',
render: text => <Avatar size="large" src={text}/>,
}, {
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a href="javascript:;">{text}</a>,
...this.getColumnSearchProps('name'),
}, {
title: 'Platform',
dataIndex: 'platform',
key: 'platform',
}, {
title: 'Type',
dataIndex: 'type',
key: 'type',
}, {
title: 'Status',
key: 'status',
dataIndex: 'status',
render: tag => {
let color;
switch (tag) {
case 'published':
color = 'green';
break;
case 'removed':
color = 'red'
break;
case 'default':
color = 'blue'
}
return <Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>;
},
}, {
title: 'Published Version',
dataIndex: 'version',
key: 'version',
}, {
title: 'Last Updated',
dataIndex: 'updated_at',
key: 'updated_at',
},{
title: 'Action',
key: 'action',
render: () => (
<span>
<a href="javascript:;">Edit</a>
<Divider type="vertical" />
<a href="javascript:;">Manage</a>
</span>
),
}];
return ( return (
<div> <div>
<PageHeader <PageHeader

Loading…
Cancel
Save