Added invoices by vendor pagination BOD-150

client/src/components/chat-messages-list/chat-message-list.styles.scss

@@ -31,10 +31,10 @@
   //display: inline-block;
 
   .message-img {
-    max-width: 33%;
+    max-width: 3rem;
+    max-height: 3rem;
     object-fit: contain;
   }
-
 }
 
 .yours {

client/src/components/invoices-by-vendor-list/invoices-by-vendor-list.component.jsx

@@ -1,5 +1,5 @@
 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 queryString from "query-string";
 import { useHistory, useLocation } from "react-router-dom";
@@ -13,11 +13,28 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 export default function InvoicesByVendorList() {
   const search = queryString.parse(useLocation().search);
   const history = useHistory();
+  const { page, sortcolumn, sortorder } = search;
 
-  const { loading, error, data } = useQuery(QUERY_INVOICES_BY_VENDOR, {
-    variables: { vendorId: search.vendorid },
-    skip: !!!search.vendorid,
-  });
+  const { loading, error, data } = useQuery(
+    QUERY_INVOICES_BY_VENDOR_PAGINATED,
+    {
+      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();
 
@@ -28,6 +45,10 @@ export default function InvoicesByVendorList() {
 
   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) });
   };
 
   const handleOnRowClick = (record) => {
@@ -90,7 +111,7 @@ export default function InvoicesByVendorList() {
       )
     : (data && data.invoices) || [];
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
 
   return (
     <Table
@@ -108,10 +129,16 @@ export default function InvoicesByVendorList() {
         );
       }}
       dataSource={dataSource}
-      size="small"
-      pagination={{ position: "top" }}
+      size='small'
+      scroll={{ x: true }}
+      pagination={{
+        position: "top",
+        pageSize: 25,
+        current: parseInt(page || 1),
+        total: data ? data.invoices_aggregate.aggregate.count : 0,
+      }}
       columns={columns}
-      rowKey="id"
+      rowKey='id'
       onChange={handleTableChange}
       rowSelection={{
         onSelect: (record) => {

client/src/graphql/invoices.queries.js

@@ -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`
   query QUERY_INVOICE_BY_PK($invoiceid: uuid!) {
     invoices_by_pk(id: $invoiceid) {