Revised the debit-credit content to have a better look when it is still empty.
This commit is contained in:
parent
cb397910f8
commit
7d084e570e
@ -111,6 +111,7 @@ class JournalEntryForm {
|
||||
constructor() {
|
||||
this.#element = document.getElementById("accounting-form");
|
||||
this.lineItemTemplate = this.#element.dataset.lineItemTemplate;
|
||||
this.lineItemEditor = new JournalEntryLineItemEditor(this);
|
||||
this.#date = document.getElementById("accounting-date");
|
||||
this.#dateError = document.getElementById("accounting-date-error");
|
||||
this.#currencyControl = document.getElementById("accounting-currencies");
|
||||
@ -121,7 +122,6 @@ class JournalEntryForm {
|
||||
this.#addCurrencyButton = document.getElementById("accounting-add-currency");
|
||||
this.#note = document.getElementById("accounting-note");
|
||||
this.#noteError = document.getElementById("accounting-note-error");
|
||||
this.lineItemEditor = new JournalEntryLineItemEditor(this);
|
||||
|
||||
this.#addCurrencyButton.onclick = () => {
|
||||
const newIndex = 1 + (this.#currencies.length === 0? 0: Math.max(...this.#currencies.map((currency) => currency.index)));
|
||||
@ -551,6 +551,12 @@ class DebitCreditSubForm {
|
||||
*/
|
||||
#element;
|
||||
|
||||
/**
|
||||
* The content
|
||||
* @type {HTMLDivElement}
|
||||
*/
|
||||
#content;
|
||||
|
||||
/**
|
||||
* The currencyIndex
|
||||
* @type {number}
|
||||
@ -612,12 +618,15 @@ class DebitCreditSubForm {
|
||||
this.#currencyIndex = currency.index;
|
||||
this.debitCredit = debitCredit;
|
||||
this.#prefix = "accounting-currency-" + String(this.#currencyIndex) + "-" + debitCredit;
|
||||
this.#content = document.getElementById(this.#prefix + "-content");
|
||||
this.#error = document.getElementById(this.#prefix + "-error");
|
||||
this.#lineItemList = document.getElementById(this.#prefix + "-list");
|
||||
// noinspection JSValidateTypes
|
||||
this.lineItems = Array.from(document.getElementsByClassName(this.#prefix)).map((element) => new LineItemSubForm(this, element));
|
||||
this.#total = document.getElementById(this.#prefix + "-total");
|
||||
this.#addLineItemButton = document.getElementById(this.#prefix + "-add-line-item");
|
||||
|
||||
this.#resetContent();
|
||||
this.#addLineItemButton.onclick = () => this.currency.form.lineItemEditor.onAddNew(this);
|
||||
this.#resetDeleteLineItemButtons();
|
||||
this.#initializeDragAndDropReordering();
|
||||
@ -637,6 +646,7 @@ class DebitCreditSubForm {
|
||||
this.#lineItemList.insertAdjacentHTML("beforeend", html);
|
||||
const lineItem = new LineItemSubForm(this, document.getElementById(this.#prefix + "-" + String(newIndex)));
|
||||
this.lineItems.push(lineItem);
|
||||
this.#resetContent();
|
||||
this.#resetDeleteLineItemButtons();
|
||||
this.#initializeDragAndDropReordering();
|
||||
this.validate();
|
||||
@ -654,6 +664,7 @@ class DebitCreditSubForm {
|
||||
this.updateTotal();
|
||||
this.currency.updateCodeSelectorStatus();
|
||||
this.currency.form.updateMinDate();
|
||||
this.#resetContent();
|
||||
this.#resetDeleteLineItemButtons();
|
||||
}
|
||||
|
||||
@ -671,6 +682,28 @@ class DebitCreditSubForm {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets the layout of the content.
|
||||
*
|
||||
*/
|
||||
#resetContent() {
|
||||
if (this.lineItems.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.currency.form.lineItemEditor.modal.id;
|
||||
this.#element.onclick = () => this.currency.form.lineItemEditor.onAddNew(this);
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the total amount.
|
||||
*
|
||||
|
||||
@ -44,7 +44,7 @@ class JournalEntryLineItemEditor {
|
||||
* The bootstrap modal
|
||||
* @type {HTMLDivElement}
|
||||
*/
|
||||
#modal;
|
||||
modal;
|
||||
|
||||
/**
|
||||
* Either "debit" or "credit"
|
||||
@ -216,7 +216,7 @@ class JournalEntryLineItemEditor {
|
||||
constructor(form) {
|
||||
this.form = form;
|
||||
this.#element = document.getElementById(this.#prefix);
|
||||
this.#modal = document.getElementById(this.#prefix + "-modal");
|
||||
this.modal = document.getElementById(this.#prefix + "-modal");
|
||||
this.#originalLineItemContainer = document.getElementById(this.#prefix + "-original-line-item-container");
|
||||
this.#originalLineItemControl = document.getElementById(this.#prefix + "-original-line-item-control");
|
||||
this.#originalLineItemText = document.getElementById(this.#prefix + "-original-line-item");
|
||||
@ -244,7 +244,7 @@ class JournalEntryLineItemEditor {
|
||||
this.lineItem = this.#debitCreditSubForm.addLineItem();
|
||||
}
|
||||
this.lineItem.save(this);
|
||||
bootstrap.Modal.getInstance(this.#modal).hide();
|
||||
bootstrap.Modal.getInstance(this.modal).hide();
|
||||
}
|
||||
return false;
|
||||
};
|
||||
@ -333,7 +333,7 @@ class JournalEntryLineItemEditor {
|
||||
this.description = description === ""? null: description;
|
||||
this.#descriptionText.innerText = description;
|
||||
this.#validateDescription();
|
||||
bootstrap.Modal.getOrCreateInstance(this.#modal).show();
|
||||
bootstrap.Modal.getOrCreateInstance(this.modal).show();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -20,29 +20,31 @@ Author: imacat@mail.imacat.idv.tw (imacat)
|
||||
First written: 2023/3/21
|
||||
#}
|
||||
<div class="mb-2">
|
||||
<div id="accounting-currency-{{ currency_index }}-{{ debit_credit }}" class="form-control accounting-material-text-field accounting-not-empty {% if debit_errors %} is-invalid {% endif %}">
|
||||
<div id="accounting-currency-{{ currency_index }}-{{ debit_credit }}" class="form-control accounting-material-text-field {% if line_item_forms %} accounting-not-empty {% else %} accounting-clickable {% endif %} {% if debit_errors %} is-invalid {% endif %}">
|
||||
<label class="form-label" for="accounting-currency-{{ currency_index }}-{{ debit_credit }}">{{ header }}</label>
|
||||
<ul id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-list" class="list-group accounting-line-item-list">
|
||||
{% for line_item_form in line_item_forms %}
|
||||
{% with currency_index = currency_index,
|
||||
line_item_index = loop.index,
|
||||
only_one_line_item_form = line_item_forms|length == 1,
|
||||
form = line_item_form.form %}
|
||||
{% include "accounting/journal-entry/include/form-line-item.html" %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-content" class="mt-2 {% if not line_item_forms %} d-none {% endif %}">
|
||||
<ul id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-list" class="list-group accounting-line-item-list">
|
||||
{% for line_item_form in line_item_forms %}
|
||||
{% with currency_index = currency_index,
|
||||
line_item_index = loop.index,
|
||||
only_one_line_item_form = line_item_forms|length == 1,
|
||||
form = line_item_form.form %}
|
||||
{% include "accounting/journal-entry/include/form-line-item.html" %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<div>{{ A_("Total") }}</div>
|
||||
<div><span id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-total" class="badge rounded-pill bg-primary">{{ debit_credit_total }}</span></div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mt-2 mb-2">
|
||||
<div>{{ A_("Total") }}</div>
|
||||
<div><span id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-total" class="badge rounded-pill bg-primary">{{ debit_credit_total }}</span></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-add-line-item" class="btn btn-primary" type="button" data-currency-index="{{ currency_index }}" data-debit-credit="{{ debit_credit }}" data-bs-toggle="modal" data-bs-target="#accounting-line-item-editor-modal">
|
||||
<i class="fas fa-plus"></i>
|
||||
{{ A_("New") }}
|
||||
</button>
|
||||
<div>
|
||||
<button id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-add-line-item" class="btn btn-primary" type="button" data-currency-index="{{ currency_index }}" data-debit-credit="{{ debit_credit }}" data-bs-toggle="modal" data-bs-target="#accounting-line-item-editor-modal">
|
||||
<i class="fas fa-plus"></i>
|
||||
{{ A_("New") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-error" class="invalid-feedback">{% if debit_credit_errors %}{{ debit_credit_errors[0] }}{% endif %}</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user