Breaking Changes as a part of BOD-63 on invoice enter. WIP for all invoices screen editing + lookup.

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

@@ -0,0 +1,132 @@
+import React, { useState } from "react";
+import { QUERY_INVOICES_BY_VENDOR } 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";
+
+export default function InvoicesByVendorList() {
+  const search = queryString.parse(useLocation().search);
+  const history = useHistory();
+
+  const { loading, error, data } = useQuery(QUERY_INVOICES_BY_VENDOR, {
+    variables: { vendorId: search.vendorid },
+    skip: !!!search.vendorid,
+  });
+
+  const { t } = useTranslation();
+
+  const [state, setState] = useState({
+    sortedInfo: {},
+    search: "",
+  });
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  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 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.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",
+
+      sorter: (a, b) => a.total - b.total,
+      sortOrder:
+        state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
+      render: (text, record) => (
+        <CurrencyFormatter>{record.total}</CurrencyFormatter>
+      ),
+    },
+  ];
+
+  const handleSearch = (e) => {
+    setState({ ...state, search: e.target.value });
+  };
+
+  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) || [];
+
+  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"
+      pagination={{ position: "top" }}
+      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
+        };
+      }}
+    />
+  );
+}