Revised the JavaScript to initialize the AccountSelector instances in JournalEntryEditor, so that the journal entry editor holds the AccountSelector instances. It can find the AccountSelector instance without needing to invoke its static methods. Removed the redundant static methods from the AccountSelector class.

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

@@ -22,22 +22,23 @@
  */
 "use strict";
 
-// Initializes the page JavaScript.
-document.addEventListener("DOMContentLoaded", () => {
-    AccountSelector.initialize();
-});
-
 /**
  * The account selector.
  *
  */
 class AccountSelector {
 
+    /**
+     * The journal entry editor
+     * @type {JournalEntryEditor}
+     */
+    #entryEditor;
+
     /**
      * The entry type
      * @type {string}
      */
-    #entryType;
+    entryType;
 
     /**
      * The prefix of the HTML ID and class
@@ -81,20 +82,16 @@ class AccountSelector {
      */
     #more;
 
-    /**
-     * The journal entry editor
-     * @type {JournalEntryEditor}
-     */
-    #entryEditor;
-
     /**
      * Constructs an account selector.
      *
-     * @param modal {HTMLDivElement} the account selector modal
+     * @param entryEditor {JournalEntryEditor} the journal entry editor
+     * @param entryType {string} the entry type, either "debit" or "credit"
      */
-    constructor(modal) {
-        this.#entryType = modal.dataset.entryType;
-        this.#prefix = "accounting-account-selector-" + modal.dataset.entryType;
+    constructor(entryEditor, entryType) {
+        this.#entryEditor = entryEditor
+        this.entryType = entryType;
+        this.#prefix = "accounting-account-selector-" + entryType;
         this.#query = document.getElementById(this.#prefix + "-query");
         this.#queryNoResult = document.getElementById(this.#prefix + "-option-no-result");
         this.#optionList = document.getElementById(this.#prefix + "-option-list");
@@ -146,7 +143,7 @@ class AccountSelector {
      * @return {string[]} the account codes that are used in the form
      */
     #getCodesUsedInForm() {
-        const inUse = this.#entryEditor.form.getAccountCodesUsed(this.#entryType);
+        const inUse = this.#entryEditor.form.getAccountCodesUsed(this.entryType);
         if (this.#entryEditor.accountCode !== null) {
             inUse.push(this.#entryEditor.accountCode);
         }
@@ -187,21 +184,19 @@ class AccountSelector {
     /**
      * The callback when the account selector is shown.
      *
-     * @param entryEditor {JournalEntryEditor} the journal entry editor
      */
-    #onOpen(entryEditor) {
-        this.#entryEditor = entryEditor;
+    onOpen() {
         this.#query.value = "";
         this.#more.classList.remove("d-none");
         this.#filterOptions();
         for (const option of this.#options) {
-            if (option.dataset.code === entryEditor.accountCode) {
+            if (option.dataset.code === this.#entryEditor.accountCode) {
                 option.classList.add("active");
             } else {
                 option.classList.remove("active");
             }
         }
-        if (entryEditor.accountCode === null) {
+        if (this.#entryEditor.accountCode === null) {
             this.#clearButton.classList.add("btn-secondary");
             this.#clearButton.classList.remove("btn-danger");
             this.#clearButton.disabled = true;
@@ -211,31 +206,4 @@ class AccountSelector {
             this.#clearButton.disabled = false;
         }
     }
-
-    /**
-     * The account selectors.
-     * @type {{debit: AccountSelector, credit: AccountSelector}}
-     */
-    static #selectors = {}
-
-    /**
-     * Initializes the account selectors.
-     *
-     */
-    static initialize() {
-        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;
-        }
-    }
-
-    /**
-     * Starts the account selector.
-     *
-     * @param entryEditor {JournalEntryEditor} the journal entry editor
-     */
-    static start(entryEditor) {
-        this.#selectors[entryEditor.entryType].#onOpen(entryEditor);
-    }
 }

src/accounting/static/js/journal-entry-editor.js

@@ -202,6 +202,12 @@ class JournalEntryEditor {
      */
     #summaryEditors;
 
+    /**
+     * The account selectors
+     * @type {{debit: AccountSelector, credit: AccountSelector}}
+     */
+    #accountSelectors;
+
     /**
      * Constructs a new journal entry editor.
      *
@@ -225,10 +231,11 @@ class JournalEntryEditor {
         this.#amount = document.getElementById(this.#prefix + "-amount");
         this.#amountError = document.getElementById(this.#prefix + "-amount-error");
         this.#summaryEditors = this.#initializeSummaryEditors();
+        this.#accountSelectors = this.#initializeAccountSelectors();
         this.#originalEntryControl.onclick = () => OriginalEntrySelector.start(this, this.originalEntryId);
         this.#originalEntryDelete.onclick = () => this.clearOriginalEntry();
         this.#summaryControl.onclick = () => this.#summaryEditors[this.entryType].onOpen();
-        this.#accountControl.onclick = () => AccountSelector.start(this);
+        this.#accountControl.onclick = () => this.#accountSelectors[this.entryType].onOpen();
         this.#amount.onchange = () => this.#validateAmount();
         this.#element.onsubmit = () => {
             if (this.#validate()) {
@@ -258,6 +265,19 @@ class JournalEntryEditor {
         return editors;
     }
 
+    /**
+     * Initializes the account selectors.
+     *
+     * @return {{debit: AccountSelector, credit: AccountSelector}} the account selectors
+     */
+    #initializeAccountSelectors() {
+        const selectors = {};
+        for (const entryType of ["debit", "credit"]) {
+            selectors[entryType] = new AccountSelector(this, entryType);
+        }
+        return selectors;
+    }
+
     /**
      * Saves the original entry from the original entry selector.
      *

src/accounting/templates/accounting/transaction/include/account-selector-modal.html

@@ -19,7 +19,7 @@ account-selector-modal.html: The modal for the account selector
 Author: imacat@mail.imacat.idv.tw (imacat)
 First written: 2023/2/25
 #}
-<div id="accounting-account-selector-{{ entry_type }}-modal" class="modal fade accounting-account-selector-modal" data-entry-type="{{ entry_type }}" tabindex="-1" aria-labelledby="accounting-account-selector-{{ entry_type }}-modal-label" aria-hidden="true">
+<div id="accounting-account-selector-{{ entry_type }}-modal" class="modal fade" data-entry-type="{{ entry_type }}" tabindex="-1" aria-labelledby="accounting-account-selector-{{ entry_type }}-modal-label" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">