diff --git a/client/src/components/owners-list/owners-list.component.jsx b/client/src/components/owners-list/owners-list.component.jsx index 78c23b8ad..a1cdb408e 100644 --- a/client/src/components/owners-list/owners-list.component.jsx +++ b/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) => ( {`${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 {record.ownr_ph1}; }, @@ -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 ( { return ( -
+
{ - //setSearchText(e.target.value); + onSearch={(value) => { + search.search = value; + history.push({ search: queryString.stringify(search) }); }} - //vale={searchText} enterButton />
); }} - 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} diff --git a/client/src/components/owners-list/owners-list.container.jsx b/client/src/components/owners-list/owners-list.container.jsx index 06589c325..4b57e535c 100644 --- a/client/src/components/owners-list/owners-list.container.jsx +++ b/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 ; + if (error) return ; return ( ); diff --git a/client/src/graphql/owners.queries.js b/client/src/graphql/owners.queries.js index b017d80c4..f79a0bcf2 100644 --- a/client/src/graphql/owners.queries.js +++ b/client/src/graphql/owners.queries.js @@ -89,6 +89,46 @@ export const QUERY_ALL_OWNERS = gql` } `; +export const QUERY_ALL_OWNERS_PAGINATED = gql` + query QUERY_ALL_OWNERS_PAGINATED( + $search: String + $offset: Int + $limit: Int + $order: [owners_order_by!]! + ) { + search_owners( + args: { search: $search } + offset: $offset + limit: $limit + order_by: $order + ) { + id + allow_text_message + created_at + ownr_addr1 + ownr_addr2 + ownr_co_nm + ownr_city + ownr_ctry + ownr_ea + ownr_fn + ownr_ph1 + ownr_ln + ownr_ph2 + ownr_st + ownr_title + ownr_zip + preferred_contact + updated_at + } + search_owners_aggregate(args: { search: $search }) { + aggregate { + count(distinct: true) + } + } + } +`; + export const QUERY_OWNER_FOR_JOB_CREATION = gql` query QUERY_OWNER_FOR_JOB_CREATION($id: uuid!) { owners_by_pk(id: $id) { diff --git a/client/src/pages/jobs-all/jobs-all.container.jsx b/client/src/pages/jobs-all/jobs-all.container.jsx index 772aaddbf..7037fb3a7 100644 --- a/client/src/pages/jobs-all/jobs-all.container.jsx +++ b/client/src/pages/jobs-all/jobs-all.container.jsx @@ -46,7 +46,7 @@ export function AllJobs({ bodyshop, setBreadcrumbs }) { setBreadcrumbs([{ link: "/manage/jobs", label: t("titles.bc.jobs-all") }]); }, [t, setBreadcrumbs]); - if (error) return ; + if (error) return ; return (