Merge pull request #138 from basecamp/link-chips

Turn filter chips into links

app/helpers/filters_helper.rb

@@ -1,7 +1,6 @@
 module FiltersHelper
-  def filter_chip_tag(text, name:, value:)
-    tag.button class: "btn txt-small btn--remove", data: { action: "filter-form#removeFilter form#submit", filter_form_target: "chip" } do
-      concat hidden_field_tag(name, value, id: nil)
+  def filter_chip_tag(text, params)
+    link_to bubbles_path(params), class: "btn txt-small btn--remove" do
       concat tag.span(text)
       concat image_tag("close.svg", aria: { hidden: true }, size: 24)
     end

app/javascript/controllers/filter_form_controller.js

@@ -1,17 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "chip" ]
-
-  connect() {
-    this.chipTargets.forEach(button => this.#showChip(button))
-  }
-
-  removeFilter(event) {
-    event.preventDefault()
-    this.#hideChip(event.target.closest("button"))
-  }
-
   clearCategory({ params: { name } }) {
     name.split(",").forEach(name => {
       this.element.querySelectorAll(`input[name="${name}"]`).forEach(input => {
@@ -19,14 +8,4 @@ export default class extends Controller {
       })
     })
   }
-
-  #showChip(button) {
-    button.querySelector("input").disabled = false
-    button.hidden = false
-  }
-
-  #hideChip(button) {
-    button.querySelector("input").disabled = true
-    button.hidden = true
-  }
 }

app/models/filter/params.rb

@@ -24,4 +24,11 @@ module Filter::Params
       params[:filter_id] = id if persisted?
     end
   end
+
+  def params_without(key, value)
+    to_params.tap do |params|
+      params[key].delete(value) if params[key].is_a?(Array)
+      params.delete(key) if params[key] == value
+    end
+  end
 end

app/views/bubbles/_filters.html.erb

@@ -1,7 +1,13 @@
 <div class="flex flex-column gap-half align-center" data-controller="dialog filter-form"
     data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside turbo:before-cache@document->dialog#close">
   <h1 class="txt-large flex align-center gap-half">
-    <%= filter.buckets.first&.name || "All projects" %>
+    <% if filter.buckets.none? %>
+      All projects
+    <% elsif filter.buckets.one? %>
+      <%= filter.buckets.first.name %>
+    <% else %>
+      <%= pluralize(filter.buckets.size, "project") %>
+    <% end %>
   </h1>
 
   <div class="filters flex-inline align-center gap-half">
@@ -10,33 +16,35 @@
       <span class="for-screen-reader">Filter</span>
     </button>
 
-    <%= form_with url: bubbles_path, method: :get, class: "flex-inline center align-center gap-half", data: { controller: "form" } do %>
-      <%= filter_chip_tag filter.indexed_by.humanize, name: "indexed_by", value: filter.indexed_by unless filter.default_indexed_by? %>
+    <div class="flex-inline center align-center gap-half">
+      <%= filter_chip_tag filter.indexed_by.humanize, filter.params_without(:indexed_by, filter.indexed_by) unless filter.default_indexed_by? %>
 
       <% filter.tags.each do |tag| %>
-        <%= filter_chip_tag tag.hashtag, name: "tag_ids[]", value: tag.id %>
+        <%= filter_chip_tag tag.hashtag, filter.params_without(:tag_ids, tag.id) %>
       <% end %>
 
       <% filter.assignees.each do |assignee| %>
-        <%= filter_chip_tag "for #{assignee.name}", name: "assignee_ids[]", value: assignee.id %>
+        <%= filter_chip_tag "for #{assignee.name}", filter.params_without(:assignee_ids, assignee.id) %>
       <% end %>
 
       <% if filter.assignments.present? %>
-        <%= filter_chip_tag filter.assignments.humanize, name: "assignments", value: filter.assignments %>
+        <%= filter_chip_tag filter.assignments.humanize, filter.params_without(:assignments, filter.assignments) %>
       <% end %>
 
       <% filter.assigners.each do |assigner| %>
-        <%= filter_chip_tag "by #{assigner.name}", name: "assigner_ids[]", value: assigner.id %>
+        <%= filter_chip_tag "by #{assigner.name}", filter.params_without(:assigner_ids, assigner.id) %>
       <% end %>
 
-      <% filter.buckets.each do |bucket| %>
-        <%= filter_chip_tag "in #{bucket.name}", name: "bucket_ids[]", value: bucket.id %>
+      <% if filter.buckets.many? %>
+        <% filter.buckets.each do |bucket| %>
+          <%= filter_chip_tag "in #{bucket.name}", filter.params_without(:bucket_ids, bucket.id) %>
+        <% end %>
       <% end %>
 
       <% filter.terms.each do |term| %>
-        <%= filter_chip_tag %Q("#{term}"), name: "terms[]", value: term %>
+        <%= filter_chip_tag %Q("#{term}"), filter.params_without(:terms, term) %>
       <% end %>
-    <% end %>
+    </div>
   </div>
 
   <dialog class="filter__popup dialog panel fill-white shadow" data-dialog-target="dialog" data-dialog-modal-value="true">

test/models/filter_test.rb

@@ -99,4 +99,20 @@ class FilterTest < ActiveSupport::TestCase
   test "plain summary" do
     assert_equal "Most discussed, tagged #Mobile, and assigned to JZ in all projects", filters(:jz_assignments).plain_summary
   end
+
+  test "params without a key-value pair" do
+    filter = users(:david).filters.new indexed_by: "most_discussed", assignee_ids: [ users(:jz).id, users(:kevin).id ]
+
+    expected = { indexed_by: "most_discussed", assignee_ids: [ users(:kevin).id ] }
+    assert_equal expected.stringify_keys, filter.params_without(:assignee_ids, users(:jz).id).to_h
+
+    expected = { assignee_ids: [ users(:jz).id, users(:kevin).id ] }
+    assert_equal expected.stringify_keys, filter.params_without(:indexed_by, "most_discussed").to_h
+
+    expected = { indexed_by: "most_discussed", assignee_ids: [ users(:jz).id, users(:kevin).id ] }
+    assert_equal expected.stringify_keys, filter.params_without(:indexed_by, "most_active").to_h
+
+    expected = { indexed_by: "most_discussed", assignee_ids: [ users(:jz).id, users(:kevin).id ] }
+    assert_equal expected.stringify_keys, filter.params_without(:assignee_ids, users(:david).id).to_h
+  end
 end