Revised the option form to have a better look when there is no recurring expense and income.
This commit is contained in:
parent
7262a6cb42
commit
889e4c058e
@ -202,6 +202,18 @@ class RecurringExpenseIncomeSubForm {
|
|||||||
*/
|
*/
|
||||||
#prefix;
|
#prefix;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The element
|
||||||
|
* @type {HTMLDivElement}
|
||||||
|
*/
|
||||||
|
#element;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The content
|
||||||
|
* @type {HTMLDivElement}
|
||||||
|
*/
|
||||||
|
#content;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The recurring items list
|
* The recurring items list
|
||||||
* @type {HTMLUListElement}
|
* @type {HTMLUListElement}
|
||||||
@ -231,10 +243,13 @@ class RecurringExpenseIncomeSubForm {
|
|||||||
this.expenseIncome = expenseIncome;
|
this.expenseIncome = expenseIncome;
|
||||||
this.editor = new RecurringItemEditor(this);
|
this.editor = new RecurringItemEditor(this);
|
||||||
this.#prefix = "accounting-recurring-" + expenseIncome;
|
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.#itemList = document.getElementById(this.#prefix + "-list");
|
||||||
this.#items = Array.from(document.getElementsByClassName(this.#prefix + "-item")).map((element) => new RecurringItemSubForm(this, element));
|
this.#items = Array.from(document.getElementsByClassName(this.#prefix + "-item")).map((element) => new RecurringItemSubForm(this, element));
|
||||||
this.#addButton = document.getElementById(this.#prefix + "-add");
|
this.#addButton = document.getElementById(this.#prefix + "-add");
|
||||||
|
|
||||||
|
this.#resetContent();
|
||||||
this.#addButton.onclick = () => this.editor.onAddNew();
|
this.#addButton.onclick = () => this.editor.onAddNew();
|
||||||
this.#initializeDragAndDropReordering();
|
this.#initializeDragAndDropReordering();
|
||||||
}
|
}
|
||||||
@ -253,6 +268,7 @@ class RecurringExpenseIncomeSubForm {
|
|||||||
const element = document.getElementById(this.#prefix + "-" + String(newIndex))
|
const element = document.getElementById(this.#prefix + "-" + String(newIndex))
|
||||||
const item = new RecurringItemSubForm(this, element);
|
const item = new RecurringItemSubForm(this, element);
|
||||||
this.#items.push(item);
|
this.#items.push(item);
|
||||||
|
this.#resetContent();
|
||||||
this.#initializeDragAndDropReordering();
|
this.#initializeDragAndDropReordering();
|
||||||
this.validate();
|
this.validate();
|
||||||
return item;
|
return item;
|
||||||
@ -266,6 +282,29 @@ class RecurringExpenseIncomeSubForm {
|
|||||||
deleteItem(item) {
|
deleteItem(item) {
|
||||||
const index = this.#items.indexOf(item);
|
const index = this.#items.indexOf(item);
|
||||||
this.#items.splice(index, 1);
|
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
|
* The modal
|
||||||
* @type {HTMLDivElement}
|
* @type {HTMLDivElement}
|
||||||
*/
|
*/
|
||||||
#modal;
|
modal;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The name
|
* The name
|
||||||
@ -608,7 +647,7 @@ class RecurringItemEditor {
|
|||||||
this.expenseIncome = subForm.expenseIncome;
|
this.expenseIncome = subForm.expenseIncome;
|
||||||
const prefix = "accounting-recurring-item-editor-" + subForm.expenseIncome;
|
const prefix = "accounting-recurring-item-editor-" + subForm.expenseIncome;
|
||||||
this.#form = document.getElementById(prefix);
|
this.#form = document.getElementById(prefix);
|
||||||
this.#modal = document.getElementById(prefix + "-modal");
|
this.modal = document.getElementById(prefix + "-modal");
|
||||||
this.#name = document.getElementById(prefix + "-name");
|
this.#name = document.getElementById(prefix + "-name");
|
||||||
this.#nameError = document.getElementById(prefix + "-name-error");
|
this.#nameError = document.getElementById(prefix + "-name-error");
|
||||||
this.#accountControl = document.getElementById(prefix + "-account-control");
|
this.#accountControl = document.getElementById(prefix + "-account-control");
|
||||||
@ -627,7 +666,7 @@ class RecurringItemEditor {
|
|||||||
this.#item = this.#subForm.addItem();
|
this.#item = this.#subForm.addItem();
|
||||||
}
|
}
|
||||||
this.#item.save(this);
|
this.#item.save(this);
|
||||||
bootstrap.Modal.getInstance(this.#modal).hide();
|
bootstrap.Modal.getInstance(this.modal).hide();
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
|
@ -19,8 +19,9 @@ form-recurring-expense-income.html: The recurring expense or income sub-form in
|
|||||||
Author: imacat@mail.imacat.idv.tw (imacat)
|
Author: imacat@mail.imacat.idv.tw (imacat)
|
||||||
First written: 2023/3/22
|
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>
|
<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">
|
<ul id="accounting-recurring-{{ expense_income }}-list" class="list-group mb-2 mt-2">
|
||||||
{% for recurring_item in recurring_items %}
|
{% for recurring_item in recurring_items %}
|
||||||
{% with form = recurring_item.form,
|
{% with form = recurring_item.form,
|
||||||
@ -36,4 +37,5 @@ First written: 2023/3/22
|
|||||||
{{ A_("New") }}
|
{{ A_("New") }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user