feat: fix pagination issue (#64)

casbin · Aug 12, 2024 · 95331b8 · 95331b8
1 parent 0dfac51
commit 95331b8
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 10 deletions.
diff --git a/web/src/CertListPage.js b/web/src/CertListPage.js
@@ -28,7 +28,14 @@ class CertListPage extends BaseListPage {
   }
 
   UNSAFE_componentWillMount() {
-    this.fetch();
+    this.setState({
+      pagination: {
+        ...this.state.pagination,
+        current: 1,
+        pageSize: 10,
+      },
+    });
+    this.fetch({pagination: this.state.pagination});
   }
 
   newCert() {
@@ -248,14 +255,14 @@ class CertListPage extends BaseListPage {
             <div style={{display: "flex", alignItems: "center", flexWrap: "nowrap"}}>
               <Button style={{margin: "10px 10px 10px 0"}} type="default" onClick={() => this.refreshCert(index)}>{i18next.t("general:Refresh")}
               </Button>
-              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} type="primary" onClick={() => this.props.history.push(`/certs/${record.owner}/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <Button style={{margin: "10px 10px 10px 0"}} type="primary" onClick={() => this.props.history.push(`/certs/${record.owner}/${record.name}`)}>{i18next.t("general:Edit")}</Button>
               <Popconfirm
                 title={`Sure to delete cert: ${record.name} ?`}
                 onConfirm={() => this.deleteCert(index)}
                 okText="OK"
                 cancelText="Cancel"
               >
-                <Button style={{marginBottom: "10px"}} type="danger">{i18next.t("general:Delete")}</Button>
+                <Button style={{margin: "10px 10px 10px 0"}} type="danger">{i18next.t("general:Delete")}</Button>
               </Popconfirm>
             </div>
           );

diff --git a/web/src/RecordListPage.js b/web/src/RecordListPage.js
@@ -23,7 +23,14 @@ import BaseListPage from "./BaseListPage";
 class RecordListPage extends BaseListPage {
 
   UNSAFE_componentWillMount() {
-    this.fetch();
+    this.setState({
+      pagination: {
+        ...this.state.pagination,
+        current: 1,
+        pageSize: 10,
+      },
+    });
+    this.fetch({pagination: this.state.pagination});
   }
 
   fetch = (params = {}) => {
@@ -40,6 +47,10 @@ class RecordListPage extends BaseListPage {
         if (res.status === "ok") {
           this.setState({
             data: res.data,
+            pagination: {
+              ...params.pagination,
+              total: res.data2,
+            },
           });
         } else {
           Setting.showMessage("error", `Failed to get records: ${res.msg}`);
@@ -184,7 +195,7 @@ class RecordListPage extends BaseListPage {
 
     return (
       <div>
-        <Table columns={columns} dataSource={data} rowKey="name" size="middle" bordered pagination={{pageSize: 1000}}
+        <Table columns={columns} dataSource={data} rowKey="name" size="middle" bordered pagination={this.state.pagination}
           title={() => (
             <div>
               {i18next.t("general:Records")}&nbsp;&nbsp;&nbsp;&nbsp;

diff --git a/web/src/RuleListPage.js b/web/src/RuleListPage.js
@@ -22,7 +22,14 @@ import BaseListPage from "./BaseListPage";
 
 class RuleListPage extends BaseListPage {
   UNSAFE_componentWillMount() {
-    this.fetch();
+    this.setState({
+      pagination: {
+        ...this.state.pagination,
+        current: 1,
+        pageSize: 10,
+      },
+    });
+    this.fetch({pagination: this.state.pagination});
   }
 
   fetch = (params = {}) => {
@@ -35,9 +42,19 @@ class RuleListPage extends BaseListPage {
     });
     RuleBackend.getRules(this.props.account.name, params.pagination.current, params.pagination.pageSize, sortField, sortOrder).then((res) => {
       this.setState({
-        data: res.data,
         loading: false,
       });
+      if (res.status === "ok") {
+        this.setState({
+          data: res.data,
+          pagination: {
+            ...params.pagination,
+            total: res.data2,
+          },
+        });
+      } else {
+        this.setState({loading: false});
+      }
     });
   };
 
@@ -173,7 +190,7 @@ class RuleListPage extends BaseListPage {
         dataSource={data}
         columns={columns}
         rowKey="name"
-        pagination={{pageSize: 1000}}
+        pagination={this.state.pagination}
         loading={this.state.loading}
         onChange={this.handleTableChange}
         size="middle"

diff --git a/web/src/SiteListPage.js b/web/src/SiteListPage.js
@@ -24,7 +24,14 @@ import BaseListPage from "./BaseListPage";
 class SiteListPage extends BaseListPage {
 
   UNSAFE_componentWillMount() {
-    this.fetch();
+    this.setState({
+      pagination: {
+        ...this.state.pagination,
+        current: 1,
+        pageSize: 10,
+      },
+    });
+    this.fetch({pagination: this.state.pagination});
   }
 
   newSite() {
@@ -62,6 +69,7 @@ class SiteListPage extends BaseListPage {
           this.setState({
             data: Setting.prependRow(this.state.data, newSite),
           });
+          this.fetch();
         }
       }
       )
@@ -355,7 +363,7 @@ class SiteListPage extends BaseListPage {
 
     return (
       <div>
-        <Table columns={columns} dataSource={data} rowKey="name" size="middle" bordered pagination={{pageSize: 1000}}
+        <Table columns={columns} dataSource={data} rowKey="name" size="middle" bordered pagination={this.state.pagination}
           title={() => (
             <div>
               {i18next.t("general:Sites")}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -384,6 +392,10 @@ class SiteListPage extends BaseListPage {
         if (res.status === "ok") {
           this.setState({
             data: res.data,
+            pagination: {
+              ...params.pagination,
+              total: res.data2,
+            },
           });
         } else {
           Setting.showMessage("error", `Failed to get sites: ${res.msg}`);