Reordered the journal entry editor and put the summary first and the account later.

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

@@ -57,24 +57,6 @@ class JournalEntryEditor {
      */
     #prefix = "accounting-entry-editor"
 
-    /**
-     * The control of the account
-     * @type {HTMLDivElement}
-     */
-    #accountControl;
-
-    /**
-     * The account
-     * @type {HTMLDivElement}
-     */
-    #account;
-
-    /**
-     * The error message of the account
-     * @type {HTMLDivElement}
-     */
-    #accountError;
-
     /**
      * The control of the summary
      * @type {HTMLDivElement}
@@ -93,6 +75,24 @@ class JournalEntryEditor {
      */
     #summaryError;
 
+    /**
+     * The control of the account
+     * @type {HTMLDivElement}
+     */
+    #accountControl;
+
+    /**
+     * The account
+     * @type {HTMLDivElement}
+     */
+    #account;
+
+    /**
+     * The error message of the account
+     * @type {HTMLDivElement}
+     */
+    #accountError;
+
     /**
      * The amount
      * @type {HTMLInputElement}
@@ -124,20 +124,20 @@ class JournalEntryEditor {
     constructor() {
         this.#element = document.getElementById(this.#prefix);
         this.#modal = document.getElementById(this.#prefix + "-modal");
-        this.#accountControl = document.getElementById(this.#prefix + "-account-control");
-        this.#account = document.getElementById(this.#prefix + "-account");
-        this.#accountError = document.getElementById(this.#prefix + "-account-error")
         this.#summaryControl = document.getElementById(this.#prefix + "-summary-control");
         this.#summary = document.getElementById(this.#prefix + "-summary");
         this.#summaryError = document.getElementById(this.#prefix + "-summary-error");
+        this.#accountControl = document.getElementById(this.#prefix + "-account-control");
+        this.#account = document.getElementById(this.#prefix + "-account");
+        this.#accountError = document.getElementById(this.#prefix + "-account-error")
         this.#amount = document.getElementById(this.#prefix + "-amount");
         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);
         };
+        this.#accountControl.onclick = () => {
+            AccountSelector.start(this, this.entryType);
+        }
         this.#element.onsubmit = () => {
             if (this.#validate()) {
                 if (this.#entry === null) {
@@ -152,6 +152,38 @@ class JournalEntryEditor {
         };
     }
 
+    /**
+     * Saves the summary from the summary editor.
+     *
+     * @param summary {string} the summary
+     */
+    saveSummary(summary) {
+        if (summary === "") {
+            this.#summaryControl.classList.remove("accounting-not-empty");
+        } else {
+            this.#summaryControl.classList.add("accounting-not-empty");
+        }
+        this.#summary.dataset.value = summary;
+        this.#summary.innerText = summary;
+        bootstrap.Modal.getOrCreateInstance(this.#modal).show();
+    }
+
+    /**
+     * Saves the summary with the suggested account from the summary editor.
+     *
+     * @param summary {string} the summary
+     * @param accountCode {string} the account code
+     * @param accountText {string} the account text
+     */
+    saveSummaryWithAccount(summary, accountCode, accountText) {
+        this.#accountControl.classList.add("accounting-not-empty");
+        this.#account.dataset.code = accountCode;
+        this.#account.dataset.text = accountText;
+        this.#account.innerText = accountText;
+        this.#validateAccount();
+        this.saveSummary(summary)
+    }
+
     /**
      * Returns the account code.
      *
@@ -187,38 +219,6 @@ class JournalEntryEditor {
         this.#validateAccount();
     }
 
-    /**
-     * Saves the summary from the summary editor.
-     *
-     * @param summary {string} the summary
-     */
-    saveSummary(summary) {
-        if (summary === "") {
-            this.#summaryControl.classList.remove("accounting-not-empty");
-        } else {
-            this.#summaryControl.classList.add("accounting-not-empty");
-        }
-        this.#summary.dataset.value = summary;
-        this.#summary.innerText = summary;
-        bootstrap.Modal.getOrCreateInstance(this.#modal).show();
-    }
-
-    /**
-     * Saves the summary with the suggested account from the summary editor.
-     *
-     * @param summary {string} the summary
-     * @param accountCode {string} the account code
-     * @param accountText {string} the account text
-     */
-    saveSummaryWithAccount(summary, accountCode, accountText) {
-        this.#accountControl.classList.add("accounting-not-empty");
-        this.#account.dataset.code = accountCode;
-        this.#account.dataset.text = accountText;
-        this.#account.innerText = accountText;
-        this.#validateAccount();
-        this.saveSummary(summary)
-    }
-
     /**
      * Validates the form.
      *
@@ -226,12 +226,24 @@ class JournalEntryEditor {
      */
     #validate() {
         let isValid = true;
-        isValid = this.#validateAccount() && isValid;
         isValid = this.#validateSummary() && isValid;
+        isValid = this.#validateAccount() && isValid;
         isValid = this.#validateAmount() && isValid
         return isValid;
     }
 
+    /**
+     * Validates the summary.
+     *
+     * @return {boolean} true if valid, or false otherwise
+     * @private
+     */
+    #validateSummary() {
+        this.#summary.classList.remove("is-invalid");
+        this.#summaryError.innerText = "";
+        return true;
+    }
+
     /**
      * Validates the account.
      *
@@ -248,18 +260,6 @@ class JournalEntryEditor {
         return true;
     }
 
-    /**
-     * Validates the summary.
-     *
-     * @return {boolean} true if valid, or false otherwise
-     * @private
-     */
-    #validateSummary() {
-        this.#summary.classList.remove("is-invalid");
-        this.#summaryError.innerText = "";
-        return true;
-    }
-
     /**
      * Validates the amount.
      *
@@ -289,6 +289,12 @@ class JournalEntryEditor {
         this.#side = side;
         this.entryType = this.#side.entryType;
         this.#element.dataset.entryType = side.entryType;
+        this.#summaryControl.dataset.bsTarget = "#accounting-summary-editor-" + side.entryType + "-modal";
+        this.#summaryControl.classList.remove("accounting-not-empty");
+        this.#summaryControl.classList.remove("is-invalid");
+        this.#summary.dataset.value = "";
+        this.#summary.innerText = ""
+        this.#summaryError.innerText = ""
         this.#accountControl.dataset.bsTarget = "#accounting-account-selector-" + side.entryType + "-modal";
         this.#accountControl.classList.remove("accounting-not-empty");
         this.#accountControl.classList.remove("is-invalid");
@@ -296,12 +302,6 @@ class JournalEntryEditor {
         this.#account.dataset.code = "";
         this.#account.dataset.text = "";
         this.#accountError.innerText = "";
-        this.#summaryControl.dataset.bsTarget = "#accounting-summary-editor-" + side.entryType + "-modal";
-        this.#summaryControl.classList.remove("accounting-not-empty");
-        this.#summaryControl.classList.remove("is-invalid");
-        this.#summary.dataset.value = "";
-        this.#summary.innerText = ""
-        this.#summaryError.innerText = ""
         this.#amount.value = "";
         this.#amount.classList.remove("is-invalid");
         this.#amountError.innerText = "";
@@ -311,16 +311,24 @@ class JournalEntryEditor {
      * Edits a journal entry.
      *
      * @param entry {JournalEntrySubForm} the journal entry sub-form
+     * @param summary {string} the summary
      * @param accountCode {string} the account code
      * @param accountText {string} the account text
-     * @param summary {string} the summary
      * @param amount {string} the amount
      */
