Add prefix for multi select labels

app/javascript/controllers/multi_selection_combobox_controller.js

@@ -8,7 +8,8 @@ export default class extends Controller {
   static values = {
     selectPropertyName: { type: String, default: "aria-checked" },
     defaultValue: String,
-    noSelectionLabel: { type: String, default: "No selection" }
+    noSelectionLabel: { type: String, default: "No selection" },
+    labelPrefix: String
   }
 
   connect() {
@@ -22,6 +23,13 @@ export default class extends Controller {
     }
   }
 
+
+  clear(event) {
+    this.#deselectAll()
+    this.#updateHiddenFields()
+    this.labelTarget.textContent = this.#selectedLabel
+  }
+
   get #selectedLabel() {
     const selectedValues = this.#selectedValues()
     if (selectedValues.length === 0) {
@@ -29,10 +37,12 @@ export default class extends Controller {
     }
 
     const labels = this.#selectedItems().map(item => item.dataset.multiSelectionComboboxLabel)
-    return toSentence(labels, {
+    const sentence = toSentence(labels, {
       two_words_connector: " or ",
       last_word_connector: ", or "
     })
+
+    return this.hasLabelPrefixValue ? `${this.labelPrefixValue} ${sentence}` : sentence
   }
 
   #toggleSelection(item) {
@@ -53,6 +63,12 @@ export default class extends Controller {
     this.#addHiddenFields()
   }
 
+  #deselectAll() {
+    this.itemTargets.forEach(item => {
+      item.setAttribute(this.selectPropertyNameValue, "false")
+    })
+  }
+
   #selectedItems() {
     return this.itemTargets.filter(item =>
       item.getAttribute(this.selectPropertyNameValue) === "true"

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

@@ -4,7 +4,8 @@
         controller: "dialog multi-selection-combobox",
         action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
         filter_show: user_filtering.show_assignees?,
-        multi_selection_combobox_no_selection_label_value: "Assigned to…" } do %>
+        multi_selection_combobox_no_selection_label_value: "Assigned to…",
+        multi_selection_combobox_label_prefix_value: "Assigned to" } 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>
@@ -26,7 +27,7 @@
         <%= tag.li class: "popup__item", data: {
               navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: "unassigned", multi_selection_combobox_label: "No one" },
               role: "checkbox", aria: { checked: filter.assignment_status.unassigned? } do %>
-          <button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change form#submit filter-settings#change">
+          <button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#clear form#submit filter-settings#change">
             <span class="overflow-ellipsis flex-item-grow">No one</span>
             <%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
           </button>
@@ -34,7 +35,7 @@
 
         <% user_filtering.users.each do |user| %>
           <%= tag.li class: "popup__item", data: {
-                navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: user.id, multi_selection_combobox_label: user.name },
+                navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: user.id, multi_selection_combobox_label: user.familiar_name },
                 role: "checkbox", aria: { checked: filter.assignees.include?(user) } 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"><%= user.name %></span>

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

@@ -5,7 +5,8 @@
         controller: "dialog multi-selection-combobox",
         action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
         filter_show: user_filtering.show_closers?,
-        multi_selection_combobox_no_selection_label_value: "Closed by…" } do %>
+        multi_selection_combobox_no_selection_label_value: "Closed by…",
+        multi_selection_combobox_label_prefix_value: "Closed by" } 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>
@@ -26,7 +27,7 @@
       <ul class="popup__list" data-filter-target="list" role="listbox">
         <% user_filtering.users.each do |user| %>
           <%= tag.li class: "popup__item", data: {
-                navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: user.id, multi_selection_combobox_label: user.name },
+                navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: user.id, multi_selection_combobox_label: user.familiar_name },
                 role: "checkbox", aria: { checked: filter.closers.include?(user) } 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"><%= user.name %></span>

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

@@ -5,7 +5,8 @@
         controller: "dialog multi-selection-combobox",
         action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
         filter_show: user_filtering.show_creators?,
-        multi_selection_combobox_no_selection_label_value: "Added by…" } do %>
+        multi_selection_combobox_no_selection_label_value: "Added by…",
+        multi_selection_combobox_label_prefix_value: "Added by" } 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>
@@ -26,7 +27,7 @@
       <ul class="popup__list" data-filter-target="list" role="listbox">
         <% user_filtering.users.each do |user| %>
           <%= tag.li class: "popup__item", data: {
-                navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: user.id, multi_selection_combobox_label: user.name },
+                navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: user.id, multi_selection_combobox_label: user.familiar_name },
                 role: "checkbox", aria: { checked: filter.creators.include?(user) } 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"><%= user.name %></span>