Added invoice search + reformatted invoices page BOD-123

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

@@ -1,159 +1,161 @@
-import React, { useState } from "react";
-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";
-import { Table, Input } from "antd";
-import { useTranslation } from "react-i18next";
-import { alphaSort } from "../../utils/sorters";
-import AlertComponent from "../alert/alert.component";
-import { DateFormatter } from "../../utils/DateFormatter";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
+//DEPRECATED.
 
-export default function InvoicesByVendorList() {
-  const search = queryString.parse(useLocation().search);
-  const history = useHistory();
-  const { page, sortcolumn, sortorder } = search;
+// import React, { useState } from "react";
+// 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";
+// import { Table, Input } from "antd";
+// import { useTranslation } from "react-i18next";
+// import { alphaSort } from "../../utils/sorters";
+// import AlertComponent from "../alert/alert.component";
+// import { DateFormatter } from "../../utils/DateFormatter";
+// import CurrencyFormatter from "../../utils/CurrencyFormatter";
 
-  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,
-    }
-  );
+// export default function InvoicesByVendorList() {
+//   const search = queryString.parse(useLocation().search);
+//   const history = useHistory();
+//   const { page, sortcolumn, sortorder } = search;
 
-  const { t } = useTranslation();
+//   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 [state, setState] = useState({
-    sortedInfo: {},
-    search: "",
-  });
+//   const { t } = useTranslation();
 
-  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 [state, setState] = useState({
+//     sortedInfo: {},
+//     search: "",
+//   });
 
-  const handleOnRowClick = (record) => {
-    if (record) {
-      if (record.id) {
-        search.invoiceid = record.id;
-        history.push({ search: queryString.stringify(search) });
-      }
-    } else {
-      delete search.invoiceid;
-      history.push({ search: queryString.stringify(search) });
-    }
-  };
+//   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 columns = [
-    {
-      title: t("invoices.fields.invoice_number"),
-      dataIndex: "invoice_number",
-      key: "invoice_number",
-      sorter: (a, b) => alphaSort(a.invoice_number, b.invoice_number),
-      sortOrder:
-        state.sortedInfo.columnKey === "invoice_number" &&
-        state.sortedInfo.order,
-    },
-    {
-      title: t("invoices.fields.date"),
-      dataIndex: "date",
-      key: "date",
+//   const handleOnRowClick = (record) => {
+//     if (record) {
+//       if (record.id) {
+//         search.invoiceid = record.id;
+//         history.push({ search: queryString.stringify(search) });
+//       }
+//     } else {
+//       delete search.invoiceid;
+//       history.push({ search: queryString.stringify(search) });
+//     }
+//   };
 
-      sorter: (a, b) => a.date - b.date,
-      sortOrder:
-        state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
-      render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
-    },
-    {
-      title: t("invoices.fields.total"),
-      dataIndex: "total",
-      key: "total",
+//   const columns = [
+//     {
+//       title: t("invoices.fields.invoice_number"),
+//       dataIndex: "invoice_number",
+//       key: "invoice_number",
+//       sorter: (a, b) => alphaSort(a.invoice_number, b.invoice_number),
+//       sortOrder:
+//         state.sortedInfo.columnKey === "invoice_number" &&
+//         state.sortedInfo.order,
+//     },
+//     {
+//       title: t("invoices.fields.date"),
+//       dataIndex: "date",
+//       key: "date",
 
-      sorter: (a, b) => a.total - b.total,
-      sortOrder:
-        state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
-      render: (text, record) => (
-        <CurrencyFormatter>{record.total}</CurrencyFormatter>
-      ),
-    },
-  ];
+//       sorter: (a, b) => a.date - b.date,
+//       sortOrder:
+//         state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
+//       render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
+//     },
+//     {
+//       title: t("invoices.fields.total"),
+//       dataIndex: "total",
+//       key: "total",
 
-  const handleSearch = (e) => {
-    setState({ ...state, search: e.target.value });
-  };
+//       sorter: (a, b) => a.total - b.total,
+//       sortOrder:
+//         state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
+//       render: (text, record) => (
+//         <CurrencyFormatter>{record.total}</CurrencyFormatter>
+//       ),
+//     },
+//   ];
 
-  const dataSource = state.search
-    ? data.invoices.filter(
-        (i) =>
-          (i.invoice_number || "")
-            .toLowerCase()
-            .includes(state.search.toLowerCase()) ||
-          (i.amount || "").toString().includes(state.search)
-      )
-    : (data && data.invoices) || [];
+//   const handleSearch = (e) => {
+//     setState({ ...state, search: e.target.value });
+//   };
 
-  if (error) return <AlertComponent message={error.message} type='error' />;
+//   const dataSource = state.search
+//     ? data.invoices.filter(
+//         (i) =>
+//           (i.invoice_number || "")
+//             .toLowerCase()
+//             .includes(state.search.toLowerCase()) ||
+//           (i.amount || "").toString().includes(state.search)
+//       )
+//     : (data && data.invoices) || [];
 
-  return (
-    <Table
-      loading={loading}
-      title={() => {
-        return (
-          <div>
-            <Input
-              value={state.search}
-              onChange={handleSearch}
-              placeholder={t("general.labels.search")}
-              allowClear
-            />
-          </div>
-        );
-      }}
-      dataSource={dataSource}
-      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'
-      onChange={handleTableChange}
-      rowSelection={{
-        onSelect: (record) => {
-          handleOnRowClick(record);
-        },
-        selectedRowKeys: [search.invoiceid],
-        type: "radio",
-      }}
-      onRow={(record, rowIndex) => {
-        return {
-          onClick: (event) => {
-            handleOnRowClick(record);
-          }, // click row
-        };
-      }}
-    />
-  );
-}
+//   if (error) return <AlertComponent message={error.message} type='error' />;
+
+//   return (
+//     <Table
+//       loading={loading}
+//       title={() => {
+//         return (
+//           <div>
+//             <Input
+//               value={state.search}
+//               onChange={handleSearch}
+//               placeholder={t("general.labels.search")}
+//               allowClear
+//             />
+//           </div>
+//         );
+//       }}
+//       dataSource={dataSource}
+//       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'
+//       onChange={handleTableChange}
+//       rowSelection={{
+//         onSelect: (record) => {
+//           handleOnRowClick(record);
+//         },
+//         selectedRowKeys: [search.invoiceid],
+//         type: "radio",
+//       }}
+//       onRow={(record, rowIndex) => {
+//         return {
+//           onClick: (event) => {
+//             handleOnRowClick(record);
+//           }, // click row
+//         };
+//       }}
+//     />
+//   );
+// }

