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

Added the #initializeTagButtons and #tagInputOnChange methods to the JavaScript SummaryHelper to simplify the code.

Browse Source
This commit is contained in:
依瑪貓 2023-03-01 00:22:17 +08:00
parent 535ff96ab3
commit 14ed4ca354
1 changed files with 58 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
src/accounting/static/js/summary-helper.js
View File

@ -124,7 +124,6 @@ class SummaryHelper {
* *
*/ */
#initializeGeneralTagHelper() { #initializeGeneralTagHelper() {
const tagButtons = Array.from(document.getElementsByClassName(this.#prefix + "-general-btn-tag"));
const summary = document.getElementById(this.#prefix + "-summary"); const summary = document.getElementById(this.#prefix + "-summary");
const tag = document.getElementById(this.#prefix + "-general-tag"); const tag = document.getElementById(this.#prefix + "-general-tag");
const helper = this; const helper = this;
@ -137,36 +136,9 @@ class SummaryHelper {
summary.value = prefix + summary.value.substring(pos + 1); summary.value = prefix + summary.value.substring(pos + 1);
} }
} }
for (const tagButton of tagButtons) { this.#initializeTagButtons("general", tag, updateSummary);
tagButton.onclick = function () {
for (const otherButton of tagButtons) {
otherButton.classList.remove("btn-primary");
otherButton.classList.add("btn-outline-primary");
}
tagButton.classList.remove("btn-outline-primary");
tagButton.classList.add("btn-primary");
tag.value = tagButton.dataset.value;
helper.#filterSuggestedAccounts(tagButton);
updateSummary();
};
}
tag.onchange = function () { tag.onchange = function () {
let isMatched = false; helper.#tagInputOnChange("general", tag, updateSummary);
for (const tagButton of tagButtons) {
if (tagButton.dataset.value === tag.value) {
tagButton.classList.remove("btn-outline-primary");
tagButton.classList.add("btn-primary");
helper.#filterSuggestedAccounts(tagButton);
isMatched = true;
} else {
tagButton.classList.remove("btn-primary");
tagButton.classList.add("btn-outline-primary");
}
}
if (!isMatched) {
helper.#filterSuggestedAccounts(null);
}
updateSummary();
}; };
} }
@ -175,7 +147,6 @@ class SummaryHelper {
* *
*/ */
#initializeGeneralTripHelper() { #initializeGeneralTripHelper() {
const tagButtons = Array.from(document.getElementsByClassName(this.#prefix + "-travel-btn-tag"));
const summary = document.getElementById(this.#prefix + "-summary"); const summary = document.getElementById(this.#prefix + "-summary");
const tag = document.getElementById(this.#prefix + "-travel-tag"); const tag = document.getElementById(this.#prefix + "-travel-tag");
const from = document.getElementById(this.#prefix + "-travel-from"); const from = document.getElementById(this.#prefix + "-travel-from");
@ -192,36 +163,9 @@ class SummaryHelper {
} }
summary.value = tag.value + "—" + from.value + direction + to.value; summary.value = tag.value + "—" + from.value + direction + to.value;
}; };
for (const tagButton of tagButtons) { this.#initializeTagButtons("travel", tag, updateSummary);
tagButton.onclick = function () {
for (const otherButton of tagButtons) {
otherButton.classList.remove("btn-primary");
otherButton.classList.add("btn-outline-primary");
}
tagButton.classList.remove("btn-outline-primary");
tagButton.classList.add("btn-primary");
tag.value = tagButton.dataset.value;
helper.#filterSuggestedAccounts(tagButton);
updateSummary();
};
}
tag.onchange = function () { tag.onchange = function () {
let isMatched = false; helper.#tagInputOnChange("travel", tag, updateSummary);
for (const tagButton of tagButtons) {
if (tagButton.dataset.value === tag.value) {
tagButton.classList.remove("btn-outline-primary");
tagButton.classList.add("btn-primary");
helper.#filterSuggestedAccounts(tagButton);
isMatched = true;
} else {
tagButton.classList.remove("btn-primary");
tagButton.classList.add("btn-outline-primary");
}
}
if (!isMatched) {
helper.#filterSuggestedAccounts(null)
}
updateSummary();
helper.#validateGeneralTripTag(); helper.#validateGeneralTripTag();
}; };
from.onchange = function () { from.onchange = function () {
@ -250,7 +194,6 @@ class SummaryHelper {
* *
*/ */
#initializeBusTripHelper() { #initializeBusTripHelper() {
const tagButtons = Array.from(document.getElementsByClassName(this.#prefix + "-bus-btn-tag"));
const summary = document.getElementById(this.#prefix + "-summary"); const summary = document.getElementById(this.#prefix + "-summary");
const tag = document.getElementById(this.#prefix + "-bus-tag"); const tag = document.getElementById(this.#prefix + "-bus-tag");
const route = document.getElementById(this.#prefix + "-bus-route"); const route = document.getElementById(this.#prefix + "-bus-route");
@ -260,36 +203,9 @@ class SummaryHelper {
const updateSummary = function () { const updateSummary = function () {
summary.value = tag.value + "—" + route.value + "—" + from.value + "→" + to.value; summary.value = tag.value + "—" + route.value + "—" + from.value + "→" + to.value;
}; };
for (const tagButton of tagButtons) { this.#initializeTagButtons("bus", tag, updateSummary);
tagButton.onclick = function () {
for (const otherButton of tagButtons) {
otherButton.classList.remove("btn-primary");
otherButton.classList.add("btn-outline-primary");
}
tagButton.classList.remove("btn-outline-primary");
tagButton.classList.add("btn-primary");
tag.value = tagButton.dataset.value;
helper.#filterSuggestedAccounts(tagButton);
updateSummary();
};
}
tag.onchange = function () { tag.onchange = function () {
let isMatched = false; helper.#tagInputOnChange("bus", tag, updateSummary);
for (const tagButton of tagButtons) {
if (tagButton.dataset.value === tag.value) {
tagButton.classList.remove("btn-outline-primary");
tagButton.classList.add("btn-primary");
helper.#filterSuggestedAccounts(tagButton);
isMatched = true;
} else {
tagButton.classList.remove("btn-primary");
tagButton.classList.add("btn-outline-primary");
}
}
if (!isMatched) {
helper.#filterSuggestedAccounts(null);
}
updateSummary();
helper.#validateBusTripTag(); helper.#validateBusTripTag();
}; };
route.onchange = function () { route.onchange = function () {
@ -306,6 +222,58 @@ class SummaryHelper {
}; };
} }
/**
* Initializes the tag buttons.
*
* @param tabId {string} the tab ID
* @param tag {HTMLInputElement} the tag input
* @param updateSummary {function(): void} the callback to update the summary
*/
#initializeTagButtons(tabId, tag, updateSummary) {
const tagButtons = Array.from(document.getElementsByClassName(this.#prefix + "-" + tabId + "-btn-tag"));
const helper = this;
for (const tagButton of tagButtons) {
tagButton.onclick = function () {
for (const otherButton of tagButtons) {
otherButton.classList.remove("btn-primary");
otherButton.classList.add("btn-outline-primary");
}
tagButton.classList.remove("btn-outline-primary");
tagButton.classList.add("btn-primary");
tag.value = tagButton.dataset.value;
helper.#filterSuggestedAccounts(tagButton);
updateSummary();
};
}
}
/**
* The callback when the tag input is changed.
*
* @param tabId {string} the tab ID
* @param tag {HTMLInputElement} the tag input
* @param updateSummary {function(): void} the callback to update the summary
*/
#tagInputOnChange(tabId, tag, updateSummary) {
const tagButtons = Array.from(document.getElementsByClassName(this.#prefix + "-" + tabId + "-btn-tag"));
let isMatched = false;
for (const tagButton of tagButtons) {
if (tagButton.dataset.value === tag.value) {
tagButton.classList.remove("btn-outline-primary");
tagButton.classList.add("btn-primary");
this.#filterSuggestedAccounts(tagButton);
isMatched = true;
} else {
tagButton.classList.remove("btn-primary");
tagButton.classList.add("btn-outline-primary");
}
}
if (!isMatched) {
this.#filterSuggestedAccounts(null);
}
updateSummary();
}
/** /**
* Filters the suggested accounts. * Filters the suggested accounts.
* *