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

Revised the option form to have a better look when there is no recurring expense and income.

Browse Source
This commit is contained in:
依瑪貓 2023-03-23 00:45:19 +08:00
parent 7262a6cb42
commit 889e4c058e
2 changed files with 58 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/accounting/static/js/option-form.js
View File

@ -202,6 +202,18 @@ class RecurringExpenseIncomeSubForm {
*/
#prefix;
/**
* The element
* @type {HTMLDivElement}
*/
#element;
/**
* The content
* @type {HTMLDivElement}
*/
#content;
/**
* The recurring items list
* @type {HTMLUListElement}
@ -231,10 +243,13 @@ class RecurringExpenseIncomeSubForm {
this.expenseIncome = expenseIncome;
this.editor = new RecurringItemEditor(this);
this.#prefix = "accounting-recurring-" + expenseIncome;
this.#element = document.getElementById(this.#prefix);
this.#content = document.getElementById(this.#prefix + "-content");
this.#itemList = document.getElementById(this.#prefix + "-list");
this.#items = Array.from(document.getElementsByClassName(this.#prefix + "-item")).map((element) => new RecurringItemSubForm(this, element));
this.#addButton = document.getElementById(this.#prefix + "-add");
this.#resetContent();
this.#addButton.onclick = () => this.editor.onAddNew();
this.#initializeDragAndDropReordering();
}
@ -253,6 +268,7 @@ class RecurringExpenseIncomeSubForm {
const element = document.getElementById(this.#prefix + "-" + String(newIndex))
const item = new RecurringItemSubForm(this, element);
this.#items.push(item);
this.#resetContent();
this.#initializeDragAndDropReordering();
this.validate();
return item;
@ -266,6 +282,29 @@ class RecurringExpenseIncomeSubForm {
deleteItem(item) {
const index = this.#items.indexOf(item);
this.#items.splice(index, 1);
this.#resetContent();
}
/**
* Resets the layout of the content.
*
*/
#resetContent() {
if (this.#items.length === 0) {
this.#element.classList.remove("accounting-not-empty");
this.#element.classList.add("accounting-clickable");
this.#element.dataset.bsToggle = "modal"
this.#element.dataset.bsTarget = "#" + this.editor.modal.id;
this.#element.onclick = () => this.editor.onAddNew();
this.#content.classList.add("d-none");
} else {
this.#element.classList.add("accounting-not-empty");
this.#element.classList.remove("accounting-clickable");
delete this.#element.dataset.bsToggle;
delete this.#element.dataset.bsTarget;
this.#element.onclick = null;
this.#content.classList.remove("d-none");
}
}
/**
@ -530,7 +569,7 @@ class RecurringItemEditor {
* The modal
* @type {HTMLDivElement}
*/
#modal;
modal;
/**
* The name
@ -608,7 +647,7 @@ class RecurringItemEditor {
this.expenseIncome = subForm.expenseIncome;
const prefix = "accounting-recurring-item-editor-" + subForm.expenseIncome;
this.#form = document.getElementById(prefix);
this.#modal = document.getElementById(prefix + "-modal");
this.modal = document.getElementById(prefix + "-modal");
this.#name = document.getElementById(prefix + "-name");
this.#nameError = document.getElementById(prefix + "-name-error");
this.#accountControl = document.getElementById(prefix + "-account-control");
@ -627,7 +666,7 @@ class RecurringItemEditor {
this.#item = this.#subForm.addItem();
}
this.#item.save(this);
bootstrap.Modal.getInstance(this.#modal).hide();
bootstrap.Modal.getInstance(this.modal).hide();
}
return false;
};

4
src/accounting/templates/accounting/option/include/form-recurring-expense-income.html
View File

@ -19,8 +19,9 @@ form-recurring-expense-income.html: The recurring expense or income sub-form in
Author: imacat@mail.imacat.idv.tw (imacat)
First written: 2023/3/22
#}
<div id="accounting-recurring-{{ expense_income }}" class="form-control mb-3 accounting-material-text-field accounting-not-empty">
<div id="accounting-recurring-{{ expense_income }}" class="form-control mb-3 accounting-material-text-field {% if recurring_items %} accounting-not-empty {% else %} accounting-clickable {% endif %}">
<label class="form-label" for="accounting-recurring-{{ expense_income }}">{{ label }}</label>
<div id="accounting-recurring-{{ expense_income }}-content" class="{% if not recurring_items %} d-none {% endif %}">
<ul id="accounting-recurring-{{ expense_income }}-list" class="list-group mb-2 mt-2">
{% for recurring_item in recurring_items %}
{% with form = recurring_item.form,
@ -37,3 +38,4 @@ First written: 2023/3/22
</button>
</div>
</div>
</div>