Added the account management.

src/accounting/static/css/style.css

@@ -0,0 +1,96 @@
+/* The Mia! Accounting Flask Project
+ * style.css: The style sheet for the accounting application.
+ */
+
+/*  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
+ */
+
+.clickable {
+    cursor: pointer;
+}
+
+/** The account management */
+.account {
+    padding: 2em 1.5em;
+    margin: 1em;
+    background-color: #E9ECEF;
+    border-radius: 0.3em;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+.account .account-title {
+    font-size: 1.8rem;
+    font-weight: bolder;
+}
+.account .account-code {
+    font-size: 1.4rem;
+    color: #373b3e;
+}
+.list-base-selector {
+    height: 20rem;
+    overflow-y: scroll;
+}
+
+/* The Material Design text field (floating form control in Bootstrap) */
+.material-text-field {
+    position: relative;
+    min-height: calc(3.5rem + 2px);
+    padding-top: 1.625rem;
+}
+.material-text-field > .form-label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: calc(3.5rem + 2px);
+    padding: 1rem 0.75rem;
+    transform-origin: 0 0;
+    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
+}
+.material-text-field.not-empty > .form-label {
+    opacity: 0.65;
+    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
+}
+
+/* The Material Design floating action buttons */
+.material-fab {
+    position: fixed;
+    right: 2rem;
+    bottom: 1rem;
+    z-index: 10;
+    flex-direction: column-reverse;
+}
+.material-fab .btn {
+    border-radius: 50%;
+    transform: scale(1.5);
+    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0,0,0,.12);
+    display: block;
+    margin-top: 2.5rem;
+}
+.material-fab .btn:hover, .material-fab .btn:focus {
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0,0,0,.12);
+}
+
+/* The Material Design form switch */
+@media(max-width:767px) {
+    .form-switch {
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: space-between;
+        padding-left: 0;
+    }
+}

src/accounting/static/js/account-form.js

@@ -0,0 +1,136 @@
+/* The Mia! Accounting Flask 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
+ */
+
+// Initializes the page JavaScript.
+document.addEventListener("DOMContentLoaded", function () {
+    initializeBaseAccountSelector()
+    document.getElementById("account-base-code")
+        .onchange = validateBase;
+    document.getElementById("account-title")
+        .onchange = validateTitle;
+    document.getElementById("account-form")
+        .onsubmit = validateForm;
+});
+
+/**
+ * Initializes the base account selector.
+ *
+ * @private
+ */
+function initializeBaseAccountSelector() {
+    const selector = document.getElementById("select-base-modal");
+    const base = document.getElementById("account-base");
+    const baseCode = document.getElementById("account-base-code");
+    const baseContent = document.getElementById("account-base-content");
+    const options = Array.from(document.getElementsByClassName("list-group-item-base"));
+    const btnClear = document.getElementById("btn-clear-base");
+    selector.addEventListener("show.bs.modal", function () {
+        base.classList.add("not-empty");
+        options.forEach(function (item) {
+            item.classList.remove("active");
+        });
+        const selected = document.getElementById("list-group-item-base-" + baseCode.value);
+        if (selected !== null) {
+            selected.classList.add("active");
+        }
+    });
+    selector.addEventListener("hidden.bs.modal", function () {
+        if (baseCode.value === "") {
+            base.classList.remove("not-empty");
+        }
+    });
+    options.forEach(function (option) {
+        option.onclick = function () {
+            baseCode.value = option.dataset.code;
+            baseContent.innerText = option.dataset.content;
+            btnClear.classList.add("btn-danger");
+            btnClear.classList.remove("btn-secondary")
+            btnClear.disabled = false;
+            validateBase();
+            bootstrap.Modal.getInstance(selector).hide();
+        };
+    });
+    btnClear.onclick = function () {
+        baseCode.value = "";
+        baseContent.innerText = "";
+        btnClear.classList.add("btn-secondary")
+        btnClear.classList.remove("btn-danger");
+        btnClear.disabled = true;
+        validateBase();
+        bootstrap.Modal.getInstance(selector).hide();
+    }
+}
+
+/**
+ * Validates the form.
+ *
+ * @returns {boolean} true if valid, or false otherwise
+ * @private
+ */
+function validateForm() {
+    let isValid = true;
+    isValid = validateBase() && isValid;
+    isValid = validateTitle() && isValid;
+    return isValid;
+}
+
+/**
+ * Validates the base account.
+ *
+ * @returns {boolean} true if valid, or false otherwise
+ * @private
+ */
+function validateBase() {
+    const field = document.getElementById("account-base-code");
+    const error = document.getElementById("account-base-code-error");
+    const displayField = document.getElementById("account-base");
+    field.value = field.value.trim();
+    if (field.value === "") {
+        displayField.classList.add("is-invalid");
+        error.innerText = A_("Please select the base account.");
+        return false;
+    }
+    displayField.classList.remove("is-invalid");
+    error.innerText = "";
+    return true;
+}
+
+/**
+ * Validates the title.
+ *
+ * @returns {boolean} true if valid, or false otherwise
+ * @private
+ */
+function validateTitle() {
+    const field = document.getElementById("account-title");
+    const error = document.getElementById("account-title-error");
+    field.value = field.value.trim();
+    if (field.value === "") {
+        field.classList.add("is-invalid");
+        error.innerText = A_("Please fill in the title.");
+        return false;
+    }
+    field.classList.remove("is-invalid");
+    error.innerText = "";
+    return true;
+}