Added owners search + owner pagination page BOD-115

client/src/components/owners-list/owners-list.component.jsx

@@ -1,12 +1,22 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Input, Table } from "antd";
+import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useHistory, useLocation } from "react-router-dom";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { alphaSort } from "../../utils/sorters";
 
-export default function OwnersListComponent({ loading, owners, refetch }) {
+export default function OwnersListComponent({
+  loading,
+  owners,
+  total,
+  refetch,
+}) {
+  const search = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder } = search;
+  const history = useHistory();
+
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" },
@@ -19,9 +29,6 @@ export default function OwnersListComponent({ loading, owners, refetch }) {
       title: t("owners.fields.name"),
       dataIndex: "name",
       key: "name",
-      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
-      sortOrder:
-        state.sortedInfo.columnKey === "name" && state.sortedInfo.order,
       render: (text, record) => (
         <Link to={"/manage/owners/" + record.id}>
           {`${record.ownr_fn} ${record.ownr_ln}`}
@@ -32,9 +39,6 @@ export default function OwnersListComponent({ loading, owners, refetch }) {
       title: t("owners.fields.ownr_ph1"),
       dataIndex: "ownr_ph1",
       key: "ownr_ph1",
-      sorter: (a, b) => alphaSort(a.ownr_ph1, b.ownr_ph1),
-      sortOrder:
-        state.sortedInfo.columnKey === "ownr_ph1" && state.sortedInfo.order,
       render: (text, record) => {
         return <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>;
       },
@@ -60,32 +64,41 @@ export default function OwnersListComponent({ loading, owners, refetch }) {
 
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    search.page = pagination.current;
+    search.sortcolumn = sorter.columnKey;
+    search.sortorder = sorter.order;
+    history.push({ search: queryString.stringify(search) });
   };
   return (
     <Table
       loading={loading}
       title={() => {
         return (
-          <div className='imex-table-header'>
+          <div className="imex-table-header">
             <Button onClick={() => refetch()}>
               <SyncOutlined />
             </Button>
             <Input.Search
-              className='imex-table-header__search'
+              className="imex-table-header__search"
               placeholder={t("general.labels.search")}
-              onChange={(e) => {
-                //setSearchText(e.target.value);
+              onSearch={(value) => {
+                search.search = value;
+                history.push({ search: queryString.stringify(search) });
               }}
-              //vale={searchText}
               enterButton
             />
           </div>
         );
       }}
-      size='small'
-      pagination={{ position: "top" }}
+      size="small"
+      pagination={{
+        position: "top",
+        pageSize: 25,
+        current: parseInt(page || 1),
+        total: total,
+      }}
       columns={columns}
-      rowKey='id'
+      rowKey="id"
       scroll={{ x: true }}
       dataSource={owners}
       onChange={handleTableChange}

client/src/components/owners-list/owners-list.container.jsx

@@ -1,19 +1,40 @@
 import { useQuery } from "@apollo/react-hooks";
 import React from "react";
-import { QUERY_ALL_OWNERS } from "../../graphql/owners.queries";
+import { QUERY_ALL_OWNERS_PAGINATED } from "../../graphql/owners.queries";
 import AlertComponent from "../alert/alert.component";
 import OwnersListComponent from "./owners-list.component";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
 
 export default function OwnersListContainer() {
-  const { loading, error, data, refetch } = useQuery(QUERY_ALL_OWNERS, {
-    fetchPolicy: "network-only",
-  });
+  const searchParams = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder, search } = searchParams;
+  const { loading, error, data, refetch } = useQuery(
+    QUERY_ALL_OWNERS_PAGINATED,
+    {
+      variables: {
+        search: search || "",
+        offset: page ? (page - 1) * 25 : 0,
+        limit: 25,
+        order: [
+          {
+            [sortcolumn || "created_at"]: sortorder
+              ? sortorder === "descend"
+                ? "desc"
+                : "asc"
+              : "desc",
+          },
+        ],
+      },
+    }
+  );
 
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
   return (
     <OwnersListComponent
       loading={loading}
-      owners={data ? data.owners : null}
+      owners={data ? data.search_owners : null}
+      total={data ? data.search_owners_aggregate.aggregate.count : 0}
       refetch={refetch}
     />
   );