Revised the debit-credit content to have a better look when it is still empty.

src/accounting/static/js/journal-entry-form.js

@@ -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.
      *

src/accounting/static/js/journal-entry-line-item-editor.js

@@ -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();
     }
 
     /**

src/accounting/templates/accounting/journal-entry/include/form-debit-credit.html

@@ -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">
+    <div id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-content" class="mt-2 {% if not line_item_forms %} d-none {% endif %}">
-      {% for line_item_form in line_item_forms %}
+      <ul id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-list" class="list-group accounting-line-item-list">
-        {% with currency_index = currency_index,
+        {% for line_item_form in line_item_forms %}
-                line_item_index = loop.index,
+          {% with currency_index = currency_index,
-                only_one_line_item_form = line_item_forms|length == 1,
+                  line_item_index = loop.index,
-                form = line_item_form.form %}
+                  only_one_line_item_form = line_item_forms|length == 1,
-          {% include "accounting/journal-entry/include/form-line-item.html" %}
+                  form = line_item_form.form %}
-        {% endwith %}
+            {% include "accounting/journal-entry/include/form-line-item.html" %}
-      {% endfor %}
+          {% endwith %}
-    </ul>
+        {% endfor %}
+      </ul>
 
-    <div class="d-flex justify-content-between mb-2">
+      <div class="d-flex justify-content-between mt-2 mb-2">
-      <div>{{ A_("Total") }}</div>
+        <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><span id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-total" class="badge rounded-pill bg-primary">{{ debit_credit_total }}</span></div>
-    </div>
+      </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">
+        <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>
+          <i class="fas fa-plus"></i>
-        {{ A_("New") }}
+          {{ A_("New") }}
-      </button>
+        </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>