search: Only show the 'Save' link upon change

The previous behavior of just toggling between 'hidden' classes was just
too naive, we need to check that the value has changed from the initial
one in order to show that to the user.

Signed-off-by: Miquel Sabaté Solà <mikisabate@gmail.com>

1 files changed, 10 insertions, 1 deletions

diff --git a/app/javascript/controllers/search_controller.js b/app/javascript/controllers/search_controller.js
index 63df81d..3a47d67 100644
--- a/app/javascript/controllers/search_controller.js
+++ b/app/javascript/controllers/search_controller.js
@@ -4,8 +4,12 @@ import { Controller } from "@hotwired/stimulus"
 // introduced on an input. Then it fills the `results` elements with them.
 export default class extends Controller {
   static targets = ["body"]
+  static values = {
+    initialBody: String
+  }
 
   connect() {
+    this.initialBody = this.bodyTarget.value.trim();
     document.getElementById("search_body").focus();
   }
 
@@ -17,7 +21,12 @@ export default class extends Controller {
         .then(response => response.text())
         .then(html => {
           document.getElementById("results").innerHTML = html;
-          document.getElementById("save-search").classList.toggle("hidden");
+
+          if (this.initialBody != this.bodyTarget.value) {
+            document.getElementById("save-search").classList.remove('hidden');
+          } else {
+            document.getElementById("save-search").classList.add('hidden');
+          }
         })
     } catch (error) {
       document.getElementById("results").innerHTML = '<div class="notice">Something went wrong!</div>'