From bb7bc37a3ec1c95c3268624b86495be45bc87ec7 Mon Sep 17 00:00:00 2001
From: ydb5755 <yisroel.d.baum@gmail.com>
Date: Tue, 29 Oct 2024 15:24:05 +0200
Subject: [PATCH] split up secitons for lines with parents and those without
 enable update vendor on enter

---
 app/static/line_items_by_month.js      | 61 +++++++++++++++++---------
 app/templates/line_items_by_month.html | 60 +++++++++++++++++++++++--
 2 files changed, 98 insertions(+), 23 deletions(-)

diff --git a/app/static/line_items_by_month.js b/app/static/line_items_by_month.js
index 62c03d5..b422b31 100644
--- a/app/static/line_items_by_month.js
+++ b/app/static/line_items_by_month.js
@@ -1,14 +1,15 @@
 const monthSelector = document.getElementById('month-selector');
 const tableBody = document.getElementById('table-body');
+const childTableBody = document.getElementById('child-table-body');
 var reassignButtons = document.getElementsByClassName('reassign-button');
 
 
-function startEditMode(id){
+async function startEditMode(id){
     for(let i = 0; i < reassignButtons.length; i++){
         reassignButtons[i].disabled = true;
     }
 
-    const handleKeydown = (e) => {
+    const handleKeydown = async (e) => {
         if (e.key === 'Enter') {
             document.removeEventListener('keydown', handleKeydown);
             const vendor = document.getElementById(`vendor-line-${id}`);
@@ -17,7 +18,8 @@ function startEditMode(id){
             if (vendorInput.parentNode) {
                 vendorInput.parentNode.removeChild(vendorInput);
             }
-            
+            var result = await fetch(`/update_vendor/${id}/${vendor.innerText}`, {method:'POST'});
+            var data = await result.json();
             for(let i = 0; i < reassignButtons.length; i++){
                 reassignButtons[i].disabled = false;
             }
@@ -41,24 +43,43 @@ async function displayMonthLineItems(dateString){
     var result = await fetch(`/get_month_line_items/${month}/${year}`, {method:'POST'});
     var data = await result.json();
     tableBody.innerHTML = ''
+    childTableBody.innerHTML = ''
     data.forEach(li => {
-        const row = `
-            <tr id="${li.id}-row">
-                <th scope="row">${li.id}</th>
-                <th scope="row">${li.parent_line_item_id || ''}</th>
-                <th scope="row">${li.amount}</th>
-                <th scope="row">${li.currency_type}</th>
-                <th scope="row" id="vendor-line-${li.id}">${li.vendor}</th>
-                <th scope="row">${li.date}</th>
-                <th scope="row">${li.confirmation_code}</th>
-                <th scope="row">${li.note || ''}</th>
-                <th scope="row"><button id="${li.id}" class="btn btn-primary reassign-button">Click to reassign vendor</button></th>
-                <th scope="row"><a class="btn btn-primary" href="/split_line/${li.id}">Click to split line</a></th>
-            </tr>
-        `;
-
-        // Insert the row into the table body
-        tableBody.insertAdjacentHTML('beforeend', row);
+        if (!li.parent_line_item_id){
+            const row = `
+                <tr id="${li.id}-row">
+                    <th scope="row">${li.id}</th>
+                    <th scope="row">${li.amount}</th>
+                    <th scope="row">${li.currency_type}</th>
+                    <th scope="row" id="vendor-line-${li.id}">${li.vendor}</th>
+                    <th scope="row">${li.date}</th>
+                    <th scope="row">${li.confirmation_code}</th>
+                    <th scope="row">${li.note || ''}</th>
+                    <th scope="row"><button id="${li.id}" class="btn btn-primary reassign-button">Click to reassign vendor</button></th>
+                    <th scope="row"><a class="btn btn-primary" href="/split_line/${li.id}">Click to split line</a></th>
+                </tr>
+            `;
+    
+            // Insert the row into the table body
+            tableBody.insertAdjacentHTML('beforeend', row);
+        } else {
+            const row = `
+                <tr id="${li.id}-row">
+                    <th scope="row">${li.id}</th>
+                    <th scope="row">${li.parent_line_item_id}</th>
+                    <th scope="row">${li.amount}</th>
+                    <th scope="row">${li.currency_type}</th>
+                    <th scope="row" id="vendor-line-${li.id}">${li.vendor}</th>
+                    <th scope="row">${li.date}</th>
+                    <th scope="row">${li.confirmation_code}</th>
+                    <th scope="row">${li.note || ''}</th>
+                    <th scope="row"><button id="${li.id}" class="btn btn-primary reassign-button">Click to reassign vendor</button></th>
+                </tr>
+            `;
+    
+            // Insert the row into the table body
+            childTableBody.insertAdjacentHTML('beforeend', row);
+        }
 
     });
     addListenersToReassignButtons();
diff --git a/app/templates/line_items_by_month.html b/app/templates/line_items_by_month.html
index 0356472..83049a8 100644
--- a/app/templates/line_items_by_month.html
+++ b/app/templates/line_items_by_month.html
@@ -5,7 +5,7 @@
 <main>
     <div class="container mt-5">
         {% if files %}
-            <div class="card">
+            <div class="card mb-3">
                 <div class="card-header bg-primary text-white">
                     File available in static folder for upload - 
                     New files must be formatted with the following columns in this order - Date, Vendor, Note, Confirmation Code, Charge, Deposit
@@ -36,7 +36,35 @@
             </div>
         </div>
         {% endif %}
-        <div class="card">
+        <div class="card mb-3">
+            <div class="card-header bg-primary text-white">
+                Add Line Item
+            </div>
+            <div class="card-body">
+                
+                <form action="{{ url_for('add_line_item') }}" method="POST">
+                    <div class="table-responsive">
+                        <table class="table table-bordered">
+                            <tbody id="add-line-item-table">
+                                <tr>
+                                    <td><input type="text" class="form-control" name="ParentId" placeholder="ParentId"></td>
+                                    <td><input type="text" class="form-control" name="Amount" placeholder="Amount"></td>
+                                    <td><input type="text" class="form-control" name="Currency-Type" placeholder="Currency Type"></td>
+                                    <td><input type="text" class="form-control" name="Vendor" placeholder="Vendor"></td>
+                                    <td><input type="text" class="form-control" name="Date" placeholder="Date yyyy-mm-dd"></td>
+                                    <td><input type="text" class="form-control" name="Confirmation Code" placeholder="Confirmation Code"></td>
+                                    <td><input type="text" class="form-control" name="Note" placeholder="Note"></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <button type="submit" class="btn btn-primary">Submit</button>
+                </form>
+                
+
+            </div>
+        </div>
+        <div class="card mb-3">
             <div class="card-header bg-primary text-white">
                 Line Items
                 <br/>
@@ -54,7 +82,6 @@
                         <thead>
                             <tr>
                                 <th scope="col">ID</th>
-                                <th scope="col">Parent LineItem ID</th>
                                 <th scope="col">Amount</th>
                                 <th scope="col">Currency Type</th>
                                 <th scope="col">Vendor</th>
@@ -72,6 +99,33 @@
                 </div>
             </div>
         </div>
+        <div class="card mb-5">
+            <div class="card-header bg-primary text-white">
+                Child Line Items
+            </div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-bordered">
+                        <thead>
+                            <tr>
+                                <th scope="col">ID</th>
+                                <th scope="col">Parent LineItem ID</th>
+                                <th scope="col">Amount</th>
+                                <th scope="col">Currency Type</th>
+                                <th scope="col">Vendor</th>
+                                <th scope="col">Date</th>
+                                <th scope="col">Confirmation Code</th>
+                                <th scope="col">Note</th>
+                                <th scope="col">Reassign Vendor</th>
+                            </tr>
+                        </thead>
+                        <tbody id="child-table-body">
+                            <tr><td>Loading...</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
     </div>
 </main>
 <script src="{{url_for('.static', filename='line_items_by_month.js')}}"></script>