got autofilling working

web/static/index.js

@@ -3,7 +3,6 @@ import {register_dropdowns} from "./dropdowns.js";
 import {
     open_new_transaction_pane
     , close_new_transaction_pane
-    , add_new_breakdown
     , register_breakdown_handlers
 } from "./new_transactions.js";
 
@@ -67,7 +66,6 @@ function register_handlers() {
     document.querySelector(".input-sizer > input").addEventListener("input", (event) => {
         event.target.parentNode.dataset.value = event.target.value
     });
-    document.getElementById("new-breakdown-btn").addEventListener("click", add_new_breakdown);
     close_new_transaction_pane();
 }
 

web/static/new_transactions.js

@@ -53,19 +53,26 @@ function close_new_transaction_pane() {
 */
 function on_input(event) {
     if (event.target.id === "bottom-most-breakdown-input" 
-        || document.querySelectorAll("#breakdown-tbody input[type='number']").length === 0
+        || document.querySelectorAll("#breakdown-tbody input[type='number']:not(#tax-input)").length === 0
     ) {
         add_new_breakdown();
     }
+    let total_input = document.getElementById("amount-entry");
 
-    let breakdown_inputs = Array.from(document
+    if (event.target.id === "amount-entry") {
+        let tax_entry = document.getElementById("tax-input");
+        let tax_rate = document.getElementById("new-transaction-pane").dataset.rcntTaxrate;
+        if (tax_entry) {
+            tax_entry.value = (parseFloat(total_input.value) - (parseFloat(total_input.value) / (1 + parseFloat(tax_rate)))).toFixed(2);
+        }
+    }
+
+    let breakdown_sum = Array.from(document
         .querySelectorAll("#breakdown-tbody input[type='number']:not(#bottom-most-breakdown-input)"
-        ));
+        )).reduce(function(total, el) {
-    let breakdown_sum = breakdown_inputs.reduce(function(total, el) {
         return total + parseFloat(el.value || 0);
     }, 0);
 
-    let total_input = document.getElementById("amount-entry");
     if (total_input.value) {
         let value_total = parseFloat(total_input.value);
 
@@ -88,8 +95,21 @@ function add_new_breakdown() {
     document.getElementById("breakdown-tbody").appendChild(source);
 }
 
-function register_breakdown_handlers() {
+function insert_tax() {
-    document.getElementById("amount-entry").addEventListener("input", on_input);
+    if (document.getElementById("tax-input")) return;
+    let source = document.importNode(document.getElementById("breakdown-template-row").content, true);
+    source.querySelector("input[type='text']").value = "Tax";
+    source.querySelector("input[type='number']").id = "tax-input";
+
+    let table_body = document.getElementById("breakdown-tbody");
+    table_body.insertBefore(source, table_body.firstChild);
+    // on_input();
 }
 
-export {open_new_transaction_pane, close_new_transaction_pane, add_new_breakdown, register_breakdown_handlers}
+function register_breakdown_handlers() {
+    document.getElementById("amount-entry").addEventListener("input", on_input);
+    document.getElementById("new-breakdown-btn").addEventListener("click", add_new_breakdown);
+    document.getElementById("tax-breakdown-btn").addEventListener("click", insert_tax);
+}
+
+export {open_new_transaction_pane, close_new_transaction_pane, register_breakdown_handlers}

web/templates/new_transaction_pane.templ

@@ -19,7 +19,7 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
             <td><input type="number" step="any" /></td>
         </tr>
     </template>
-    <div id="new-transaction-pane" style="opacity: 0;" class="cr-all c-base d-flex-col">
+    <div id="new-transaction-pane" style="opacity: 0;" class="cr-all c-base d-flex-col" data-rcnt-taxrate="0.095">
         <div class="my-2 d-flex">
             <h2 class="ms-5">New Transaction</h2>     
             <button class="ms-auto me-4 my-auto exit-btn" id="close-transaction-pane">
@@ -86,7 +86,7 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
                         <i class="" data-feather="plus"></i>
                         <span class="my-auto pe-2">New</span>
                     </button>
-                    <button class="btn-sm ms-5 my-auto c-green invert">
+                    <button class="btn-sm ms-5 my-auto c-green invert" id="tax-breakdown-btn">
                         <i class="" data-feather="plus"></i>
                         <span class="my-auto pe-2">Tax</span>
                     </button>