Multi selection combos working

app/javascript/controllers/multi_selection_combobox_controller.js

@@ -0,0 +1,81 @@
+import { Controller } from "@hotwired/stimulus"
+import { toSentence } from "helpers/text_helpers"
+
+export default class extends Controller {
+  #hiddenField
+
+  static targets = [ "label", "item", "hiddenFieldTemplate" ]
+  static values = {
+    selectPropertyName: { type: String, default: "aria-checked" },
+    defaultValue: String,
+    noSelectionLabel: { type: String, default: "No selection" }
+  }
+
+  connect() {
+    this.labelTarget.textContent = this.#selectedLabel
+  }
+
+  change(event) {
+    const item = event.target.closest("[role='checkbox']")
+    if (item) {
+      this.#toggleSelection(item)
+    }
+  }
+
+  get #selectedLabel() {
+    const selectedValues = this.#selectedValues()
+    if (selectedValues.length === 0) {
+      return this.noSelectionLabelValue
+    }
+
+    const labels = this.#selectedItems().map(item => item.dataset.multiSelectionComboboxLabel)
+    return toSentence(labels, {
+      two_words_connector: " or ",
+      last_word_connector: ", or "
+    })
+  }
+
+  #toggleSelection(item) {
+    const isSelected = item.getAttribute(this.selectPropertyNameValue) === "true"
+
+    if (isSelected) {
+      item.setAttribute(this.selectPropertyNameValue, "false")
+    } else {
+      item.setAttribute(this.selectPropertyNameValue, "true")
+    }
+
+    this.#updateHiddenFields()
+    this.labelTarget.textContent = this.#selectedLabel
+  }
+
+  #updateHiddenFields() {
+    this.#clearHiddenFields()
+    this.#addHiddenFields()
+  }
+
+  #selectedItems() {
+    return this.itemTargets.filter(item =>
+      item.getAttribute(this.selectPropertyNameValue) === "true"
+    )
+  }
+
+  #selectedValues() {
+    return this.#selectedItems().map(item => item.dataset.multiSelectionComboboxValue)
+  }
+
+  #clearHiddenFields() {
+    this.element.querySelectorAll('input[type="hidden"]').forEach(field => {
+      if (field !== this.hiddenField) {
+        field.remove()
+      }
+    })
+  }
+
+  #addHiddenFields() {
+    this.#selectedValues().forEach(value => {
+      const [field] = this.hiddenFieldTemplateTarget.content.cloneNode(true).children
+      field.value = value
+      this.element.appendChild(field)
+    })
+  }
+}

app/javascript/helpers/text_helpers.js

@@ -11,3 +11,27 @@ export function normalizeFilteredText(string) {
 export function filterMatches(text, potentialMatch) {
   return normalizeFilteredText(text).includes(normalizeFilteredText(potentialMatch))
 }
+
+export function toSentence(array, options = {}) {
+  const defaultConnectors = {
+    words_connector: ", ",
+    two_words_connector: " and ",
+    last_word_connector: ", and "
+  }
+
+  const connectors = { ...defaultConnectors, ...options }
+
+  if (array.length === 0) {
+    return ""
+  }
+
+  if (array.length === 1) {
+    return array[0]
+  }
+
+  if (array.length === 2) {
+    return array.join(connectors.two_words_connector)
+  }
+
+  return array.slice(0, -1).join(connectors.words_connector) + connectors.last_word_connector + array[array.length - 1]
+}

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

@@ -3,7 +3,7 @@
   <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
   <%= 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 %>
+  <%= render "filters/settings/tags", user_filtering: user_filtering %>
 <%#= render "filters/settings/assignees", user_filtering: user_filtering %>
 <%#= render "filters/settings/creators", user_filtering: user_filtering %>
 <%#= render "filters/settings/closers", user_filtering: user_filtering %>

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

@@ -1,17 +1,20 @@
 <% filter = user_filtering.filter %>
 
 <%= tag.div class: "quick-filter position-relative",
-      data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_tags? } do %>
-    <button class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#open:stop">
-      <span class="overflow-ellipsis">
-        <% if filter.tags.any? %>
-          <%= filter.tags.map(&:hashtag).to_sentence(two_words_connector: " or ", last_word_connector: ", or ") %>
-        <% else %>
-          Tagged…
-        <% end %>
+      data: {
+        controller: "dialog multi-selection-combobox",
+        action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
+        filter_show: user_filtering.show_tags?,
+        multi_selection_combobox_no_selection_label_value: "Tagged…" } do %>
+    <button type="button" class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#toggle:stop">
+      <span class="overflow-ellipsis" data-multi-selection-combobox-target="label">
       </span>
     </button>
 
+    <template data-multi-selection-combobox-target="hiddenFieldTemplate">
+      <%= hidden_field_tag "tag_ids[]", nil, data: { filter_settings_target: "field" } %>
+    </template>
+
     <%= filter_dialog "Tagged…" do %>
       <strong class="popup__title">Tagged…</strong>
 
@@ -20,34 +23,16 @@
               type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
       <% end %>
 
-      <ul class="popup__list" data-filter-target="list">
+      <ul class="popup__list" data-filter-target="list" role="listbox">
         <% user_filtering.tags.each do |tag| %>
-          <li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
-            <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
-              <% filter.as_params.except(:tag_ids).each do |key, value| %>
-                <%= filter_hidden_field_tag key, value %>
-              <% end %>
-
-              <% filter.tags.each do |existing_tag| %>
-                <% unless existing_tag == tag %>
-                  <%= hidden_field_tag "tag_ids[]", existing_tag.id %>
-                <% end %>
-              <% end %>
-
-              <% unless filter.tags.include?(tag) %>
-                <%= hidden_field_tag "tag_ids[]", tag.id %>
-              <% end %>
-
-              <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
-
-              <%= form.button type: "submit", class: "popup__btn btn" do %>
-                <span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
-                <% if filter.tags.include?(tag) %>
-                  <%= icon_tag "check", class: "checked flex-item-justify-end" %>
-                <% end %>
-              <% end %>
-            <% end %>
-          </li>
+          <%= content_tag(:li, class: "popup__item", data: {
+                navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: tag.id, multi_selection_combobox_label: tag.hashtag },
+                role: "checkbox", aria: { checked: filter.tags.include?(tag) }) do %>
+            <button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change form#submit filter-settings#change">
+              <span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
+              <%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
+            </button>
+          <% end %>
         <% end %>
       </ul>
     <% end %>