diff --git a/lookbook/docs/patterns/10-quick-filters.md.erb b/lookbook/docs/patterns/10-quick-filters.md.erb index 9f53c23fd93..e626973bde5 100644 --- a/lookbook/docs/patterns/10-quick-filters.md.erb +++ b/lookbook/docs/patterns/10-quick-filters.md.erb @@ -1,16 +1,17 @@ -Quick filters are lightweight controls that let users toggle a single filter without opening the full filter panel. Each click can navigate to a new URL with updated `filters` and `sortBy` params, +Quick filters are lightweight controls that let users toggle a single filter without opening the full filter panel. Each click or selection navigates to a new URL with updated `filters` and `sortBy` params, preserving any other active filters. -There are currently two variants: +There are currently three variants: * SegmentedControlComponent * BooleanComponent +* SelectPanelComponent ## SegmentedControlComponent A general purpose segmented control that accepts any number of items via `with_item` slots. Each item has a label and a filter value (`nil` means "no filter" and is useful for an "All" option). -<%= embed OpPrimer::QuickFilterPreview, :segmented, panels: %i[source] %> +<%= embed OpPrimer::QuickFilterPreview, :segmented_control, panels: %i[source] %> Note: Clicking on buttons in the above preview will break it and redirect to the meetings index page. @@ -19,7 +20,7 @@ Note: Clicking on buttons in the above preview will break it and redirect to the When the query already has a matching filter value, the corresponding item is rendered as selected. You can also pass `orders` to define the sort order per value. -<%= embed OpPrimer::QuickFilterPreview, :segmented_with_active_filter, panels: %i[source] %> +<%= embed OpPrimer::QuickFilterPreview, :segmented_control_with_active_filter, panels: %i[source] %> Note: Clicking on buttons in the above preview will break it and redirect to the meetings index page. @@ -33,7 +34,11 @@ Labels are provided via `true_label` and `false_label`. Note: Clicking on buttons in the above preview will break it and redirect to the meetings index page. -## Parameters +## SelectPanelComponent -* `BooleanComponent` requires `true_label` and `false_label`. -* `SegmentedControlComponent` accepts items via a block using `with_item(label:, value:)`. +A multiselect select panel based quick filter. Select panel items are provided via `with_item` slots. +Navigation happens when items are checked and the "Apply" button is clicked. + +<%= embed OpPrimer::QuickFilterPreview, :select_panel_with_active_filter, panels: %i[source] %> + +Note: Clicking on buttons in the above preview will break it and redirect to the meetings index page. diff --git a/lookbook/previews/op_primer/quick_filter_preview.rb b/lookbook/previews/op_primer/quick_filter_preview.rb index 43d1c0aa081..239f66a683c 100644 --- a/lookbook/previews/op_primer/quick_filter_preview.rb +++ b/lookbook/previews/op_primer/quick_filter_preview.rb @@ -47,6 +47,12 @@ module OpPrimer render_with_template(locals: { query: }) end + def select_panel_with_active_filter + query = meeting_query + query.where("project_id", "=", [Project.visible.first&.id.to_s].compact) + render_with_template(locals: { query: }) + end + private def meeting_query diff --git a/lookbook/previews/op_primer/quick_filter_preview/select_panel_with_active_filter.html.erb b/lookbook/previews/op_primer/quick_filter_preview/select_panel_with_active_filter.html.erb new file mode 100644 index 00000000000..62b735a84aa --- /dev/null +++ b/lookbook/previews/op_primer/quick_filter_preview/select_panel_with_active_filter.html.erb @@ -0,0 +1,12 @@ +<%= render( + OpPrimer::QuickFilter::SelectPanelComponent.new( + name: "Project", + query: query, + filter_key: :project_id, + path_args: [:meetings] + ) + ) do |component| + Project.visible.each do |project| + component.with_item(label: project.name, value: project.id) + end + end %>