bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Submitting form from the new combos

Browse Source
This commit is contained in:
Jorge Manrubia
2025-09-18 15:23:37 +02:00
parent 66b0a4f2e7
commit 408374ff33
4 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/controllers/combobox_controller.js
+3 -3
View File
@@ -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() {
app/views/filters/settings/_controls.html.erb
+1 -3
View File
@@ -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 %>
app/views/filters/settings/_indexed_by.html.erb
+6 -4
View File
@@ -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 %>
<button type="button" class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#toggle:stop">
<span class="overflow-ellipsis" data-combobox-target="label">
</span>
</button>
<%= hidden_field_tag :indexed_by, nil, data: { combobox_target: "hiddenField" } %>
<%= filter_dialog "Filter by…" do %>
<strong class="popup__title">Filter by…</strong>
<ul class="popup__list" data-filter-target="list" role="listbox">
<% 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 %>
<button type="button" class="btn popup__btn" data-action="dialog#close combobox#change">
<span class="overflow-ellipsis flex-item-grow" data-combobox-label="<%= index == "all" ? "Status" : index.humanize %>"><%= index == "all" ? "Status" : index.humanize %></span>
<%= 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 %>
<button type="button" class="btn popup__btn" data-action="dialog#close combobox#change form#submit">
<span class="overflow-ellipsis flex-item-grow"><%= index == "all" ? "Status" : index.humanize %></span>
<%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
</button>
<% end %>
app/views/filters/settings/_sorted_by.html.erb
+8 -6
View File
@@ -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 %>
<button type="button" class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#toggle:stop">
<span class="overflow-ellipsis" data-combobox-target="label">
</span>
</button>
<%= hidden_field_tag :sorted_by, nil, data: { combobox_target: "hiddenField" } %>
<%= filter_dialog "Sort by…" do %>
<strong class="popup__title">Sort by…</strong>
<ul class="popup__list" data-filter-target="list" role="listbox">
<% 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 %>
<button type="button" class="btn popup__btn" data-action="dialog#close combobox#change">
<span class="overflow-ellipsis flex-item-grow" data-combobox-label="<%= sorted_by_label(sort) %>"><%= sorted_by_label(sort) %></span>
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 %>
<button type="button" class="btn popup__btn" data-action="dialog#close combobox#change form#submit">
<span class="overflow-ellipsis flex-item-grow"><%= sorted_by_label(sort) %></span>
<%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
</button>
<% end %>