From c306ff8009f84e3cd39fba9dd6999048c51b79fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BE=9D=E7=91=AA=E8=B2=93?= Date: Mon, 13 Mar 2023 19:47:29 +0800 Subject: [PATCH] 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 | 69 +++++++------------- src/accounting/static/js/transaction-form.js | 44 ++++++++++++- 2 files changed, 63 insertions(+), 50 deletions(-) diff --git a/src/accounting/static/js/account-selector.js b/src/accounting/static/js/account-selector.js index 6ddc38f..98e56ff 100644 --- a/src/accounting/static/js/account-selector.js +++ b/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"); - AccountSelector.#formAccount.innerText = ""; - AccountSelector.#formAccount.dataset.code = ""; - AccountSelector.#formAccount.dataset.text = ""; - JournalEntryEditor.validateAccount(); + this.#entryEditor.clearAccount(); }; for (const option of this.#options) { option.onclick = () => { - AccountSelector.#formAccountControl.classList.add("accounting-not-empty"); - AccountSelector.#formAccount.innerText = option.dataset.content; - AccountSelector.#formAccount.dataset.code = option.dataset.code; - AccountSelector.#formAccount.dataset.text = option.dataset.content; - JournalEntryEditor.validateAccount(); + this.#entryEditor.saveAccount(option.dataset.code, option.dataset.content); }; } 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() { - this.#formAccountControl.onclick = () => this.#selectors[this.#entryForm.dataset.entryType].#onOpen(); - } - - /** - * Initializes the account selector for the journal entry form. - *x - */ - static initializeJournalEntryForm() { - this.#formAccountControl.dataset.bsTarget = "#accounting-account-selector-" + this.#entryForm.dataset.entryType + "-modal"; + static start(entryEditor, entryType) { + this.#selectors[entryType].#onOpen(entryEditor); } } diff --git a/src/accounting/static/js/transaction-form.js b/src/accounting/static/js/transaction-form.js index d2b0956..9269aa8 100644 --- a/src/accounting/static/js/transaction-form.js +++ b/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 {