Recount-Server/web/static/new_transactions.js

import {
    computePosition,
    offset,
} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.5.4/+esm';

const centerOffset = offset(({rects}) => {
    return -rects.reference.height / 2 - rects.floating.height / 2;
});

function open_new_transaction_pane() {
    let center = document.querySelector("#main-body-content");
    let new_tp = document.querySelector("#new-transaction-pane");

    new_tp.style.opacity = "1";

    let center_width = center.offsetWidth;
    center_width = center_width - (center_width / 10);
    new_tp.style.width = center_width + "px";

    computePosition(center, new_tp, {
        placement: "bottom",
        middleware: [
            centerOffset,
        ],
    }).then(({x, y}) => {
        Object.assign(new_tp.style, {
            left: `${x}px`,
            top: `${y}px`,
        });
    });
}

function close_new_transaction_pane() {
    let right_column = document.querySelector("#right-col");
    let new_tp = document.querySelector("#new-transaction-pane");
    new_tp.style.opacity = "0";
    computePosition(right_column, new_tp, {
        placement: "right",
        middleware: [
           offset(40),      
        ],
    }).then(({x, y}) => {
        Object.assign(new_tp.style, {
            left: `${x}px`,
            top: `${y}px`,
        });
    });

}

/**
    * @param {Event} event 
*/
function on_input(event) {
    if (event.target.id === "bottom-most-breakdown-input" 
        || document.querySelectorAll("#breakdown-tbody input[type='number']:not(#tax-input)").length === 0
    ) {
        add_new_breakdown();
    }
    let total_input = document.getElementById("amount-entry");

    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) {
        return total + parseFloat(el.value || 0);
    }, 0);

    if (total_input.value) {
        let value_total = parseFloat(total_input.value);

        document.getElementById("bottom-most-breakdown-input").value = (value_total - breakdown_sum).toFixed(2);
    } else {
        total_input.placeholder = breakdown_sum;
    }
}

function add_new_breakdown() {
    let input_latest_old = document.getElementById("bottom-most-breakdown-input");
    if (input_latest_old) {
        input_latest_old.id = "";
    }

    let source = document.importNode(document.getElementById("breakdown-template-row").content, true);
    let input_latest = source.querySelector("input[type='number']");
    input_latest.addEventListener("input", on_input);
    input_latest.id = "bottom-most-breakdown-input";
    document.getElementById("breakdown-tbody").appendChild(source);
}

function insert_tax(event) {
    event.target.parentNode.classList.remove("c-green");
    event.target.parentNode.classList.add("c-overlay2");
    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);

    // calculate the the tax and final amount
    on_input({target: {id: "amount-entry"}});
}

function submit_form(event) {
    event.preventDefault(); // Prevent the default form submission
    
    // Your custom submission handling code here
    
    // For example, you might want to send the form data using AJAX
    var formData = new FormData(this);
    fetch('/submitTransaction', {
        method: 'POST',
        body: formData
    })
    .then(_ => {
        alert("form submitted");
    })
    .catch(error => {
        console.log("Form submission error:\n" + error);
        alert("There was an issue submitting the form");
    });
}

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);
    document.getElementById("new-transaction-form").addEventListener("submit", submit_form);
}

export {open_new_transaction_pane, close_new_transaction_pane, register_breakdown_handlers}