Merge pull request #200 from 15100399015/dev

【feta】: add project pager
CloudOrc · Oct 10, 2023 · 7d508d3 · 7d508d3
2 parents c10fefe + fea3262
commit 7d508d3
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 10 deletions.
diff --git a/solidui-web/src/pages/Project/ProjectList.tsx b/solidui-web/src/pages/Project/ProjectList.tsx
@@ -16,7 +16,7 @@
  */
 
 import React from "react";
-import { Input, Button, Form, Spin, Modal } from "antd";
+import { Input, Button, Form, Spin, Modal, Pagination } from "antd";
 import { Close } from "@icon-park/react";
 import useProject from "./useProject";
 import ProjectCard from "./_components/ProjectCard";
@@ -39,6 +39,10 @@ export default function ProjectList() {
  toggleModal,
  handleSearch,
  query,
+ setSearchName,
+ searchName,
+ pagination,
+ handlePaginationChange,
  } = useProject();
 
  function renderModalContent() {
@@ -148,6 +152,11 @@ export default function ProjectList() {
  <Search
  placeholder="input search text"
  onSearch={handleSearch}
+ onPressEnter={handleSearch}
+ value={searchName}
+ onChange={(e) => {
+ setSearchName(e.target.value);
+ }}
  enterButton
  style={{
  width: 300,
@@ -169,6 +178,15 @@ export default function ProjectList() {
  <Spin tip="loading" spinning={loading}>
  <div className="projects-list">{renderProjects()}</div>
  </Spin>
+ <div style={{ display: "flex", justifyContent: "flex-end" }}>
+ <Pagination
+ showSizeChanger={false}
+ pageSize={pagination.size}
+ current={pagination.current}
+ total={pagination.total}
+ onChange={handlePaginationChange}
+ />
+ </div>
  </div>
  </div>
 

diff --git a/solidui-web/src/pages/Project/useProject.ts b/solidui-web/src/pages/Project/useProject.ts
@@ -31,27 +31,40 @@ function useProject() {
  current: number;
  size: number;
  total: number;
- }>();
+ }>({ current: 1, size: 12, total: 12 });
+ const [searchName, setSearchName] = useState<string>("");
 
  const popupConverMap = useRef<Map<string, boolean>>(new Map());
 
  useEffect(() => {
- query();
- return () => {};
- }, []);
+ query({
+ pageNo: pagination.current,
+ pageSize: pagination.size,
+ searchName,
+ });
+ }, [pagination?.current, pagination?.size]);
 
- async function handleSearch(value: string) {
- query({ pageNo: 1, pageSize: 10, searchName: value });
+ function handlePaginationChange(current: number, size: number) {
+ setPagination({ current, size, total: pagination.total });
+ }
+ async function handleSearch() {
+ query({ pageNo: 1, pageSize: 12, searchName });
  }
 
- async function query(params: any = { pageNo: 1, pageSize: 10 }) {
+ async function query(
+ params: any = {
+ pageNo: 1,
+ pageSize: 12,
+ searchName: "",
+ },
+ ) {
  setLoading(true);
  const res = await Apis.project.query(params);
  if (res.ok) {
  const data = res.data || ({} as any);
  const current = data.currentPage || 1;
- const size = data.pageSize || 10;
- const total = data.total || 0;
+ const size = data.pageSize || 12;
+ const total = data.total || 12;
  const records = data.totalList || [];
  records.forEach((item: any) => {
  popupConverMap.current.set(`${item.id}`, false);
@@ -106,12 +119,15 @@ function useProject() {
  toggleModal,
  query,
  handleSearch,
+ handlePaginationChange,
  create,
  del,
  toggleCover,
  projects,
  pagination,
  popupConverMap,
+ searchName,
+ setSearchName,
  };
 }