imacat/mia-accounting
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 41 Wiki Activity

Renamed the description attribute to #descriptionInput, and added the description getter and setter to the JavaScript DescriptionEditor editor, to hide the actual implementation of the description input.

Browse Source
This commit is contained in:
依瑪貓 2023-04-03 09:48:15 +08:00
parent 4adc464d3d
commit 08732c1e66
1 changed files with 43 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/accounting/static/js/description-editor.js
View File

@ -68,7 +68,7 @@ class DescriptionEditor {
* The description input * The description input
* @type {HTMLInputElement} * @type {HTMLInputElement}
*/ */
description; #descriptionInput;
/** /**
* The button to the original line item selector * The button to the original line item selector
@ -142,7 +142,7 @@ class DescriptionEditor {
this.prefix = `accounting-description-editor-${debitCredit}`; this.prefix = `accounting-description-editor-${debitCredit}`;
this.#form = document.getElementById(this.prefix); this.#form = document.getElementById(this.prefix);
this.#modal = document.getElementById(`${this.prefix}-modal`); this.#modal = document.getElementById(`${this.prefix}-modal`);
this.description = document.getElementById(`${this.prefix}-description`); this.#descriptionInput = document.getElementById(`${this.prefix}-description`);
this.#offsetButton = document.getElementById(`${this.prefix}-offset`); this.#offsetButton = document.getElementById(`${this.prefix}-offset`);
this.number = document.getElementById(`${this.prefix}-annotation-number`); this.number = document.getElementById(`${this.prefix}-annotation-number`);
this.note = document.getElementById(`${this.prefix}-annotation-note`); this.note = document.getElementById(`${this.prefix}-annotation-note`);
@ -154,7 +154,7 @@ class DescriptionEditor {
this.tabPlanes[tab.tabId()] = tab; this.tabPlanes[tab.tabId()] = tab;
} }
this.currentTab = this.tabPlanes.general; this.currentTab = this.tabPlanes.general;
this.description.onchange = () => this.#onDescriptionChange(); this.#descriptionInput.onchange = () => this.#onDescriptionChange();
this.#offsetButton.onclick = () => this.lineItemEditor.originalLineItemSelector.onOpen(); this.#offsetButton.onclick = () => this.lineItemEditor.originalLineItemSelector.onOpen();
this.#form.onsubmit = () => { this.#form.onsubmit = () => {
if (this.currentTab.validate()) { if (this.currentTab.validate()) {
@ -164,6 +164,24 @@ class DescriptionEditor {
}; };
} }
/**
* Returns the description.
*
* @return {string} the description
*/
get description() {
return this.#descriptionInput.value;
}
/**
* Sets the description.
*
* @param description {string} the description
*/
set description(description) {
this.#descriptionInput.value = description;
}
/** /**
* Returns the current account options. * Returns the current account options.
* *
@ -181,7 +199,7 @@ class DescriptionEditor {
* *
*/ */
#onDescriptionChange() { #onDescriptionChange() {
this.description.value = this.description.value.trim(); this.description = this.description.trim();
for (const tabPlane of [this.tabPlanes.recurring, this.tabPlanes.bus, this.tabPlanes.travel, this.tabPlanes.general]) { for (const tabPlane of [this.tabPlanes.recurring, this.tabPlanes.bus, this.tabPlanes.travel, this.tabPlanes.general]) {
if (tabPlane.populate()) { if (tabPlane.populate()) {
break; break;
@ -263,7 +281,7 @@ class DescriptionEditor {
*/ */
#submit() { #submit() {
bootstrap.Modal.getOrCreateInstance(this.#modal).hide(); bootstrap.Modal.getOrCreateInstance(this.#modal).hide();
this.lineItemEditor.saveDescription(this.description.value, this.#selectedAccount); this.lineItemEditor.saveDescription(this.description, this.#selectedAccount);
} }
/** /**
@ -273,7 +291,7 @@ class DescriptionEditor {
onOpen() { onOpen() {
this.#reset(); this.#reset();
this.#setConfirmedAccount(); this.#setConfirmedAccount();
this.description.value = this.lineItemEditor.description === null? "": this.lineItemEditor.description; this.description = this.lineItemEditor.description === null? "": this.lineItemEditor.description;
this.#onDescriptionChange(); this.#onDescriptionChange();
} }
@ -298,7 +316,7 @@ class DescriptionEditor {
* *
*/ */
#reset() { #reset() {
this.description.value = ""; this.description = "";
for (const tabPlane of Object.values(this.tabPlanes)) { for (const tabPlane of Object.values(this.tabPlanes)) {
tabPlane.reset(); tabPlane.reset();
} }
@ -715,12 +733,12 @@ class DescriptionEditorGeneralTagTab extends DescriptionEditorTagTabPlane {
* @override * @override
*/ */
updateDescription() { updateDescription() {
const pos = this.editor.description.value.indexOf("—"); const pos = this.editor.description.indexOf("—");
const prefix = this.tag.value === ""? "": `${this.tag.value}—`; const prefix = this.tag.value === ""? "": `${this.tag.value}—`;
if (pos === -1) { if (pos === -1) {
this.editor.description.value = `${prefix}${this.editor.description.value}`; this.editor.description = `${prefix}${this.editor.description}`;
} else { } else {
this.editor.description.value = `${prefix}${this.editor.description.value.substring(pos + 1)}`; this.editor.description = `${prefix}${this.editor.description.substring(pos + 1)}`;
} }
} }
@ -731,7 +749,7 @@ class DescriptionEditorGeneralTagTab extends DescriptionEditorTagTabPlane {
* @override * @override
*/ */
populate() { populate() {
const found = this.editor.description.value.match(/^([^—]+)—/); const found = this.editor.description.match(/^([^—]+)—/);
if (found === null) { if (found === null) {
return false; return false;
} }
@ -850,7 +868,7 @@ class DescriptionEditorGeneralTripTab extends DescriptionEditorTagTabPlane {
break; break;
} }
} }
this.editor.description.value = `${this.tag.value}—${this.#from.value}${direction}${this.#to.value}`; this.editor.description = `${this.tag.value}—${this.#from.value}${direction}${this.#to.value}`;
} }
/** /**
@ -884,7 +902,7 @@ class DescriptionEditorGeneralTripTab extends DescriptionEditorTagTabPlane {
* @override * @override
*/ */
populate() { populate() {
const found = this.editor.description.value.match(/^([^—]+)—([^—→↔]+)([→↔])(.+?)(?:[*×]\d+)?(?:\([^()]+\))?$/); const found = this.editor.description.match(/^([^—]+)—([^—→↔]+)([→↔])(.+?)(?:[*×]\d+)?(?:\([^()]+\))?$/);
if (found === null) { if (found === null) {
return false; return false;
} }
@ -1042,7 +1060,7 @@ class DescriptionEditorBusTripTab extends DescriptionEditorTagTabPlane {
* @override * @override
*/ */
updateDescription() { updateDescription() {
this.editor.description.value = `${this.tag.value}—${this.#route.value}—${this.#from.value}→${this.#to.value}`; this.editor.description = `${this.tag.value}—${this.#route.value}—${this.#from.value}→${this.#to.value}`;
} }
/** /**
@ -1070,7 +1088,7 @@ class DescriptionEditorBusTripTab extends DescriptionEditorTagTabPlane {
* @override * @override
*/ */
populate() { populate() {
const found = this.editor.description.value.match(/^([^—]+)—([^—]+)—([^—→]+)→(.+?)(?:[*×]\d+)?(?:\([^()]+\))?$/); const found = this.editor.description.match(/^([^—]+)—([^—]+)—([^—→]+)→(.+?)(?:[*×]\d+)?(?:\([^()]+\))?$/);
if (found === null) { if (found === null) {
return false; return false;
} }
@ -1180,7 +1198,7 @@ class DescriptionEditorRecurringTab extends DescriptionEditorTabPlane {
this.reset(); this.reset();
itemButton.classList.add("btn-primary"); itemButton.classList.add("btn-primary");
itemButton.classList.remove("btn-outline-primary"); itemButton.classList.remove("btn-outline-primary");
this.editor.description.value = this.#getDescription(itemButton); this.editor.description = this.#getDescription(itemButton);
this.editor.updateCurrentSuggestedAccounts(itemButton); this.editor.updateCurrentSuggestedAccounts(itemButton);
}; };
} }
@ -1237,7 +1255,7 @@ class DescriptionEditorRecurringTab extends DescriptionEditorTabPlane {
*/ */
populate() { populate() {
for (const itemButton of this.#itemButtons) { for (const itemButton of this.#itemButtons) {
if (this.#getDescription(itemButton) === this.editor.description.value) { if (this.#getDescription(itemButton) === this.editor.description) {
itemButton.classList.add("btn-primary"); itemButton.classList.add("btn-primary");
itemButton.classList.remove("btn-outline-primary"); itemButton.classList.remove("btn-outline-primary");
this.switchToMe(); this.switchToMe();
@ -1311,15 +1329,15 @@ class DescriptionEditorAnnotationTab extends DescriptionEditorTabPlane {
* @override * @override
*/ */
updateDescription() { updateDescription() {
const found = this.editor.description.value.match(/^(.*?)(?:[*×]\d+)?(?:\([^()]+\))?$/); const found = this.editor.description.match(/^(.*?)(?:[*×]\d+)?(?:\([^()]+\))?$/);
if (found !== null) { if (found !== null) {
this.editor.description.value = found[1]; this.editor.description = found[1];
} }
if (parseInt(this.editor.number.value) > 1) { if (parseInt(this.editor.number.value) > 1) {
this.editor.description.value = `${this.editor.description.value}×${this.editor.number.value}`; this.editor.description = `${this.editor.description}×${this.editor.number.value}`;
} }
if (this.editor.note.value !== "") { if (this.editor.note.value !== "") {
this.editor.description.value = `${this.editor.description.value}(${this.editor.note.value})`; this.editor.description = `${this.editor.description}(${this.editor.note.value})`;
} }
} }
@ -1340,19 +1358,19 @@ class DescriptionEditorAnnotationTab extends DescriptionEditorTabPlane {
* @override * @override
*/ */
populate() { populate() {
const found = this.editor.description.value.match(/^(.*?)(?:[*×](\d+))?(?:\(([^()]+)\))?$/); const found = this.editor.description.match(/^(.*?)(?:[*×](\d+))?(?:\(([^()]+)\))?$/);
this.editor.description.value = found[1]; this.editor.description = found[1];
if (found[2] === undefined || parseInt(found[2]) === 1) { if (found[2] === undefined || parseInt(found[2]) === 1) {
this.editor.number.value = ""; this.editor.number.value = "";
} else { } else {
this.editor.number.value = found[2]; this.editor.number.value = found[2];
this.editor.description.value = `${this.editor.description.value}×${this.editor.number.value}`; this.editor.description = `${this.editor.description}×${this.editor.number.value}`;
} }
if (found[3] === undefined) { if (found[3] === undefined) {
this.editor.note.value = ""; this.editor.note.value = "";
} else { } else {
this.editor.note.value = found[3]; this.editor.note.value = found[3];
this.editor.description.value = `${this.editor.description.value}(${this.editor.note.value})`; this.editor.description = `${this.editor.description}(${this.editor.note.value})`;
} }
return true; return true;
} }