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) => {
+              onSearch={(value) => {
-                //setSearchText(e.target.value);
+                search.search = value;
+                history.push({ search: queryString.stringify(search) });
               }}
-              //vale={searchText}
               enterButton
             />
           </div>
         );
       }}
-      size='small'
+      size="small"
-      pagination={{ position: "top" }}
+      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, {
+  const searchParams = queryString.parse(useLocation().search);
-    fetchPolicy: "network-only",
+  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}
     />
   );

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) {

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 <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
   return (
     <div>
       <JobsListPaginated

hasura/migrations/1594681018728_run_sql_migration/down.yaml

@@ -0,0 +1 @@
+[]

hasura/migrations/1594681018728_run_sql_migration/up.yaml

@@ -0,0 +1,19 @@
+- args:
+    cascade: true
+    read_only: false
+    sql: "CREATE INDEX idx_owners_ownr_fn ON owners USING GIN (ownr_fn gin_trgm_ops);\nCREATE
+      INDEX idx_owners_ownr_ln ON owners USING GIN (ownr_ln gin_trgm_ops);\nCREATE
+      INDEX idx_owners_ownr_co_nm ON owners USING GIN (ownr_co_nm gin_trgm_ops);\nCREATE
+      INDEX idx_owners_ownr_ph1 ON owners USING GIN (ownr_ph1 gin_trgm_ops);\nCREATE
+      INDEX idx_owners_ownr_addr1 ON owners USING GIN (ownr_addr1 gin_trgm_ops);\n\n\nCREATE
+      OR REPLACE FUNCTION public.search_owners(search text)\n RETURNS SETOF owners\n
+      LANGUAGE plpgsql\n STABLE\nAS $function$\n\nBEGIN\n  if search = '' then\n    return
+      query select * from owners ;\n  else \n    return query SELECT\n  *\nFROM\n
+      \ owners\nWHERE\n  search <% (ownr_fn) OR\n  search <% (ownr_ln) OR\n  search
+      <% (ownr_co_nm) OR\n  search <% (ownr_ph1) OR\n  search <% (ownr_addr1);\n  end
+      if;\n\n\tEND\n$function$;"
+  type: run_sql
+- args:
+    name: search_owners
+    schema: public
+  type: track_function

hasura/migrations/1594681091201_update_permission_user_public_table_owners/down.yaml

@@ -0,0 +1,45 @@
+- args:
+    role: user
+    table:
+      name: owners
+      schema: public
+  type: drop_select_permission
+- args:
+    permission:
+      allow_aggregations: false
+      columns:
+      - allow_text_message
+      - accountingid
+      - ownr_addr1
+      - ownr_addr2
+      - ownr_city
+      - ownr_co_nm
+      - ownr_ctry
+      - ownr_ea
+      - ownr_fn
+      - ownr_ln
+      - ownr_ph1
+      - ownr_ph2
+      - ownr_st
+      - ownr_title
+      - ownr_zip
+      - preferred_contact
+      - created_at
+      - updated_at
+      - id
+      - shopid
+      computed_fields: []
+      filter:
+        bodyshop:
+          associations:
+            _and:
+            - user:
+                authid:
+                  _eq: X-Hasura-User-Id
+            - active:
+                _eq: true
+    role: user
+    table:
+      name: owners
+      schema: public
+  type: create_select_permission

hasura/migrations/1594681091201_update_permission_user_public_table_owners/up.yaml

@@ -0,0 +1,45 @@
+- args:
+    role: user
+    table:
+      name: owners
+      schema: public
+  type: drop_select_permission
+- args:
+    permission:
+      allow_aggregations: true
+      columns:
+      - allow_text_message
+      - accountingid
+      - ownr_addr1
+      - ownr_addr2
+      - ownr_city
+      - ownr_co_nm
+      - ownr_ctry
+      - ownr_ea
+      - ownr_fn
+      - ownr_ln
+      - ownr_ph1
+      - ownr_ph2
+      - ownr_st
+      - ownr_title
+      - ownr_zip
+      - preferred_contact
+      - created_at
+      - updated_at
+      - id
+      - shopid
+      computed_fields: []
+      filter:
+        bodyshop:
+          associations:
+            _and:
+            - user:
+                authid:
+                  _eq: X-Hasura-User-Id
+            - active:
+                _eq: true
+    role: user
+    table:
+      name: owners
+      schema: public
+  type: create_select_permission

hasura/migrations/metadata.yaml

@@ -2948,6 +2948,7 @@ tables:
                   _eq: X-Hasura-User-Id
             - active:
                 _eq: true
+      allow_aggregations: true
   update_permissions:
   - role: user
     permission:
@@ -3983,6 +3984,9 @@ functions:
 - function:
     schema: public
     name: search_owner
+- function:
+    schema: public
+    name: search_owners
 - function:
     schema: public
     name: search_payments