Added owners search + owner pagination page BOD-115

This commit is contained in:
Patrick Fic
2020-07-13 16:02:17 -07:00
parent d5026133e0
commit cff21c5bdf
9 changed files with 211 additions and 23 deletions

View File

@@ -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}

View File

@@ -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}
/>
);

View File

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

View File

@@ -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

View File

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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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