changing budget cat

app/static/vendors.js

@@ -1,14 +1,56 @@
 const delButtons = document.getElementsByClassName('del-button');
+const reassignButtons = document.getElementsByClassName('reassign-button');
 
 async function deleteVendor(id){
     var result = await fetch(`/delete_vendor/${id}`, {method:'POST'});
     var data = await result.json();
     document.getElementById(`${id}-row`).remove();
 }
+
+function startEditMode(id){
+    for(let i = 0; i < reassignButtons.length; i++){
+        reassignButtons[i].disabled = true;
+    }
+
+    const handleKeydown = (e) => {
+        if (e.key === 'Enter') {
+            document.removeEventListener('keydown', handleKeydown);
+            const vendor = document.getElementById(`bc-line-${id}`);
+            const vendorInput = document.getElementById(`bc-input-${id}`);
+            vendor.innerText = vendorInput.value;
+            if (vendorInput.parentNode) {
+                vendorInput.parentNode.removeChild(vendorInput);
+            }
+            
+            for(let i = 0; i < reassignButtons.length; i++){
+                reassignButtons[i].disabled = false;
+            }
+        }
+    };
+
+    document.addEventListener('keydown', handleKeydown);
+
+    const vendor = document.getElementById(`bc-line-${id}`);
+    console.log(id)
+    var placeholderText = vendor.innerText
+    vendor.innerText = ''
+    var inputElem = document.createElement("input");
+    inputElem.value = placeholderText;
+    inputElem.id = `bc-input-${id}`
+    vendor.appendChild(inputElem);
+    inputElem.focus()
+}
+
+
 document.addEventListener("DOMContentLoaded", (event) => {
     for(let i = 0; i < delButtons.length; i++){
         delButtons[i].addEventListener('click', e => {
             deleteVendor(parseInt(e.target.id));
         })
     }
+    for(let i = 0; i < reassignButtons.length; i++){
+        reassignButtons[i].addEventListener('click', e => {
+            startEditMode(parseInt(e.target.id));
+        })
+    }
   });

app/templates/vendors.html

@@ -23,6 +23,8 @@
                                 <tr>
                                     <th scope="col">ID</th>
                                     <th scope="col">Name</th>
+                                    <th scope="col">Budget Category</th>
+                                    <th scope="col">Change Budget Category</th>
                                     <th scope="col">Delete</th>
                                 </tr>
                             </thead>
@@ -31,6 +33,8 @@
                                     <tr id="{{vendor[0].id}}-row">
                                         <th scope="row">{{vendor[0].id}}</th>
                                         <th scope="row">{{vendor[0].name}}</th>
+                                        <th scope="row" id="bc-line-{{vendor[0].id}}">{{vendor[0].get_budget_category().name}}</th>
+                                        <th scope="row"><button id="{{vendor[0].id}}" class="btn btn-primary reassign-button">Click to reassign budget category</button></th>
                                         <th scope="row"><button class="btn btn-danger del-button" id="{{vendor[0].id}}">Delete</button></th>
                                     </tr>
                                 {% endfor %}