Merge pull request #426 from wearepal/persisting-search-query

perist search query

app/javascript/controllers/filter_controller.js

@@ -1,20 +1,33 @@
-import { Controller } from "stimulus"
+import { Controller } from "stimulus";
 
 export default class extends Controller {
-  static targets = [
-    "item"
-  ]
+  static targets = ["input", "item"]
+
+  connect() {
+    const savedQuery = localStorage.getItem("searchQuery")
+    if (savedQuery) {
+      this.inputTarget.value = savedQuery
+      this.update()
+    }
+  }
 
   update(event) {
+
+    const query = this.inputTarget.value.toLowerCase()
+
+    localStorage.setItem("searchQuery", query)
+
     this.itemTargets.forEach(target => {
-      const searchText = target.innerText.toLocaleLowerCase()
-      const searchTerms = event.target.value.toLocaleLowerCase().split(" ")
+      const searchText = target.innerText.toLowerCase()
+      const searchTerms = query.split(" ")
+
       if (searchTerms.every(term => searchText.includes(term))) {
         target.classList.remove("d-none")
-      }
-      else {
+        target.style.display = "flex"
+      } else {
         target.classList.add("d-none")
+        target.style.display = "none"
       }
-    })
+    });
   }
 }

app/views/projects/index.html.erb

@@ -7,7 +7,14 @@
   </div>
   <div class="list-group list-group-flush" data-controller="filter">
     <div class="list-group-item list-group-item-light">
-      <input placeholder="Search" class="form-control" data-action="input->filter#update" autofocus>
+      <input
+        type="text"
+        placeholder="Search"
+        class="form-control"
+        data-action="input->filter#update"
+        data-filter-target="input" 
+        autofocus
+      >
     </div>
     <% @team_projects.sort_by { |project| project.name.downcase }.each do |project| %>
       <div class="list-group-item list-group-item-action p-0 align-items-center" data-filter-target="item" style="display: flex;">
@@ -35,4 +42,4 @@
       </div>
     <% end %>
   </div>
-</div>
+</div>