428 lines
11 KiB
JavaScript
428 lines
11 KiB
JavaScript
/* The Mia! Accounting Project
|
|
* account-form.js: The JavaScript for the account form
|
|
*/
|
|
|
|
/* Copyright (c) 2023 imacat.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
/* Author: imacat@mail.imacat.idv.tw (imacat)
|
|
* First written: 2023/2/1
|
|
*/
|
|
"use strict";
|
|
|
|
// Initializes the page JavaScript.
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
AccountForm.initialize();
|
|
});
|
|
|
|
/**
|
|
* The account form.
|
|
*
|
|
* @private
|
|
*/
|
|
class AccountForm {
|
|
|
|
/**
|
|
* The base account selector
|
|
* @type {BaseAccountSelector}
|
|
*/
|
|
#baseAccountSelector;
|
|
|
|
/**
|
|
* The form element
|
|
* @type {HTMLFormElement}
|
|
*/
|
|
#formElement;
|
|
|
|
/**
|
|
* The control of the base account
|
|
* @type {HTMLDivElement}
|
|
*/
|
|
#baseControl;
|
|
|
|
/**
|
|
* The input of the base account
|
|
* @type {HTMLInputElement}
|
|
*/
|
|
#baseCode;
|
|
|
|
/**
|
|
* The base account
|
|
* @type {HTMLDivElement}
|
|
*/
|
|
#base;
|
|
|
|
/**
|
|
* The error message for the base account
|
|
* @type {HTMLDivElement}
|
|
*/
|
|
#baseError;
|
|
|
|
/**
|
|
* The title
|
|
* @type {HTMLInputElement}
|
|
*/
|
|
#title;
|
|
|
|
/**
|
|
* The error message of the title
|
|
* @type {HTMLDivElement}
|
|
*/
|
|
#titleError;
|
|
|
|
/**
|
|
* The control of the is-need-offset option
|
|
* @type {HTMLDivElement}
|
|
*/
|
|
#isNeedOffsetControl;
|
|
|
|
/**
|
|
* The is-need-offset option
|
|
* @type {HTMLInputElement}
|
|
*/
|
|
#isNeedOffset;
|
|
|
|
/**
|
|
* Constructs the account form.
|
|
*
|
|
*/
|
|
constructor() {
|
|
this.#baseAccountSelector = new BaseAccountSelector(this);
|
|
this.#formElement = document.getElementById("accounting-form");
|
|
this.#baseControl = document.getElementById("accounting-base-control");
|
|
this.#baseCode = document.getElementById("accounting-base-code");
|
|
this.#base = document.getElementById("accounting-base");
|
|
this.#baseError = document.getElementById("accounting-base-error");
|
|
this.#title = document.getElementById("accounting-title");
|
|
this.#titleError = document.getElementById("accounting-title-error");
|
|
this.#isNeedOffsetControl = document.getElementById("accounting-is-need-offset-control");
|
|
this.#isNeedOffset = document.getElementById("accounting-is-need-offset");
|
|
this.#formElement.onsubmit = () => {
|
|
return this.#validate();
|
|
};
|
|
this.#baseControl.onclick = () => {
|
|
this.#baseControl.classList.add("accounting-not-empty");
|
|
this.#baseAccountSelector.onOpen();
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Returns the base code.
|
|
*
|
|
* @return {string|null}
|
|
*/
|
|
get baseCode() {
|
|
return this.#baseCode.value === ""? null: this.#baseCode.value;
|
|
}
|
|
|
|
/**
|
|
* The callback when the base account selector is closed.
|
|
*
|
|
*/
|
|
onBaseAccountSelectorClosed() {
|
|
if (this.#baseCode.value === "") {
|
|
this.#baseControl.classList.remove("accounting-not-empty");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Saves the selected base account.
|
|
*
|
|
* @param account {BaseAccountOption} the selected base account
|
|
*/
|
|
saveBaseAccount(account) {
|
|
this.#baseCode.value = account.code;
|
|
this.#base.innerText = account.text;
|
|
if (["1", "2", "3"].includes(account.code.substring(0, 1))) {
|
|
this.#isNeedOffsetControl.classList.remove("d-none");
|
|
this.#isNeedOffset.disabled = false;
|
|
} else {
|
|
this.#isNeedOffsetControl.classList.add("d-none");
|
|
this.#isNeedOffset.disabled = true;
|
|
this.#isNeedOffset.checked = false;
|
|
}
|
|
this.#validateBase();
|
|
}
|
|
|
|
/**
|
|
* Clears the base account.
|
|
*
|
|
*/
|
|
clearBaseAccount() {
|
|
this.#baseCode.value = "";
|
|
this.#base.innerText = "";
|
|
this.#validateBase();
|
|
}
|
|
|
|
/**
|
|
* Validates the form.
|
|
*
|
|
* @returns {boolean} true if valid, or false otherwise
|
|
*/
|
|
#validate() {
|
|
let isValid = true;
|
|
isValid = this.#validateBase() && isValid;
|
|
isValid = this.#validateTitle() && isValid;
|
|
return isValid;
|
|
}
|
|
|
|
/**
|
|
* Validates the base account.
|
|
*
|
|
* @returns {boolean} true if valid, or false otherwise
|
|
*/
|
|
#validateBase() {
|
|
if (this.#baseCode.value === "") {
|
|
this.#baseControl.classList.add("is-invalid");
|
|
this.#baseError.innerText = A_("Please select the base account.");
|
|
return false;
|
|
}
|
|
this.#baseControl.classList.remove("is-invalid");
|
|
this.#baseError.innerText = "";
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Validates the title.
|
|
*
|
|
* @returns {boolean} true if valid, or false otherwise
|
|
*/
|
|
#validateTitle() {
|
|
this.#title.value = this.#title.value.trim();
|
|
if (this.#title.value === "") {
|
|
this.#title.classList.add("is-invalid");
|
|
this.#titleError.innerText = A_("Please fill in the title.");
|
|
return false;
|
|
}
|
|
this.#title.classList.remove("is-invalid");
|
|
this.#titleError.innerText = "";
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* The account form
|
|
* @type {AccountForm} the form
|
|
*/
|
|
static #form;
|
|
|
|
static initialize() {
|
|
this.#form = new AccountForm();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* The base account selector.
|
|
*
|
|
* @private
|
|
*/
|
|
class BaseAccountSelector {
|
|
|
|
/**
|
|
* The account form
|
|
* @type {AccountForm}
|
|
*/
|
|
form;
|
|
|
|
/**
|
|
* The selector modal
|
|
* @type {HTMLDivElement}
|
|
*/
|
|
#modal;
|
|
|
|
/**
|
|
* The query input
|
|
* @type {HTMLInputElement}
|
|
*/
|
|
#query;
|
|
|
|
/**
|
|
* The error message when the query has no result
|
|
* @type {HTMLParagraphElement}
|
|
*/
|
|
#queryNoResult;
|
|
|
|
/**
|
|
* The option list
|
|
* @type {HTMLUListElement}
|
|
*/
|
|
#optionList;
|
|
|
|
/**
|
|
* The options
|
|
* @type {BaseAccountOption[]}
|
|
*/
|
|
#options;
|
|
|
|
/**
|
|
* The button to clear the base account value
|
|
* @type {HTMLButtonElement}
|
|
*/
|
|
#clearButton;
|
|
|
|
/**
|
|
* Constructs the base account selector.
|
|
*
|
|
* @param form {AccountForm} the form
|
|
*/
|
|
constructor(form) {
|
|
this.form = form;
|
|
const prefix = "accounting-base-selector";
|
|
this.#modal = document.getElementById(`${prefix}-modal`);
|
|
this.#query = document.getElementById(`${prefix}-query`);
|
|
this.#queryNoResult = document.getElementById(`${prefix}-option-no-result`);
|
|
this.#optionList = document.getElementById(`${prefix}-option-list`);
|
|
this.#options = Array.from(document.getElementsByClassName(`${prefix}-option`)).map((element) => new BaseAccountOption(this, element));
|
|
this.#clearButton = document.getElementById(`${prefix}-clear`);
|
|
|
|
this.#modal.addEventListener("hidden.bs.modal", () => this.form.onBaseAccountSelectorClosed());
|
|
this.#query.oninput = () => this.#filterOptions();
|
|
this.#clearButton.onclick = () => this.form.clearBaseAccount();
|
|
}
|
|
|
|
/**
|
|
* Filters the options.
|
|
*
|
|
*/
|
|
#filterOptions() {
|
|
let isAnyMatched = false;
|
|
for (const option of this.#options) {
|
|
if (option.isMatched(this.#query.value)) {
|
|
option.setShown(true);
|
|
isAnyMatched = true;
|
|
} else {
|
|
option.setShown(false);
|
|
}
|
|
}
|
|
if (!isAnyMatched) {
|
|
this.#optionList.classList.add("d-none");
|
|
this.#queryNoResult.classList.remove("d-none");
|
|
} else {
|
|
this.#optionList.classList.remove("d-none");
|
|
this.#queryNoResult.classList.add("d-none");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* The callback when the base account selector is shown.
|
|
*
|
|
*/
|
|
onOpen() {
|
|
this.#query.value = "";
|
|
this.#filterOptions();
|
|
for (const option of this.#options) {
|
|
option.setActive(option.code === this.form.baseCode);
|
|
}
|
|
if (this.form.baseCode === null) {
|
|
this.#clearButton.classList.add("btn-secondary")
|
|
this.#clearButton.classList.remove("btn-danger");
|
|
this.#clearButton.disabled = true;
|
|
} else {
|
|
this.#clearButton.classList.add("btn-danger");
|
|
this.#clearButton.classList.remove("btn-secondary")
|
|
this.#clearButton.disabled = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* A base account option.
|
|
*
|
|
*/
|
|
class BaseAccountOption {
|
|
|
|
/**
|
|
* The element
|
|
* @type {HTMLLIElement}
|
|
*/
|
|
#element;
|
|
|
|
/**
|
|
* The account code
|
|
* @type {string}
|
|
*/
|
|
code;
|
|
|
|
/**
|
|
* The account text
|
|
* @type {string}
|
|
*/
|
|
text;
|
|
|
|
/**
|
|
* The values to query against
|
|
* @type {string[]}
|
|
*/
|
|
#queryValues;
|
|
|
|
/**
|
|
* Constructs the account in the base account selector.
|
|
*
|
|
* @param selector {BaseAccountSelector} the base account selector
|
|
* @param element {HTMLLIElement} the element
|
|
*/
|
|
constructor(selector, element) {
|
|
this.#element = element;
|
|
this.code = element.dataset.code;
|
|
this.text = element.dataset.text;
|
|
this.#queryValues = JSON.parse(element.dataset.queryValues);
|
|
|
|
this.#element.onclick = () => selector.form.saveBaseAccount(this);
|
|
}
|
|
|
|
/**
|
|
* Returns whether the account matches the query.
|
|
*
|
|
* @param query {string} the query term
|
|
* @return {boolean} true if the option matches, or false otherwise
|
|
*/
|
|
isMatched(query) {
|
|
if (query === "") {
|
|
return true;
|
|
}
|
|
for (const queryValue of this.#queryValues) {
|
|
if (queryValue.toLowerCase().includes(query.toLowerCase())) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Sets whether the option is shown.
|
|
*
|
|
* @param isShown {boolean} true to show, or false otherwise
|
|
*/
|
|
setShown(isShown) {
|
|
if (isShown) {
|
|
this.#element.classList.remove("d-none");
|
|
} else {
|
|
this.#element.classList.add("d-none");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sets whether the option is active.
|
|
*
|
|
* @param isActive {boolean} true if active, or false otherwise
|
|
*/
|
|
setActive(isActive) {
|
|
if (isActive) {
|
|
this.#element.classList.add("active");
|
|
} else {
|
|
this.#element.classList.remove("active");
|
|
}
|
|
}
|
|
}
|