Reordered the journal entry editor and put the summary first and the account later.
This commit is contained in:
parent
74071e8997
commit
3826646d06
@ -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) {
|
||||
this.#editor.#onEdit(entry, accountCode, accountText, summary, amount);
|
||||
static edit(entry, summary, accountCode, accountText, amount) {
|
||||
this.#editor.#onEdit(entry, summary, accountCode, accountText, amount);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user