client/src/components/invoices-list-table/invoices-list-table.component.jsx

@@ -94,7 +94,8 @@ export function InvoicesListTableComponent({
       render: (text, record) => (
         <div>
           <Link
-            to={`/manage/invoices?invoiceid=${record.id}&vendorid=${record.vendorid}`}>
+            to={`/manage/invoices?invoiceid=${record.id}&vendorid=${record.vendorid}`}
+          >
             <Button>{t("invoices.actions.edit")}</Button>
           </Link>
           <Button
@@ -119,7 +120,8 @@ export function InvoicesListTableComponent({
                   isReturn: true,
                 },
               })
-            }>
+            }
+          >
             {t("invoices.actions.return")}
           </Button>
         </div>
@@ -243,11 +245,11 @@ export function InvoicesListTableComponent({
           </Descriptions.Item>
         </Descriptions>
         <Table
-          size='small'
+          size="small"
           scroll={{ x: "50%", y: "40rem" }}
           pagination={{ position: "top", defaultPageSize: 25 }}
           columns={columns}
-          rowKey='id'
+          rowKey="id"
           dataSource={record.invoicelines}
         />
       </div>
@@ -261,37 +263,45 @@ export function InvoicesListTableComponent({
       </Typography.Title>
       <Table
         loading={loading}
-        size='small'
+        size="small"
         title={() => (
-          <div className='imex-table-header'>
+          <div className="imex-table-header">
             <Button onClick={() => refetch()}>
               <SyncOutlined />
             </Button>
-            <Button
-              onClick={() => {
-                setInvoiceEnterContext({
-                  actions: { refetch: invoicesQuery.refetch },
-                  context: {
-                    job,
-                  },
-                });
-              }}>
-              {t("jobs.actions.postInvoices")}
-            </Button>
-            <Button
-              onClick={() => {
-                setReconciliationContext({
-                  actions: { refetch: invoicesQuery.refetch },
-                  context: {
-                    job,
-                    invoices:
-                      (invoicesQuery.data && invoicesQuery.data.invoices) || [],
-                  },
-                });
-              }}>
-              {t("jobs.actions.reconcile")}
-            </Button>{" "}
-            <div className='imex-table-header__search'>
+            {job ? (
+              <div>
+                <Button
+                  onClick={() => {
+                    setInvoiceEnterContext({
+                      actions: { refetch: invoicesQuery.refetch },
+                      context: {
+                        job,
+                      },
+                    });
+                  }}
+                >
+                  {t("jobs.actions.postInvoices")}
+                </Button>
+                <Button
+                  onClick={() => {
+                    setReconciliationContext({
+                      actions: { refetch: invoicesQuery.refetch },
+                      context: {
+                        job,
+                        invoices:
+                          (invoicesQuery.data && invoicesQuery.data.invoices) ||
+                          [],
+                      },
+                    });
+                  }}
+                >
+                  {t("jobs.actions.reconcile")}
+                </Button>
+              </div>
+            ) : null}
+
+            <div className="imex-table-header__search">
               <Input.Search
                 placeholder={t("general.labels.search")}
                 onChange={(e) => {
@@ -305,7 +315,7 @@ export function InvoicesListTableComponent({
         expandedRowRender={rowExpander}
         pagination={{ position: "top", defaultPageSize: 25 }}
         columns={columns}
-        rowKey='id'
+        rowKey="id"
         dataSource={invoices}
         onChange={handleTableChange}
         expandable={{