From e33f1a63339a5716e650c7ba7a830713ce941c27 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 18 Sep 2025 13:56:52 +0200 Subject: [PATCH 01/20] Use existing method --- app/views/filters/settings/_assignees.html.erb | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/views/filters/settings/_assignees.html.erb b/app/views/filters/settings/_assignees.html.erb index a27ccc7e0..2ea5e389f 100644 --- a/app/views/filters/settings/_assignees.html.erb +++ b/app/views/filters/settings/_assignees.html.erb @@ -42,7 +42,8 @@ <% end %> <% end %> - <% User.active.order(:name).each do |user| %> + + <% user_filtering.users.each do |user| %>
  • <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %> <% filter.as_params.except(:assignee_ids, :assignment_status).each do |key, value| %> From 7b60c6959a29cdb9e55a54d7af2cba3fa4a86089 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 18 Sep 2025 15:02:25 +0200 Subject: [PATCH 02/20] WIP with a combobox controller to handle filters with pure JS --- app/assets/stylesheets/filters.css | 10 ++++- .../controllers/combobox_controller.js | 38 ++++++++++++++++ app/views/filters/settings/_controls.html.erb | 17 +++++--- .../filters/settings/_sorted_by.html.erb | 43 ++++++++----------- 4 files changed, 76 insertions(+), 32 deletions(-) create mode 100644 app/javascript/controllers/combobox_controller.js diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css index 8ce52d66c..85721621e 100644 --- a/app/assets/stylesheets/filters.css +++ b/app/assets/stylesheets/filters.css @@ -108,7 +108,15 @@ } .quick-filter { - &:not(.default-value):has(.checked) { + .checked { + display: none; + } + + [aria-checked="true"] .checked { + display: block; + } + + &:has([aria-checked="true"]) { .input--select { --input-background: var(--color-selected); } diff --git a/app/javascript/controllers/combobox_controller.js b/app/javascript/controllers/combobox_controller.js new file mode 100644 index 000000000..9d3204b3b --- /dev/null +++ b/app/javascript/controllers/combobox_controller.js @@ -0,0 +1,38 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static targets = [ "label", "item" ] + static values = { selectPropertyName: { type: String, default: "aria-checked" } } + + connect() { + this.labelTarget.textContent = this.#selectedLabel + } + + change(event) { + const item = event.target.closest("[role='checkbox']") + if (item) { + this.#selectedItem = item + } + } + + get #selectedLabel() { + const label = this.#selectedItem.querySelector("[data-combobox-label]") + return label.dataset.comboboxLabel + } + + get #selectedItem() { + return this.itemTargets.find(item => item.getAttribute(this.selectPropertyNameValue) === "true") + } + + set #selectedItem(item) { + this.#clearSelection() + item.setAttribute(this.selectPropertyNameValue, "true") + this.labelTarget.textContent = this.#selectedLabel + } + + #clearSelection() { + this.itemTargets.forEach(target => { + target.setAttribute(this.selectPropertyNameValue, "false") + }) + } +} diff --git a/app/views/filters/settings/_controls.html.erb b/app/views/filters/settings/_controls.html.erb index 755ad1e18..961b1a0d0 100644 --- a/app/views/filters/settings/_controls.html.erb +++ b/app/views/filters/settings/_controls.html.erb @@ -1,6 +1,11 @@ -<%= 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/assignees", user_filtering: user_filtering %> -<%= render "filters/settings/creators", user_filtering: user_filtering %> -<%= render "filters/settings/closers", user_filtering: user_filtering %> +<%= form_with url: cards_path, method: :get, data: { controller: "form" } do |form| %> + <%= 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/assignees", user_filtering: user_filtering %> +<%#= render "filters/settings/creators", user_filtering: user_filtering %> +<%#= render "filters/settings/closers", user_filtering: user_filtering %> +<% end %> diff --git a/app/views/filters/settings/_sorted_by.html.erb b/app/views/filters/settings/_sorted_by.html.erb index 50b308227..e0846a69b 100644 --- a/app/views/filters/settings/_sorted_by.html.erb +++ b/app/views/filters/settings/_sorted_by.html.erb @@ -1,37 +1,30 @@ <% filter = user_filtering.filter %> -<%= tag.div class: class_names("quick-filter position-relative", "default-value": filter.sorted_by.latest?), - data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_sorted_by? } do %> - <%= filter_dialog "Sort by…" do %> Sort by… -
      +
        <% Filter::SORTED_BY.each do |sort| %> -
      • - <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %> - <% filter.as_params.except(:sorted_by).each do |key, value| %> - <%= filter_hidden_field_tag key, value %> - <% end %> - - <%= hidden_field_tag :sorted_by, sort %> - - <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %> - - <%= form.button type: "submit", class: "popup__btn btn" do %> - <%= sorted_by_label(sort) %> - <% if filter.sorted_by == sort %> - <%= icon_tag "check", class: "checked flex-item-justify-end" %> - <% end %> - <% end %> - <% end %> -
        • + <%= tag.li class: "popup__item", data: { + navigable_list_target: "item", combobox_target: "item", combobox_value: sort }, + role: "checkbox", + aria: { checked: filter.sorted_by == sort } do %> + + <% end %> <% end %>
      <% end %> -<% end %> \ No newline at end of file +<% end %> From 66b0a4f2e7f60d6bcdb3736f1b2cb07f041ba395 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 18 Sep 2025 15:08:08 +0200 Subject: [PATCH 03/20] Adapt indexed_at too --- app/views/filters/settings/_controls.html.erb | 5 +-- .../filters/settings/_indexed_by.html.erb | 35 ++++++------------- 2 files changed, 14 insertions(+), 26 deletions(-) diff --git a/app/views/filters/settings/_controls.html.erb b/app/views/filters/settings/_controls.html.erb index 961b1a0d0..213c5c587 100644 --- a/app/views/filters/settings/_controls.html.erb +++ b/app/views/filters/settings/_controls.html.erb @@ -1,9 +1,10 @@ -<%= form_with url: cards_path, method: :get, data: { controller: "form" } do |form| %> +<%= form_with url: cards_path, method: :get, class: "flex-inline center align-center gap-half", + data: { controller: "form" } do |form| %> <%= 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/indexed_by", 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 %> diff --git a/app/views/filters/settings/_indexed_by.html.erb b/app/views/filters/settings/_indexed_by.html.erb index a2a37486b..16c042894 100644 --- a/app/views/filters/settings/_indexed_by.html.erb +++ b/app/views/filters/settings/_indexed_by.html.erb @@ -1,36 +1,23 @@ <% filter = user_filtering.filter %> -<%= tag.div class: class_names("quick-filter position-relative", "default-value": filter.indexed_by.all?), - data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_indexed_by? } do %> - <%= filter_dialog "Filter by…" do %> Filter by… -
        +
          <% Filter::INDEXES.each do |index| %> -
        • - <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %> - <% filter.as_params.except(:indexed_by).each do |key, value| %> - <%= filter_hidden_field_tag key, value %> - <% end %> - - <%= hidden_field_tag :indexed_by, index %> - - <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %> - - <%= form.button type: "submit", class: "popup__btn btn" do %> - <%= index.humanize %> - <% if filter.indexed_by == index %> - <%= icon_tag "check", class: "checked flex-item-justify-end" %> - <% end %> - <% end %> - <% end %> -
          • + <%= tag.li class: "popup__item", data: { navigable_list_target: "item", combobox_target: "item", combobox_value: index }, role: "checkbox", aria: { checked: filter.indexed_by == index } do %> + + <% end %> <% end %>
        <% end %> From 408374ff3339720fcb7790daa4704baf02587c1e Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 18 Sep 2025 15:23:37 +0200 Subject: [PATCH 04/20] Submitting form from the new combos --- app/javascript/controllers/combobox_controller.js | 6 +++--- app/views/filters/settings/_controls.html.erb | 4 +--- app/views/filters/settings/_indexed_by.html.erb | 10 ++++++---- app/views/filters/settings/_sorted_by.html.erb | 14 ++++++++------ 4 files changed, 18 insertions(+), 16 deletions(-) diff --git a/app/javascript/controllers/combobox_controller.js b/app/javascript/controllers/combobox_controller.js index 9d3204b3b..054f44c2f 100644 --- a/app/javascript/controllers/combobox_controller.js +++ b/app/javascript/controllers/combobox_controller.js @@ -1,7 +1,7 @@ import { Controller } from "@hotwired/stimulus" export default class extends Controller { - static targets = [ "label", "item" ] + static targets = [ "label", "item", "hiddenField" ] static values = { selectPropertyName: { type: String, default: "aria-checked" } } connect() { @@ -16,8 +16,7 @@ export default class extends Controller { } get #selectedLabel() { - const label = this.#selectedItem.querySelector("[data-combobox-label]") - return label.dataset.comboboxLabel + return this.#selectedItem?.dataset?.comboboxLabel || "" } get #selectedItem() { @@ -28,6 +27,7 @@ export default class extends Controller { this.#clearSelection() item.setAttribute(this.selectPropertyNameValue, "true") this.labelTarget.textContent = this.#selectedLabel + this.hiddenFieldTarget.value = item.dataset.comboboxValue } #clearSelection() { diff --git a/app/views/filters/settings/_controls.html.erb b/app/views/filters/settings/_controls.html.erb index 213c5c587..d4ca7e23d 100644 --- a/app/views/filters/settings/_controls.html.erb +++ b/app/views/filters/settings/_controls.html.erb @@ -1,8 +1,6 @@ <%= form_with url: cards_path, method: :get, class: "flex-inline center align-center gap-half", - data: { controller: "form" } do |form| %> + data: { controller: "form", turbo_frame: "card_columns", turbo_action: "advance" } do |form| %> <%= 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 %> diff --git a/app/views/filters/settings/_indexed_by.html.erb b/app/views/filters/settings/_indexed_by.html.erb index 16c042894..4f6ca033c 100644 --- a/app/views/filters/settings/_indexed_by.html.erb +++ b/app/views/filters/settings/_indexed_by.html.erb @@ -1,20 +1,22 @@ <% filter = user_filtering.filter %> <%= tag.div class: class_names("quick-filter position-relative"), - data: { controller: "dialog combobox", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_indexed_by? } do %> + data: { controller: "dialog combobox", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_indexed_by?, turbo_action: "advance" } do %> + <%= hidden_field_tag :indexed_by, nil, data: { combobox_target: "hiddenField" } %> + <%= filter_dialog "Filter by…" do %> Filter by…
          <% Filter::INDEXES.each do |index| %> - <%= tag.li class: "popup__item", data: { navigable_list_target: "item", combobox_target: "item", combobox_value: index }, role: "checkbox", aria: { checked: filter.indexed_by == index } do %> - <% end %> diff --git a/app/views/filters/settings/_sorted_by.html.erb b/app/views/filters/settings/_sorted_by.html.erb index e0846a69b..84c887438 100644 --- a/app/views/filters/settings/_sorted_by.html.erb +++ b/app/views/filters/settings/_sorted_by.html.erb @@ -4,23 +4,25 @@ data: { controller: "dialog combobox", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", - filter_show: user_filtering.show_sorted_by? } do %> + filter_show: user_filtering.show_sorted_by?, + turbo_action: "advance" } do %> + <%= hidden_field_tag :sorted_by, nil, data: { combobox_target: "hiddenField" } %> + <%= filter_dialog "Sort by…" do %> Sort by…
            <% Filter::SORTED_BY.each do |sort| %> <%= tag.li class: "popup__item", data: { - navigable_list_target: "item", combobox_target: "item", combobox_value: sort }, - role: "checkbox", - aria: { checked: filter.sorted_by == sort } do %> - <% end %> From 7a916c295acf7643e0cfa7123922c22012fe4a6b Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 18 Sep 2025 16:24:25 +0200 Subject: [PATCH 05/20] Controlling the manage filter section with JS too --- app/assets/stylesheets/filters.css | 8 +++++ .../controllers/combobox_controller.js | 5 ++- .../controllers/filter_settings_controller.js | 36 +++++++++++++++++++ app/models/user/filtering.rb | 2 +- app/views/filters/_settings.html.erb | 2 +- .../filters/settings/_indexed_by.html.erb | 6 ++-- app/views/filters/settings/_manage.html.erb | 4 +-- .../filters/settings/_sorted_by.html.erb | 7 ++-- 8 files changed, 59 insertions(+), 11 deletions(-) create mode 100644 app/javascript/controllers/filter_settings_controller.js diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css index 85721621e..a2141bbc6 100644 --- a/app/assets/stylesheets/filters.css +++ b/app/assets/stylesheets/filters.css @@ -138,5 +138,13 @@ display: block; } } + + .filters__manage { + display: none; + } + + .filters--has-filters-set .filters__manage { + display: inline-flex; + } } diff --git a/app/javascript/controllers/combobox_controller.js b/app/javascript/controllers/combobox_controller.js index 054f44c2f..7b6ab78ff 100644 --- a/app/javascript/controllers/combobox_controller.js +++ b/app/javascript/controllers/combobox_controller.js @@ -2,7 +2,10 @@ import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = [ "label", "item", "hiddenField" ] - static values = { selectPropertyName: { type: String, default: "aria-checked" } } + static values = { + selectPropertyName: { type: String, default: "aria-checked" }, + defaultValue: String + } connect() { this.labelTarget.textContent = this.#selectedLabel diff --git a/app/javascript/controllers/filter_settings_controller.js b/app/javascript/controllers/filter_settings_controller.js new file mode 100644 index 000000000..ad7a709c0 --- /dev/null +++ b/app/javascript/controllers/filter_settings_controller.js @@ -0,0 +1,36 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static classes = ["filtersSet"] + static targets = ["field"] + + connect() { + this.change() + } + + change() { + this.#toggleFiltersSetClass() + } + + #toggleFiltersSetClass(shouldAdd) { + this.element.classList.toggle(this.filtersSetClass, this.#hasFiltersSet) + } + + get #hasFiltersSet() { + return this.fieldTargets.some(field => this.#isFieldSet(field)) + } + + #isFieldSet(field) { + const value = field.value?.trim() + + if (!value) return false + + const defaultValue = this.#defaultValueForField(field) + return defaultValue ? value !== defaultValue : true + } + + #defaultValueForField(field) { + const comboboxContainer = field.closest("[data-combobox-default-value]") + return comboboxContainer?.dataset?.comboboxDefaultValue + } +} diff --git a/app/models/user/filtering.rb b/app/models/user/filtering.rb index d0fddc962..9aecb8a24 100644 --- a/app/models/user/filtering.rb +++ b/app/models/user/filtering.rb @@ -3,7 +3,7 @@ class User::Filtering attr_reader :user, :filter, :expanded - delegate :as_params, :any?, :single_collection, to: :filter + delegate :as_params, :single_collection, to: :filter delegate :only_closed?, to: :filter def initialize(user, filter, expanded: false) diff --git a/app/views/filters/_settings.html.erb b/app/views/filters/_settings.html.erb index 6b2278817..66e856160 100644 --- a/app/views/filters/_settings.html.erb +++ b/app/views/filters/_settings.html.erb @@ -1,7 +1,7 @@ <% cache user_filtering do %> <%= tag.aside id: "filter-settings", class: class_names("filters flex align-center gap-half justify-center center margin-block-end", { "filters--expanded": user_filtering.expanded? }), - data: { controller: "toggle-class", toggle_class_toggle_class: "filters--expanded" } do %> + data: { controller: "toggle-class filter-settings", toggle_class_toggle_class: "filters--expanded", filter_settings_filters_set_class: "filters--has-filters-set" } do %>
            <%= render "filters/settings/terms", user_filtering: user_filtering %> <%= render "filters/settings/controls", user_filtering: user_filtering %> diff --git a/app/views/filters/settings/_indexed_by.html.erb b/app/views/filters/settings/_indexed_by.html.erb index 4f6ca033c..6ed39ef9b 100644 --- a/app/views/filters/settings/_indexed_by.html.erb +++ b/app/views/filters/settings/_indexed_by.html.erb @@ -1,13 +1,13 @@ <% filter = user_filtering.filter %> <%= tag.div class: class_names("quick-filter position-relative"), - data: { controller: "dialog combobox", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_indexed_by?, turbo_action: "advance" } do %> + data: { controller: "dialog combobox", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_indexed_by?, turbo_action: "advance", combobox_default_value: "all" } do %> - <%= hidden_field_tag :indexed_by, nil, data: { combobox_target: "hiddenField" } %> + <%= hidden_field_tag :indexed_by, nil, data: { combobox_target: "hiddenField", filter_settings_target: "field" } %> <%= filter_dialog "Filter by…" do %> Filter by… @@ -15,7 +15,7 @@
              <% Filter::INDEXES.each do |index| %> <%= tag.li class: "popup__item", data: { navigable_list_target: "item", combobox_target: "item", combobox_value: index, combobox_label: (index == "all" ? "Status" : index.humanize) }, role: "checkbox", aria: { checked: filter.indexed_by == index } do %> - diff --git a/app/views/filters/settings/_manage.html.erb b/app/views/filters/settings/_manage.html.erb index 0e1d5f096..27b7eac9d 100644 --- a/app/views/filters/settings/_manage.html.erb +++ b/app/views/filters/settings/_manage.html.erb @@ -1,6 +1,6 @@ <% filter = user_filtering.filter %> -<% if user_filtering.any? %> +
              <% if filter.persisted? %> <%= button_to filter_path(filter), method: :delete, class: "btn txt-x-small btn--reversed", form_class: "inline" do %> <%= icon_tag "bookmark-outline" %> @@ -18,4 +18,4 @@ <%= icon_tag "close" %> Clear all <% end %> -<% end %> +
              diff --git a/app/views/filters/settings/_sorted_by.html.erb b/app/views/filters/settings/_sorted_by.html.erb index 84c887438..0d4ff25e8 100644 --- a/app/views/filters/settings/_sorted_by.html.erb +++ b/app/views/filters/settings/_sorted_by.html.erb @@ -5,13 +5,14 @@ controller: "dialog combobox", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_sorted_by?, - turbo_action: "advance" } do %> + turbo_action: "advance", + combobox_default_value: "latest" } do %> - <%= hidden_field_tag :sorted_by, nil, data: { combobox_target: "hiddenField" } %> + <%= hidden_field_tag :sorted_by, nil, data: { combobox_target: "hiddenField", filter_settings_target: "field" } %> <%= filter_dialog "Sort by…" do %> Sort by… @@ -21,7 +22,7 @@ <%= tag.li class: "popup__item", data: { navigable_list_target: "item", combobox_target: "item", combobox_value: sort, combobox_label: sorted_by_label(sort) }, role: "checkbox", aria: { checked: filter.sorted_by == sort } do %> - From 8d2a191a91978b151d95a950da115e8e28b4bfe9 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 18 Sep 2025 16:42:42 +0200 Subject: [PATCH 06/20] manage a hidden template instead since this will come handy when dealing with multiple selection --- .../controllers/combobox_controller.js | 19 +++++++++++++++++-- app/views/filters/settings/_controls.html.erb | 2 +- .../filters/settings/_indexed_by.html.erb | 4 +++- .../filters/settings/_sorted_by.html.erb | 4 +++- 4 files changed, 24 insertions(+), 5 deletions(-) diff --git a/app/javascript/controllers/combobox_controller.js b/app/javascript/controllers/combobox_controller.js index 7b6ab78ff..92778215a 100644 --- a/app/javascript/controllers/combobox_controller.js +++ b/app/javascript/controllers/combobox_controller.js @@ -1,7 +1,9 @@ import { Controller } from "@hotwired/stimulus" export default class extends Controller { - static targets = [ "label", "item", "hiddenField" ] + #hiddenField + + static targets = [ "label", "item", "hiddenFieldTemplate" ] static values = { selectPropertyName: { type: String, default: "aria-checked" }, defaultValue: String @@ -30,7 +32,7 @@ export default class extends Controller { this.#clearSelection() item.setAttribute(this.selectPropertyNameValue, "true") this.labelTarget.textContent = this.#selectedLabel - this.hiddenFieldTarget.value = item.dataset.comboboxValue + this.hiddenField.value = item.dataset.comboboxValue } #clearSelection() { @@ -38,4 +40,17 @@ export default class extends Controller { target.setAttribute(this.selectPropertyNameValue, "false") }) } + + get hiddenField() { + if (!this.#hiddenField) { + this.#hiddenField = this.#buildHiddenField() + } + return this.#hiddenField + } + + #buildHiddenField() { + const [field] = this.hiddenFieldTemplateTarget.content.cloneNode(true).children + this.element.appendChild(field) + return field + } } diff --git a/app/views/filters/settings/_controls.html.erb b/app/views/filters/settings/_controls.html.erb index d4ca7e23d..7c8b48de4 100644 --- a/app/views/filters/settings/_controls.html.erb +++ b/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 %> diff --git a/app/views/filters/settings/_indexed_by.html.erb b/app/views/filters/settings/_indexed_by.html.erb index 6ed39ef9b..93fca342f 100644 --- a/app/views/filters/settings/_indexed_by.html.erb +++ b/app/views/filters/settings/_indexed_by.html.erb @@ -7,7 +7,9 @@ - <%= hidden_field_tag :indexed_by, nil, data: { combobox_target: "hiddenField", filter_settings_target: "field" } %> + <%= filter_dialog "Filter by…" do %> Filter by… diff --git a/app/views/filters/settings/_sorted_by.html.erb b/app/views/filters/settings/_sorted_by.html.erb index 0d4ff25e8..eff94c017 100644 --- a/app/views/filters/settings/_sorted_by.html.erb +++ b/app/views/filters/settings/_sorted_by.html.erb @@ -12,7 +12,9 @@ - <%= hidden_field_tag :sorted_by, nil, data: { combobox_target: "hiddenField", filter_settings_target: "field" } %> + <%= filter_dialog "Sort by…" do %> Sort by… From cb7d2605458bfe226e0f2d77c669d55fa775b50f Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 18 Sep 2025 17:13:05 +0200 Subject: [PATCH 07/20] Multi selection combos working --- .../multi_selection_combobox_controller.js | 81 +++++++++++++++++++ app/javascript/helpers/text_helpers.js | 24 ++++++ app/views/filters/settings/_controls.html.erb | 2 +- app/views/filters/settings/_tags.html.erb | 55 +++++-------- 4 files changed, 126 insertions(+), 36 deletions(-) create mode 100644 app/javascript/controllers/multi_selection_combobox_controller.js diff --git a/app/javascript/controllers/multi_selection_combobox_controller.js b/app/javascript/controllers/multi_selection_combobox_controller.js new file mode 100644 index 000000000..1dce17356 --- /dev/null +++ b/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) + }) + } +} diff --git a/app/javascript/helpers/text_helpers.js b/app/javascript/helpers/text_helpers.js index 22593fe6f..d886e94b9 100644 --- a/app/javascript/helpers/text_helpers.js +++ b/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] +} diff --git a/app/views/filters/settings/_controls.html.erb b/app/views/filters/settings/_controls.html.erb index 7c8b48de4..89a53d0f2 100644 --- a/app/views/filters/settings/_controls.html.erb +++ b/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 %> diff --git a/app/views/filters/settings/_tags.html.erb b/app/views/filters/settings/_tags.html.erb index aae738f54..466cda9ab 100644 --- a/app/views/filters/settings/_tags.html.erb +++ b/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 %> - + + <%= filter_dialog "Tagged…" do %> Tagged… @@ -20,34 +23,16 @@ type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> <% end %> -
                +
                  <% user_filtering.tags.each do |tag| %> -
                • - <%= 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 %> - <%= tag.hashtag %> - <% if filter.tags.include?(tag) %> - <%= icon_tag "check", class: "checked flex-item-justify-end" %> - <% end %> - <% end %> - <% end %> -
                  • + <%= 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 %> + + <% end %> <% end %>
                <% end %> From 81cae9cbe00f11fe6b554e85822c6c64567c3be0 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 18 Sep 2025 18:39:45 +0200 Subject: [PATCH 08/20] Fix default handling --- app/assets/stylesheets/filters.css | 2 +- .../controllers/combobox_controller.js | 34 +++++++- .../filters/settings/_assignees.html.erb | 85 ++++++------------- app/views/filters/settings/_closers.html.erb | 55 +++++------- app/views/filters/settings/_controls.html.erb | 8 +- app/views/filters/settings/_creators.html.erb | 55 +++++------- .../filters/settings/_indexed_by.html.erb | 10 ++- .../filters/settings/_sorted_by.html.erb | 11 +-- 8 files changed, 119 insertions(+), 141 deletions(-) diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css index a2141bbc6..2b9b9929a 100644 --- a/app/assets/stylesheets/filters.css +++ b/app/assets/stylesheets/filters.css @@ -116,7 +116,7 @@ display: block; } - &:has([aria-checked="true"]) { + &:has([aria-checked="true"]):not(.quick-filter--with-default) { .input--select { --input-background: var(--color-selected); } diff --git a/app/javascript/controllers/combobox_controller.js b/app/javascript/controllers/combobox_controller.js index 92778215a..4764b8ceb 100644 --- a/app/javascript/controllers/combobox_controller.js +++ b/app/javascript/controllers/combobox_controller.js @@ -6,11 +6,13 @@ export default class extends Controller { static targets = [ "label", "item", "hiddenFieldTemplate" ] static values = { selectPropertyName: { type: String, default: "aria-checked" }, - defaultValue: String + defaultValue: String, + defaultLabel: String } + static classes = ["withDefault"] connect() { - this.labelTarget.textContent = this.#selectedLabel + this.#selectedItem = this.#selectedItem } change(event) { @@ -21,6 +23,14 @@ export default class extends Controller { } get #selectedLabel() { + const selectedValue = this.#selectedItemValue() + console.debug("Es ", this.defaultValueValue); + if (this.hasDefaultLabelValue && (selectedValue === this.defaultValueValue || !selectedValue)) { + return this.defaultLabelValue + } + + console.debug("EIN", this.#selectedItem); + return this.#selectedItem?.dataset?.comboboxLabel || "" } @@ -28,11 +38,18 @@ export default class extends Controller { return this.itemTargets.find(item => item.getAttribute(this.selectPropertyNameValue) === "true") } + #selectedItemValue() { + return this.#selectedItem?.dataset?.comboboxValue || "" + } + set #selectedItem(item) { + if (!item) return + this.#clearSelection() item.setAttribute(this.selectPropertyNameValue, "true") this.labelTarget.textContent = this.#selectedLabel this.hiddenField.value = item.dataset.comboboxValue + this.#updateWithDefaultClass() } #clearSelection() { @@ -53,4 +70,17 @@ export default class extends Controller { this.element.appendChild(field) return field } + + #updateWithDefaultClass() { + if (this.hasWithDefaultClass && this.hasDefaultValueValue) { + const selectedValue = this.#selectedItemValue() + const shouldHaveClass = selectedValue === this.defaultValueValue + + if (shouldHaveClass) { + this.element.classList.add(this.withDefaultClass) + } else { + this.element.classList.remove(this.withDefaultClass) + } + } + } } diff --git a/app/views/filters/settings/_assignees.html.erb b/app/views/filters/settings/_assignees.html.erb index 2ea5e389f..7bdc68f40 100644 --- a/app/views/filters/settings/_assignees.html.erb +++ b/app/views/filters/settings/_assignees.html.erb @@ -1,18 +1,19 @@ <% 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_assignees? } do %> - + + <%= filter_dialog "Assigned to…" do %> Assigned to… @@ -21,55 +22,25 @@ type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> <% end %> -
                  -
                • - <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %> - <% filter.as_params.except(:assignee_ids, :assignment_status).each do |key, value| %> - <%= filter_hidden_field_tag key, value %> - <% end %> - - <% unless filter.assignment_status.unassigned? %> - <%= hidden_field_tag :assignment_status, "unassigned" %> - <% 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 %> - No one - <% if filter.assignment_status.unassigned? %> - <%= icon_tag "check", class: "checked flex-item-justify-end" %> - <% end %> - <% end %> - <% end %> -
                  • +
                    + <%= 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 %> + + <% end %> <% user_filtering.users.each do |user| %> -
                  • - <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %> - <% filter.as_params.except(:assignee_ids, :assignment_status).each do |key, value| %> - <%= filter_hidden_field_tag key, value %> - <% end %> - - <% filter.assignees.each do |existing_assignee| %> - <% unless existing_assignee == user %> - <%= hidden_field_tag "assignee_ids[]", existing_assignee.id %> - <% end %> - <% end %> - - <% unless filter.assignees.include?(user) %> - <%= hidden_field_tag "assignee_ids[]", user.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 %> - <%= user.name %> - <% if filter.assignees.include?(user) %> - <%= icon_tag "check", class: "checked flex-item-justify-end" %> - <% end %> - <% end %> - <% end %> -
                    • + <%= 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 }, + role: "checkbox", aria: { checked: filter.assignees.include?(user) } do %> + + <% end %> <% end %>
                  <% end %> diff --git a/app/views/filters/settings/_closers.html.erb b/app/views/filters/settings/_closers.html.erb index 779f68f9f..0215cf9cd 100644 --- a/app/views/filters/settings/_closers.html.erb +++ b/app/views/filters/settings/_closers.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_closers? } do %> - + + <%= filter_dialog "Closed by…" do %> Closed by… @@ -20,34 +23,16 @@ type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> <% end %> -
                    +
                      <% user_filtering.users.each do |user| %> -
                    • - <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %> - <% filter.as_params.except(:closer_ids).each do |key, value| %> - <%= filter_hidden_field_tag key, value %> - <% end %> - - <% filter.closers.each do |existing_closer| %> - <% unless existing_closer == user %> - <%= hidden_field_tag "closer_ids[]", existing_closer.id %> - <% end %> - <% end %> - - <% unless filter.closers.include?(user) %> - <%= hidden_field_tag "closer_ids[]", user.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 %> - <%= user.name %> - <% if filter.closers.include?(user) %> - <%= icon_tag "check", class: "checked flex-item-justify-end" %> - <% end %> - <% end %> - <% end %> -
                      • + <%= 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 }, + role: "checkbox", aria: { checked: filter.closers.include?(user) } do %> + + <% end %> <% end %>
                    <% end %> diff --git a/app/views/filters/settings/_controls.html.erb b/app/views/filters/settings/_controls.html.erb index 89a53d0f2..36bcf9002 100644 --- a/app/views/filters/settings/_controls.html.erb +++ b/app/views/filters/settings/_controls.html.erb @@ -3,8 +3,8 @@ <%= 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/assignees", user_filtering: user_filtering %> -<%#= render "filters/settings/creators", user_filtering: user_filtering %> -<%#= render "filters/settings/closers", 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 %> <% end %> diff --git a/app/views/filters/settings/_creators.html.erb b/app/views/filters/settings/_creators.html.erb index d1ab37986..b67a115e5 100644 --- a/app/views/filters/settings/_creators.html.erb +++ b/app/views/filters/settings/_creators.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_creators? } do %> - + + <%= filter_dialog "Added by…" do %> Added by… @@ -20,34 +23,16 @@ type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> <% end %> -
                      +
                        <% user_filtering.users.each do |user| %> -
                      • - <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %> - <% filter.as_params.except(:creator_ids).each do |key, value| %> - <%= filter_hidden_field_tag key, value %> - <% end %> - - <% filter.creators.each do |existing_creators| %> - <% unless existing_creators == user %> - <%= hidden_field_tag "creator_ids[]", existing_creators.id %> - <% end %> - <% end %> - - <% unless filter.creators.include?(user) %> - <%= hidden_field_tag "creator_ids[]", user.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 %> - <%= user.name %> - <% if filter.creators.include?(user) %> - <%= icon_tag "check", class: "checked flex-item-justify-end" %> - <% end %> - <% end %> - <% end %> -
                        • + <%= 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 }, + role: "checkbox", aria: { checked: filter.creators.include?(user) } do %> + + <% end %> <% end %>
                      <% end %> diff --git a/app/views/filters/settings/_indexed_by.html.erb b/app/views/filters/settings/_indexed_by.html.erb index 93fca342f..659788e18 100644 --- a/app/views/filters/settings/_indexed_by.html.erb +++ b/app/views/filters/settings/_indexed_by.html.erb @@ -1,7 +1,13 @@ <% filter = user_filtering.filter %> <%= tag.div class: class_names("quick-filter position-relative"), - data: { controller: "dialog combobox", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_indexed_by?, turbo_action: "advance", combobox_default_value: "all" } do %> + data: { controller: "dialog combobox form", + action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", + filter_show: user_filtering.show_indexed_by?, + turbo_action: "advance", + combobox_default_value_value: "all", + combobox_default_label_value: "Status", + combobox_with_default_class: "quick-filter--with-default" } do %> @@ -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 %>
            <% end %> <% end %> diff --git a/app/views/filters/settings/_manage.html.erb b/app/views/filters/settings/_manage.html.erb index 27b7eac9d..1fc7bfa17 100644 --- a/app/views/filters/settings/_manage.html.erb +++ b/app/views/filters/settings/_manage.html.erb @@ -1,18 +1,7 @@ <% filter = user_filtering.filter %>
            - <% if filter.persisted? %> - <%= button_to filter_path(filter), method: :delete, class: "btn txt-x-small btn--reversed", form_class: "inline" do %> - <%= icon_tag "bookmark-outline" %> - Remove saved filter - <% end %> - <% else %> - <% filter_params = filter.as_params.transform_values { |v| v.respond_to?(:to_str) ? v.to_str : v } %> - <%= button_to filters_path, method: :post, params: filter_params, class: "btn txt-x-small", form_class: "inline" do %> - <%= icon_tag "bookmark-outline" %> - Save filter - <% end %> - <% end %> + <%= render "filters/filter_toggle", filter: filter %> <%= link_to cards_path(filter.as_params.except(:assignee_ids, :assignment_status, :card_ids, :creator_ids, :closer_ids, :stage_ids, :tag_ids, :terms, :indexed_by, :sorted_by, :creation, :closure)), class: "btn btn--remove txt-x-small" do %> <%= icon_tag "close" %> From f77aef968ba8dbcfa5b22e14ca32069a87b7d6b4 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Fri, 19 Sep 2025 15:15:23 +0200 Subject: [PATCH 17/20] Don't submit empty params with the filter They result in garbled URLs --- .../controllers/combobox_controller.js | 1 + app/views/filters/_settings.html.erb | 7 ++----- app/views/filters/settings/_assignees.html.erb | 2 +- app/views/filters/settings/_closers.html.erb | 2 +- app/views/filters/settings/_controls.html.erb | 17 ++++++++++------- app/views/filters/settings/_creators.html.erb | 2 +- app/views/filters/settings/_tags.html.erb | 2 +- app/views/filters/settings/_terms.html.erb | 7 ++++++- 8 files changed, 23 insertions(+), 17 deletions(-) diff --git a/app/javascript/controllers/combobox_controller.js b/app/javascript/controllers/combobox_controller.js index 18a3ab8bd..02579e5a1 100644 --- a/app/javascript/controllers/combobox_controller.js +++ b/app/javascript/controllers/combobox_controller.js @@ -47,6 +47,7 @@ export default class extends Controller { item.setAttribute(this.selectPropertyNameValue, "true") this.labelTarget.textContent = this.#selectedLabel this.hiddenField.value = item.dataset.comboboxValue + this.hiddenField.disabled = !item.dataset.comboboxValue this.#updateWithDefaultClass() } diff --git a/app/views/filters/_settings.html.erb b/app/views/filters/_settings.html.erb index 234561b53..66e856160 100644 --- a/app/views/filters/_settings.html.erb +++ b/app/views/filters/_settings.html.erb @@ -3,11 +3,8 @@ class: class_names("filters flex align-center gap-half justify-center center margin-block-end", { "filters--expanded": user_filtering.expanded? }), data: { controller: "toggle-class filter-settings", toggle_class_toggle_class: "filters--expanded", filter_settings_filters_set_class: "filters--has-filters-set" } do %>
            - <%= form_with url: cards_path, method: :get, class: "flex-inline center align-center gap-half", - data: { controller: "form", turbo_frame: "card_columns", turbo_action: "advance" } do |form| %> - <%= render "filters/settings/terms", user_filtering: user_filtering, form: form %> - <%= render "filters/settings/controls", user_filtering: user_filtering, form: form %> - <% end %> + <%= render "filters/settings/terms", user_filtering: user_filtering %> + <%= render "filters/settings/controls", user_filtering: user_filtering %> <%= render "filters/settings/toggle", user_filtering: user_filtering %> <%= render "filters/settings/manage", user_filtering: user_filtering %> diff --git a/app/views/filters/settings/_assignees.html.erb b/app/views/filters/settings/_assignees.html.erb index 0973a268e..80035e7aa 100644 --- a/app/views/filters/settings/_assignees.html.erb +++ b/app/views/filters/settings/_assignees.html.erb @@ -19,7 +19,7 @@ Assigned to… <% if User.active.many? %> - <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, + <%= text_field_tag nil, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> <% end %> diff --git a/app/views/filters/settings/_closers.html.erb b/app/views/filters/settings/_closers.html.erb index fcd83d35f..411d35df9 100644 --- a/app/views/filters/settings/_closers.html.erb +++ b/app/views/filters/settings/_closers.html.erb @@ -20,7 +20,7 @@ Closed by… <% if user_filtering.users.many? %> - <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, + <%= text_field_tag nil, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> <% end %> diff --git a/app/views/filters/settings/_controls.html.erb b/app/views/filters/settings/_controls.html.erb index f0af14fd8..118c0042c 100644 --- a/app/views/filters/settings/_controls.html.erb +++ b/app/views/filters/settings/_controls.html.erb @@ -1,9 +1,12 @@ -<%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %> +<%= form_with url: cards_path, method: :get, class: "flex-inline center align-center gap-half", + data: { controller: "form", turbo_frame: "card_columns", turbo_action: "advance" } do |form| %> + <%= 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/assignees", user_filtering: user_filtering %> -<%= render "filters/settings/creators", user_filtering: user_filtering %> -<%= render "filters/settings/closers", 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 %> + <%= render "filters/settings/assignees", user_filtering: user_filtering %> + <%= render "filters/settings/creators", user_filtering: user_filtering %> + <%= render "filters/settings/closers", user_filtering: user_filtering %> +<% end %> diff --git a/app/views/filters/settings/_creators.html.erb b/app/views/filters/settings/_creators.html.erb index eaa673613..e4da836b9 100644 --- a/app/views/filters/settings/_creators.html.erb +++ b/app/views/filters/settings/_creators.html.erb @@ -20,7 +20,7 @@ Added by… <% if user_filtering.users.many? %> - <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, + <%= text_field_tag nil, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> <% end %> diff --git a/app/views/filters/settings/_tags.html.erb b/app/views/filters/settings/_tags.html.erb index 466cda9ab..e3f730383 100644 --- a/app/views/filters/settings/_tags.html.erb +++ b/app/views/filters/settings/_tags.html.erb @@ -19,7 +19,7 @@ Tagged… <% if user_filtering.tags.many? %> - <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, + <%= text_field_tag nil, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> <% end %> diff --git a/app/views/filters/settings/_terms.html.erb b/app/views/filters/settings/_terms.html.erb index a388b520f..914bcd43c 100644 --- a/app/views/filters/settings/_terms.html.erb +++ b/app/views/filters/settings/_terms.html.erb @@ -1,4 +1,6 @@ <% filter = user_filtering.filter %> + +<%= form_with url: cards_path, method: :get, class: "", data: { controller: "form", turbo_frame: "card_columns", action: "input->form#debouncedSubmit" } do |form| %> <% filter.as_params.except(:terms).each do |key, value| %> <%= filter_hidden_field_tag key, value %> <% end %> @@ -12,7 +14,10 @@ <% 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", action: "input->form#debouncedSubmit keydown.enter->form#submitToTopTarget" } %> + autofocus: false, autocomplete: :off, autocorrect: "off", data: { + "1p-ignore": "true", + action: "input->form#debouncedSubmit keydown.enter->form#submitToTopTarget" } %> +<% end %> <% if filter.terms.present? %> <% filter.terms.each do |term| %> From 070326366418cbd19da0b62f907cde9128a24952 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Fri, 19 Sep 2025 15:33:24 +0200 Subject: [PATCH 18/20] Save/delete filter working properly and fast --- app/controllers/concerns/filter_scoped.rb | 4 +--- app/controllers/filters_controller.rb | 16 ++++++++++------ 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/app/controllers/concerns/filter_scoped.rb b/app/controllers/concerns/filter_scoped.rb index b4e9aa526..c5e0e5303 100644 --- a/app/controllers/concerns/filter_scoped.rb +++ b/app/controllers/concerns/filter_scoped.rb @@ -13,13 +13,11 @@ module FilterScoped end private - DEFAULT_PARAMS = { indexed_by: "all", sorted_by: "latest" } - def set_filter if params[:filter_id].present? @filter = Current.user.filters.find(params[:filter_id]) else - @filter = Current.user.filters.from_params params.reverse_merge(**DEFAULT_PARAMS).permit(*Filter::PERMITTED_PARAMS) + @filter = Current.user.filters.from_params params.reverse_merge(**Filter.default_values).permit(*Filter::PERMITTED_PARAMS) end end diff --git a/app/controllers/filters_controller.rb b/app/controllers/filters_controller.rb index 3951f760a..98f1bde87 100644 --- a/app/controllers/filters_controller.rb +++ b/app/controllers/filters_controller.rb @@ -1,15 +1,19 @@ class FiltersController < ApplicationController - include FilterScoped - def create - @filter = Current.user.filters.remember filter_params + filter = Current.user.filters.remember filter_params - render turbo_stream: turbo_stream.replace("filter-toggle", partial: "filters/filter_toggle", locals: { filter: @filter }) + render turbo_stream: turbo_stream.replace("filter-toggle", partial: "filters/filter_toggle", locals: { filter: filter }) end def destroy - @filter.destroy! + filter = Current.user.filters.find(params[:id]) + filter.destroy! - render turbo_stream: turbo_stream.replace("filter-toggle", partial: "filters/filter_toggle", locals: { filter: @filter }) + render turbo_stream: turbo_stream.replace("filter-toggle", partial: "filters/filter_toggle", locals: { filter: filter }) end + + private + def filter_params + params.permit(*Filter::PERMITTED_PARAMS).compact_blank + end end From 64b46d37e45364d17d9886d617ad20dfa657dc99 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Fri, 19 Sep 2025 16:05:39 +0200 Subject: [PATCH 19/20] Toggle filters in the hey menu too This also fixes a problem where the label in the menu for the filters was wrong --- app/controllers/filters_controller.rb | 16 +++++++++------- app/helpers/filters_helper.rb | 4 ++-- app/models/filter/resources.rb | 12 ++++++++++++ app/models/user/filtering.rb | 8 ++------ app/views/filters/create.turbo_stream.erb | 2 ++ app/views/filters/destroy.turbo_stream.erb | 2 ++ app/views/filters/menu/_custom.html.erb | 4 ++-- app/views/filters/menu/custom/_filter.html.erb | 2 +- app/views/my/menus/show.html.erb | 2 +- 9 files changed, 33 insertions(+), 19 deletions(-) create mode 100644 app/views/filters/create.turbo_stream.erb create mode 100644 app/views/filters/destroy.turbo_stream.erb diff --git a/app/controllers/filters_controller.rb b/app/controllers/filters_controller.rb index 98f1bde87..03a62ebed 100644 --- a/app/controllers/filters_controller.rb +++ b/app/controllers/filters_controller.rb @@ -1,18 +1,20 @@ class FiltersController < ApplicationController - def create - filter = Current.user.filters.remember filter_params + before_action :set_filters - render turbo_stream: turbo_stream.replace("filter-toggle", partial: "filters/filter_toggle", locals: { filter: filter }) + def create + @filter = Current.user.filters.remember filter_params end def destroy - filter = Current.user.filters.find(params[:id]) - filter.destroy! - - render turbo_stream: turbo_stream.replace("filter-toggle", partial: "filters/filter_toggle", locals: { filter: filter }) + @filter = Current.user.filters.find(params[:id]) + @filter.destroy! end private + def set_filters + @filters = Current.user.filters + end + def filter_params params.permit(*Filter::PERMITTED_PARAMS).compact_blank end diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb index 8b33a23b1..7c75954ae 100644 --- a/app/helpers/filters_helper.rb +++ b/app/helpers/filters_helper.rb @@ -35,8 +35,8 @@ module FiltersHelper }, &block end - def collapsible_nav_section(title, &block) - tag.details class: "popup__section", data: { action: "toggle->nav-section-expander#toggle", nav_section_expander_target: "section", nav_section_expander_key_value: title.parameterize }, open: true do + def collapsible_nav_section(title, **properties, &block) + tag.details class: "popup__section", data: { action: "toggle->nav-section-expander#toggle", nav_section_expander_target: "section", nav_section_expander_key_value: title.parameterize }, open: true, **properties do concat(tag.summary(class: "popup__section-title") do concat title concat icon_tag "caret-down" diff --git a/app/models/filter/resources.rb b/app/models/filter/resources.rb index e4d84ba99..da71ce982 100644 --- a/app/models/filter/resources.rb +++ b/app/models/filter/resources.rb @@ -21,4 +21,16 @@ module Filter::Resources def collections creator.collections.where id: super.ids end + + def collection_titles + if collections.none? + [ Collection.one? ? collections.first.name : "All collections" ] + else + collections.map(&:name) + end + end + + def collections_label + collection_titles.to_sentence + end end diff --git a/app/models/user/filtering.rb b/app/models/user/filtering.rb index 9aecb8a24..9f321bbed 100644 --- a/app/models/user/filtering.rb +++ b/app/models/user/filtering.rb @@ -15,15 +15,11 @@ class User::Filtering end def selected_collection_titles - if filter.collections.none? - [ collections.one? ? collections.first.name : "All collections" ] - else - filter.collections.map(&:name) - end + filter.collection_titles end def selected_collections_label - selected_collection_titles.to_sentence + filter.collections_label end def tags diff --git a/app/views/filters/create.turbo_stream.erb b/app/views/filters/create.turbo_stream.erb new file mode 100644 index 000000000..30013fc92 --- /dev/null +++ b/app/views/filters/create.turbo_stream.erb @@ -0,0 +1,2 @@ +<%= turbo_stream.replace("filter-toggle", partial: "filters/filter_toggle", locals: { filter: @filter }) %> +<%= turbo_stream.replace("my-filters", partial: "filters/menu/custom", locals: { filters: @filters }) %> diff --git a/app/views/filters/destroy.turbo_stream.erb b/app/views/filters/destroy.turbo_stream.erb new file mode 100644 index 000000000..30013fc92 --- /dev/null +++ b/app/views/filters/destroy.turbo_stream.erb @@ -0,0 +1,2 @@ +<%= turbo_stream.replace("filter-toggle", partial: "filters/filter_toggle", locals: { filter: @filter }) %> +<%= turbo_stream.replace("my-filters", partial: "filters/menu/custom", locals: { filters: @filters }) %> diff --git a/app/views/filters/menu/_custom.html.erb b/app/views/filters/menu/_custom.html.erb index 2de2cae1d..e2ef1d9b7 100644 --- a/app/views/filters/menu/_custom.html.erb +++ b/app/views/filters/menu/_custom.html.erb @@ -1,6 +1,6 @@ -<%= collapsible_nav_section "Saved filters" do %> +<%= collapsible_nav_section "Saved filters", id: "my-filters" do %> <%= form_with url: cards_path, method: :get, data: { controller: "form" } do |form| %> <%= render "filters/menu/custom/create" %> - <%= render partial: "filters/menu/custom/filter", collection: user_filtering.filters, as: :filter, locals: { user_filtering: user_filtering } %> + <%= render partial: "filters/menu/custom/filter", collection: filters, as: :filter %> <% end %> <% end %> diff --git a/app/views/filters/menu/custom/_filter.html.erb b/app/views/filters/menu/custom/_filter.html.erb index 7f40cb83f..5ed324e03 100644 --- a/app/views/filters/menu/custom/_filter.html.erb +++ b/app/views/filters/menu/custom/_filter.html.erb @@ -2,7 +2,7 @@ <%= icon_tag "bookmark", class: "popup__icon" %> <%= link_to cards_path(filter_id: filter.id), class: "popup__btn btn" do %>
            -
            <%= filter_selected_collections_title(user_filtering) %>
            +
            <%= filter.collections_label %>
            <%= filter.summary %>
            <% end %> diff --git a/app/views/my/menus/show.html.erb b/app/views/my/menus/show.html.erb index 90a784ce3..c2b224922 100644 --- a/app/views/my/menus/show.html.erb +++ b/app/views/my/menus/show.html.erb @@ -22,7 +22,7 @@
            <%= render "filters/menu/hotkeys" %> - <%= render "filters/menu/custom", user_filtering: @user_filtering %> + <%= render "filters/menu/custom", filters: @user_filtering.filters %> <%= render "filters/menu/collections", user_filtering: @user_filtering %> <%= render "filters/menu/tags", user_filtering: @user_filtering %> <%= render "filters/menu/users", user_filtering: @user_filtering %> From de60b198bd29cacde8ec2aa96cec80e787f8ce08 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Fri, 19 Sep 2025 16:28:30 +0200 Subject: [PATCH 20/20] Fix tests --- test/controllers/filters_controller_test.rb | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/controllers/filters_controller_test.rb b/test/controllers/filters_controller_test.rb index ef50cc5a7..c1717b898 100644 --- a/test/controllers/filters_controller_test.rb +++ b/test/controllers/filters_controller_test.rb @@ -12,9 +12,9 @@ class FiltersControllerTest < ActionDispatch::IntegrationTest assignment_status: "unassigned", tag_ids: [ tags(:mobile).id ], assignee_ids: [ users(:jz).id ], - collection_ids: [ collections(:writebook).id ] } + collection_ids: [ collections(:writebook).id ] }, as: :turbo_stream end - assert_redirected_to cards_path(filter_id: Filter.last.id) + assert_response :success filter = Filter.last assert_predicate filter.indexed_by, :closed? @@ -29,8 +29,8 @@ class FiltersControllerTest < ActionDispatch::IntegrationTest expected_params = filter.as_params assert_difference "users(:david).filters.count", -1 do - delete filter_path(filter) + delete filter_path(filter), as: :turbo_stream end - assert_redirected_to cards_path(expected_params) + assert_response :success end end