684 lines
16 KiB
JavaScript
684 lines
16 KiB
JavaScript
import React from "react";
|
|
import {
|
|
Table,
|
|
Input,
|
|
Icon,
|
|
Divider,
|
|
Tooltip,
|
|
Popconfirm,
|
|
message,
|
|
Button,
|
|
Pagination,
|
|
Row,
|
|
Col
|
|
} from "antd";
|
|
//import { callApi } from "utils/Api";
|
|
import { Link, withRouter } from "react-router-dom";
|
|
import querystring from "querystring";
|
|
import { encrypt, decrypt } from 'utils/encrypto'
|
|
// const querystring = require("querystring");
|
|
const { Column, ColumnGroup } = Table;
|
|
const Search = Input.Search;
|
|
|
|
class CustomTable extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
data: [],
|
|
loading: false,
|
|
filteredInfo: null,
|
|
sortedInfo: null,
|
|
pageName: '_page',
|
|
currentPage: 1,
|
|
sizeName: '_limit',
|
|
pageSize: 10,
|
|
totalData: 100,
|
|
searchValue: null,
|
|
headerColumns: props.columns.map(column => {
|
|
if (column.sorter) {
|
|
column.sorter = (a, b) => a[column.dataIndex] - b[column.dataIndex];
|
|
column.sortOrder = null;
|
|
}
|
|
return column;
|
|
})
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.handleInitialLoad()
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState, snapshot) {
|
|
const { currentPage, pageSize, pageName } = this.state;
|
|
|
|
if (prevProps.location.search !== this.props.location.search) {
|
|
|
|
if (this.props.location.search === "") {
|
|
this.handleclearAll();
|
|
|
|
}
|
|
}
|
|
|
|
if (prevState.sortedInfo !== this.state.sortedInfo) {
|
|
//Sort Columns Function
|
|
this.setState({
|
|
headerColumns: this.state.headerColumns.map(column => {
|
|
if (
|
|
this.state.sortedInfo &&
|
|
this.state.sortedInfo.columnKey === column.dataIndex
|
|
) {
|
|
column.sortOrder = this.state.sortedInfo.order;
|
|
}
|
|
return column;
|
|
})
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
handleInitialLoad = () => {
|
|
const { search } = this.props.location;
|
|
const { currentPage, pageSize, pageName, sizeName } = this.state;
|
|
|
|
if (search) {
|
|
let parsed = querystring.parse(search.substring(1));
|
|
console.log('====================================');
|
|
console.log(parsed,pageName, sizeName,parsed[pageName], parsed[sizeName], "&&&&&&SEARCH!!");
|
|
console.log('====================================');
|
|
|
|
if (parsed) {
|
|
if (parsed[pageName] && parsed[sizeName] && parsed.q && parsed._sort && parsed._order ) {
|
|
this.handleUpdateData({
|
|
page: parseInt(parsed[pageName]),
|
|
size: parseInt(parsed[sizeName]),
|
|
search: parsed.q
|
|
});
|
|
} else if (parsed[pageName] && parsed[sizeName] && parsed.q) {
|
|
alert("Search")
|
|
this.handleUpdateData({
|
|
page: parseInt(parsed[pageName]),
|
|
size: parseInt(parsed[sizeName]),
|
|
search: parsed.q
|
|
});
|
|
} else if (parsed[pageName] && parsed[sizeName]) {
|
|
this.handleUpdateData({
|
|
page: parseInt(parsed[pageName]),
|
|
size: parseInt(parsed[sizeName]),
|
|
});
|
|
}
|
|
// this.fetch({
|
|
// ...parsed
|
|
// });
|
|
}
|
|
} else {
|
|
this.handleUpdateData({
|
|
page: currentPage,
|
|
size: pageSize,
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
handleTableChange = (pagination, filters, sorter) => {
|
|
const { currentPage, pageSize, searchValue } = this.state;
|
|
console.log("====================================");
|
|
console.log(filters, sorter, "tesadasdas");
|
|
console.log("====================================");
|
|
// this.setState({
|
|
// filteredInfo: filters,
|
|
// sortedInfo: sorter
|
|
// });
|
|
if (Object.keys(sorter).length !== 0) {
|
|
// this.fetch({
|
|
// _page: currentPage,
|
|
// _limit: pageSize,
|
|
// _sort: sorter.field,
|
|
// _order: sorter.order === "ascend" ? "asc" : "desc",
|
|
|
|
// ...filters
|
|
// });
|
|
|
|
if (searchValue) {
|
|
this.handleUpdateData({
|
|
sort: sorter,
|
|
filter: filters,
|
|
search: searchValue
|
|
});
|
|
} else {
|
|
this.handleUpdateData({ sort: sorter, filter: filters });
|
|
}
|
|
} else {
|
|
if (searchValue) {
|
|
this.handleUpdateData({ filter: filters, search: searchValue });
|
|
} else {
|
|
this.handleUpdateData({ filter: filters });
|
|
}
|
|
// this.fetch({
|
|
// _page: currentPage,
|
|
// _limit: pageSize,
|
|
// ...filters
|
|
// });
|
|
}
|
|
};
|
|
|
|
fetch = async (params = {}) => {
|
|
let { url, history } = this.props;
|
|
const stringified = querystring.stringify(params);
|
|
|
|
console.log("GGGGG3333", url.default, stringified, params, window.location);
|
|
this.setState({ loading: true });
|
|
// history.push(`${url.default}?${stringified}`);
|
|
history.push({
|
|
pathname: url.default,
|
|
search: stringified
|
|
});
|
|
try {
|
|
// let response = await callApi({
|
|
// url: url.default,
|
|
// params: {
|
|
// _page: params._page,
|
|
// _limit: params._limit,
|
|
// ...params
|
|
// }
|
|
// });
|
|
|
|
// if (response.status === 200) {
|
|
// this.setState({
|
|
// loading: false,
|
|
// data: response.data,
|
|
// totalData: response.data.total ? response.data.total : 100
|
|
// });
|
|
// }
|
|
} catch (error) {}
|
|
};
|
|
|
|
handleUpdateData = ({ search, sort, page, size, filter }) => {
|
|
const {
|
|
currentPage,
|
|
pageSize,
|
|
filteredInfo,
|
|
sortedInfo,
|
|
searchValue
|
|
} = this.state;
|
|
|
|
console.log("====================================");
|
|
console.log(
|
|
search, sort, page, size, filter,
|
|
"WWOOOPS!!"
|
|
);
|
|
console.log("====================================");
|
|
|
|
if (search && sort && filter) {
|
|
|
|
this.setState({
|
|
filteredInfo: filter,
|
|
sortedInfo: sort,
|
|
searchValue: search,
|
|
})
|
|
|
|
this.fetch({
|
|
_page: currentPage,
|
|
_limit: pageSize,
|
|
q: search,
|
|
_sort: sort.field,
|
|
_order: sort.order === "ascend" ? "asc" : "desc",
|
|
...filter
|
|
});
|
|
|
|
//filteredInfo value
|
|
} else if (filter) {
|
|
if (sort) {
|
|
|
|
this.setState({
|
|
filteredInfo: filter,
|
|
sortedInfo: sort,
|
|
})
|
|
|
|
this.fetch({
|
|
_page: currentPage,
|
|
_limit: pageSize,
|
|
_sort: sort.field,
|
|
_order: sort.order === "ascend" ? "asc" : "desc",
|
|
...filter
|
|
});
|
|
} else if (search) {
|
|
|
|
this.setState({
|
|
filteredInfo: filter,
|
|
searchValue: search,
|
|
})
|
|
|
|
this.fetch({
|
|
_page: currentPage,
|
|
_limit: pageSize,
|
|
q: search,
|
|
...filter
|
|
});
|
|
} else {
|
|
|
|
this.setState({
|
|
filteredInfo: filter,
|
|
})
|
|
|
|
this.fetch({
|
|
_page: currentPage,
|
|
_limit: pageSize,
|
|
...filter
|
|
});
|
|
}
|
|
//sortedInfo value
|
|
} else if (sort) {
|
|
if (filter) {
|
|
this.setState({
|
|
filteredInfo: filter,
|
|
sortedInfo: sort,
|
|
})
|
|
|
|
this.fetch({
|
|
_page: currentPage,
|
|
_limit: pageSize,
|
|
_sort: sort.field,
|
|
_order: sort.order === "ascend" ? "asc" : "desc",
|
|
...filter
|
|
});
|
|
} else if (search) {
|
|
|
|
this.setState({
|
|
sortedInfo: sort,
|
|
searchValue: search,
|
|
})
|
|
|
|
this.fetch({
|
|
_page: currentPage,
|
|
_limit: pageSize,
|
|
q: search,
|
|
_sort: sort.field,
|
|
_order: sort.order === "ascend" ? "asc" : "desc"
|
|
});
|
|
} else {
|
|
this.setState({
|
|
sortedInfo: sort,
|
|
})
|
|
|
|
this.fetch({
|
|
_page: currentPage,
|
|
_limit: pageSize,
|
|
_sort: sort.field,
|
|
_order: sort.order === "ascend" ? "asc" : "desc"
|
|
});
|
|
}
|
|
|
|
//search Value
|
|
} else if (search) {
|
|
if (filter) {
|
|
|
|
this.setState({
|
|
filteredInfo: filter,
|
|
searchValue: search,
|
|
})
|
|
|
|
this.fetch({
|
|
_page: currentPage,
|
|
_limit: pageSize,
|
|
q: search,
|
|
...filter
|
|
});
|
|
} else if (sort) {
|
|
|
|
this.setState({
|
|
sortedInfo: sort,
|
|
searchValue: search,
|
|
})
|
|
|
|
this.fetch({
|
|
_page: currentPage,
|
|
_limit: pageSize,
|
|
q: search,
|
|
_sort: sort.field,
|
|
_order: sort.order === "ascend" ? "asc" : "desc"
|
|
});
|
|
} else if (page && size) {
|
|
alert(page, size, "OOOPS@")
|
|
this.setState({
|
|
currentPage: page,
|
|
pageSize: size,
|
|
searchValue: search,
|
|
})
|
|
this.fetch({
|
|
_page: page,
|
|
_limit: size,
|
|
q: search
|
|
});
|
|
} else if (page) {
|
|
|
|
this.setState({
|
|
currentPage: page,
|
|
searchValue: search,
|
|
})
|
|
|
|
this.fetch({
|
|
_page: page,
|
|
_limit: pageSize,
|
|
q: search
|
|
});
|
|
} else if (size) {
|
|
|
|
this.setState({
|
|
pageSize: size,
|
|
searchValue: search,
|
|
})
|
|
|
|
this.fetch({
|
|
_page: currentPage,
|
|
_limit: size,
|
|
q: search
|
|
});
|
|
} else {
|
|
|
|
this.setState({
|
|
searchValue: search,
|
|
})
|
|
|
|
this.fetch({
|
|
_page: currentPage,
|
|
_limit: pageSize,
|
|
q: search
|
|
});
|
|
}
|
|
} else {
|
|
if (page && size) {
|
|
this.setState({
|
|
currentPage: page,
|
|
pageSize: size,
|
|
})
|
|
|
|
|
|
this.fetch({
|
|
_page: page,
|
|
_limit: size
|
|
});
|
|
} else if (page) {
|
|
|
|
this.setState({
|
|
currentPage: page,
|
|
})
|
|
|
|
this.fetch({
|
|
_page: page,
|
|
_limit: pageSize
|
|
});
|
|
} else if (size) {
|
|
|
|
this.setState({
|
|
pageSize: size,
|
|
})
|
|
|
|
this.fetch({
|
|
_page: currentPage,
|
|
_limit: size
|
|
});
|
|
} else {
|
|
this.fetch({
|
|
_page: currentPage,
|
|
_limit: pageSize
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
handleSearch = e => {
|
|
const { currentPage, pageSize, filteredInfo, sortedInfo } = this.state;
|
|
console.log("====================================");
|
|
console.log(e);
|
|
console.log("====================================");
|
|
// this.setState({
|
|
// searchValue: e
|
|
// });
|
|
if (e) {
|
|
this.handleUpdateData({ search: e, page: 1 });
|
|
} else {
|
|
this.handleUpdateData({ search: null, page: 1 });
|
|
}
|
|
};
|
|
|
|
handleSearchChange = e => {
|
|
const { currentPage, pageSize, filteredInfo, sortedInfo } = this.state;
|
|
|
|
// this.setState({
|
|
// searchValue: e
|
|
// });
|
|
if (e) {
|
|
this.setState({
|
|
searchValue: e.target.value
|
|
})
|
|
} else {
|
|
this.setState({
|
|
searchValue: null
|
|
})
|
|
}
|
|
};
|
|
|
|
handleDeleteConfirmYes = e => {
|
|
console.log(e);
|
|
message.success("Click on Yes");
|
|
};
|
|
|
|
handleDeleteConfirmNo = e => {
|
|
console.log(e);
|
|
message.error("Click on No");
|
|
};
|
|
handleclearAll = () => {
|
|
console.log("====================================");
|
|
console.log("reset");
|
|
console.log("====================================");
|
|
this.setState({
|
|
filteredInfo: null,
|
|
sortedInfo: null,
|
|
searchValue: null,
|
|
// currentPage: 1,
|
|
// pageSize: 10
|
|
});
|
|
|
|
this.handleUpdateData({
|
|
page: 1,
|
|
size: 10,
|
|
});
|
|
// this.fetch({
|
|
// _page: 1,
|
|
// _limit: 10
|
|
// });
|
|
};
|
|
handlePagination = page => {
|
|
const { pageSize, searchValue } = this.state;
|
|
|
|
// this.fetch({
|
|
// _page: page,
|
|
// _limit: pageSize
|
|
// });
|
|
|
|
if (searchValue) {
|
|
this.handleUpdateData({ page, search: searchValue });
|
|
} else {
|
|
this.handleUpdateData({ page });
|
|
}
|
|
|
|
// this.setState({
|
|
// currentPage: page
|
|
// });
|
|
};
|
|
|
|
handleSizeChange = (current, pageSize) => {
|
|
console.log("TEST!", current, pageSize, searchValue);
|
|
const { searchValue } = this.state;
|
|
// this.fetch({
|
|
// _page: current,
|
|
// _limit: pageSize
|
|
// });
|
|
|
|
if (searchValue) {
|
|
this.handleUpdateData({
|
|
page: current,
|
|
size: pageSize,
|
|
search: searchValue
|
|
});
|
|
} else {
|
|
this.handleUpdateData({ page: current, size: pageSize });
|
|
}
|
|
|
|
// this.setState({
|
|
// currentPage: current,
|
|
// pageSize
|
|
// });
|
|
};
|
|
|
|
|
|
handleRenderActionButton = ({action, item}) => {
|
|
let {keyValue} = this.props
|
|
|
|
let idValue = item[keyValue].toString()
|
|
console.log('====================================');
|
|
|
|
console.log('====================================');
|
|
switch (action.type) {
|
|
case 'edit':
|
|
return <Tooltip key={action.key} placement="top" title={action.name}>
|
|
<Link to={`${action.path}/1`} style={{padding: '5px 8px'}}>
|
|
<Icon type='edit' />
|
|
</Link>
|
|
</Tooltip>
|
|
|
|
break;
|
|
case 'view':
|
|
return <Tooltip key={action.key} placement="top" title={action.name}>
|
|
<Link to={`${action.path}/2`} style={{padding: '5px 8px'}}>
|
|
<Icon type='right-circle-o' />
|
|
</Link>
|
|
</Tooltip>
|
|
|
|
break;
|
|
|
|
case 'delete':
|
|
return <Tooltip key={action.key} placement="top" title={action.name}>
|
|
<Popconfirm
|
|
title="Are you sure delete this item?"
|
|
onConfirm={() => this.handleDeleteConfirmYes(item)}
|
|
onCancel={() => this.handleDeleteConfirmNo(item)}
|
|
okText="Yes"
|
|
cancelText="No" >
|
|
<a href="javascript:;" style={{padding: '5px 8px'}}>
|
|
<Icon type='delete' />
|
|
</a>
|
|
</Popconfirm>
|
|
</Tooltip>
|
|
break;
|
|
|
|
default:
|
|
return null
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
render() {
|
|
|
|
let { columns, keyValue, actions } = this.props;
|
|
let {
|
|
sortedInfo,
|
|
filteredInfo,
|
|
headerColumns,
|
|
currentPage,
|
|
pageSize,
|
|
totalData,
|
|
data,
|
|
searchValue
|
|
} = this.state;
|
|
|
|
// let headerColumns = columns.map(column => {
|
|
// if (column.sorter) {
|
|
// column.sorter = (a, b) => a[column.dataIndex] - b[column.dataIndex];
|
|
// column.sortOrder =
|
|
// sortedInfo &&
|
|
// sortedInfo.columnKey === column.dataIndex &&
|
|
// sortedInfo.order;
|
|
// }
|
|
// return column;
|
|
// });
|
|
|
|
console.log("====================================");
|
|
console.log(currentPage, pageSize, "TESTASDASD");
|
|
console.log("====================================");
|
|
|
|
return (
|
|
<div>
|
|
<div className="table-operations">
|
|
<Button onClick={this.handleclearAll}>
|
|
Clear filters
|
|
</Button>
|
|
</div>
|
|
<Search
|
|
value={searchValue}
|
|
placeholder="input search text"
|
|
onSearch={this.handleSearch}
|
|
onChange={this.handleSearchChange}
|
|
enterButton
|
|
/>
|
|
<Table
|
|
rowKey={keyValue}
|
|
dataSource={data}
|
|
loading={this.state.loading}
|
|
onChange={this.handleTableChange}
|
|
pagination={false}
|
|
>
|
|
{columns &&
|
|
columns.map(column => (
|
|
<Column
|
|
key={column.dataIndex ? column.dataIndex : column.key}
|
|
{...column}
|
|
/>
|
|
))}
|
|
{
|
|
actions && actions.length > 0 && <Column
|
|
title="Action"
|
|
align="center"
|
|
key="action"
|
|
width={130}
|
|
render={(text, record) => (
|
|
|
|
actions.map(item => {
|
|
return item.access === true && this.handleRenderActionButton({action: item, item: record})
|
|
})
|
|
|
|
)}
|
|
|
|
|
|
/>
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</Table>
|
|
<Row style={{paddingTop: 20}}>
|
|
<Col span={8}>col-12</Col>
|
|
<Col span={16} style={{textAlign: 'right'}}>
|
|
<Pagination
|
|
// size="small"
|
|
current={currentPage}
|
|
pageSize={pageSize}
|
|
showSizeChanger
|
|
onChange={this.handlePagination}
|
|
onShowSizeChange={this.handleSizeChange}
|
|
// defaultCurrent={currentPage}
|
|
total={totalData}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withRouter(CustomTable);
|