Added invoices by vendor pagination BOD-150
This commit is contained in:
@@ -31,10 +31,10 @@
|
|||||||
//display: inline-block;
|
//display: inline-block;
|
||||||
|
|
||||||
.message-img {
|
.message-img {
|
||||||
max-width: 33%;
|
max-width: 3rem;
|
||||||
|
max-height: 3rem;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.yours {
|
.yours {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { QUERY_INVOICES_BY_VENDOR } from "../../graphql/invoices.queries";
|
import { QUERY_INVOICES_BY_VENDOR_PAGINATED } from "../../graphql/invoices.queries";
|
||||||
import { useQuery } from "@apollo/react-hooks";
|
import { useQuery } from "@apollo/react-hooks";
|
||||||
import queryString from "query-string";
|
import queryString from "query-string";
|
||||||
import { useHistory, useLocation } from "react-router-dom";
|
import { useHistory, useLocation } from "react-router-dom";
|
||||||
@@ -13,11 +13,28 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
|||||||
export default function InvoicesByVendorList() {
|
export default function InvoicesByVendorList() {
|
||||||
const search = queryString.parse(useLocation().search);
|
const search = queryString.parse(useLocation().search);
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
|
const { page, sortcolumn, sortorder } = search;
|
||||||
|
|
||||||
const { loading, error, data } = useQuery(QUERY_INVOICES_BY_VENDOR, {
|
const { loading, error, data } = useQuery(
|
||||||
variables: { vendorId: search.vendorid },
|
QUERY_INVOICES_BY_VENDOR_PAGINATED,
|
||||||
skip: !!!search.vendorid,
|
{
|
||||||
});
|
variables: {
|
||||||
|
vendorId: search.vendorid,
|
||||||
|
offset: page ? (page - 1) * 25 : 0,
|
||||||
|
limit: 25,
|
||||||
|
order: [
|
||||||
|
{
|
||||||
|
[sortcolumn || "date"]: sortorder
|
||||||
|
? sortorder === "descend"
|
||||||
|
? "desc"
|
||||||
|
: "asc"
|
||||||
|
: "desc",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
skip: !!!search.vendorid,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
@@ -28,6 +45,10 @@ export default function InvoicesByVendorList() {
|
|||||||
|
|
||||||
const handleTableChange = (pagination, filters, sorter) => {
|
const handleTableChange = (pagination, filters, sorter) => {
|
||||||
setState({ ...state, filteredInfo: filters, sortedInfo: 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) });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOnRowClick = (record) => {
|
const handleOnRowClick = (record) => {
|
||||||
@@ -90,7 +111,7 @@ export default function InvoicesByVendorList() {
|
|||||||
)
|
)
|
||||||
: (data && data.invoices) || [];
|
: (data && data.invoices) || [];
|
||||||
|
|
||||||
if (error) return <AlertComponent message={error.message} type="error" />;
|
if (error) return <AlertComponent message={error.message} type='error' />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Table
|
<Table
|
||||||
@@ -108,10 +129,16 @@ export default function InvoicesByVendorList() {
|
|||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
dataSource={dataSource}
|
dataSource={dataSource}
|
||||||
size="small"
|
size='small'
|
||||||
pagination={{ position: "top" }}
|
scroll={{ x: true }}
|
||||||
|
pagination={{
|
||||||
|
position: "top",
|
||||||
|
pageSize: 25,
|
||||||
|
current: parseInt(page || 1),
|
||||||
|
total: data ? data.invoices_aggregate.aggregate.count : 0,
|
||||||
|
}}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
rowKey="id"
|
rowKey='id'
|
||||||
onChange={handleTableChange}
|
onChange={handleTableChange}
|
||||||
rowSelection={{
|
rowSelection={{
|
||||||
onSelect: (record) => {
|
onSelect: (record) => {
|
||||||
|
|||||||
@@ -110,6 +110,36 @@ export const QUERY_INVOICES_BY_VENDOR = gql`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
export const QUERY_INVOICES_BY_VENDOR_PAGINATED = gql`
|
||||||
|
query QUERY_INVOICES_BY_VENDOR_PAGINATED(
|
||||||
|
$vendorId: uuid!
|
||||||
|
$offset: Int
|
||||||
|
$limit: Int
|
||||||
|
$order: [invoices_order_by!]!
|
||||||
|
) {
|
||||||
|
invoices(
|
||||||
|
where: { vendorid: { _eq: $vendorId } }
|
||||||
|
offset: $offset
|
||||||
|
limit: $limit
|
||||||
|
order_by: $order
|
||||||
|
) {
|
||||||
|
id
|
||||||
|
job {
|
||||||
|
id
|
||||||
|
ro_number
|
||||||
|
}
|
||||||
|
total
|
||||||
|
invoice_number
|
||||||
|
date
|
||||||
|
}
|
||||||
|
invoices_aggregate(where: { vendorid: { _eq: $vendorId } }) {
|
||||||
|
aggregate {
|
||||||
|
count(distinct: true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
export const QUERY_INVOICE_BY_PK = gql`
|
export const QUERY_INVOICE_BY_PK = gql`
|
||||||
query QUERY_INVOICE_BY_PK($invoiceid: uuid!) {
|
query QUERY_INVOICE_BY_PK($invoiceid: uuid!) {
|
||||||
invoices_by_pk(id: $invoiceid) {
|
invoices_by_pk(id: $invoiceid) {
|
||||||
|
|||||||
@@ -0,0 +1,41 @@
|
|||||||
|
- args:
|
||||||
|
role: user
|
||||||
|
table:
|
||||||
|
name: invoices
|
||||||
|
schema: public
|
||||||
|
type: drop_select_permission
|
||||||
|
- args:
|
||||||
|
permission:
|
||||||
|
allow_aggregations: false
|
||||||
|
columns:
|
||||||
|
- created_at
|
||||||
|
- date
|
||||||
|
- due_date
|
||||||
|
- exported
|
||||||
|
- exported_at
|
||||||
|
- federal_tax_rate
|
||||||
|
- id
|
||||||
|
- invoice_number
|
||||||
|
- is_credit_memo
|
||||||
|
- jobid
|
||||||
|
- local_tax_rate
|
||||||
|
- state_tax_rate
|
||||||
|
- total
|
||||||
|
- updated_at
|
||||||
|
- vendorid
|
||||||
|
computed_fields: []
|
||||||
|
filter:
|
||||||
|
job:
|
||||||
|
bodyshop:
|
||||||
|
associations:
|
||||||
|
_and:
|
||||||
|
- user:
|
||||||
|
authid:
|
||||||
|
_eq: X-Hasura-User-Id
|
||||||
|
- active:
|
||||||
|
_eq: true
|
||||||
|
role: user
|
||||||
|
table:
|
||||||
|
name: invoices
|
||||||
|
schema: public
|
||||||
|
type: create_select_permission
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
- args:
|
||||||
|
role: user
|
||||||
|
table:
|
||||||
|
name: invoices
|
||||||
|
schema: public
|
||||||
|
type: drop_select_permission
|
||||||
|
- args:
|
||||||
|
permission:
|
||||||
|
allow_aggregations: true
|
||||||
|
columns:
|
||||||
|
- created_at
|
||||||
|
- date
|
||||||
|
- due_date
|
||||||
|
- exported
|
||||||
|
- exported_at
|
||||||
|
- federal_tax_rate
|
||||||
|
- id
|
||||||
|
- invoice_number
|
||||||
|
- is_credit_memo
|
||||||
|
- jobid
|
||||||
|
- local_tax_rate
|
||||||
|
- state_tax_rate
|
||||||
|
- total
|
||||||
|
- updated_at
|
||||||
|
- vendorid
|
||||||
|
computed_fields: []
|
||||||
|
filter:
|
||||||
|
job:
|
||||||
|
bodyshop:
|
||||||
|
associations:
|
||||||
|
_and:
|
||||||
|
- user:
|
||||||
|
authid:
|
||||||
|
_eq: X-Hasura-User-Id
|
||||||
|
- active:
|
||||||
|
_eq: true
|
||||||
|
role: user
|
||||||
|
table:
|
||||||
|
name: invoices
|
||||||
|
schema: public
|
||||||
|
type: create_select_permission
|
||||||
@@ -1474,6 +1474,7 @@ tables:
|
|||||||
_eq: X-Hasura-User-Id
|
_eq: X-Hasura-User-Id
|
||||||
- active:
|
- active:
|
||||||
_eq: true
|
_eq: true
|
||||||
|
allow_aggregations: true
|
||||||
update_permissions:
|
update_permissions:
|
||||||
- role: user
|
- role: user
|
||||||
permission:
|
permission:
|
||||||
|
|||||||
@@ -159,3 +159,7 @@ exports.receive = (req, res) => {
|
|||||||
// [0] MediaUrl0: 'https://api.twilio.com/2010-04-01/Accounts/AC6c09d337d6b9c68ab6488c2052bd457c/Messages/MM14fa2851ba26e0dc2b62073f8e7cdf27/Media/MEf129dd37979852f395eb29ffb126e19e',
|
// [0] MediaUrl0: 'https://api.twilio.com/2010-04-01/Accounts/AC6c09d337d6b9c68ab6488c2052bd457c/Messages/MM14fa2851ba26e0dc2b62073f8e7cdf27/Media/MEf129dd37979852f395eb29ffb126e19e',
|
||||||
// [0] ApiVersion: '2010-04-01'
|
// [0] ApiVersion: '2010-04-01'
|
||||||
// [0] }
|
// [0] }
|
||||||
|
|
||||||
|
|
||||||
|
// [0] MediaContentType0: 'image/jpeg',
|
||||||
|
// MediaContentType0: 'video/3gpp',
|
||||||
|
|||||||
Reference in New Issue
Block a user