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}