raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-01 02:03:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Handle filtering on js controller for SelectorWithFilter

Browse Source
This commit is contained in:
Jean-Baptiste Bellet
2022-04-07 15:39:47 +02:00
parent 274ee2c6f6
commit 3cf01623da
3 changed files with 17 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/components/selector_with_filter_component.rb
View File

@@ -4,23 +4,8 @@ class SelectorWithFilterComponent < SelectorComponent
def initialize(title:, selected:, items:, data: {},
selected_items_i18n_key: 'components.selector_with_filter.selected_items')
super(title: title, selected: selected, items: items, data: data)
@query = ""
@selected_items = items.select { |item| @selected.include?(item[:value]) }
@selected_items_i18n_key = selected_items_i18n_key
filter_items
end
def search
@query = element.value
filter_items
end
def filter_items
@filtered_items = if @query.empty?
@items
else
@items.select { |item| item[:label].downcase.include?(@query.downcase) }
end
@items = items
end
end

6
app/components/selector_with_filter_component/selector_with_filter_component.html.haml
View File

@@ -15,8 +15,8 @@
.selector-arrow
.selector-wrapper
.super-selector-search
%input{type: "text", placeholder: t("components.selector_with_filter.search_placeholder"), data: reflex_data_attributes("debounced:input->search"), value: @query}
%input{type: "text", placeholder: t("components.selector_with_filter.search_placeholder"), data: { action: "debounced:input->selector-with-filter#filter" } }
.selector-items
- @filtered_items.each do |item|
.selector-item{ class: ("selected" if item[:selected]), data: @data, "data-value": item[:value] }
- @items.each do |item|
.selector-item{ class: ("selected" if item[:selected]), data: @data.merge({ "selector-with-filter-target": "items" }), "data-value": item[:value] }
= item[:label]

14
app/webpacker/controllers/selector_with_filter_controller.js
View File

@@ -1,3 +1,15 @@
import SelectorController from "./selector_controller";
export default class extends SelectorController {}
export default class extends SelectorController {
static targets = ["items"];
filter = (event) => {
const query = event.target.value;
this.itemsTargets.forEach((el, i) => {
el.style.display = el.textContent.toLowerCase().includes(query)
? ""
: "none";
});
};
}