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

Replaced the function-based JavaScript with the object-oriented AccountForm class for the currency form.

Browse Source
This commit is contained in:
依瑪貓 2023-03-12 21:40:25 +08:00
parent 0a658a76e8
commit 2b84f64554
1 changed files with 135 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

271
src/accounting/static/js/currency-form.js
View File

@ -24,152 +24,151 @@
// Initializes the page JavaScript. // Initializes the page JavaScript.
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
document.getElementById("accounting-code") CurrencyForm.initialize();
.onchange = validateCode;
document.getElementById("accounting-name")
.onchange = validateName;
document.getElementById("accounting-form")
.onsubmit = validateForm;
}); });
/** /**
* The asynchronous validation result * The currency form.
* @type {object}
* @private
*/
let isAsyncValid = {};
/**
* Validates the form.
*
* @returns {boolean} true if valid, or false otherwise
* @private
*/
function validateForm() {
isAsyncValid = {
"code": false,
"_sync": false,
};
let isValid = true;
isValid = validateCode() && isValid;
isValid = validateName() && isValid;
isAsyncValid["_sync"] = isValid;
submitFormIfAllAsyncValid();
return false;
}
/**
* Submits the form if the whole form passed the asynchronous
* validations.
* *
* @private * @private
*/ */
function submitFormIfAllAsyncValid() { class CurrencyForm {
let isValid = true;
for (const key of Object.keys(isAsyncValid)) {
isValid = isAsyncValid[key] && isValid;
}
if (isValid) {
document.getElementById("accounting-form").submit()
}
}
/** /**
* Validates the code. * The form.
* * @type {HTMLFormElement}
* @param changeEvent {Event} the change event, if invoked from onchange */
* @returns {boolean} true if valid, or false otherwise #formElement;
* @private
*/
function validateCode(changeEvent = null) {
const key = "code";
const isSubmission = changeEvent === null;
let hasAsyncValidation = false;
const field = document.getElementById("accounting-code");
const error = document.getElementById("accounting-code-error");
field.value = field.value.trim();
if (field.value === "") {
field.classList.add("is-invalid");
error.innerText = A_("Please fill in the code.");
return false;
}
const blocklist = JSON.parse(field.dataset.blocklist);
if (blocklist.includes(field.value)) {
field.classList.add("is-invalid");
error.innerText = A_("This code is not available.");
return false;
}
if (!field.value.match(/^[A-Z]{3}$/)) {
field.classList.add("is-invalid");
error.innerText = A_("Code can only be composed of 3 upper-cased letters.");
return false;
}
const original = field.dataset.original;
if (original === "" || field.value !== original) {
hasAsyncValidation = true;
validateAsyncCodeIsDuplicated(isSubmission, key);
}
if (!hasAsyncValidation) {
isAsyncValid[key] = true;
field.classList.remove("is-invalid");
error.innerText = "";
}
return true;
}
/** /**
* Validates asynchronously whether the code is duplicated. * The code
* The boolean validation result is stored in isAsyncValid[key]. * @type {HTMLInputElement}
* */
* @param isSubmission {boolean} whether this is invoked from a form submission #code;
* @param key {string} the key to store the result in isAsyncValid
* @private /**
*/ * The error message of the code
function validateAsyncCodeIsDuplicated(isSubmission, key) { * @type {HTMLDivElement}
const field = document.getElementById("accounting-code"); */
const error = document.getElementById("accounting-code-error"); #codeError;
const url = field.dataset.existsUrl;
const onLoad = function () { /**
if (this.status === 200) { * The name
const result = JSON.parse(this.responseText); * @type {HTMLInputElement}
if (result["exists"]) { */
field.classList.add("is-invalid"); #name;
error.innerText = A_("Code conflicts with another currency.");
if (isSubmission) { /**
isAsyncValid[key] = false; * The error message of the name
* @type {HTMLDivElement}
*/
#nameError;
/**
* Constructs the currency form.
*
*/
constructor() {
this.#formElement = document.getElementById("accounting-form");
this.#code = document.getElementById("accounting-code");
this.#codeError = document.getElementById("accounting-code-error");
this.#name = document.getElementById("accounting-name");
this.#nameError = document.getElementById("accounting-name-error");
this.#code.onchange = () => {
this.#validateCode().then();
};
this.#name.onchange = () => {
this.#validateName();
};
this.#formElement.onsubmit = () => {
this.#validateForm().then((isValid) => {
if (isValid) {
this.#formElement.submit();
} }
return; });
} return false;
field.classList.remove("is-invalid"); };
error.innerText = ""; }
if (isSubmission) {
isAsyncValid[key] = true; /**
submitFormIfAllAsyncValid(); * Validates the form.
*
* @returns {Promise<boolean>} true if valid, or false otherwise
*/
async #validateForm() {
let isValid = true;
isValid = await this.#validateCode() && isValid;
isValid = this.#validateName() && isValid;
return isValid;
}
/**
* Validates the code.
*
* @param changeEvent {Event} the change event, if invoked from onchange
* @returns {Promise<boolean>} true if valid, or false otherwise
*/
async #validateCode(changeEvent = null) {
this.#code.value = this.#code.value.trim();
if (this.#code.value === "") {
this.#code.classList.add("is-invalid");
this.#codeError.innerText = A_("Please fill in the code.");
return false;
}
const blocklist = JSON.parse(this.#code.dataset.blocklist);
if (blocklist.includes(this.#code.value)) {
this.#code.classList.add("is-invalid");
this.#codeError.innerText = A_("This code is not available.");
return false;
}
if (!this.#code.value.match(/^[A-Z]{3}$/)) {
this.#code.classList.add("is-invalid");
this.#codeError.innerText = A_("Code can only be composed of 3 upper-cased letters.");
return false;
}
const original = this.#code.dataset.original;
if (original === "" || this.#code.value !== original) {
const response = await fetch(this.#code.dataset.existsUrl + "?q=" + encodeURIComponent(this.#code.value));
const data = await response.json();
if (data["exists"]) {
this.#code.classList.add("is-invalid");
this.#codeError.innerText = A_("Code conflicts with another currency.");
return false;
} }
} }
}; this.#code.classList.remove("is-invalid");
const request = new XMLHttpRequest(); this.#codeError.innerText = "";
request.onload = onLoad; return true;
request.open("GET", url + "?q=" + encodeURIComponent(field.value)); }
request.send();
} /**
* Validates the name.
/** *
* Validates the name. * @returns {boolean} true if valid, or false otherwise
* */
* @returns {boolean} true if valid, or false otherwise #validateName() {
* @private this.#name.value = this.#name.value.trim();
*/ if (this.#name.value === "") {
function validateName() { this.#name.classList.add("is-invalid");
const field = document.getElementById("accounting-name"); this.#nameError.innerText = A_("Please fill in the name.");
const error = document.getElementById("accounting-name-error"); return false;
field.value = field.value.trim(); }
if (field.value === "") { this.#name.classList.remove("is-invalid");
field.classList.add("is-invalid"); this.#nameError.innerText = "";
error.innerText = A_("Please fill in the name."); return true;
return false; }
/**
* The form
* @type {CurrencyForm}
*/
static #form;
/**
* Initializes the currency form.
*
*/
static initialize() {
this.#form = new CurrencyForm();
} }
field.classList.remove("is-invalid");
error.innerText = "";
return true;
} }