Use turbo for filtering on select without refreshing the whole page

openstreetmap · Oct 16, 2024 · 84a01a3 · 84a01a3
1 parent d88ec30
commit 84a01a3
Showing 1 changed file with 59 additions and 58 deletions.
diff --git a/app/views/notes/index.html.erb b/app/views/notes/index.html.erb
@@ -7,68 +7,69 @@
            :commented => tag.span(t(".subheading_commented"), :class => "px-2 py-1 bg-body") %></p>
 <% end %>
 
-<% if @notes.empty? %>
-  <h4><%= t ".no_notes" %></h4>
-<% else %>
-  <%= form_tag(url_for("controller" => "notes", "action" => "index"), "method" => :get, "data" => { "turbo" => true, "turbo-frame" => "pagination", "turbo-action" => "advance" }) do %>
-    <div class="row gx-2">
-      <div class="col-md-auto mb-3">
-        <%= label_tag :status, t(".status") %>
-        <%= select_tag  :status,
-                        options_for_select([[t(".all"), "all"], [t(".open"), "open"], [t(".closed"), "closed"]], params[:status] || "all"),
-                        :class => "form-select" %>
-      </div>
-      <div class="col-md-auto mb-3">
-        <%= label_tag :note_type, t(".interaction_type") %>
-        <%= select_tag  :note_type,
-                        options_for_select([[t(".all"), ""], [t(".submitted"), "submitted"], [t(".commented"), "commented"]], params[:note_type] || "all"),
-                        :class => "form-select" %>
+<%= form_tag(url_for("controller" => "notes", "action" => "index"), "method" => :get, "data" => { "turbo" => true, "turbo-frame" => "pagination", "turbo-action" => "advance" }) do %>
+  <div class="row gx-2">
+    <div class="col-md-auto mb-3">
+      <%= label_tag :status, t(".status") %>
+      <%= select_tag  :status,
+                      options_for_select([[t(".all"), "all"], [t(".open"), "open"], [t(".closed"), "closed"]], params[:status] || "all"),
+                      :class => "form-select",
+                      :onchange => "this.form.requestSubmit()" %>
     </div>
-      <div class="col-md-auto mb-3">
-        <%= label_tag :from, t(".from") %>
-        <%= date_field_tag :from, params[:from], :placeholder => t(".from"), :class => "form-control", :autocomplete => "off" %>
-      </div>
-      <div class="col-md-auto mb-3">
-        <%= label_tag :to, t(".to") %>
-        <%= date_field_tag :to, params[:to], :placeholder => t(".to"), :class => "form-control", :autocomplete => "off" %>
-      </div>
-      <div class="col-md-auto mb-3 mt-auto">
-        <%= submit_tag t(".filter"), :class => "btn btn-primary" %>
-      </div>
+    <div class="col-md-auto mb-3">
+      <%= label_tag :note_type, t(".interaction_type") %>
+      <%= select_tag  :note_type,
+                      options_for_select([[t(".all"), ""], [t(".submitted"), "submitted"], [t(".commented"), "commented"]], params[:note_type] || "all"),
+                      :class => "form-select",
+                      :onchange => "this.form.requestSubmit()" %>
+  </div>
+    <div class="col-md-auto mb-3">
+      <%= label_tag :from, t(".from") %>
+        <%= date_field_tag :from, params[:from], :placeholder => t(".from"), :class => "form-control", :autocomplete => "off", :onchange => "this.form.requestSubmit()" %>
     </div>
-  <% end %>
+    <div class="col-md-auto mb-3">
+      <%= label_tag :to, t(".to") %>
+      <%= date_field_tag :to, params[:to], :placeholder => t(".to"), :class => "form-control", :autocomplete => "off", :onchange => "this.form.requestSubmit()" %>
+    </div>
+    <div class="col-md-auto mb-3 mt-auto">
+      <%= submit_tag t(".filter"), :class => "btn btn-primary" %>
+    </div>
+  </div>
 
-  <%= render :partial => "notes_paging_nav" %>
+  <% if @notes.empty? %>
+    <h4><%= t ".no_notes" %></h4>
+  <% else %>
+    <%= render :partial => "notes_paging_nav" %>
 
-  <table class="table table-sm note_list">
-    <thead>
-      <tr>
-        <th></th>
-        <th><%= t ".id" %></th>
-        <th><%= t ".creator" %></th>
-        <th><%= t ".description" %></th>
-        <th><%= t ".created_at" %></th>
-        <th><%= t ".last_changed" %></th>
+    <table class="table table-sm note_list">
+      <thead>
+        <tr>
+          <th></th>
+          <th><%= t ".id" %></th>
+          <th><%= t ".creator" %></th>
+          <th><%= t ".description" %></th>
+          <th><%= t ".created_at" %></th>
+          <th><%= t ".last_changed" %></th>
+        </tr>
+      </thead>
+    <% @notes.each do |note| -%>
+      <tr<% if note.author == @user %> class="table-primary"<% end %>>
+        <td>
+          <% if note.closed? %>
+            <%= image_tag("closed_note_marker.svg", :alt => "closed", :width => 25, :height => 40) %>
+          <% else %>
+            <%= image_tag("open_note_marker.svg", :alt => "open", :width => 25, :height => 40) %>
+          <% end %>
+        </td>
+        <td><%= link_to note.id, note %></td>
+        <td><%= note_author(note.author) %></td>
+        <td><%= note.comments.first.body.to_html %></td>
+        <td><%= friendly_date_ago(note.created_at) %></td>
+        <td><%= friendly_date_ago(note.updated_at) %></td>
       </tr>
-    </thead>
-  <% @notes.each do |note| -%>
-    <tr<% if note.author == @user %> class="table-primary"<% end %>>
-      <td>
-        <% if note.closed? %>
-          <%= image_tag("closed_note_marker.svg", :alt => "closed", :width => 25, :height => 40) %>
-        <% else %>
-          <%= image_tag("open_note_marker.svg", :alt => "open", :width => 25, :height => 40) %>
-        <% end %>
-      </td>
-      <td><%= link_to note.id, note %></td>
-      <td><%= note_author(note.author) %></td>
-      <td><%= note.comments.first.body.to_html %></td>
-      <td><%= friendly_date_ago(note.created_at) %></td>
-      <td><%= friendly_date_ago(note.updated_at) %></td>
-    </tr>
-  <% end -%>
-  </table>
-
-  <%= render :partial => "notes_paging_nav" %>
+    <% end -%>
+    </table>
 
+    <%= render :partial => "notes_paging_nav" %>
+  <% end %>
 <% end -%>