From 69698a29762a63d7e51ba94751513586708ba889 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Tue, 4 Aug 2020 10:12:25 -0700
Subject: [PATCH] Added invocie line return selection by line rather than all
 items BOD-222

---
 .../invoices-list-table.component.jsx         | 85 +++++++++++++------
 1 file changed, 59 insertions(+), 26 deletions(-)

diff --git a/client/src/components/invoices-list-table/invoices-list-table.component.jsx b/client/src/components/invoices-list-table/invoices-list-table.component.jsx
index 6a350520f..fe9bf37ad 100644
--- a/client/src/components/invoices-list-table/invoices-list-table.component.jsx
+++ b/client/src/components/invoices-list-table/invoices-list-table.component.jsx
@@ -30,6 +30,11 @@ export function InvoicesListTableComponent({
   setReconciliationContext,
 }) {
   const { t } = useTranslation();
+  const [
+    selectedInvoiceLinesByInvoice,
+    setSelectedInvoiceLinesByInvoice,
+  ] = useState({});
+
   const [state, setState] = useState({
     sortedInfo: {},
   });
@@ -98,32 +103,6 @@ export function InvoicesListTableComponent({
           >
             <Button>{t("invoices.actions.edit")}</Button>
           </Link>
-          <Button
-            disabled={record.is_credit_memo}
-            onClick={() =>
-              setPartsOrderContext({
-                actions: {},
-                context: {
-                  jobId: job.id,
-                  vendorId: record.vendorid,
-                  returnFromInvoice: record.id,
-                  invoiceNumber: record.invoice_number,
-                  linesToOrder: record.invoicelines.map((i) => {
-                    return {
-                      line_desc: i.line_desc,
-                      db_price: i.actual_price,
-                      act_price: i.actual_cost,
-                      quantity: i.quantity,
-                      joblineid: i.joblineid,
-                    };
-                  }),
-                  isReturn: true,
-                },
-              })
-            }
-          >
-            {t("invoices.actions.return")}
-          </Button>
         </div>
       ),
     },
@@ -228,6 +207,20 @@ export function InvoicesListTableComponent({
       },
     ];
 
+    const handleOnInvoiceRowclick = (selectedRows) => {
+      console.log("selectedRows", selectedRows);
+      console.log("record.id", record.id);
+      setSelectedInvoiceLinesByInvoice({
+        ...selectedInvoiceLinesByInvoice,
+        [record.id]: selectedRows.map((r) => r.id),
+      });
+    };
+
+    console.log(
+      "selectedInvoiceLinesByInvoice[record.id]",
+      selectedInvoiceLinesByInvoice[record.id]
+    );
+
     return (
       <div>
         <Typography.Title level={3}>{`${t("invoices.fields.invoice_number")} ${
@@ -244,6 +237,36 @@ export function InvoicesListTableComponent({
             {`${record.local_tax_rate}%` || ""}
           </Descriptions.Item>
         </Descriptions>
+        <Button
+          disabled={record.is_credit_memo}
+          onClick={() =>
+            setPartsOrderContext({
+              actions: {},
+              context: {
+                jobId: job.id,
+                vendorId: record.vendorid,
+                returnFromInvoice: record.id,
+                invoiceNumber: record.invoice_number,
+                linesToOrder: record.invoicelines
+                  .filter((il) =>
+                    selectedInvoiceLinesByInvoice[record.id].includes(il.id)
+                  )
+                  .map((i) => {
+                    return {
+                      line_desc: i.line_desc,
+                      db_price: i.actual_price,
+                      act_price: i.actual_cost,
+                      quantity: i.quantity,
+                      joblineid: i.joblineid,
+                    };
+                  }),
+                isReturn: true,
+              },
+            })
+          }
+        >
+          {t("invoices.actions.return")}
+        </Button>
         <Table
           size="small"
           scroll={{ x: "50%", y: "40rem" }}
@@ -251,6 +274,16 @@ export function InvoicesListTableComponent({
           columns={columns}
           rowKey="id"
           dataSource={record.invoicelines}
+          rowSelection={{
+            onSelect: (record, selected, selectedRows) => {
+              handleOnInvoiceRowclick(selectedRows);
+            },
+            onSelectAll: (selected, selectedRows, changeRows) => {
+              handleOnInvoiceRowclick(selectedRows);
+            },
+            selectedRowKeys: selectedInvoiceLinesByInvoice[record.id],
+            type: "checkbox",
+          }}
         />
       </div>
     );