-    #onEdit(entry, accountCode, accountText, summary, amount) {
+    #onEdit(entry, summary, accountCode, accountText, amount) {
         this.#entry = entry;
         this.#side = entry.side;
         this.entryType = this.#side.entryType;
         this.#element.dataset.entryType = entry.entryType;
+        this.#summaryControl.dataset.bsTarget = "#accounting-summary-editor-" + entry.entryType + "-modal";
+        if (summary === "") {
+            this.#summaryControl.classList.remove("accounting-not-empty");
+        } else {
+            this.#summaryControl.classList.add("accounting-not-empty");
+        }
+        this.#summary.dataset.value = summary;
+        this.#summary.innerText = summary;
         this.#accountControl.dataset.bsTarget = "#accounting-account-selector-" + entry.entryType + "-modal";
         if (accountCode === "") {
             this.#accountControl.classList.remove("accounting-not-empty");
@@ -330,14 +338,6 @@ class JournalEntryEditor {
         this.#account.innerText = accountText;
         this.#account.dataset.code = accountCode;
         this.#account.dataset.text = accountText;
-        this.#summaryControl.dataset.bsTarget = "#accounting-summary-editor-" + entry.entryType + "-modal";
-        if (summary === "") {
-            this.#summaryControl.classList.remove("accounting-not-empty");
-        } else {
-            this.#summaryControl.classList.add("accounting-not-empty");
-        }
-        this.#summary.dataset.value = summary;
-        this.#summary.innerText = summary;
         this.#amount.value = amount;
     }
 
@@ -368,12 +368,12 @@ class JournalEntryEditor {
      * Edits a journal entry.
      *
      * @param entry {JournalEntrySubForm} the journal entry sub-form
+     * @param summary {string} the summary
      * @param accountCode {string} the account code
      * @param accountText {string} the account text
-     * @param summary {string} the summary
      * @param amount {string} the amount
      */
-    static edit(entry, accountCode, accountText, summary, amount) {
+    static edit(entry, summary, accountCode, accountText, amount) {
-        this.#editor.#onEdit(entry, accountCode, accountText, summary, amount);
+        this.#editor.#onEdit(entry, summary, accountCode, accountText, amount);
     }
 }

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

@@ -723,7 +723,7 @@ class JournalEntrySubForm {
         this.#amountText = document.getElementById(this.#prefix + "-amount-text");
         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);
+            JournalEntryEditor.edit(this, this.#summary.value, this.#accountCode.value, this.#accountCode.dataset.text, this.amount.value);
         };
         this.deleteButton.onclick = () => {
             this.element.parentElement.removeChild(this.element);

src/accounting/templates/accounting/transaction/include/journal-entry-editor-modal.html

@@ -28,14 +28,6 @@ First written: 2023/2/25
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ A_("Close") }}"></button>
         </div>
         <div class="modal-body">
-          <div class="mb-3">
-            <div id="accounting-entry-editor-account-control" class="form-control accounting-clickable accounting-material-text-field" data-bs-toggle="modal" data-bs-target="">
-              <label class="form-label" for="accounting-entry-editor-account">{{ A_("Account") }}</label>
-              <div id="accounting-entry-editor-account" data-code="" data-text=""></div>
-            </div>
-            <div id="accounting-entry-editor-account-error" class="invalid-feedback"></div>
-          </div>
-
           <div class="mb-3">
             <div id="accounting-entry-editor-summary-control" class="form-control accounting-clickable accounting-material-text-field" data-bs-toggle="modal" data-bs-target="">
               <label class="form-label" for="accounting-entry-editor-summary">{{ A_("Summary") }}</label>
@@ -44,6 +36,14 @@ First written: 2023/2/25
             <div id="accounting-entry-editor-summary-error" class="invalid-feedback"></div>
           </div>
 
+          <div class="mb-3">
+            <div id="accounting-entry-editor-account-control" class="form-control accounting-clickable accounting-material-text-field" data-bs-toggle="modal" data-bs-target="">
+              <label class="form-label" for="accounting-entry-editor-account">{{ A_("Account") }}</label>
+              <div id="accounting-entry-editor-account" data-code="" data-text=""></div>
+            </div>
+            <div id="accounting-entry-editor-account-error" class="invalid-feedback"></div>
+          </div>
+
           <div class="form-floating mb-3">
             <input id="accounting-entry-editor-amount" class="form-control" type="number" value="" min="0.01" max="" step="0.01" placeholder=" " required="required">
             <label for="accounting-entry-editor-amount">{{ A_("Amount") }}</label>