Added the journal report as the first accounting report.

src/accounting/static/css/style.css

@@ -109,6 +109,20 @@
     border-top: thick double slategray;
 }
 
+/* The accounting report */
+.accounting-ledger-table thead {
+    border-bottom: 1px double black;
+}
+.accounting-amount {
+    text-align: right;
+}
+td.accounting-amount {
+    font-style: italic;
+}
+.accounting-mobile-journal-credit {
+    padding-left: 1rem;
+}
+
 /* The Material Design text field (floating form control in Bootstrap) */
 .accounting-material-text-field {
     position: relative;

src/accounting/static/js/period-chooser.js

@@ -0,0 +1,399 @@
+/* The Mia! Accounting Flask Project
+ * period-chooser.js: The JavaScript for the period chooser
+ */
+
+/*  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/3/4
+ */
+
+// Initializes the page JavaScript.
+document.addEventListener("DOMContentLoaded", () => {
+    new PeriodChooser();
+});
+
+/**
+ * The period chooser.
+ *
+ */
+class PeriodChooser {
+
+    /**
+     * The prefix of the HTML ID and class
+     * @type {string}
+     */
+    prefix;
+
+    /**
+     * The modal of the period chooser
+     * @type {HTMLDivElement}
+     */
+    modal;
+
+    /**
+     * The tab planes
+     * @type {{month: MonthTab, year: YearTab, day: DayTab, custom: CustomTab}}
+     */
+    tabPlanes = {};
+
+    /**
+     * Constructs the period chooser.
+     *
+     */
+    constructor() {
+        this.prefix = "accounting-period-chooser";
+        this.modal = document.getElementById(this.prefix + "-modal");
+        for (const cls of [MonthTab, YearTab, DayTab, CustomTab]) {
+            const tab = new cls(this);
+            this.tabPlanes[tab.tabId()] = tab;
+        }
+    }
+}
+
+/**
+ * A tab plane.
+ *
+ * @abstract
+ * @private
+ */
+class TabPlane {
+
+    /**
+     * The period chooser
+     * @type {PeriodChooser}
+     */
+    chooser;
+
+    /**
+     * The prefix of the HTML ID and class
+     * @type {string}
+     */
+    prefix;
+
+    /**
+     * The tab
+     * @type {HTMLSpanElement}
+     */
+    #tab;
+
+    /**
+     * The page
+     * @type {HTMLDivElement}
+     */
+    #page;
+
+    /**
+     * Constructs a tab plane.
+     *
+     * @param chooser {PeriodChooser} the period chooser
+     */
+    constructor(chooser) {
+        this.chooser = chooser;
+        this.prefix = "accounting-period-chooser-" + this.tabId();
+        this.#tab = document.getElementById(this.prefix + "-tab");
+        this.#page = document.getElementById(this.prefix + "-page");
+        this.#tab.onclick = () => this.#switchToMe();
+    }
+
+    /**
+     * The tab ID
+     *
+     * @return {string}
+     * @abstract
+     */
+    tabId() { throw new Error("Method not implemented.") };
+
+    /**
+     * Switches to the tab plane.
+     *
+     */
+    #switchToMe() {
+        for (const tabPlane of Object.values(this.chooser.tabPlanes)) {
+            tabPlane.#tab.classList.remove("active")
+            tabPlane.#tab.ariaCurrent = "false";
+            tabPlane.#page.classList.add("d-none");
+            tabPlane.#page.ariaCurrent = "false";
+        }
+        this.#tab.classList.add("active");
+        this.#tab.ariaCurrent = "page";
+        this.#page.classList.remove("d-none");
+        this.#page.ariaCurrent = "page";
+    }
+}
+
+/**
+ * The month tab plane.
+ *
+ * @private
+ */
+class MonthTab extends TabPlane {
+
+    /**
+     * Constructs a tab plane.
+     *
+     * @param chooser {PeriodChooser} the period chooser
+     */
+    constructor(chooser) {
+        super(chooser);
+        const monthChooser = document.getElementById(this.prefix + "-chooser");
+        let start = monthChooser.dataset.start;
+        new tempusDominus.TempusDominus(monthChooser, {
+            restrictions: {
+                minDate: start,
+            },
+            display: {
+                inline: true,
+                components: {
+                    date: false,
+                    clock: false,
+                },
+            },
+            defaultDate: monthChooser.dataset.default,
+        });
+        monthChooser.addEventListener(tempusDominus.Namespace.events.change, (e) => {
+            const date = e.detail.date;
+            const year = date.year;
+            const month = date.month + 1;
+            const period = month < 10? year + "-0" + month: year + "-" + month;
+            window.location = chooser.modal.dataset.urlTemplate
+                .replaceAll("PERIOD", period);
+        });
+    }
+
+    /**
+     * The tab ID
+     *
+     * @return {string}
+     */
+    tabId() {
+        return "month";
+    }
+}
+
+/**
+ * The year tab plane.
+ *
+ * @private
+ */
+class YearTab extends TabPlane {
+
+    /**
+     * The tab ID
+     *
+     * @return {string}
+     */
+    tabId() {
+        return "year";
+    }
+}
+
+/**
+ * The day tab plane.
+ *
+ * @private
+ */
+class DayTab extends TabPlane {
+
+    /**
+     * The day input
+     * @type {HTMLInputElement}
+     */
+    #date;
+
+    /**
+     * The error of the date input
+     * @type {HTMLDivElement}
+     */
+    #dateError;
+
+    /**
+     * Constructs a tab plane.
+     *
+     * @param chooser {PeriodChooser} the period chooser
+     */
+    constructor(chooser) {
+        super(chooser);
+        this.#date = document.getElementById(this.prefix + "-date");
+        this.#dateError = document.getElementById(this.prefix + "-date-error");
+        this.#date.onchange = () => {
+            if (this.#validateDate()) {
+                window.location = chooser.modal.dataset.urlTemplate
+                    .replaceAll("PERIOD", this.#date.value);
+            }
+        };
+    }
+
+    /**
+     * Validates the date.
+     *
+     * @return {boolean} true if valid, or false otherwise
+     */
+    #validateDate() {
+        if (this.#date.value === "") {
+            this.#date.classList.add("is-invalid");
+            this.#dateError.innerText = A_("Please fill in the date.");
+            return false;
+        }
+        if (this.#date.value < this.#date.min) {
+            this.#date.classList.add("is-invalid");
+            this.#dateError.innerText = A_("The date is too early.");
+            return false;
+        }
+        this.#date.classList.remove("is-invalid");
+        this.#dateError.innerText = "";
+        return true;
+    }
+
+    /**
+     * The tab ID
+     *
+     * @return {string}
+     */
+    tabId() {
+        return "day";
+    }
+}
+
+/**
+ * The custom tab plane.
+ *
+ * @private
+ */
+class CustomTab extends TabPlane {
+
+    /**
+     * The start of the period
+     * @type {HTMLInputElement}
+     */
+    #start;
+
+    /**
+     * The error of the start
+     * @type {HTMLDivElement}
+     */
+    #startError;
+
+    /**
+     * The end of the period
+     * @type {HTMLInputElement}
+     */
+    #end;
+
+    /**
+     * The error of the end
+     * @type {HTMLDivElement}
+     */
+    #endError;
+
+    /**
+     * The confirm button
+     * @type {HTMLButtonElement}
+     */
+    #conform;
+
+    /**
+     * Constructs a tab plane.
+     *
+     * @param chooser {PeriodChooser} the period chooser
+     */
+    constructor(chooser) {
+        super(chooser);
+        this.#start = document.getElementById(this.prefix + "-start");
+        this.#startError = document.getElementById(this.prefix + "-start-error");
+        this.#end = document.getElementById(this.prefix + "-end");
+        this.#endError = document.getElementById(this.prefix + "-end-error");
+        this.#conform = document.getElementById(this.prefix + "-confirm");
+        this.#start.onchange = () => {
+            if (this.#validateStart()) {
+                this.#end.min = this.#start.value;
+            }
+        };
+        this.#end.onchange = () => {
+            if (this.#validateEnd()) {
+                this.#start.max = this.#end.value;
+            }
+        };
+        this.#conform.onclick = () => {
+            let isValid = true;
+            isValid = this.#validateStart() && isValid;
+            isValid = this.#validateEnd() && isValid;
+            if (isValid) {
+                window.location = chooser.modal.dataset.urlTemplate
+                    .replaceAll("PERIOD", this.#start.value + "-" + this.#end.value);
+            }
+        };
+    }
+
+    /**
+     * Validates the start of the period.
+     *
+     * @returns {boolean} true if valid, or false otherwise
+     * @private
+     */
+    #validateStart() {
+        if (this.#start.value === "") {
+            this.#start.classList.add("is-invalid");
+            this.#startError.innerText = A_("Please fill in the start date.");
+            return false;
+        }
+        if (this.#start.value < this.#start.min) {
+            this.#start.classList.add("is-invalid");
+            this.#startError.innerText = A_("The start date is too early.");
+            return false;
+        }
+        if (this.#start.value > this.#start.max) {
+            this.#start.classList.add("is-invalid");
+            this.#startError.innerText = A_("The start date cannot be beyond the end date.");
+            return false;
+        }
+        this.#start.classList.remove("is-invalid");
+        this.#startError.innerText = "";
+        return true;
+    }
+
+    /**
+     * Validates the end of the period.
+     *
+     * @returns {boolean} true if valid, or false otherwise
+     * @private
+     */
+    #validateEnd() {
+        this.#end.value = this.#end.value.trim();
+        if (this.#end.value === "") {
+            this.#end.classList.add("is-invalid");
+            this.#endError.innerText = A_("Please fill in the end date.");
+            return false;
+        }
+        if (this.#end.value < this.#end.min) {
+            this.#end.classList.add("is-invalid");
+            this.#endError.innerText = A_("The end date cannot be beyond the start date.");
+            return false;
+        }
+        this.#end.classList.remove("is-invalid");
+        this.#endError.innerText = "";
+        return true;
+    }
+
+    /**
+     * The tab ID
+     *
+     * @return {string}
+     */
+    tabId() {
+        return "custom";
+    }
+}

