BOD-26 Added totals calculation for job reconciliation.

2020-05-14 11:05:55 -07:00
parent 0473421c6c
commit cc47fd698a
14 changed files with 502 additions and 19 deletions
--- a/client/src/components/job-reconciliation-invoices-table/job-reconciliation-invoices-table.component.jsx
+++ b/client/src/components/job-reconciliation-invoices-table/job-reconciliation-invoices-table.component.jsx
@@ -0,0 +1,113 @@
+import { Button, Table, Statistic, Checkbox } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { alphaSort } from "../../utils/sorters";
+import Dinero from "dinero.js";
+
+export default function JobReconciliationInvoiceTable({
+  invoiceLineState,
+  invoiceLineData,
+}) {
+  const { t } = useTranslation();
+
+  const [state, setState] = useState({
+    sortedInfo: {},
+  });
+
+  const [selectedLines, setSelectedLines] = invoiceLineState;
+  const [total, setTotal] = useState(Dinero({ amount: 0 }).toFormat());
+
+  const columns = [
+    {
+      title: t("invoicelines.fields.line_desc"),
+      dataIndex: "line_desc",
+      key: "line_desc",
+      sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
+      sortOrder:
+        state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
+    },
+    {
+      title: t("invoicelines.fields.retail"),
+      dataIndex: "actual_price",
+      key: "actual_price",
+      sorter: (a, b) => a.actual_price - b.actual_price,
+      sortOrder:
+        state.sortedInfo.columnKey === "actual_price" && state.sortedInfo.order,
+      render: (text, record) => (
+        <CurrencyFormatter>{record.actual_price}</CurrencyFormatter>
+      ),
+    },
+    {
+      title: t("invoicelines.fields.actual_cost"),
+      dataIndex: "actual_cost",
+      key: "actual_cost",
+      sorter: (a, b) => a.actual_cost - b.actual_cost,
+      sortOrder:
+        state.sortedInfo.columnKey === "actual_cost" && state.sortedInfo.order,
+      render: (text, record) => (
+        <CurrencyFormatter>{record.actual_cost}</CurrencyFormatter>
+      ),
+    },
+    {
+      title: t("invoicelines.fields.quantity"),
+      dataIndex: "quantity",
+      key: "quantity",
+      sorter: (a, b) => a.quantity - b.quantity,
+      sortOrder:
+        state.sortedInfo.columnKey === "quantity" && state.sortedInfo.order,
+    },
+    {
+      title: t("invoices.fields.is_credit_memo"),
+      dataIndex: "is_credit_memo",
+      key: "is_credit_memo",
+      sorter: (a, b) => a.is_credit_memo - b.is_credit_memo,
+      sortOrder:
+        state.sortedInfo.columnKey === "is_credit_memo" &&
+        state.sortedInfo.order,
+      render: (text, record) => <Checkbox checked={record.is_credit_memo} />,
+    },
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+  const handleOnRowClick = (selectedRecordKeys, selectedRecords) => {
+    setSelectedLines(selectedRecordKeys);
+    calculateTotal(selectedRecords);
+  };
+
+  const calculateTotal = (selectedRecords) => {
+    let total = Dinero({ amount: 0 });
+    selectedRecords.forEach(
+      (record) =>
+        (total = total.add(
+          Dinero({
+            amount:
+              record.actual_price * 100 * (record.is_credit_memo ? -1 : 1),
+          }).multiply(record.quantity)
+        ))
+    );
+
+    setTotal(total.toFormat());
+  };
+
+  return (
+    <div>
+      <Table
+        size='small'
+        title={() => <div></div>}
+        pagination={{ position: "top", defaultPageSize: 25 }}
+        columns={columns}
+        rowKey='id'
+        dataSource={invoiceLineData}
+        onChange={handleTableChange}
+        rowSelection={{
+          onChange: handleOnRowClick,
+          selectedRowKeys: selectedLines,
+        }}
+      />
+      <Statistic value={total} title='total' />
+    </div>
+  );
+}