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

src/accounting/static/js/option-form.js

@@ -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;
         };

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

@@ -19,21 +19,23 @@ 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>
-  <ul id="accounting-recurring-{{ expense_income }}-list" class="list-group mb-2 mt-2">
+  <div id="accounting-recurring-{{ expense_income }}-content" class="{% if not recurring_items %} d-none {% endif %}">
-    {% for recurring_item in recurring_items %}
+    <ul id="accounting-recurring-{{ expense_income }}-list" class="list-group mb-2 mt-2">
-      {% with form = recurring_item.form,
+      {% for recurring_item in recurring_items %}
-              item_index = loop.index %}
+        {% with form = recurring_item.form,
-        {% include "accounting/option/include/form-recurring-item.html" %}
+                item_index = loop.index %}
-      {% endwith %}
+          {% include "accounting/option/include/form-recurring-item.html" %}
-    {% endfor %}
+        {% endwith %}
-  </ul>
+      {% endfor %}
+    </ul>
 
-  <div>
+    <div>
-    <button id="accounting-recurring-{{ expense_income }}-add" class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#accounting-recurring-item-editor-{{ expense_income }}-modal">
+      <button id="accounting-recurring-{{ expense_income }}-add" class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#accounting-recurring-item-editor-{{ expense_income }}-modal">
-      <i class="fas fa-plus"></i>
+        <i class="fas fa-plus"></i>
-      {{ A_("New") }}
+        {{ A_("New") }}
-    </button>
+      </button>
+    </div>
   </div>
 </div>