Merge pull request #1070 from basecamp/bring-back-filter-terms

Bring back filter terms

app/assets/stylesheets/filters.css

@@ -99,6 +99,10 @@
     }
   }
 
+  .filter__terms {
+    --input-background: var(--color-canvas);
+  }
+
   .quick-filter {
     &:not(.default-value):has(.checked) {
       .input--select {

app/models/filter/params.rb

@@ -64,7 +64,7 @@ module Filter::Params
   end
 
   def as_params_without(key, value)
-    as_params.tap do |params|
+    as_params.dup.tap do |params|
       if params[key].is_a?(Array)
         params[key] = params[key] - [ value ]
         params.delete(key) if params[key].empty?

app/views/filters/_settings.html.erb

@@ -1,8 +1,7 @@
 <% cache user_filtering do %>
   <aside class="filters flex align-center gap-half justify-center center margin-block-end">
     <div class="flex-inline center align-center gap-half">
-      <%= render "filters/settings/toggle", user_filtering: user_filtering %>
-
+      <%= render "filters/settings/terms", user_filtering: user_filtering %>
       <%= render "filters/settings/sorted_by", user_filtering: user_filtering %>
       <%= render "filters/settings/indexed_by", user_filtering: user_filtering %>
       <%= render "filters/settings/tags", user_filtering: user_filtering %>
@@ -11,8 +10,7 @@
       <%= render "filters/settings/closers", user_filtering: user_filtering %>
       <%= render "filters/settings/time_window", user_filtering: user_filtering, name: :creation, label: "Created" %>
       <%= render "filters/settings/time_window", user_filtering: user_filtering, name: :closure, label: "Closed" %>
-      <%= render "filters/settings/terms", user_filtering: user_filtering %>
-
+      <%= render "filters/settings/toggle", user_filtering: user_filtering %>
       <%= render "filters/settings/controls", user_filtering: user_filtering %>
     </div>
   </aside>

app/views/filters/settings/_terms.html.erb

@@ -1,3 +1,23 @@
-<% user_filtering.filter.terms.each do |term| %>
-  <%= filter_chip_tag %Q("#{term}"), filter.as_params_without(:terms, term) %>
+<% filter = user_filtering.filter %>
+<%= form_with url: cards_path, method: :get, class: "", data: { controller: "form" } do |form| %>
+  <% filter.as_params.except(:terms).each do |key, value| %>
+    <%= filter_hidden_field_tag key, value %>
+  <% end %>
+
+  <% filter.terms.each do |existing_term| %>
+      <%= hidden_field_tag "terms[]", existing_term %>
+  <% end %>
+
+  <% if user_filtering.expanded? %>
+    <%= hidden_field_tag :expand_all, user_filtering.expanded? %>
+  <% end %>
+
+  <%= form.text_field "terms[]", placeholder: "Filter these cards…", class: "input txt-x-small filter__terms", 
+        autofocus: false, autocomplete: :off, autocorrect: "off", data: { "1p-ignore": "true" } %>
+<% end %>
+
+<% if filter.terms.present? %>
+  <% filter.terms.each do |term| %>
+    <%= filter_chip_tag %Q("#{term}"), filter.as_params_without(:terms, term) %>
+  <% end %>
 <% end %>

app/views/filters/settings/_toggle.html.erb

@@ -3,11 +3,11 @@
 <% if user_filtering.expanded? %>
   <%= link_to cards_path(filter.as_params), class: "btn txt-x-small btn--reversed", aria: { selected: true } do %>
     <%= icon_tag "filter" %>
-    <span>Filter these cards</span>
+    <span class="for-screen-reader">Close filter options</span>
   <% end %>
 <% else %>
   <%= link_to cards_path(filter.as_params.merge(expand_all: true)), class: "btn txt-x-small" do %>
     <%= icon_tag "filter" %>
-    <span>Filter these cards</span>
+    <span class="for-screen-reader">Expand filter options</span>
   <% end %>
 <% end %>