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

Wire up filtering logic for the timeline

Browse Source
This commit is contained in:
Jorge Manrubia
2025-10-02 10:12:43 +02:00
parent e046227ebc
commit 1c0a01c17a
3 changed files with 39 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/controllers/multi_selection_combobox_controller.js
+1
View File
@@ -91,6 +91,7 @@ export default class extends Controller {
#addHiddenFields() {
this.#selectedValues().forEach(value => {
const [field] = this.hiddenFieldTemplateTarget.content.cloneNode(true).children
field.removeAttribute("id")
field.value = value
this.element.appendChild(field)
})
app/views/events/index.html.erb
+3 -1
View File
@@ -14,6 +14,8 @@
<% end %>
<div class="events" id="activity">
<%= render "events/day", day_timeline: @day_timeline %>
<%= turbo_frame_tag :events_container do %>
<%= render "events/day", day_timeline: @day_timeline %>
<% end %>
</div>
<%= event_next_page_link(@day_timeline.next_day) %>
app/views/events/index/_filter.html.erb
+35 -32
View File
@@ -1,40 +1,43 @@
<% filter = user_filtering.filter %>
<%= tag.div class: "flex-inline position-relative",
data: {
controller: "dialog multi-selection-combobox",
action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
filter_show: user_filtering.show_collections?,
multi_selection_combobox_no_selection_label_value: user_filtering.selected_collections_label,
multi_selection_combobox_label_prefix_value: "" } do %>
<button type="button" class="btn borderless btn--plain events__filter-select" data-action="click->dialog#toggle:stop">
<span class="overflow-ellipsis" data-multi-selection-combobox-target="label">
</span>
</button>
<%= form_with url: events_path,
method: :get, class: "flex-inline position-relative",
data: { controller: "form", turbo_frame: "cards_container", turbo_action: "advance" } do |form| %>
<%= tag.div class: "flex-inline position-relative quick-filter",
data: {
controller: "dialog multi-selection-combobox",
action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
filter_show: user_filtering.show_collections?,
multi_selection_combobox_no_selection_label_value: user_filtering.selected_collections_label } do %>
<button type="button" class="btn borderless btn--plain events__filter-select" 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 "collection_ids[]", nil, data: { filter_settings_target: "field" } %>
</template>
<template data-multi-selection-combobox-target="hiddenFieldTemplate">
<%= hidden_field_tag "collection_ids[]", nil, data: { filter_settings_target: "field" } %>
</template>
<%= filter_dialog "Collection…" do %>
<strong class="popup__title">Collection…</strong>
<%= filter_dialog "Collection…" do %>
<strong class="popup__title">Collection…</strong>
<% if user_filtering.collections.many? %>
<%= text_field_tag nil, nil, placeholder: "Filter…", class: "input input--transparent txt-small font-weight-normal", autofocus: true,
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" role="listbox">
<% user_filtering.collections.each do |collection| %>
<%= tag.li class: "popup__item", data: {
filter_target: "item", navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: collection.id, multi_selection_combobox_label: collection.name },
role: "checkbox", aria: { checked: filter.collections.include?(collection) } do %>
<button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change filter-settings#change form#submit">
<span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
<%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
</button>
<% if user_filtering.collections.many? %>
<%= text_field_tag nil, nil, placeholder: "Filter…", class: "input input--transparent txt-small font-weight-normal", autofocus: true,
type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
<% end %>
<% end %>
</ul>
<ul class="popup__list" data-filter-target="list" role="listbox">
<% user_filtering.collections.each do |collection| %>
<%= tag.li class: "popup__item", data: {
filter_target: "item", navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: collection.id, multi_selection_combobox_label: collection.name },
role: "checkbox", aria: { checked: filter.collections.include?(collection) } do %>
<button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change filter-settings#change form#submit">
<span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
<%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
</button>
<% end %>
<% end %>
</ul>
<% end %>
<% end %>
<% end %>