Revised the JavaScript journal entry editor and account selector so that the account selector work with the journal entry editor and does not get into the detail of the journal entry editor.

src/accounting/static/js/account-selector.js

@@ -81,6 +81,12 @@ class AccountSelector {
      */
     #more;
 
+    /**
+     * The journal entry editor
+     * @type {JournalEntryEditor}
+     */
+    #entryEditor;
+
     /**
      * Constructs an account selector.
      *
@@ -101,19 +107,11 @@ class AccountSelector {
             this.#filterOptions();
         };
         this.#clearButton.onclick = () => {
-            AccountSelector.#formAccountControl.classList.remove("accounting-not-empty");
+            this.#entryEditor.clearAccount();
-            AccountSelector.#formAccount.innerText = "";
-            AccountSelector.#formAccount.dataset.code = "";
-            AccountSelector.#formAccount.dataset.text = "";
-            JournalEntryEditor.validateAccount();
         };
         for (const option of this.#options) {
             option.onclick = () => {
-                AccountSelector.#formAccountControl.classList.add("accounting-not-empty");
+                this.#entryEditor.saveAccount(option.dataset.code, option.dataset.content);
-                AccountSelector.#formAccount.innerText = option.dataset.content;
-                AccountSelector.#formAccount.dataset.code = option.dataset.code;
-                AccountSelector.#formAccount.dataset.text = option.dataset.content;
-                JournalEntryEditor.validateAccount();
             };
         }
         this.#query.addEventListener("input", () => {
@@ -153,7 +151,10 @@ class AccountSelector {
      */
     #getCodesUsedInForm() {
         const accountCodes = Array.from(document.getElementsByClassName("accounting-" + this.#prefix + "-account-code"));
-        const inUse = [AccountSelector.#formAccount.dataset.code];
+        const inUse = [];
+        if (this.#entryEditor.getAccountCode() !== null) {
+            inUse.push(this.#entryEditor.getAccountCode());
+        }
         for (const accountCode of accountCodes) {
             inUse.push(accountCode.value);
         }
@@ -194,19 +195,21 @@ class AccountSelector {
     /**
      * The callback when the account selector is shown.
      *
+     * @param entryEditor {JournalEntryEditor} the journal entry editor
      */
-    #onOpen() {
+    #onOpen(entryEditor) {
+        this.#entryEditor = entryEditor;
         this.#query.value = "";
         this.#more.classList.remove("d-none");
         this.#filterOptions();
         for (const option of this.#options) {
-            if (option.dataset.code === AccountSelector.#formAccount.dataset.code) {
+            if (option.dataset.code === entryEditor.getAccountCode()) {
                 option.classList.add("active");
             } else {
                 option.classList.remove("active");
             }
         }
-        if (AccountSelector.#formAccount.dataset.code === "") {
+        if (entryEditor.getAccountCode() === null) {
             this.#clearButton.classList.add("btn-secondary");
             this.#clearButton.classList.remove("btn-danger");
             this.#clearButton.disabled = true;
@@ -223,53 +226,25 @@ class AccountSelector {
      */
     static #selectors = {}
 
-    /**
-     * The journal entry form.
-     * @type {HTMLFormElement}
-     */
-    static #entryForm;
-
-    /**
-     * The control of the account on the journal entry form
-     * @type {HTMLDivElement}
-     */
-    static #formAccountControl;
-
-    /**
-     * The account on the journal entry form
-     * @type {HTMLDivElement}
-     */
-    static #formAccount;
-
     /**
      * Initializes the account selectors.
      *
      */
     static initialize() {
-        this.#entryForm = document.getElementById("accounting-entry-editor");
-        this.#formAccountControl = document.getElementById("accounting-entry-editor-account-control");
-        this.#formAccount = document.getElementById("accounting-entry-editor-account");
         const modals = Array.from(document.getElementsByClassName("accounting-account-selector-modal"));
         for (const modal of modals) {
             const selector = new AccountSelector(modal);
             this.#selectors[selector.#entryType] = selector;
         }
-        this.#initializeTransactionForm();
     }
 
     /**
-     * Initializes the transaction form.
+     * Starts the account selector.
      *
+     * @param entryEditor {JournalEntryEditor} the journal entry editor
+     * @param entryType {string} the entry type, either "debit" or "credit"
      */
-    static #initializeTransactionForm() {
+    static start(entryEditor, entryType) {
-        this.#formAccountControl.onclick = () => this.#selectors[this.#entryForm.dataset.entryType].#onOpen();
+        this.#selectors[entryType].#onOpen(entryEditor);
-    }
-
-    /**
-     * Initializes the account selector for the journal entry form.
-     *x
-     */
-    static initializeJournalEntryForm() {
-        this.#formAccountControl.dataset.bsTarget = "#accounting-account-selector-" + this.#entryForm.dataset.entryType + "-modal";
     }
 }

src/accounting/static/js/transaction-form.js

@@ -480,7 +480,6 @@ class DebitCreditSideSubForm {
         this.#addEntryButton = document.getElementById(this.#prefix + "-add-entry");
         this.#addEntryButton.onclick = () => {
             JournalEntryEditor.addNew(this);
-            AccountSelector.initializeJournalEntryForm();
         };
         this.#resetDeleteJournalEntryButtons();
         this.#initializeDragAndDropReordering();
@@ -727,7 +726,6 @@ class JournalEntrySubForm {
         this.deleteButton = document.getElementById(this.#prefix + "-delete");
         this.#control.onclick = () => {
             JournalEntryEditor.edit(this, this.#accountCode.value, this.#accountCode.dataset.text, this.#summary.value, this.amount.value);
-            AccountSelector.initializeJournalEntryForm();
         };
         this.deleteButton.onclick = () => {
             this.element.parentElement.removeChild(this.element);
@@ -880,7 +878,10 @@ class JournalEntryEditor {
         this.#summary = document.getElementById(this.#prefix + "-summary");
         this.#summaryError = document.getElementById(this.#prefix + "-summary-error");
         this.#amount = document.getElementById(this.#prefix + "-amount");
-        this.#amountError = document.getElementById(this.#prefix + "-amount-error");
+        this.#amountError = document.getElementById(this.#prefix + "-amount-error")
+        this.#accountControl.onclick = () => {
+            AccountSelector.start(this, this.entryType);
+        }
         this.#summaryControl.onclick = () => {
             SummaryEditor.start(this, this.#summary.dataset.value);
         };
@@ -898,6 +899,41 @@ class JournalEntryEditor {
         };
     }
 
+    /**
+     * Returns the account code.
+     *
+     * @return {string|null} the account code
+     */
+    getAccountCode() {
+        return this.#account.dataset.code === ""? null: this.#account.dataset.code;
+    }
+
+    /**
+     * Clears the account.
+     *
+     */
+    clearAccount() {
+        this.#accountControl.classList.remove("accounting-not-empty");
+        this.#account.dataset.code = "";
+        this.#account.dataset.text = "";
+        this.#account.innerText = "";
+        this.#validateAccount();
+    }
+
+    /**
+     * Sets the account.
+     *
+     * @param code {string} the account code
+     * @param text {string} the account text
+     */
+    saveAccount(code, text) {
+        this.#accountControl.classList.add("accounting-not-empty");
+        this.#account.dataset.code = code;
+        this.#account.dataset.text = text;
+        this.#account.innerText = text;
+        this.#validateAccount();
+    }
+
     /**
      * Saves the summary from the summary editor.
      *
@@ -1000,6 +1036,7 @@ class JournalEntryEditor {
         this.#side = side;
         this.entryType = this.#side.entryType;
         this.#element.dataset.entryType = side.entryType;
+        this.#accountControl.dataset.bsTarget = "#accounting-account-selector-" + side.entryType + "-modal";
         this.#accountControl.classList.remove("accounting-not-empty");
         this.#accountControl.classList.remove("is-invalid");
         this.#account.innerText = "";
@@ -1031,6 +1068,7 @@ class JournalEntryEditor {
         this.#side = entry.side;
         this.entryType = this.#side.entryType;
         this.#element.dataset.entryType = entry.entryType;
+        this.#accountControl.dataset.bsTarget = "#accounting-account-selector-" + entry.entryType + "-modal";
         if (accountCode === "") {
             this.#accountControl.classList.remove("accounting-not-empty");
         } else {