llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-04 13:20:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add server-side search, filter and sorter for all pages (#388)

Browse Source 
Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

Co-authored-by: Yang Luo <hsluoyz@qq.com>
This commit is contained in:
Yixiang Zhao
2021-12-25 10:55:10 +08:00
committed by GitHub
parent 0d13512eb1
commit 10a85f2386
43 changed files with 929 additions and 610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
web/src/WebhookListPage.js
View File

@ -19,32 +19,10 @@ import moment from "moment";
import * as Setting from "./Setting";
import * as WebhookBackend from "./backend/WebhookBackend";
import i18next from "i18next";
import BaseListPage from "./BaseListPage";
import * as ProviderBackend from "./backend/ProviderBackend";
class WebhookListPage extends React.Component {
constructor(props) {
super(props);
this.state = {
classes: props,
webhooks: null,
total: 0,
};
}
UNSAFE_componentWillMount() {
this.getWebhooks(1, 10);
}
getWebhooks(page, pageSize) {
WebhookBackend.getWebhooks("admin", page, pageSize)
.then((res) => {
if (res.status === "ok") {
this.setState({
webhooks: res.data,
total: res.data2
});
}
});
}
class WebhookListPage extends BaseListPage {
newWebhook() {
const randomName = Setting.getRandomName();
@ -64,10 +42,6 @@ class WebhookListPage extends React.Component {
WebhookBackend.addWebhook(newWebhook)
.then((res) => {
Setting.showMessage("success", `Webhook added successfully`);
this.setState({
webhooks: Setting.prependRow(this.state.webhooks, newWebhook),
total: this.state.total + 1
});
this.props.history.push(`/webhooks/${newWebhook.name}`);
}
)
@ -77,12 +51,12 @@ class WebhookListPage extends React.Component {
}
deleteWebhook(i) {
WebhookBackend.deleteWebhook(this.state.webhooks[i])
WebhookBackend.deleteWebhook(this.state.data[i])
.then((res) => {
Setting.showMessage("success", `Webhook deleted successfully`);
this.setState({
webhooks: Setting.deleteRow(this.state.webhooks, i),
total: this.state.total - 1
data: Setting.deleteRow(this.state.data, i),
pagination: {total: this.state.pagination.total - 1},
});
}
)
@ -98,7 +72,8 @@ class WebhookListPage extends React.Component {
dataIndex: 'organization',
key: 'organization',
width: '80px',
sorter: (a, b) => a.organization.localeCompare(b.organization),
sorter: true,
...this.getColumnSearchProps('organization'),
render: (text, record, index) => {
return (
<Link to={`/organizations/${text}`}>
@ -113,7 +88,8 @@ class WebhookListPage extends React.Component {
key: 'name',
width: '150px',
fixed: 'left',
sorter: (a, b) => a.name.localeCompare(b.name),
sorter: true,
...this.getColumnSearchProps('name'),
render: (text, record, index) => {
return (
<Link to={`/webhooks/${text}`}>
@ -127,7 +103,7 @@ class WebhookListPage extends React.Component {
dataIndex: 'createdTime',
key: 'createdTime',
width: '180px',
sorter: (a, b) => a.createdTime.localeCompare(b.createdTime),
sorter: true,
render: (text, record, index) => {
return Setting.getFormattedDate(text);
}
@ -137,7 +113,8 @@ class WebhookListPage extends React.Component {
dataIndex: 'url',
key: 'url',
width: '300px',
sorter: (a, b) => a.url.localeCompare(b.url),
sorter: true,
...this.getColumnSearchProps('url'),
render: (text, record, index) => {
return (
<a target="_blank" rel="noreferrer" href={text}>
@ -153,14 +130,20 @@ class WebhookListPage extends React.Component {
dataIndex: 'contentType',
key: 'contentType',
width: '150px',
sorter: (a, b) => a.contentType.localeCompare(b.contentType),
sorter: true,
filterMultiple: false,
filters: [
{text: 'application/json', value: 'application/json'},
{text: 'application/x-www-form-urlencoded', value: 'application/x-www-form-urlencoded'},
]
},
{
title: i18next.t("webhook:Events"),
dataIndex: 'events',
key: 'events',
// width: '100px',
sorter: (a, b) => a.events.localeCompare(b.events),
sorter: true,
...this.getColumnSearchProps('events'),
render: (text, record, index) => {
return Setting.getTags(text);
}
@ -188,12 +171,10 @@ class WebhookListPage extends React.Component {
];
const paginationProps = {
total: this.state.total,
total: this.state.pagination.total,
showQuickJumper: true,
showSizeChanger: true,
showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.total),
onChange: (page, pageSize) => this.getWebhooks(page, pageSize),
onShowSizeChange: (current, size) => this.getWebhooks(current, size),
showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
};
return (
@ -205,21 +186,37 @@ class WebhookListPage extends React.Component {
<Button type="primary" size="small" onClick={this.addWebhook.bind(this)}>{i18next.t("general:Add")}</Button>
</div>
)}
loading={webhooks === null}
loading={this.state.loading}
onChange={this.handleTableChange}
/>
</div>
);
}
render() {
return (
<div>
{
this.renderTable(this.state.webhooks)
fetch = (params = {}) => {
let field = params.searchedColumn, value = params.searchText;
let sortField = params.sortField, sortOrder = params.sortOrder;
if (params.contentType !== undefined && params.contentType !== null) {
field = "contentType";
value = params.contentType;
}
this.setState({ loading: true });
WebhookBackend.getWebhooks("admin", params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
.then((res) => {
if (res.status === "ok") {
this.setState({
loading: false,
data: res.data,
pagination: {
...params.pagination,
total: res.data2,
},
searchText: params.searchText,
searchedColumn: params.searchedColumn,
});
}
</div>
);
}
});
};
}
export default WebhookListPage;