Added support to sort the recurring items.

This commit is contained in:
依瑪貓 2023-03-22 19:01:02 +08:00
parent 0af3e2785b
commit b394c58ec6
3 changed files with 48 additions and 5 deletions

View File

@ -209,8 +209,26 @@ class RecurringForm(RecurringItemForm):
return (item.name.data, item.account_code.data, return (item.name.data, item.account_code.data,
item.description_template.data) item.description_template.data)
return {"expense": [as_tuple(x.form) for x in self.expenses], expenses: list[RecurringItemForm] = [x.form for x in self.expenses]
"income": [as_tuple(x.form) for x in self.incomes]} self.__sort_item_forms(expenses)
incomes: list[RecurringItemForm] = [x.form for x in self.incomes]
self.__sort_item_forms(incomes)
return {"expense": [as_tuple(x) for x in expenses],
"income": [as_tuple(x) for x in incomes]}
@staticmethod
def __sort_item_forms(forms: list[RecurringItemForm]) -> None:
"""Sorts the recurring item sub-forms.
:param forms: The recurring item sub-forms.
:return: None.
"""
ord_by_form: dict[RecurringItemForm, int] \
= {forms[i]: i for i in range(len(forms))}
recv_no: set[int] = {x.no.data for x in forms if x.no.data is not None}
missing_recv_no: int = 100 if len(recv_no) == 0 else max(recv_no) + 100
forms.sort(key=lambda x: (x.no.data or missing_recv_no,
ord_by_form.get(x)))
class OptionForm(FlaskForm): class OptionForm(FlaskForm):

View File

@ -236,6 +236,7 @@ class RecurringExpenseIncomeSubForm {
this.#addButton = document.getElementById(this.#prefix + "-add"); this.#addButton = document.getElementById(this.#prefix + "-add");
this.#addButton.onclick = () => this.editor.onAddNew(); this.#addButton.onclick = () => this.editor.onAddNew();
this.#initializeDragAndDropReordering();
} }
/** /**
@ -252,6 +253,8 @@ 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.#initializeDragAndDropReordering();
this.validate();
return item; return item;
} }
@ -265,6 +268,20 @@ class RecurringExpenseIncomeSubForm {
this.#items.splice(index, 1); this.#items.splice(index, 1);
} }
/**
* Initializes the drag and drop reordering on the recurring item sub-forms.
*
*/
#initializeDragAndDropReordering() {
initializeDragAndDropReordering(this.#itemList, () => {
const itemId = Array.from(this.#itemList.children).map((item) => item.id);
this.#items.sort((a, b) => itemId.indexOf(a.element.id) - itemId.indexOf(b.element.id));
for (let i = 0; i < this.#items.length; i++) {
this.#items[i].no.value = String(i + 1);
}
});
}
/** /**
* Validates the form. * Validates the form.
* *
@ -309,7 +326,7 @@ class RecurringItemSubForm {
* The element * The element
* @type {HTMLLIElement} * @type {HTMLLIElement}
*/ */
#element; element;
/** /**
* The item index * The item index
@ -329,6 +346,12 @@ class RecurringItemSubForm {
*/ */
#error; #error;
/**
* The number
* @type {HTMLInputElement}
*/
no;
/** /**
* The name input * The name input
* @type {HTMLInputElement} * @type {HTMLInputElement}
@ -379,11 +402,12 @@ class RecurringItemSubForm {
*/ */
constructor(expenseIncomeSubForm, element) { constructor(expenseIncomeSubForm, element) {
this.#expenseIncomeSubForm = expenseIncomeSubForm this.#expenseIncomeSubForm = expenseIncomeSubForm
this.#element = element; this.element = element;
this.itemIndex = parseInt(element.dataset.itemIndex); this.itemIndex = parseInt(element.dataset.itemIndex);
const prefix = "accounting-recurring-" + expenseIncomeSubForm.expenseIncome + "-" + element.dataset.itemIndex; const prefix = "accounting-recurring-" + expenseIncomeSubForm.expenseIncome + "-" + element.dataset.itemIndex;
this.#control = document.getElementById(prefix + "-control"); this.#control = document.getElementById(prefix + "-control");
this.#error = document.getElementById(prefix + "-error"); this.#error = document.getElementById(prefix + "-error");
this.no = document.getElementById(prefix + "-no");
this.#name = document.getElementById(prefix + "-name"); this.#name = document.getElementById(prefix + "-name");
this.#nameText = document.getElementById(prefix + "-name-text"); this.#nameText = document.getElementById(prefix + "-name-text");
this.#accountCode = document.getElementById(prefix + "-account-code"); this.#accountCode = document.getElementById(prefix + "-account-code");
@ -394,7 +418,7 @@ class RecurringItemSubForm {
this.#control.onclick = () => this.#expenseIncomeSubForm.editor.onEdit(this); this.#control.onclick = () => this.#expenseIncomeSubForm.editor.onEdit(this);
this.deleteButton.onclick = () => { this.deleteButton.onclick = () => {
this.#element.parentElement.removeChild(this.#element); this.element.parentElement.removeChild(this.element);
this.#expenseIncomeSubForm.deleteItem(this); this.#expenseIncomeSubForm.deleteItem(this);
}; };
} }

View File

@ -22,6 +22,7 @@ First written: 2023/3/22
{% extends "accounting/base.html" %} {% extends "accounting/base.html" %}
{% block accounting_scripts %} {% block accounting_scripts %}
<script src="{{ url_for("accounting.static", filename="js/drag-and-drop-reorder.js") }}"></script>
<script src="{{ url_for("accounting.static", filename="js/option-form.js") }}"></script> <script src="{{ url_for("accounting.static", filename="js/option-form.js") }}"></script>
{% endblock %} {% endblock %}