src/accounting/static/js/summary-editor.js

@@ -122,12 +122,6 @@ class SummaryEditor {
      */
     #formSummary;
 
-    /**
-     * The tab plane classes
-     * @type {typeof TabPlane[]}
-     */
-    #TAB_CLASES = [GeneralTagTab, GeneralTripTab, BusTripTab, RegularPaymentTab, AnnotationTab]
-
     /**
      * The tab planes
      * @type {{general: GeneralTagTab, travel: GeneralTripTab, bus: BusTripTab, regular: RegularPaymentTab, annotation: AnnotationTab}}
@@ -157,7 +151,7 @@ class SummaryEditor {
         this.#formSummaryControl = document.getElementById("accounting-entry-form-summary-control");
         this.#formSummary = document.getElementById("accounting-entry-form-summary");
 
-        for (const cls of this.#TAB_CLASES) {
+        for (const cls of [GeneralTagTab, GeneralTripTab, BusTripTab, RegularPaymentTab, AnnotationTab]) {
             const tab = new cls(this);
             this.tabPlanes[tab.tabId()] = tab;
         }

src/accounting/static/js/table-row-link.js

@@ -0,0 +1,41 @@
+/* The Mia! Accounting Flask Project
+ * table-row-link.js: The JavaScript for table rows as links.
+ */
+
+/*  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/3/4
+ */
+
+// Initializes the page JavaScript.
+document.addEventListener("DOMContentLoaded", () => {
+    initializeTableRowLinks();
+});
+
+/**
+ * Initializes the table rows as links.
+ *
+ * @private
+ */
+function initializeTableRowLinks() {
+    const rows = Array.from(document.getElementsByClassName("accounting-clickable accounting-table-row-link"));
+    for (const row of rows) {
+        row.onclick = () => {
+            window.location = row.dataset.href;
+        };
+    }
+}