From 779d89f8c422621b0e8e072827df32c658ebe676 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BE=9D=E7=91=AA=E8=B2=93?= <imacat@mail.imacat.idv.tw>
Date: Wed, 22 Mar 2023 20:09:41 +0800
Subject: [PATCH] Replaced the "clear" method with the "onOpen" method when the
 account is clicked in the RecurringItemEditor in the JavaScript
 RecurringAccountSelector class.

---
 src/accounting/static/js/option-form.js | 46 +++++++++++++++++++------
 1 file changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/accounting/static/js/option-form.js b/src/accounting/static/js/option-form.js
index 1397568..6d93d49 100644
--- a/src/accounting/static/js/option-form.js
+++ b/src/accounting/static/js/option-form.js
@@ -619,7 +619,7 @@ class RecurringItemEditor {
         this.#accountSelector = new RecurringAccountSelector(this);
 
         this.#name.onchange = () => this.#validateName();
-        this.#accountControl.onclick = () => this.#accountSelector.clear();
+        this.#accountControl.onclick = () => this.#accountSelector.onOpen();
         this.#descriptionTemplate.onchange = () => this.#validateDescriptionTemplate();
         this.#form.onsubmit = () => {
             if (this.#validate()) {
@@ -847,15 +847,6 @@ class RecurringAccountSelector {
         this.#clearButton.onclick = () => this.editor.clearAccount();
     }
 
-    /**
-     * Clears the filter.
-     *
-     */
-    clear() {
-        this.#query.value = "";
-        this.#filterOptions();
-    }
-
     /**
      * Filters the options.
      *
@@ -878,6 +869,28 @@ class RecurringAccountSelector {
             this.#queryNoResult.classList.add("d-none");
         }
     }
+
+    /**
+     * The callback when the account selector is shown.
+     *
+     */
+    onOpen() {
+        this.#query.value = "";
+        this.#filterOptions();
+        console.log(this.editor.accountCode);
+        for (const option of this.#options) {
+            option.setActive(option.code === this.editor.accountCode);
+        }
+        if (this.editor.accountCode === null) {
+            this.#clearButton.classList.add("btn-secondary");
+            this.#clearButton.classList.remove("btn-danger");
+            this.#clearButton.disabled = true;
+        } else {
+            this.#clearButton.classList.add("btn-danger");
+            this.#clearButton.classList.remove("btn-secondary");
+            this.#clearButton.disabled = false;
+        }
+    }
 }
 
 /**
@@ -962,4 +975,17 @@ class RecurringAccount {
             this.#element.classList.add("d-none");
         }
     }
+
+    /**
+     * Sets whether the option is active.
+     *
+     * @param isActive {boolean} true if active, or false otherwise
+     */
+    setActive(isActive) {
+        if (isActive) {
+            this.#element.classList.add("active");
+        } else {
+            this.#element.classList.remove("active");
+        }
+    }
 }