saeloun · supriya3105 · Jun 24, 2022 · Jun 20, 2022 · Jun 20, 2022 · Jun 20, 2022
diff --git a/app/javascript/src/components/Invoices/Edit/InvoiceTable.tsx b/app/javascript/src/components/Invoices/Edit/InvoiceTable.tsx
@@ -73,16 +73,19 @@ const InvoiceTable = ({
               manualEntryArr={manualEntryArr}
               setManualEntryArr={setManualEntryArr}
             />
-          )
-          }
+          )}
           {
             selectedLineItems.map((item, index) => (
-              <NewLineItemRow
-                item={item}
-                selectedOption={selectedLineItems}
-                setSelectedOption={setSelectedLineItems}
-                key={index}
-              />
+              item._destroy ? (
+                <></>
+              ) : (
+                <NewLineItemRow
+                  item={item}
+                  selectedOption={selectedLineItems}
+                  setSelectedOption={setSelectedLineItems}
+                  key={index}
+                />
+              )
             ))}
         </tbody>
       </table>

diff --git a/app/javascript/src/components/Invoices/Edit/InvoiceTotal.tsx b/app/javascript/src/components/Invoices/Edit/InvoiceTotal.tsx
@@ -84,7 +84,10 @@ const InvoiceTotal = ({
   };
 
   useEffect(() => {
-    const newLineItemsSubTotal = newLineItems.reduce((sum, { lineTotal }) => (sum + Number(lineTotal)), 0);
+    const newLineItemsSubTotalArr = newLineItems
+      .filter((lineItem) => !lineItem._destroy );
+
+    const newLineItemsSubTotal = newLineItemsSubTotalArr.reduce((sum, { lineTotal }) => (sum + Number(lineTotal)), 0);
     const manualEntryTotal = manualEntryArr.reduce((sum, { lineTotal }) => (sum + Number(lineTotal)), 0);
     const subTotal = Number(newLineItemsSubTotal) + Number(manualEntryTotal);
     const newTotal = subTotal + Number(tax) - Number(discount);

diff --git a/app/javascript/src/components/Invoices/Edit/index.tsx b/app/javascript/src/components/Invoices/Edit/index.tsx
@@ -28,7 +28,7 @@ const EditInvoice = () => {
   const [reference] = useState<any>("");
   const [amount, setAmount] = useState<any>(0);
   const [amountDue, setAmountDue] = useState<any>(0);
-  const [amountPaid] = useState<any>(0);
+  const [amountPaid, setAmountPaid] = useState<any>(0);
   const [discount, setDiscount] = useState<any>(0);
   const [tax, setTax] = useState<any>(0);
   const [issueDate, setIssueDate] = useState();
@@ -51,6 +51,7 @@ const EditInvoice = () => {
       setDiscount(res.data.discount);
       setSelectedClient(res.data.client);
       setAmountDue(res.data.amountDue);
+      setAmountPaid(res.data.amountPaid);
     } catch (e) {
       navigate("/invoices/error");
       return {};
@@ -90,8 +91,8 @@ const EditInvoice = () => {
       invoice_number: invoiceNumber || invoiceDetails.invoiceNumber,
       issue_date: dayjs(issueDate || invoiceDetails.issueDate).format("DD.MM.YYYY"),
       due_date: dayjs(dueDate || invoiceDetails.dueDate).format("DD.MM.YYYY"),
-      amount_due: amountDue || invoiceDetails.amountDue,
-      amount_paid: amountPaid || invoiceDetails.amountPaid,
+      amount_due: amountDue,
+      amount_paid: amountPaid,
       amount: amount,
       discount: Number(discount),
       tax: tax || invoiceDetails.tax,
@@ -143,8 +144,8 @@ const EditInvoice = () => {
             newLineItems={selectedLineItems}
             manualEntryArr={manualEntryArr}
             setAmount={setAmount}
-            amountPaid={amountPaid || invoiceDetails.amountPaid}
-            amountDue={amountDue || invoiceDetails.amountDue}
+            amountPaid={amountPaid}
+            amountDue={amountDue}
             setAmountDue={setAmountDue}
             discount={discount}
             setDiscount={setDiscount}

diff --git a/app/javascript/src/components/Invoices/Generate/InvoiceTable.tsx b/app/javascript/src/components/Invoices/Generate/InvoiceTable.tsx
@@ -151,6 +151,7 @@ const InvoiceTable = ({
                 key={index}
                 setSelectedOption={setSelectedOption}
                 selectedOption={selectedOption}
+                removeElement
               />
             ))}
         </tbody>

diff --git a/app/javascript/src/components/Invoices/Invoice/InvoiceLineItems.tsx b/app/javascript/src/components/Invoices/Invoice/InvoiceLineItems.tsx
@@ -33,10 +33,14 @@ const InvoiceLineItems = ({ items, showHeader }) => {
         <tbody className="w-full">
           {items.length > 0
             && items.map(item => (
-              <LineItem
-                key={item.id}
-                item={item}
-              />
+              item._destroy ? (
+                <></>
+              ) : (
+                <LineItem
+                  key={item.id}
+                  item={item}
+                />
+              )
             ))}
         </tbody>
       </table>

diff --git a/app/javascript/src/components/Invoices/common/NewLineItemRow/EditLineItems.tsx b/app/javascript/src/components/Invoices/common/NewLineItemRow/EditLineItems.tsx
@@ -1,43 +1,53 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+
 import DatePicker from "react-datepicker";
+import { Trash } from "phosphor-react";
 
 const EditLineItems = ({
   item,
   setSelectedOption,
   selectedOption,
+  handleDelete,
   setEdit
 }) => {
 
   const strName = item.name || `${item.first_name} ${item.last_name}`;
   const quantity = (item.qty / 60) || (item.quantity / 60);
   const [name, setName] = useState<string>(strName);
-  const newDate = Date.parse(item.date);
-  const [lineItemDate, setLineItemDate] = useState(newDate);
+  const formatedDate = new Date(item.date);
+  const [lineItemDate, setLineItemDate] = useState(formatedDate);
   const [description, setDescription] = useState<string>(item.description);
-  const [rate, setRate] = useState<any>(item.rate);
-  const [qty, setQty] = useState<any>(quantity);
-  const [lineTotal, setLineTotal] = useState<any>(quantity * item.rate);
+  const rate = item.rate;
+  const lineTotal = quantity * item.rate;
+
+  useEffect(() => {
+    const names = name.split(" ");
+    const newItem = {
+      ...item,
+      first_name: names.splice(0, 1)[0],
+      last_name: names.join(" "),
+      name: name,
+      date: lineItemDate,
+      description,
+      rate,
+      qty: Number(quantity) * 60,
+      lineTotal: Number(quantity) * Number(rate)
+    };
+
+    const selectedOptionArr = selectedOption.map((option) => {
+      if ((option.id && option.id === item.id) ||
+        (option.timesheet_entry_id && option.timesheet_entry_id === item.timesheet_entry_id)) {
+        return newItem;
+      }
 
-  const onEnter = e => {
-    if (e.key == "Enter") {
-      const sanitizedSelected = selectedOption.filter(option =>
-        option.id !== item.id || option.timesheet_entry_id !== item.timesheet_entry_id
-      );
-      const names = name.split(" ");
-      const newItem = {
-        ...item,
-        first_name: names.splice(0, 1)[0],
-        last_name: names.join(" "),
-        name: name,
-        date: lineItemDate,
-        description,
-        rate,
-        qty: Number(qty) * 60,
-        lineTotal: Number(qty) * Number(rate)
-      };
-      setSelectedOption([...sanitizedSelected, { ...newItem }]);
-      setEdit(false);
-    }
+      return option;
+    });
+
+    setSelectedOption(selectedOptionArr);
+  }, [name, lineItemDate, description]);
+
+  const closeEditField = (event) => {
+    if (event.key === "Enter") setEdit(false);
   };
 
   return (
@@ -49,7 +59,7 @@ const EditLineItems = ({
           className=" p-1 px-2 bg-white rounded w-full font-medium text-sm text-miru-dark-purple-1000 focus:outline-none focus:border-miru-gray-1000 focus:ring-1 focus:ring-miru-gray-1000"
           value={name}
           onChange={e => setName(e.target.value)}
-          onKeyDown={e => onEnter(e)}
+          onKeyDown={closeEditField}
         />
       </td>
       <td className="w-full">
@@ -59,7 +69,7 @@ const EditLineItems = ({
           dateFormat="dd.MM.yyyy"
           selected={lineItemDate}
           onChange={(date) => setLineItemDate(date)}
-          onKeyDown={e => onEnter(e)}
+          onKeyDown={closeEditField}
         />
       </td>
       <td className="p-1 w-full">
@@ -69,37 +79,35 @@ const EditLineItems = ({
           className=" p-1 px-2 bg-white rounded w-full font-medium text-sm text-miru-dark-purple-1000 focus:outline-none focus:border-miru-gray-1000 focus:ring-1 focus:ring-miru-gray-1000"
           value={description}
           onChange={e => setDescription(e.target.value)}
-          onKeyDown={e => onEnter(e)}
+          onKeyDown={closeEditField}
         />
       </td>
       <td className=" w-full">
         <input
           type="text"
           placeholder="Rate"
           className=" p-1 px-2 bg-miru-gray-600 rounded w-full font-medium text-sm text-miru-dark-purple-1000 text-right focus:outline-none focus:border-miru-gray-1000 focus:ring-1 focus:ring-miru-gray-1000"
-          value={rate}
+          value={item.rate}
           disabled={true}
-          onChange={e => setRate(e.target.value)}
-          onKeyDown={e => onEnter(e)}
         />
       </td>
       <td className="p-1 w-full">
         <input
           type="text"
           placeholder="Qty"
           className=" p-1 px-2 bg-miru-gray-600 rounded w-full font-medium text-sm text-miru-dark-purple-1000 text-right focus:outline-none focus:border-miru-gray-1000 focus:ring-1 focus:ring-miru-gray-1000"
-          value={qty}
+          value={quantity}
           disabled={true}
-          onChange={e => {
-            setQty(e.target.value);
-            setLineTotal(Number(rate) * Number(e.target.value));
-          }}
-          onKeyDown={e => onEnter(e)}
         />
       </td>
       <td className="text-right font-normal text-base text-miru-dark-purple-1000 focus:outline-none focus:border-miru-gray-1000 focus:ring-1 focus:ring-miru-gray-1000">
         {lineTotal.toFixed(2)}
       </td>
+      <td>
+        <button onClick={() => handleDelete(item)} className="w-full flex items-center px-2.5 text-left py-4 hover:bg-miru-gray-100">
+          <Trash size={16} color="#E04646" weight="bold" />
+        </button>
+      </td>
     </tr>
   );
 };

diff --git a/app/javascript/src/components/Invoices/common/NewLineItemRow/index.tsx b/app/javascript/src/components/Invoices/common/NewLineItemRow/index.tsx
@@ -5,23 +5,36 @@ import NewLineItemStatic from "./NewLineItemStatic";
 const NewLineItemRow = ({
   item,
   setSelectedOption,
-  selectedOption
+  selectedOption,
+  removeElement = false
 }) => {
   const [isEdit, setEdit] = useState<boolean>(false);
 
-  const handleDelete = () => {
-    // const sanitized = selectedOption.filter(option =>
-    //   option.timesheet_entry_id !== item.timesheet_entry_id ||
-    //   option.id !== item.id
-    // )
-    // setSelectedOption(sanitized);
+  const handleDelete = (item) => {
+    const deleteItem = {
+      ...item,
+      _destroy: true
+    };
+
+    const selectedOptionArr = selectedOption.map((option) => {
+      if ((item.id && option.id === item.id) ||
+        (option.timesheet_entry_id && option.timesheet_entry_id === item.timesheet_entry_id)) {
+        return removeElement ? null : deleteItem;
+      }
+
+      return option;
+    });
+
+    setEdit(false);
+    setSelectedOption(selectedOptionArr.filter(n => n));
   };
 
   return isEdit ? (
     <EditLineItems
       item={item}
       setSelectedOption={setSelectedOption}
       selectedOption={selectedOption}
+      handleDelete={handleDelete}
       setEdit={setEdit}
     />
   ) : (

diff --git a/app/javascript/src/components/Invoices/common/utils.js b/app/javascript/src/components/Invoices/common/utils.js
@@ -10,7 +10,8 @@ export const generateInvoiceLineItems = (selectedLineItems, manualEntryArr) => {
       date: dayjs(item.date).format("DD/MM/YYYY"),
       rate: item.rate,
       quantity: item.qty,
-      timesheet_entry_id: item.time_sheet_entry ? item.time_sheet_entry : item.timesheet_entry_id
+      timesheet_entry_id: item.time_sheet_entry ? item.time_sheet_entry : item.timesheet_entry_id,
+      _destroy: !!item._destroy
     }))
   );
 
@@ -22,7 +23,8 @@ export const generateInvoiceLineItems = (selectedLineItems, manualEntryArr) => {
       date: dayjs(item.date).format("DD/MM/YYYY"),
       rate: item.rate,
       quantity: Number(item.qty) * 60,
-      timesheet_entry_id: item.time_sheet_entry
+      timesheet_entry_id: item.time_sheet_entry,
+      _destroy: !!item._destroy
     }))
   );