- {
- this.renderTable(this.state.applications)
+ fetch = (params = {}) => {
+ let field = params.searchedColumn, value = params.searchText;
+ let sortField = params.sortField, sortOrder = params.sortOrder;
+ this.setState({ loading: true });
+ ApplicationBackend.getApplications("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,
+ });
}
-
- );
- }
+ });
+ };
}
export default ApplicationListPage;
diff --git a/web/src/BaseListPage.js b/web/src/BaseListPage.js
new file mode 100644
index 00000000..b38dd0e3
--- /dev/null
+++ b/web/src/BaseListPage.js
@@ -0,0 +1,138 @@
+// Copyright 2021 The casbin Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Button, Input, Space} from "antd";
+import {SearchOutlined} from "@ant-design/icons";
+import Highlighter from "react-highlight-words";
+
+class BaseListPage extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ classes: props,
+ data: [],
+ pagination: {
+ current: 1,
+ pageSize: 10,
+ },
+ loading: false,
+ searchText: '',
+ searchedColumn: '',
+ };
+ }
+
+ UNSAFE_componentWillMount() {
+ const { pagination } = this.state;
+ this.fetch({ pagination });
+ }
+
+ getColumnSearchProps = dataIndex => ({
+ filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
+
@@ -162,14 +138,21 @@ class OrganizationListPage extends React.Component {
dataIndex: 'passwordType',
key: 'passwordType',
width: '150px',
- sorter: (a, b) => a.passwordType.localeCompare(b.passwordType),
+ sorter: true,
+ filterMultiple: false,
+ filters: [
+ {text: 'plain', value: 'plain'},
+ {text: 'salt', value: 'salt'},
+ {text: 'md5-salt', value: 'md5-salt'},
+ ],
},
{
title: i18next.t("general:Password salt"),
dataIndex: 'passwordSalt',
key: 'passwordSalt',
width: '150px',
- sorter: (a, b) => a.passwordSalt.localeCompare(b.passwordSalt),
+ sorter: true,
+ ...this.getColumnSearchProps('passwordSalt'),
},
{
title: i18next.t("organization:Default avatar"),
@@ -189,7 +172,7 @@ class OrganizationListPage extends React.Component {
dataIndex: 'enableSoftDeletion',
key: 'enableSoftDeletion',
width: '140px',
- sorter: (a, b) => a.enableSoftDeletion - b.enableSoftDeletion,
+ sorter: true,
render: (text, record, index) => {
return (
{i18next.t("general:Add")}
)}
- loading={organizations === null}
+ loading={this.state.loading}
+ onChange={this.handleTableChange}
/>
);
}
- render() {
- return (
-
- {
- this.renderTable(this.state.organizations)
+ fetch = (params = {}) => {
+ let field = params.searchedColumn, value = params.searchText;
+ let sortField = params.sortField, sortOrder = params.sortOrder;
+ if (params.passwordType !== undefined && params.passwordType !== null) {
+ field = "passwordType";
+ value = params.passwordType;
+ }
+ this.setState({ loading: true });
+ OrganizationBackend.getOrganizations("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,
+ });
}
-
- );
- }
+ });
+ };
}
export default OrganizationListPage;
diff --git a/web/src/ProviderEditPage.js b/web/src/ProviderEditPage.js
index dcc2370c..5b1bd02c 100644
--- a/web/src/ProviderEditPage.js
+++ b/web/src/ProviderEditPage.js
@@ -64,60 +64,6 @@ class ProviderEditPage extends React.Component {
});
}
- getProviderTypeOptions(provider) {
- if (provider.category === "OAuth") {
- return (
- [
- {id: 'Google', name: 'Google'},
- {id: 'GitHub', name: 'GitHub'},
- {id: 'QQ', name: 'QQ'},
- {id: 'WeChat', name: 'WeChat'},
- {id: 'Facebook', name: 'Facebook'},
- {id: 'DingTalk', name: 'DingTalk'},
- {id: 'Weibo', name: 'Weibo'},
- {id: 'Gitee', name: 'Gitee'},
- {id: 'LinkedIn', name: 'LinkedIn'},
- {id: 'WeCom', name: 'WeCom'},
- {id: 'Lark', name: 'Lark'},
- {id: 'GitLab', name: 'GitLab'},
- {id: 'Apple', name: 'Apple'},
- {id: 'AzureAD', name: 'AzureAD'},
- {id: 'Slack', name: 'Slack'},
- ]
- );
- } else if (provider.category === "Email") {
- return (
- [
- {id: 'Default', name: 'Default'},
- ]
- );
- } else if (provider.category === "SMS") {
- return (
- [
- {id: 'Aliyun SMS', name: 'Aliyun SMS'},
- {id: 'Tencent Cloud SMS', name: 'Tencent Cloud SMS'},
- {id: 'Volc Engine SMS', name: 'Volc Engine SMS'},
- ]
- );
- } else if (provider.category === "Storage") {
- return (
- [
- {id: 'Local File System', name: 'Local File System'},
- {id: 'AWS S3', name: 'AWS S3'},
- {id: 'Aliyun OSS', name: 'Aliyun OSS'},
- {id: 'Tencent Cloud COS', name: 'Tencent Cloud COS'},
- ]
- );
- } else if (provider.category === "SAML") {
- return ([
- {id: 'Aliyun IDaaS', name: 'Aliyun IDaaS'},
- {id: 'Keycloak', name: 'Keycloak'},
- ]);
- } else {
- return [];
- }
- }
-
getClientIdLabel() {
switch (this.state.provider.category) {
case "Email":
@@ -252,7 +198,7 @@ class ProviderEditPage extends React.Component {
}
})}>
{
- this.getProviderTypeOptions(this.state.provider).map((providerType, index) => {providerType.name} )
+ Setting.getProviderTypeOptions(this.state.provider.category).map((providerType, index) => {providerType.name} )
}
diff --git a/web/src/ProviderListPage.js b/web/src/ProviderListPage.js
index 8b468410..3882f1ee 100644
--- a/web/src/ProviderListPage.js
+++ b/web/src/ProviderListPage.js
@@ -20,32 +20,9 @@ import * as Setting from "./Setting";
import * as ProviderBackend from "./backend/ProviderBackend";
import * as Provider from "./auth/Provider";
import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
-class ProviderListPage extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- classes: props,
- providers: null,
- total: 0,
- };
- }
-
- UNSAFE_componentWillMount() {
- this.getProviders(1, 10);
- }
-
- getProviders(page, pageSize) {
- ProviderBackend.getProviders("admin", page, pageSize)
- .then((res) => {
- if (res.status === "ok") {
- this.setState({
- providers: res.data,
- total: res.data2
- });
- }
- });
- }
+class ProviderListPage extends BaseListPage {
newProvider() {
const randomName = Setting.getRandomName();
@@ -71,10 +48,6 @@ class ProviderListPage extends React.Component {
ProviderBackend.addProvider(newProvider)
.then((res) => {
Setting.showMessage("success", `Provider added successfully`);
- this.setState({
- providers: Setting.prependRow(this.state.providers, newProvider),
- total: this.state.total + 1
- });
this.props.history.push(`/providers/${newProvider.name}`);
}
)
@@ -84,12 +57,12 @@ class ProviderListPage extends React.Component {
}
deleteProvider(i) {
- ProviderBackend.deleteProvider(this.state.providers[i])
+ ProviderBackend.deleteProvider(this.state.data[i])
.then((res) => {
Setting.showMessage("success", `Provider deleted successfully`);
this.setState({
- providers: Setting.deleteRow(this.state.providers, i),
- total: this.state.total - 1
+ data: Setting.deleteRow(this.state.data, i),
+ pagination: {total: this.state.pagination.total - 1},
});
}
)
@@ -106,7 +79,8 @@ class ProviderListPage extends React.Component {
key: 'name',
width: '120px',
fixed: 'left',
- sorter: (a, b) => a.name.localeCompare(b.name),
+ sorter: true,
+ ...this.getColumnSearchProps('name'),
render: (text, record, index) => {
return (
@@ -206,12 +199,10 @@ class ProviderListPage 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.getProviders(page, pageSize),
- onShowSizeChange: (current, size) => this.getProviders(current, size),
+ showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
};
return (
@@ -223,21 +214,40 @@ class ProviderListPage extends React.Component {
{i18next.t("general:Add")}
)}
- loading={providers === null}
+ loading={this.state.loading}
+ onChange={this.handleTableChange}
/>
);
}
- render() {
- return (
-
- {
- this.renderTable(this.state.providers)
+ fetch = (params = {}) => {
+ let field = params.searchedColumn, value = params.searchText;
+ let sortField = params.sortField, sortOrder = params.sortOrder;
+ if (params.category !== undefined && params.category !== null) {
+ field = "category";
+ value = params.category;
+ } else if (params.type !== undefined && params.type !== null) {
+ field = "type";
+ value = params.type;
+ }
+ this.setState({ loading: true });
+ ProviderBackend.getProviders("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,
+ });
}
-
- );
- }
+ });
+ };
}
export default ProviderListPage;
diff --git a/web/src/RecordListPage.js b/web/src/RecordListPage.js
index b87289ae..bc4d3fd6 100644
--- a/web/src/RecordListPage.js
+++ b/web/src/RecordListPage.js
@@ -19,31 +19,15 @@ import * as Setting from "./Setting";
import * as RecordBackend from "./backend/RecordBackend";
import i18next from "i18next";
import moment from "moment";
+import BaseListPage from "./BaseListPage";
+import * as ProviderBackend from "./backend/ProviderBackend";
-class RecordListPage extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- classes: props,
- records: null,
- total: 0,
- };
- }
+class RecordListPage extends BaseListPage {
UNSAFE_componentWillMount() {
- this.getRecords(1, 20);
- }
-
- getRecords(page, pageSize) {
- RecordBackend.getRecords(page, pageSize)
- .then((res) => {
- if (res.status === "ok") {
- this.setState({
- records: res.data,
- total: res.data2
- });
- }
- });
+ this.state.pagination.pageSize = 20;
+ const { pagination } = this.state;
+ this.fetch({ pagination });
}
newRecord() {
@@ -68,21 +52,24 @@ class RecordListPage extends React.Component {
dataIndex: 'name',
key: 'name',
width: '320px',
- sorter: (a, b) => a.name.localeCompare(b.name),
+ sorter: true,
+ ...this.getColumnSearchProps('name'),
},
{
title: i18next.t("general:ID"),
dataIndex: 'id',
key: 'id',
width: '90px',
- sorter: (a, b) => a.id - b.id,
+ sorter: true,
+ ...this.getColumnSearchProps('id'),
},
{
title: i18next.t("general:Client IP"),
dataIndex: 'clientIp',
key: 'clientIp',
width: '150px',
- sorter: (a, b) => a.clientIp.localeCompare(b.clientIp),
+ sorter: true,
+ ...this.getColumnSearchProps('clientIp'),
render: (text, record, index) => {
return (
@@ -96,7 +83,7 @@ class RecordListPage 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);
}
@@ -106,7 +93,8 @@ class RecordListPage 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 (
- {
- this.renderTable(this.state.records)
+ fetch = (params = {}) => {
+ let field = params.searchedColumn, value = params.searchText;
+ let sortField = params.sortField, sortOrder = params.sortOrder;
+ if (params.method !== undefined && params.method !== null) {
+ field = "method";
+ value = params.method;
+ }
+ this.setState({ loading: true });
+ RecordBackend.getRecords(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,
+ });
}
-
- );
- }
+ });
+ };
}
export default RecordListPage;
diff --git a/web/src/ResourceListPage.js b/web/src/ResourceListPage.js
index 8b72aa1c..ace420ed 100644
--- a/web/src/ResourceListPage.js
+++ b/web/src/ResourceListPage.js
@@ -20,42 +20,34 @@ import * as Setting from "./Setting";
import * as ResourceBackend from "./backend/ResourceBackend";
import i18next from "i18next";
import {Link} from "react-router-dom";
+import BaseListPage from "./BaseListPage";
+import * as ProviderBackend from "./backend/ProviderBackend";
-class ResourceListPage extends React.Component {
+class ResourceListPage extends BaseListPage {
constructor(props) {
super(props);
this.state = {
classes: props,
- resources: null,
+ data: [],
+ pagination: {
+ current: 1,
+ pageSize: 10,
+ },
+ loading: false,
+ searchText: '',
+ searchedColumn: '',
fileList: [],
uploading: false,
- total: 0,
};
}
- UNSAFE_componentWillMount() {
- this.getResources(1, 10);
- }
-
- getResources(page, pageSize) {
- ResourceBackend.getResources(this.props.account.owner, this.props.account.name, page, pageSize)
- .then((res) => {
- if (res.status === "ok") {
- this.setState({
- resources: res.data,
- total: res.data2
- });
- }
- });
- }
-
deleteResource(i) {
- ResourceBackend.deleteResource(this.state.resources[i])
+ ResourceBackend.deleteResource(this.state.data[i])
.then((res) => {
Setting.showMessage("success", `Resource deleted successfully`);
this.setState({
- resources: Setting.deleteRow(this.state.resources, i),
- total: this.state.total - 1
+ data: Setting.deleteRow(this.state.data, i),
+ pagination: {total: this.state.pagination.total - 1},
});
}
)
@@ -100,7 +92,8 @@ class ResourceListPage extends React.Component {
key: 'provider',
width: '150px',
fixed: 'left',
- sorter: (a, b) => a.provider.localeCompare(b.provider),
+ sorter: true,
+ ...this.getColumnSearchProps('provider'),
render: (text, record, index) => {
return (
- {
- this.renderTable(this.state.resources)
+ fetch = (params = {}) => {
+ let field = params.searchedColumn, value = params.searchText;
+ let sortField = params.sortField, sortOrder = params.sortOrder;
+ this.setState({ loading: true });
+ ResourceBackend.getResources(this.props.account.owner, this.props.account.name, 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,
+ });
}
-
- );
- }
+ });
+ };
}
export default ResourceListPage;
diff --git a/web/src/Setting.js b/web/src/Setting.js
index 2007c33c..372b90b3 100644
--- a/web/src/Setting.js
+++ b/web/src/Setting.js
@@ -382,6 +382,60 @@ export function getProviderLogo(provider) {
)
}
+export function getProviderTypeOptions(category) {
+ if (category === "OAuth") {
+ return (
+ [
+ {id: 'Google', name: 'Google'},
+ {id: 'GitHub', name: 'GitHub'},
+ {id: 'QQ', name: 'QQ'},
+ {id: 'WeChat', name: 'WeChat'},
+ {id: 'Facebook', name: 'Facebook'},
+ {id: 'DingTalk', name: 'DingTalk'},
+ {id: 'Weibo', name: 'Weibo'},
+ {id: 'Gitee', name: 'Gitee'},
+ {id: 'LinkedIn', name: 'LinkedIn'},
+ {id: 'WeCom', name: 'WeCom'},
+ {id: 'Lark', name: 'Lark'},
+ {id: 'GitLab', name: 'GitLab'},
+ {id: 'Apple', name: 'Apple'},
+ {id: 'AzureAD', name: 'AzureAD'},
+ {id: 'Slack', name: 'Slack'},
+ ]
+ );
+ } else if (category === "Email") {
+ return (
+ [
+ {id: 'Default', name: 'Default'},
+ ]
+ );
+ } else if (category === "SMS") {
+ return (
+ [
+ {id: 'Aliyun SMS', name: 'Aliyun SMS'},
+ {id: 'Tencent Cloud SMS', name: 'Tencent Cloud SMS'},
+ {id: 'Volc Engine SMS', name: 'Volc Engine SMS'},
+ ]
+ );
+ } else if (category === "Storage") {
+ return (
+ [
+ {id: 'Local File System', name: 'Local File System'},
+ {id: 'AWS S3', name: 'AWS S3'},
+ {id: 'Aliyun OSS', name: 'Aliyun OSS'},
+ {id: 'Tencent Cloud COS', name: 'Tencent Cloud COS'},
+ ]
+ );
+ } else if (category === "SAML") {
+ return ([
+ {id: 'Aliyun IDaaS', name: 'Aliyun IDaaS'},
+ {id: 'Keycloak', name: 'Keycloak'},
+ ]);
+ } else {
+ return [];
+ }
+}
+
export function renderLogo(application) {
if (application === null) {
return null;
diff --git a/web/src/SyncerListPage.js b/web/src/SyncerListPage.js
index 4142525e..ebfb470f 100644
--- a/web/src/SyncerListPage.js
+++ b/web/src/SyncerListPage.js
@@ -19,32 +19,10 @@ import moment from "moment";
import * as Setting from "./Setting";
import * as SyncerBackend from "./backend/SyncerBackend";
import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import * as ProviderBackend from "./backend/ProviderBackend";
-class SyncerListPage extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- classes: props,
- syncers: null,
- total: 0,
- };
- }
-
- UNSAFE_componentWillMount() {
- this.getSyncers(1, 10);
- }
-
- getSyncers(page, pageSize) {
- SyncerBackend.getSyncers("admin", page, pageSize)
- .then((res) => {
- if (res.status === "ok") {
- this.setState({
- syncers: res.data,
- total: res.data2
- });
- }
- });
- }
+class SyncerListPage extends BaseListPage {
newSyncer() {
const randomName = Setting.getRandomName();
@@ -74,10 +52,6 @@ class SyncerListPage extends React.Component {
SyncerBackend.addSyncer(newSyncer)
.then((res) => {
Setting.showMessage("success", `Syncer added successfully`);
- this.setState({
- syncers: Setting.prependRow(this.state.syncers, newSyncer),
- total: this.state.total + 1
- });
this.props.history.push(`/syncers/${newSyncer.name}`);
}
)
@@ -87,12 +61,12 @@ class SyncerListPage extends React.Component {
}
deleteSyncer(i) {
- SyncerBackend.deleteSyncer(this.state.syncers[i])
+ SyncerBackend.deleteSyncer(this.state.data[i])
.then((res) => {
Setting.showMessage("success", `Syncer deleted successfully`);
this.setState({
- syncers: Setting.deleteRow(this.state.syncers, i),
- total: this.state.total - 1
+ data: Setting.deleteRow(this.state.data, i),
+ pagination: {total: this.state.pagination.total - 1},
});
}
)
@@ -108,7 +82,8 @@ class SyncerListPage extends React.Component {
dataIndex: 'organization',
key: 'organization',
width: '120px',
- sorter: (a, b) => a.organization.localeCompare(b.organization),
+ sorter: true,
+ ...this.getColumnSearchProps('organization'),
render: (text, record, index) => {
return (
{i18next.t("general:Add")}
)}
- loading={syncers === null}
+ loading={this.state.loading}
+ onChange={this.handleTableChange}
/>
);
}
- render() {
- return (
-
- {
- this.renderTable(this.state.syncers)
+ fetch = (params = {}) => {
+ let field = params.searchedColumn, value = params.searchText;
+ let sortField = params.sortField, sortOrder = params.sortOrder;
+ if (params.type !== undefined && params.type !== null) {
+ field = "type";
+ value = params.type;
+ }
+ this.setState({ loading: true });
+ SyncerBackend.getSyncers("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,
+ });
}
-
- );
- }
+ });
+ };
}
export default SyncerListPage;
diff --git a/web/src/TokenListPage.js b/web/src/TokenListPage.js
index 44df318d..b4c48cab 100644
--- a/web/src/TokenListPage.js
+++ b/web/src/TokenListPage.js
@@ -19,32 +19,10 @@ import moment from "moment";
import * as Setting from "./Setting";
import * as TokenBackend from "./backend/TokenBackend";
import i18next from "i18next";
+import * as ResourceBackend from "./backend/ResourceBackend";
+import BaseListPage from "./BaseListPage";
-class TokenListPage extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- classes: props,
- tokens: null,
- total: 0,
- };
- }
-
- UNSAFE_componentWillMount() {
- this.getTokens(1, 10);
- }
-
- getTokens(page, pageSize) {
- TokenBackend.getTokens("admin", page, pageSize)
- .then((res) => {
- if (res.status === "ok") {
- this.setState({
- tokens: res.data,
- total: res.data2
- });
- }
- });
- }
+class TokenListPage extends BaseListPage {
newToken() {
const randomName = Setting.getRandomName();
@@ -67,10 +45,6 @@ class TokenListPage extends React.Component {
TokenBackend.addToken(newToken)
.then((res) => {
Setting.showMessage("success", `Token added successfully`);
- this.setState({
- tokens: Setting.prependRow(this.state.tokens, newToken),
- total: this.state.total + 1
- });
this.props.history.push(`/tokens/${newToken.name}`);
}
)
@@ -80,12 +54,12 @@ class TokenListPage extends React.Component {
}
deleteToken(i) {
- TokenBackend.deleteToken(this.state.tokens[i])
+ TokenBackend.deleteToken(this.state.data[i])
.then((res) => {
Setting.showMessage("success", `Token deleted successfully`);
this.setState({
- tokens: Setting.deleteRow(this.state.tokens, i),
- total: this.state.total - 1
+ data: Setting.deleteRow(this.state.data, i),
+ pagination: {total: this.state.pagination.total - 1},
});
}
)
@@ -102,7 +76,8 @@ class TokenListPage extends React.Component {
key: 'name',
width: (Setting.isMobile()) ? "100px" : "300px",
fixed: 'left',
- sorter: (a, b) => a.name.localeCompare(b.name),
+ sorter: true,
+ ...this.getColumnSearchProps('name'),
render: (text, record, index) => {
return (
{i18next.t("general:Add")}
)}
- loading={tokens === null}
+ loading={this.state.loading}
+ onChange={this.handleTableChange}
/>
);
}
- render() {
- return (
-
- {
- this.renderTable(this.state.tokens)
+ fetch = (params = {}) => {
+ let field = params.searchedColumn, value = params.searchText;
+ let sortField = params.sortField, sortOrder = params.sortOrder;
+ this.setState({ loading: true });
+ TokenBackend.getTokens("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,
+ });
}
-
- );
- }
+ });
+ };
}
export default TokenListPage;
diff --git a/web/src/UserListPage.js b/web/src/UserListPage.js
index 8650361b..f496b22d 100644
--- a/web/src/UserListPage.js
+++ b/web/src/UserListPage.js
@@ -19,46 +19,26 @@ import moment from "moment";
import * as Setting from "./Setting";
import * as UserBackend from "./backend/UserBackend";
import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import * as ProviderBackend from "./backend/ProviderBackend";
-class UserListPage extends React.Component {
+class UserListPage extends BaseListPage {
constructor(props) {
super(props);
this.state = {
classes: props,
- users: null,
organizationName: props.match.params.organizationName,
- total: 0,
+ data: [],
+ pagination: {
+ current: 1,
+ pageSize: 10,
+ },
+ loading: false,
+ searchText: '',
+ searchedColumn: '',
};
}
- UNSAFE_componentWillMount() {
- this.getUsers(1, 10);
- }
-
- getUsers(page, pageSize) {
- if (this.state.organizationName === undefined) {
- UserBackend.getGlobalUsers(page, pageSize)
- .then((res) => {
- if (res.status === "ok") {
- this.setState({
- users: res.data,
- total: res.data2
- });
- }
- });
- } else {
- UserBackend.getUsers(this.state.organizationName, page, pageSize)
- .then((res) => {
- if (res.status === "ok") {
- this.setState({
- users: res.data,
- total: res.data2
- });
- }
- });
- }
- }
-
newUser() {
const randomName = Setting.getRandomName();
return {
@@ -90,10 +70,6 @@ class UserListPage extends React.Component {
UserBackend.addUser(newUser)
.then((res) => {
Setting.showMessage("success", `User added successfully`);
- this.setState({
- users: Setting.prependRow(this.state.users, newUser),
- total: this.state.total + 1
- });
this.props.history.push(`/users/${newUser.owner}/${newUser.name}`);
}
)
@@ -103,12 +79,12 @@ class UserListPage extends React.Component {
}
deleteUser(i) {
- UserBackend.deleteUser(this.state.users[i])
+ UserBackend.deleteUser(this.state.data[i])
.then((res) => {
Setting.showMessage("success", `User deleted successfully`);
this.setState({
- users: Setting.deleteRow(this.state.users, i),
- total: this.state.total - 1
+ data: Setting.deleteRow(this.state.data, i),
+ pagination: {total: this.state.pagination.total - 1},
});
}
)
@@ -132,7 +108,8 @@ class UserListPage extends React.Component {
key: 'owner',
width: (Setting.isMobile()) ? "100px" : "120px",
fixed: 'left',
- sorter: (a, b) => a.owner.localeCompare(b.owner),
+ sorter: true,
+ ...this.getColumnSearchProps('owner'),
render: (text, record, index) => {
return (
@@ -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 {
{i18next.t("general:Add")}
)}
- loading={webhooks === null}
+ loading={this.state.loading}
+ onChange={this.handleTableChange}
/>
);
}
- render() {
- return (
-
- {
- 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,
+ });
}
-
- );
- }
+ });
+ };
}
export default WebhookListPage;
diff --git a/web/src/backend/ApplicationBackend.js b/web/src/backend/ApplicationBackend.js
index f1a5cc63..3efbe549 100644
--- a/web/src/backend/ApplicationBackend.js
+++ b/web/src/backend/ApplicationBackend.js
@@ -14,8 +14,8 @@
import * as Setting from "../Setting";
-export function getApplications(owner, page = "", pageSize = "") {
- return fetch(`${Setting.ServerUrl}/api/get-applications?owner=${owner}&p=${page}&pageSize=${pageSize}`, {
+export function getApplications(owner, page = "", pageSize = "", field = "", value = "", sortField = "", sortOrder = "") {
+ return fetch(`${Setting.ServerUrl}/api/get-applications?owner=${owner}&p=${page}&pageSize=${pageSize}&field=${field}&value=${value}&sortField=${sortField}&sortOrder=${sortOrder}`, {
method: "GET",
credentials: "include"
}).then(res => res.json());
diff --git a/web/src/backend/OrganizationBackend.js b/web/src/backend/OrganizationBackend.js
index 4864ea4d..d2494925 100644
--- a/web/src/backend/OrganizationBackend.js
+++ b/web/src/backend/OrganizationBackend.js
@@ -14,8 +14,8 @@
import * as Setting from "../Setting";
-export function getOrganizations(owner, page = "", pageSize = "") {
- return fetch(`${Setting.ServerUrl}/api/get-organizations?owner=${owner}&p=${page}&pageSize=${pageSize}`, {
+export function getOrganizations(owner, page = "", pageSize = "", field = "", value = "", sortField = "", sortOrder = "") {
+ return fetch(`${Setting.ServerUrl}/api/get-organizations?owner=${owner}&p=${page}&pageSize=${pageSize}&field=${field}&value=${value}&sortField=${sortField}&sortOrder=${sortOrder}`, {
method: "GET",
credentials: "include"
}).then(res => res.json());
diff --git a/web/src/backend/ProviderBackend.js b/web/src/backend/ProviderBackend.js
index 0ddbdcef..cd1611a0 100644
--- a/web/src/backend/ProviderBackend.js
+++ b/web/src/backend/ProviderBackend.js
@@ -14,8 +14,8 @@
import * as Setting from "../Setting";
-export function getProviders(owner, page = "", pageSize = "") {
- return fetch(`${Setting.ServerUrl}/api/get-providers?owner=${owner}&p=${page}&pageSize=${pageSize}`, {
+export function getProviders(owner, page = "", pageSize = "", field = "", value = "", sortField = "", sortOrder = "") {
+ return fetch(`${Setting.ServerUrl}/api/get-providers?owner=${owner}&p=${page}&pageSize=${pageSize}&field=${field}&value=${value}&sortField=${sortField}&sortOrder=${sortOrder}`, {
method: "GET",
credentials: "include"
}).then(res => res.json());
diff --git a/web/src/backend/RecordBackend.js b/web/src/backend/RecordBackend.js
index a49e3c71..72269e57 100644
--- a/web/src/backend/RecordBackend.js
+++ b/web/src/backend/RecordBackend.js
@@ -14,8 +14,8 @@
import * as Setting from "../Setting";
-export function getRecords(page, pageSize) {
- return fetch(`${Setting.ServerUrl}/api/get-records?pageSize=${pageSize}&p=${page}`, {
+export function getRecords(page, pageSize, field = "", value = "", sortField = "", sortOrder = "") {
+ return fetch(`${Setting.ServerUrl}/api/get-records?pageSize=${pageSize}&p=${page}&field=${field}&value=${value}&sortField=${sortField}&sortOrder=${sortOrder}`, {
method: "GET",
credentials: "include"
}).then(res => res.json());
diff --git a/web/src/backend/ResourceBackend.js b/web/src/backend/ResourceBackend.js
index 79acb988..91f61f3f 100644
--- a/web/src/backend/ResourceBackend.js
+++ b/web/src/backend/ResourceBackend.js
@@ -14,8 +14,8 @@
import * as Setting from "../Setting";
-export function getResources(owner, user, page = "", pageSize = "") {
- return fetch(`${Setting.ServerUrl}/api/get-resources?owner=${owner}&user=${user}&p=${page}&pageSize=${pageSize}`, {
+export function getResources(owner, user, page = "", pageSize = "", field = "", value = "", sortField = "", sortOrder = "") {
+ return fetch(`${Setting.ServerUrl}/api/get-resources?owner=${owner}&user=${user}&p=${page}&pageSize=${pageSize}&field=${field}&value=${value}&sortField=${sortField}&sortOrder=${sortOrder}`, {
method: "GET",
credentials: "include"
}).then(res => res.json());
diff --git a/web/src/backend/SyncerBackend.js b/web/src/backend/SyncerBackend.js
index 21d87b2c..0eec9bf3 100644
--- a/web/src/backend/SyncerBackend.js
+++ b/web/src/backend/SyncerBackend.js
@@ -14,8 +14,8 @@
import * as Setting from "../Setting";
-export function getSyncers(owner, page = "", pageSize = "") {
- return fetch(`${Setting.ServerUrl}/api/get-syncers?owner=${owner}&p=${page}&pageSize=${pageSize}`, {
+export function getSyncers(owner, page = "", pageSize = "", field = "", value = "", sortField = "", sortOrder = "") {
+ return fetch(`${Setting.ServerUrl}/api/get-syncers?owner=${owner}&p=${page}&pageSize=${pageSize}&field=${field}&value=${value}&sortField=${sortField}&sortOrder=${sortOrder}`, {
method: "GET",
credentials: "include"
}).then(res => res.json());
diff --git a/web/src/backend/TokenBackend.js b/web/src/backend/TokenBackend.js
index 22b7ee57..0100b6fa 100644
--- a/web/src/backend/TokenBackend.js
+++ b/web/src/backend/TokenBackend.js
@@ -14,8 +14,8 @@
import * as Setting from "../Setting";
-export function getTokens(owner, page = "", pageSize = "") {
- return fetch(`${Setting.ServerUrl}/api/get-tokens?owner=${owner}&p=${page}&pageSize=${pageSize}`, {
+export function getTokens(owner, page = "", pageSize = "", field = "", value = "", sortField = "", sortOrder = "") {
+ return fetch(`${Setting.ServerUrl}/api/get-tokens?owner=${owner}&p=${page}&pageSize=${pageSize}&field=${field}&value=${value}&sortField=${sortField}&sortOrder=${sortOrder}`, {
method: "GET",
credentials: "include"
}).then(res => res.json());
diff --git a/web/src/backend/UserBackend.js b/web/src/backend/UserBackend.js
index 3ee4313a..a43d1b93 100644
--- a/web/src/backend/UserBackend.js
+++ b/web/src/backend/UserBackend.js
@@ -15,15 +15,15 @@
import * as Setting from "../Setting";
import i18next from "i18next";
-export function getGlobalUsers(page, pageSize) {
- return fetch(`${Setting.ServerUrl}/api/get-global-users?p=${page}&pageSize=${pageSize}`, {
+export function getGlobalUsers(page, pageSize, field = "", value = "", sortField = "", sortOrder = "") {
+ return fetch(`${Setting.ServerUrl}/api/get-global-users?p=${page}&pageSize=${pageSize}&field=${field}&value=${value}&sortField=${sortField}&sortOrder=${sortOrder}`, {
method: "GET",
credentials: "include"
}).then(res => res.json());
}
-export function getUsers(owner, page = "", pageSize = "") {
- return fetch(`${Setting.ServerUrl}/api/get-users?owner=${owner}&p=${page}&pageSize=${pageSize}`, {
+export function getUsers(owner, page = "", pageSize = "", field = "", value = "", sortField = "", sortOrder = "") {
+ return fetch(`${Setting.ServerUrl}/api/get-users?owner=${owner}&p=${page}&pageSize=${pageSize}&field=${field}&value=${value}&sortField=${sortField}&sortOrder=${sortOrder}`, {
method: "GET",
credentials: "include"
}).then(res => res.json());
diff --git a/web/src/backend/WebhookBackend.js b/web/src/backend/WebhookBackend.js
index c662fafd..92a862ef 100644
--- a/web/src/backend/WebhookBackend.js
+++ b/web/src/backend/WebhookBackend.js
@@ -14,8 +14,8 @@
import * as Setting from "../Setting";
-export function getWebhooks(owner, page = "", pageSize = "") {
- return fetch(`${Setting.ServerUrl}/api/get-webhooks?owner=${owner}&p=${page}&pageSize=${pageSize}`, {
+export function getWebhooks(owner, page = "", pageSize = "", field = "", value = "", sortField = "", sortOrder = "") {
+ return fetch(`${Setting.ServerUrl}/api/get-webhooks?owner=${owner}&p=${page}&pageSize=${pageSize}&field=${field}&value=${value}&sortField=${sortField}&sortOrder=${sortOrder}`, {
method: "GET",
credentials: "include"
}).then(res => res.json());
diff --git a/web/yarn.lock b/web/yarn.lock
index 78a4ee4b..96ed7dd5 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -5721,6 +5721,11 @@ hex-color-regex@^1.1.0:
resolved "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
+highlight-words-core@^1.2.0:
+ version "1.2.2"
+ resolved "https://registry.npm.taobao.org/highlight-words-core/download/highlight-words-core-1.2.2.tgz#1eff6d7d9f0a22f155042a00791237791b1eeaaa"
+ integrity sha1-Hv9tfZ8KIvFVBCoAeRI3eRse6qo=
+
history@^4.9.0:
version "4.10.1"
resolved "https://registry.npmjs.org/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -7479,6 +7484,11 @@ media-typer@0.3.0:
resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
+memoize-one@^4.0.0:
+ version "4.1.0"
+ resolved "https://registry.npmmirror.com/memoize-one/download/memoize-one-4.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fmemoize-one%2Fdownload%2Fmemoize-one-4.1.0.tgz#a2387c58c03fff27ca390c31b764a79addf3f906"
+ integrity sha1-ojh8WMA//yfKOQwxt2Snmt3z+QY=
+
memory-fs@^0.4.1:
version "0.4.1"
resolved "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -9254,7 +9264,7 @@ prompts@2.4.0, prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9343,6 +9353,13 @@ qs@6.7.0:
resolved "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
+qs@^6.10.2:
+ version "6.10.2"
+ resolved "https://registry.npmmirror.com/qs/download/qs-6.10.2.tgz#c1431bea37fc5b24c5bdbafa20f16bdf2a4b9ffe"
+ integrity sha512-mSIdjzqznWgfd4pMii7sHtaYF8rx8861hBO80SraY5GT0XQibWZWJSid0avzHGkDIZLImux2S5mXO0Hfct2QCw==
+ dependencies:
+ side-channel "^1.0.4"
+
qs@~6.5.2:
version "6.5.2"
resolved "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -9873,6 +9890,15 @@ react-helmet@^6.1.0:
react-fast-compare "^3.1.1"
react-side-effect "^2.1.0"
+react-highlight-words@^0.17.0:
+ version "0.17.0"
+ resolved "https://registry.npm.taobao.org/react-highlight-words/download/react-highlight-words-0.17.0.tgz#e79a559a2de301548339d7216264d6cd0f1eed6f"
+ integrity sha1-55pVmi3jAVSDOdchYmTWzQ8e7W8=
+ dependencies:
+ highlight-words-core "^1.2.0"
+ memoize-one "^4.0.0"
+ prop-types "^15.5.8"
+
react-i18next@^11.8.7:
version "11.8.12"
resolved "https://registry.npmjs.org/react-i18next/-/react-i18next-11.8.12.tgz#6a9f57277062fb6a6129cad4db5e6198d5c60b58"