Added payment list to jobs BOD-146

2020-06-16 10:51:54 -07:00
parent ef81991046
commit 951fce539b
42 changed files with 1403 additions and 212 deletions
--- a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
+++ b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
@@ -0,0 +1,154 @@
+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, useHistory, useLocation } from "react-router-dom";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { alphaSort } from "../../utils/sorters";
+
+export default function PaymentsListPaginated({
+  refetch,
+  loading,
+  payments,
+  total,
+}) {
+  const search = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder } = search;
+  const history = useHistory();
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" },
+  });
+
+  const { t } = useTranslation();
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
+      sortOrder: sortcolumn === "ro_number" && sortorder,
+      render: (text, record) => (
+        <Link to={"/manage/jobs/" + record.job.id}>{record.job.ro_number}</Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.est_number"),
+      dataIndex: "est_number",
+      key: "est_number",
+      sorter: (a, b) => a.job.est_number - b.job.est_number,
+      sortOrder: sortcolumn === "est_number" && sortorder,
+      render: (text, record) => (
+        <Link to={"/manage/jobs/" + record.job.id}>
+          {record.job.est_number}
+        </Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
+      sortOrder: sortcolumn === "owner" && sortorder,
+      render: (text, record) => {
+        return record.job.owner ? (
+          <Link to={"/manage/owners/" + record.job.owner.id}>
+            {`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""}`}
+          </Link>
+        ) : (
+          <span>{`${record.job.ownr_fn || ""} ${
+            record.job.ownr_ln || ""
+          }`}</span>
+        );
+      },
+    },
+    {
+      title: t("payments.fields.amount"),
+      dataIndex: "amount",
+      key: "amount",
+      render: (text, record) => (
+        <CurrencyFormatter>{record.amount}</CurrencyFormatter>
+      ),
+    },
+    {
+      title: t("payments.fields.memo"),
+      dataIndex: "memo",
+      key: "memo",
+    },
+    {
+      title: t("payments.fields.transactionid"),
+      dataIndex: "transactionid",
+      key: "transactionid",
+    },
+    {
+      title: t("payments.fields.stripeid"),
+      dataIndex: "stripeid",
+      key: "stripeid",
+    },
+    {
+      title: t("payments.fields.created_at"),
+      dataIndex: "created_at",
+      key: "created_at",
+      render: (text, record) => (
+        <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
+      ),
+    },
+    {
+      title: t("payments.fields.exportedat"),
+      dataIndex: "exportedat",
+      key: "exportedat",
+      render: (text, record) => (
+        <DateTimeFormatter>{record.exportedat}</DateTimeFormatter>
+      ),
+    },
+  ];
+
+  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 (
+    <div>
+      <Table
+        loading={loading}
+        size="small"
+        scroll={{ x: true }}
+        pagination={{
+          position: "top",
+          pageSize: 25,
+          current: parseInt(page || 1),
+          total: total,
+        }}
+        columns={columns}
+        rowKey="id"
+        dataSource={payments}
+        onChange={handleTableChange}
+        title={() => {
+          return (
+            <div className="imex-table-header">
+              <Button onClick={() => refetch()}>
+                <SyncOutlined />
+              </Button>
+              <Input.Search
+                className="imex-table-header__search"
+                placeholder={t("general.labels.search")}
+                onSearch={(value) => {
+                  search.search = value;
+                  history.push({ search: queryString.stringify(search) });
+                }}
+                enterButton
+              />
+            </div>
+          );
+        }}
+      />
+    </div>
+  );
+}