express-backend-uni/frontend/js/transaction.js

import { fetchData, postData, putData } from "./api.js";

const urlParams = new URLSearchParams(window.location.search);
let accounts = [];
let account = null;
let transaction = null;

function start() {
    fetchData("accounts").then((data) => {
        extractAccounts(data, "");
    
        if (urlParams.get('account')) {
            fetchData(`accounts/${urlParams.get('account')}`).then((data) => {
                account = data;
    
                if (urlParams.get('id')) {
                    fetchData(`transactions/${urlParams.get('id')}`).then((transactionData) => {
                        transaction = transactionData;
                        console.log(transaction)
    
                        document.getElementById("submit").value = "bearbeiten";
                        document.getElementById("postingDate").value = transaction.postingDate;
                        document.getElementById("valueDate").value = transaction.valueDate;
                        document.getElementById("title").value = transaction.title;
    
                        transaction.entries.forEach(entry => {
                            addTableRow(entry);
                        });
                    });
                }
            });
        }
    });
}

/**
 * extract account hierarchy and create arraylist of all accounts
 * @param {array} data 
 * @param {string} parentName 
 */
function extractAccounts(data, parentName) {
    data.forEach(element => {
        let parentAccount = element.name;
        if (parentName !== "")
            parentAccount = `${parentName}:${parentAccount}`
        accounts.push({ id: element.number, name: element.name, value: parentAccount });
        if (element.subaccounts.length > 0) {
            extractAccounts(element.subaccounts, parentAccount);
        }
    });
}
 /**
  * Eventhandler um Tabellenzeilen mit leeren Textfeldern hinzuzufügen
  */
document.getElementById("add-transaction").addEventListener("click", () => {
    addTableRow();
});

/**
 * Fügt eine neue Tabellenzeile mit leeren Textfeldern hinzu
 * @param {array} data 
 */
function addTableRow(data) {
    const table = document.querySelector(".transaction-table tbody");
    const tr = document.createElement("tr");
    tr.className = "transaction-tr";

    const accountTd = document.createElement("td");
    accountTd.className = "transaction-td";
    const accountSelect = createAccountSelect()
    accountTd.appendChild(accountSelect);

    const amountTd = document.createElement("td");
    amountTd.className = "transaction-td";
    const amountInput = document.createElement("input");
    amountInput.className = "transaction-input";
    amountInput.type = "number";
    amountInput.name = "amount";
    amountTd.appendChild(amountInput);

    const bookingTextTd = document.createElement("td");
    bookingTextTd.className = "transaction-td";
    const bookingInput = document.createElement("input");
    bookingInput.className = "transaction-input";
    bookingInput.name = "text";
    bookingTextTd.appendChild(bookingInput);

    const actionTd = document.createElement("td");
    actionTd.className = "transaction-td";
    const actionButton = document.createElement("input");
    actionButton.className = "action-button";
    actionButton.type = "button";
    actionButton.value = "x";
    actionButton.onclick = () => tr.remove();
    actionTd.appendChild(actionButton);

    if(data) {
        accountSelect.value = data.account;
        amountInput.value = data.amount;
        bookingInput.value = data.label;
    }

    tr.appendChild(accountTd);
    tr.appendChild(amountTd);
    tr.appendChild(bookingTextTd);
    tr.appendChild(actionTd);
    table.append(tr);
}

/**
 * Erstellt die Selectbox für Kontenauswahl
 * @returns DOMElement
 */
function createAccountSelect() {
    const selectElement = document.createElement("select");
    selectElement.className = "transaction-input";
    selectElement.name = "account";

    const option = document.createElement("option");
    option.text = "--- Konto wählen ---";
    option.disabled = true;
    option.selected = true;
    selectElement.append(option);

    accounts.forEach(element => {
        const option = document.createElement("option");
        option.text = `${element.id} - ${element.value}`;
        option.value = element.value;
        selectElement.append(option);
    });

    return selectElement;
}

/**
 * Eventhandler für das abbrechen und zurücknavigieren zur Homepage
 */
document.getElementById("cancel").addEventListener("click", () => {
    window.location.href = "../index.html";
});

/**
 * Eventhandeler zum senden der Transaktionsdaten
 * Liest die Werte aus den Eingabefenstern, erzeugt das Objekt und sendet sie zur API
 */
document.getElementById("submit").addEventListener("click", () => {
    const postingDate = document.getElementById("postingDate").value;
    const valueDate = document.getElementById("valueDate").value;
    const title = document.getElementById("title").value;

    const data = {
        "postingDate": postingDate,
        "valueDate": valueDate,
        "title": title,
        "entries": []
    }

    document.querySelectorAll(".transaction-table tbody tr").forEach(tr => {
        const account = tr.querySelector("[name=account]").value;
        const amount = Number.parseFloat(tr.querySelector("[name=amount]").value);
        const text = tr.querySelector("[name=text]").value;
        data.entries.push({ account: account, amount: amount, label: text });
    });

    if(transaction) {
        putData(`transactions/${urlParams.get('id')}`, data).then((response) => {
            if (response)
                window.location.href = `./detail.html?account=${urlParams.get('account')}`;
        });
    } else {
        postData("transactions", data).then((response) => {
            if (response)
                window.location.href = `./detail.html?account=${urlParams.get('account')}`;
        });
    }
});

start();