Merge pull request #428 from wearepal/refactor-filter-controller

Refactor fitler-controller.js & clean up some inconstancies in the UI
wearepal · Sep 16, 2024 · d9b3905 · d9b3905
2 parents 963b4ab + f398b9e
commit d9b3905
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 20 deletions.
diff --git a/app/javascript/controllers/filter_controller.js b/app/javascript/controllers/filter_controller.js
@@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "stimulus"
 
 export default class extends Controller {
   static targets = ["input", "item"]
@@ -13,20 +13,20 @@ export default class extends Controller {
 
   update(event) {
 
-    const query = this.inputTarget.value.toLowerCase()
-
-    localStorage.setItem("searchQuery", query)
+    const query = !this.hasInputTarget ? event.target.value.toLocaleLowerCase() : this.inputTarget.value.toLowerCase()
 
+    if(this.hasInputTarget) {
+      localStorage.setItem("searchQuery", query)
+    }
+
     this.itemTargets.forEach(target => {
       const searchText = target.innerText.toLowerCase()
       const searchTerms = query.split(" ")
 
       if (searchTerms.every(term => searchText.includes(term))) {
         target.classList.remove("d-none")
-        target.style.display = "flex"
       } else {
         target.classList.add("d-none")
-        target.style.display = "none"
       }
     });
   }

diff --git a/app/views/datasets/edit.html.erb b/app/views/datasets/edit.html.erb
@@ -1,10 +1,15 @@
-<div class="container">
-  <h3>Edit Dataset</h3>
-  <%= form_for @dataset do |f| %>
-    <div class="form-group">
-      <%= f.label :name %>
-      <%= f.text_field :name, class: 'form-control' %>
-    </div>
-    <%= f.submit 'Update', class: 'btn btn-primary' %>
-  <% end %>
+<div class="card">
+  <div class="card-header d-flex align-items-center justify-content-between">
+    Edit Dataset
+  </div>
+
+  <div class="card-body">
+    <%= form_for @dataset do |f| %>
+      <div class="form-group">
+        <%= f.label :name %>
+        <%= f.text_field :name, class: 'form-control' %>
+      </div>
+      <%= f.submit 'Update', class: 'btn btn-primary' %>
+    <% end %>
+  </div>
 </div>
diff --git a/app/views/datasets/index.html.erb b/app/views/datasets/index.html.erb
@@ -9,7 +9,7 @@
     </div>
 
     <% @team.datasets.order(:name).each do |dataset| %>
-      <div class="list-group-item">
+      <div class="list-group-item list-group-item-action" data-filter-target="item">
         <div class="d-flex align-items-center justify-content-between">
           <div>
             <% if dataset.gridtype == 'BooleanTileGrid' %>
@@ -19,8 +19,6 @@
             <% else %>
                 <span class="badge badge-warning">Categorical</span>
             <% end %>
-
-
             <%= dataset.name %>
             <span class="text-muted fs-5">
             (<%= dataset.created_at.strftime("%d/%m/%Y")  %>)

diff --git a/app/views/extents/index.html.erb b/app/views/extents/index.html.erb
@@ -13,8 +13,8 @@
         </div>
 
         <% @team_extents.sort_by { |extent| extent.name.downcase }.each do |extent| %>
-            <%= link_to edit_extent_path(extent.id), class: "list-group-item list-group-item-action border-0" do %>
-                <div class="list-group-item list-group-item-action p-0 align-items-center" data-filter-target="item" style="display: flex;">
+            <%= link_to edit_extent_path(extent.id), class: "list-group-item list-group-item-action p-0" do %>
+                <div class="list-group-item list-group-item-action align-items-center" data-filter-target="item" style="display: flex;">
                     <div class="d-flex align-items-center justify-content-between">
                         <%= extent.name %> 
                     </div>