refine-rails 2.11.8 → 2.11.10

data/app/views/refine/advanced_inline/criteria/index.html.erb

@@ -0,0 +1,90 @@
+<%
+  # a hash mapping Category => [array, of, conditions], sorted by category
+  categorized_conditions = @conditions
+    .group_by {|c| c.meta[:category].presence}
+    .sort_by do |(category, _conditions)|
+      if @refine_filter.has_category_ordering?
+        @refine_filter.category_order.index(category) || Float::INFINITY
+      else
+        category.to_s.downcase
+      end
+    end
+    .to_h
+
+  recommended_conditions = @conditions
+    .select { |c| c.meta[:recommended] }
+    .sort_by {|recommended| recommended.to_s.downcase }
+
+  # an array of uncategorized conditions
+  uncategorized_conditions = categorized_conditions.delete(nil)
+  dialog_class = "sl-dialog refine--inline-modal-container"
+%>
+
+<%= turbo_frame_tag @criterion do %>
+  <sl-dialog open class="<%= dialog_class %>" no-header data-controller="refine--typeahead-list" >
+    
+    <div class="dialog__header-actions refine--modal-header">
+      <h2 part="title" class="dialog__title refine--header-title" id="title">
+        <slot name="label"><%= t(".title") %></slot>
+      </h2>
+      <div part="header-actions" class="refine--modal-header-actions ">
+        <slot name="header-actions"></slot>
+        <div class="refine--filter-condition-search" >
+          <div class="absolute inset-y-0 left-0 pl-3 pr-2 flex items-center pointer-events-none" aria-hidden="true">
+            <i class="text-coolGray-600 dark:text-coolGray-200 fa-regular fa-magnifying-glass" ></i>
+          </div>
+          <input type="text" class="input input--search" placeholder="<%= t(".search_attributes") %>" data-search-target="filterProperties" data-action="refine--typeahead-list#filter" />
+        </div>
+        <sl-icon-button part="close-button" exportparts="base:close-button__base refine--modal-close" class="dialog__close" name="x-lg" library="system" label="Close" data-action="click->refine--modal#close"></sl-icon-button>
+      </div>
+    </div>
+    <sl-tab-group>
+      
+      <sl-tab slot="nav" panel="filter_attributes">
+        <i class="fa fa-filter"></i>
+        <span class="pl-2"><%= t(".filter_attributes_tab_name") %></span>
+      </sl-tab>
+
+      <sl-tab slot="nav" panel="saved_filters">
+        <i class="fa fa-floppy-disks"></i>
+        <span class="pl-2"><%= t(".filter_saved_filters_tab_name") %></span>
+      </sl-tab>
+      
+      <sl-tab-panel name="filter_attributes" class="refine--advanced-condition-select">
+        <% if uncategorized_conditions&.any? %>
+          <div class="refine--advanced-condition-select-group">
+            <% uncategorized_conditions.each do |condition| %>
+              <%= render partial: "condition_list_item_card", locals: {condition: condition } %> 
+            <% end %>
+          </div>
+        <% end %>
+
+        <% if recommended_conditions.any? %>
+          <b data-refine--typeahead-list-target="recommended" class="refine--advanced-condition-category-header"><%= t('.recommended') %></b>
+          <div class="refine--advanced-condition-select-group">
+            <% recommended_conditions.each do |condition| %>
+              <%= render partial: "condition_list_item_card", locals: {condition: condition } %> 
+            <% end %>
+          </div>
+        <% end %>
+
+        <% categorized_conditions.each do |(category, conditions)| %>
+          <b data-refine--typeahead-list-target="category" class="refine--advanced-condition-category-header"><%= category %></b>
+          <div class="refine--advanced-condition-select-group">
+            <% conditions.each do |condition| %>
+              <%= render partial: "condition_list_item_card", locals: {condition: condition, category: category } %> 
+            <% end %>
+          </div>
+        <% end %>
+      </sl-tab-panel>
+
+      <sl-tab-panel name="saved_filters" class="refine--advanced-condition-select">
+        <%= turbo_frame_tag dom_id(@criterion, :load), src: refine_advanced_inline_stored_filters_path(@criterion.to_params), loading: :lazy do %>
+          <div class="flex items-center justify-center p-9">
+            <%= sl_component(:spinner, class: "sl-spinner--medium") %>
+          </div> 
+        <% end %>
+      </sl-tab-panel>
+    </sl-tab-group>
+  </sl-dialog>
+<% end %>

data/app/views/refine/advanced_inline/criteria/new.turbo_stream.erb

@@ -0,0 +1,31 @@
+<% form_id = dom_id(@criterion, :form) %>
+
+<% puts "In New Turbo Stream" %>
+<%= turbo_stream.update dom_id(@criterion) do %>
+  <%= render "refine/advanced_inline/filters/popup",
+    frame_id: dom_id(@criterion), is_open: true do
+  %>
+    <%= tag.div class: "refine--inline-popup refine--criterion-fields",
+      data: {
+        controller: "refine--criterion-form",
+        refine__criterion_form_url_value: new_refine_advanced_inline_criterion_url(
+          @criterion.to_params),
+        refine__criterion_form_form_id_value: form_id
+      } do
+    %>
+      <%= fields model: @criterion do |form| %>
+        <%= render "form_fields", form: form, conjunction: @conjunction, position: @position, form_id: form_id %>
+      <% end %>
+    <% end %>
+    <% end %>
+<% end %>
+
+<%# The actual form tag is appended to the end of the body html.  Inputs are attached using the `form` attribute. This allows the query builder to be placed inside an outer form on the page. %>
+<%= turbo_stream.append_all "body" do %>
+  <%= form_with url: refine_advanced_inline_criteria_path,
+      method: :post,
+      id: form_id,
+      html: { autocomplete: "off" },
+      data: {controller: "refine--turbo-stream-form", action: "submit->refine--turbo-stream-form#submit"} %>
+<% end %>
+

data/app/views/refine/advanced_inline/filters/_add_first_condition_button.html.erb

@@ -0,0 +1,19 @@
+<% 
+  criterion = Refine::Inline::Criterion.new(
+    stable_id: @refine_filter.to_stable_id,
+    refine_filter: @refine_filter,
+    client_id: @refine_client_id,
+    conjunction: "and",
+    position: position
+  )
+%>
+
+ <%= render "refine/advanced_inline/filters/modal",
+    frame_id: dom_id(criterion),
+    src: refine_advanced_inline_criteria_path(criterion.to_params) do
+  %>
+  <button class="refine--add-condition-button refine--add-first-condition-button" href="#" data-action="click->refine--modal#open" type="button">
+    <span><%= t(".filter") %></span>
+    <span class="icon material-icons-outlined refine--icon-sm">add</span>
+  </button>
+<% end %>

data/app/views/refine/advanced_inline/filters/_and_button.html.erb

@@ -0,0 +1,30 @@
+<% 
+  criterion = Refine::Inline::Criterion.new(
+    stable_id: @refine_filter.to_stable_id,
+    refine_filter: @refine_filter,
+    client_id: @refine_client_id,
+    conjunction: "and",
+    position: position
+  )
+%>
+
+<% if @refine_filter.criteria_limit_reached? %>
+  <button disabled class="refine--add-condition-button refine--group-last-item refine--condition-pill-end" type="button" title="<%= t(".criteria_limit", criteria_limit: @refine_filter.criteria_limit) %>">
+    <% if show_label %>
+      <span class="refine--add-button-label"><%= t("refine.inline.filters.and_button.condition") %></span>
+    <% end %>
+    <span class="icon material-icons-outlined refine--icon-sm">add</span>
+  </button>
+<% else %>
+  <%= render "refine/advanced_inline/filters/modal",
+    frame_id: dom_id(criterion),
+    src: refine_advanced_inline_criteria_path(criterion.to_params) do
+  %>
+    <button class="refine--add-condition-button refine--group-last-item refine--condition-pill-end" type="button" data-action="click->refine--modal#open">
+      <% if show_label %>
+        <span class="refine--add-button-label"><%= t("refine.inline.filters.and_button.condition") %></span>
+      <% end %>
+      <span class="icon material-icons-outlined refine--icon-sm">add</span>
+    </button>
+  <% end %>
+<% end %>

data/app/views/refine/advanced_inline/filters/_clear_button.html.erb

@@ -0,0 +1,13 @@
+<% 
+  criterion = Refine::Inline::Criterion.new(
+    stable_id: @refine_filter.to_stable_id,
+    client_id: @refine_client_id,
+  )
+%>
+
+<%= link_to clear_refine_advanced_inline_criteria_path(criterion.to_params), method: :post,
+  class: "refine--clear-filter-link", data: {turbo_stream: true, turbo_method: :post} do %>
+    <span class="material-icons-outlined refine--icon-sm">clear</span>
+    <span class="refine--clear-filter-link-label"><%= t('refine.inline.filters.clear_filter') %></span>
+<% end %>
+

data/app/views/refine/advanced_inline/filters/_criterion.html.erb

@@ -0,0 +1,22 @@
+<%# Filter Pill partial %>
+
+<%= render "refine/advanced_inline/filters/popup",
+  frame_id: dom_id(criterion) do
+%>
+
+  <div class="refine--condition-pill-wrapper">
+    <div class="refine--condition-pill">
+      <%= link_to refine_advanced_inline_criterion_path(criterion.position, criterion.to_params), class: "refine--remove-condition", data: {turbo_method: :delete, controller: "refine--turbo-stream-link", action: "refine--turbo-stream-link#visit"} do %>
+        <span class="material-icons-outlined refine--icon-sm">clear</span>
+      <% end %>
+      <%= link_to edit_refine_advanced_inline_criterion_path(criterion.position, criterion.to_params), class:"refine--condition-pill-button", data: {controller: "refine--turbo-stream-link", action: "refine--turbo-stream-link#visit refine--popup#show"} do %>
+        <div class="refine--condition-pill-name"><%= criterion.condition_display %></div>
+        <div class="refine--condition-value-clause"><%= criterion.clause_display %></div>
+        <div class="refine--condition-value-self" title="<%= criterion.human_readable_value %>" data-controller="tooltip" data-tooltip-content-value="<%= criterion.human_readable_value %>">
+          <%= criterion.human_readable_value %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+<% end %>

data/app/views/refine/advanced_inline/filters/_group.html.erb

@@ -0,0 +1,4 @@
+  <% group.each.with_index do |criterion, i| %>
+    <%= render "refine/advanced_inline/filters/criterion", criterion: criterion, placement: i, size: group.length %>
+  <% end %>
+  <%= render "refine/advanced_inline/filters/and_button", position: group.last.position + 1, show_label: (group_count < 2 && condition_count < 2) %>

data/app/views/refine/advanced_inline/filters/_or_button.html.erb

@@ -0,0 +1,29 @@
+<% 
+  criterion = Refine::Inline::Criterion.new(
+    stable_id: @refine_filter.to_stable_id,
+    refine_filter: @refine_filter,
+    client_id: @refine_client_id,
+    conjunction: "or",
+    position: position
+  )
+%>
+
+<% if @refine_filter.criteria_limit_reached? %>
+  <div class="refine--add-group-wrapper">
+    <button disabled class="refine--add-group-button" type="button" title="<%= t(".criteria_limit", criteria_limit: @refine_filter.criteria_limit) %>">
+      <span class="refine--add-group-button-label"><%= t(".group") %></span>
+    </button>
+  </div>
+<% else %>
+  
+   <%= render "refine/advanced_inline/filters/modal",
+    frame_id: dom_id(criterion),
+    src: refine_advanced_inline_criteria_path(criterion.to_params) do
+  %>
+    <div class="refine--add-group-wrapper">
+      <button class="refine--add-group-button" type="button" data-action="click->refine--modal#open">
+        <span class="refine--add-group-button-label"><%= t(".group") %></span>
+      </button>
+    </div>
+  <% end %>
+<% end %>

data/app/views/refine/advanced_inline/filters/_or_separator.html.erb

@@ -0,0 +1,12 @@
+<% group_position ||= 0 %>
+
+<% unless group_position == 0 %>
+  <div class="refine--group-join-stack">
+    <div class="refine--group-join">
+      <%= t("refine.inline.filters.or") %>
+      <%= link_to merge_groups_refine_advanced_inline_criteria_path(group.first.to_params), class: "refine--remove-group", data: {turbo_method: :post, controller: "refine--turbo-stream-link", action: "refine--turbo-stream-link#visit"} do %>
+        <span class="material-icons-outlined refine--icon-sm">clear</span>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/refine/advanced_inline/filters/_popup.html.erb

@@ -0,0 +1,26 @@
+<%#
+  Generic partial for placing a button that will load popup content via hotwire.
+  Required params:
+    - frame_id (the DOM ID of the turbo frame)
+
+  Optional class:
+    - src (the URL to load popup content from)
+    - container_class (class attribute of the wrapper div. Defaults to "refine--inline-popup-container")
+    - frame_class (class attribute of the turbo frame. Defaults to "refine--inline-popup")
+
+  somewhere in your yield be sure to include a `data-action="click->refine--popup#show"` to trigger the the popup
+
+  Popup can be hidden with `data-action="click->refine--popup#hide"`
+%>
+
+<%
+  src ||= ""
+  container_class ||= "refine--inline-popup-container"
+  frame_class ||= "refine--inline-popup"
+  is_open ||= false
+%>
+
+<%= tag.div class: container_class, data: {controller: "refine--popup", refine__popup_src_value: src, refine__is_open_value: is_open } do %>
+    <%= yield %>
+  <%= turbo_frame_tag frame_id, class: frame_class, data: {refine__popup_target: "frame"} %>
+<% end %>

data/app/views/refine/advanced_inline/filters/_save_button.html.erb

@@ -0,0 +1,15 @@
+<% 
+  criterion = Refine::Inline::Criterion.new(
+    stable_id: @refine_filter.to_stable_id,
+    client_id: @refine_client_id,
+  )
+%>
+
+<%= turbo_frame_tag dom_id(criterion, :save) do %>
+  <%= link_to new_refine_advanced_inline_stored_filter_path(criterion.to_params),
+    class: "refine--save-filter-link", data: {turbo_stream: true} do %>
+      <span class="material-icons-outlined refine--icon-sm">save</span>
+      <span class="refine--save-filter-link-label"><%= t('refine.inline.filters.save_filter') %></span>
+  <% end %>
+<% end %>
+

data/app/views/refine/advanced_inline/filters/_show.html.erb

@@ -0,0 +1,38 @@
+<%
+  groups = Refine::Inline::Criterion.groups_from_filter(@refine_filter, client_id: @refine_client_id, stable_id: @refine_stable_id)
+
+  root_data = (defined?(data) && data) || {}
+
+  main_row_class = class_names "refine--filter-row" => true,
+    "refine--has-many-groups" => groups.many?
+%>
+
+<%= tag.div class: "refine--filter-wrapper", id: "refine-inline-filter-#{@refine_client_id}", data: root_data do %>
+  <%= tag.div class: main_row_class do %>
+    <% if @refine_filter.blueprint.empty? %>
+      <%= render "refine/advanced_inline/filters/add_first_condition_button", position: 0, btn_class: "refine--add-first-condition-btn" %>
+    <% else %>
+      <div class="refine--groups-wrapper">
+        <% groups.each.with_index do |group, i| %>
+          <%= render "refine/advanced_inline/filters/or_separator", group: group, group_position: i %>
+          <%= render "refine/advanced_inline/filters/group", group: group, group_count: groups.count, condition_count: group.count %>
+          <% if i == groups.length - 1 %>
+            <%= render "refine/advanced_inline/filters/or_button", position: @refine_filter.blueprint.length %>
+          <% end %>
+        <% end %>
+
+      </div>
+    <% end %>
+   <% if @refine_filter.blueprint&.any? %>
+      <div class="refine--filter-control-group">
+        <%= render "refine/advanced_inline/filters/clear_button" %>
+        <%= render "refine/advanced_inline/filters/save_button" %>
+      </div>
+    <% end %> 
+  <% end %>
+  
+<% end %>
+
+
+
+

data/app/views/refine/advanced_inline/inputs/_date_condition.html.erb

@@ -0,0 +1,9 @@
+<% if input_fields.object.clause.in? ["exct", "gt", "lt"] %>
+  <%= render "refine/inline/inputs/date_condition_days", input_fields: input_fields, criterion: criterion, form_id: form_id %>
+<% elsif input_fields.object.clause.in? ["btwn", "nbtwn"] %>
+  <%= render "refine/inline/inputs/date_condition_range", input_fields: input_fields, criterion: criterion, form_id: form_id %>
+<% elsif input_fields.object.clause.in? ['st', 'nst'] %>
+  <!-- render nothing -->
+<% else %>
+  <%= render "refine/inline/inputs/date_condition_single", input_fields: input_fields, criterion: criterion, form_id: form_id %>
+<% end %>

data/app/views/refine/advanced_inline/inputs/_date_condition_days.html.erb

@@ -0,0 +1,18 @@
+<div class="refine--date-condition-days-container">
+  <%= input_fields.label :days, t(".number_of_days"), class: "sr-only" %>
+  <%= input_fields.text_field :days,
+    class: "refine--input",
+    placeholder: criterion.condition.display.downcase,
+    form: form_id
+  %>
+</div>
+<div class="refine--date-condition-days-modifier-container">
+  <%= input_fields.collection_select :modifier,
+    Refine::Inline::Criteria::Input::MODIFIERS,
+    :first,
+    :last,
+    {},
+    class: "refine--select",
+    form: form_id
+  %>
+</div>

data/app/views/refine/advanced_inline/inputs/_date_condition_range.html.erb

@@ -0,0 +1,22 @@
+<%= tag.div class: "refine--date-condition-first-date-container-btwn" do %>
+  <%= render "refine/inline/inputs/date_picker",
+    input_fields: input_fields,
+    attribute: :date1,
+    value: input_fields.object.date1,
+    label: "#{criterion.condition.display.downcase} (#{t('.min')})",
+    form_id: form_id
+  %>
+
+  <div class="refine--date-condition-and"><%= t(".and") %></div>
+
+  <div class="refine--date-condition-second-date-container">
+    <%= render "refine/inline/inputs/date_picker",
+      input_fields: input_fields,
+      attribute: :date2,
+      value: input_fields.object.date2,
+      label: "#{criterion.condition.display.downcase} (#{t('.max')})",
+      form_id: form_id
+    %>
+  </div>
+<% end %>
+

data/app/views/refine/advanced_inline/inputs/_date_condition_single.html.erb

@@ -0,0 +1,9 @@
+<%= tag.div class: "refine--date-condition-first-date-container" do %>
+  <%= render "refine/inline/inputs/date_picker",
+    input_fields: input_fields,
+    attribute: :date1,
+    value: input_fields.object.date1,
+    label: criterion.condition.display.downcase,
+    form_id: form_id
+  %>
+<% end %>

data/app/views/refine/advanced_inline/inputs/_date_picker.html.erb

@@ -0,0 +1,20 @@
+<div 
+  data-controller="refine--date" 
+  class="refine-date-picker-container"
+  data-refine--date-locale-value="<%= I18n.locale %>"
+  data-refine--date-date-format-value="<%=  I18n.t("refine.date.formats.moment") %>"
+  data-refine--date-datetime-format-value="<%= I18n.t("refine.time.formats.moment") %>"
+>
+  <input
+    class="refine--input"
+    type="text"
+    value="<%= value&.to_date && I18n.l(value&.to_date, format: I18n.t("refine.date.formats.ruby"))  %>"
+    data-refine--date-target="field"
+    placeholder="<%= label %>"
+  />
+  <%= input_fields.hidden_field attribute,
+    value: value&.to_date&.strftime('%Y-%m-%d'),
+    data: { refine__date_target: "hiddenField" },
+    form: form_id
+  %>
+</div>

data/app/views/refine/advanced_inline/inputs/_numeric_condition.html.erb

@@ -0,0 +1,23 @@
+<%
+  is_range = ['btwn', 'nbtwn'].include? input_fields.object.clause
+  value1_placeholder = criterion.condition.display.downcase
+  value1_placeholder += " (#{t('.min')})" if is_range
+  value2_placeholder = "#{criterion.condition.display.downcase} (#{t('.max')})"
+%>
+
+<%= tag.div class: ('btwn' ? 'refine--numeric-condition-container' : 'refine-numeric-condition-container-btwn') do %>
+
+  <%= input_fields.text_field :value1,
+    class: "refine--input refine--numeric-input",
+    placeholder: value1_placeholder,
+    form: form_id
+  %>
+
+  <% if is_range %>
+    <div class="refine--numeric-condition-and"><%= t(".and") %></div>
+    <div class="refine--numeric-condition-second-container">
+      <%= input_fields.text_field :value2, class: "refine--input refine--numeric-input", placeholder: value2_placeholder,
+form: form_id %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/refine/advanced_inline/inputs/_option_condition.html.erb

@@ -0,0 +1,27 @@
+<div class="refine--option-condition-container" data-controller="refine--typeahead-list">
+  <div class="refine--search-box">
+    <span class="material-icons refine--icon-search">search</span>
+    <input class="refine--search-trigger" data-search-target="filterProperties" placeholder="<%= t('.type_to_search') %>..." type="text" data-action="refine--typeahead-list#filter" autofocus>
+  </div>
+
+  <div class="refine--option-list">
+    <% criterion.options.each do |option| %>
+      <%= tag.label class: "refine--option-label",
+        data: {
+          refine__typeahead_list_target: "listItem",
+          list_item_value: option.display
+        } do
+      %>
+        <% if criterion.multiple? %>
+          <%= check_box_tag input_fields.field_name("selected", multiple: true), option.id, criterion.input.selected.to_a.include?(option.id), class: "refine--option-input", form: form_id %>
+        <% else %>
+          <%= radio_button_tag input_fields.field_name("selected"), option.id, (criterion.input.selected == [option.id]), class: "refine--option-input", form: form_id %>
+        <% end %>
+        <span class="refine--option-text" title="<%= option.display %>"><%= option.display.truncate(64) %></span>
+      <% end %>
+    <% end %>
+    <% if criterion.condition.meta[:postfix] %>
+      <span class="refine-option--condition-postfix"><%= meta[:postfix] %></span>
+    <% end %>
+  </div>
+</div>

data/app/views/refine/advanced_inline/inputs/_text_condition.html.erb

@@ -0,0 +1,8 @@
+<div class="refine--text-condition-container">
+  <%= form.label :condition_id, criterion.condition.display, class: "sr-only" %>
+  <%= input_fields.text_field :value,
+    class: "refine--input refine--text-input #{"has-error" if criterion.errors.any?}",
+    placeholder: criterion.condition.display.downcase,
+    form: form_id
+  %>
+</div>

data/app/views/refine/advanced_inline/stored_filters/find.turbo_stream.erb

@@ -0,0 +1,19 @@
+<%= turbo_stream.append_all "body" do %>
+  <script>
+    (function() {
+      const event = new CustomEvent("filter-submit-success", {
+        bubbles: true,
+        detail: {
+          stableId: <%= @refine_stable_id.to_json.html_safe %>,
+          url: <%= @url_for_redirect.to_json.html_safe %>,
+          formId: <%= @refine_client_id.to_json.html_safe %>
+        }
+      })
+      document
+        .getElementById(<%= "refine-inline-filter-#{@refine_client_id}".to_json.html_safe %>)
+        .dispatchEvent(event)
+    })()
+  </script>
+<% end %>
+
+<%= turbo_stream.replace "refine-inline-filter-#{@refine_client_id}", partial: "refine/advanced_inline/filters/show" %>

data/app/views/refine/advanced_inline/stored_filters/index.html.erb

@@ -0,0 +1,28 @@
+<%= turbo_frame_tag dom_id(@criterion, :load), class: "refine--stored-filter-list-window" do %>
+  <div class="refine--stored-filter-list">
+    <% if @stored_filters.empty? %>
+      <a><%= t('.no_stored_filters') %></a>
+    <% end %>
+
+
+    <% @stored_filters.each do |filter| %>
+      <%= puts filter.inspect %>
+      <%= form_with(
+          model: @criterion,
+          url: find_refine_advanced_inline_stored_filters_path,
+          method: :post,
+          class: "refine--stored-filter-search-form",
+          data: {
+            controller: "refine--submit-form"
+          }) do |form| %>
+        <!-- Saved filter selector -->
+          <%= form.hidden_field :stable_id %>
+          <%= form.hidden_field :client_id %>
+          <%= hidden_field_tag :id, filter.id %>
+          <a href="#" class="refine--stored-filter-list-item" data-action="refine--submit-form#submit">
+            <%= filter.name %>
+          </a>
+        <% end %>
+    <% end %>
+  </div>
+<% end %>

data/app/views/refine/advanced_inline/stored_filters/new.turbo_stream.erb

@@ -0,0 +1,47 @@
+<% form_id = dom_id(@criterion, :save_form) %>
+
+<%= turbo_stream.update dom_id(@criterion, :save) do %>
+  <% if false && @stored_filter.errors.any? # TODO place in tooltip%>
+    <% @stored_filter.errors.full_messages.each do |message|%>
+      <p class="refine-stored-filter-error"><%= message %></p>
+    <% end %>
+  <% end %>
+
+  <%= tag.div class: "refine--save-filter-form" do %>
+
+    <%= fields model: @criterion do |criteria_fields| %>
+      <%= criteria_fields.hidden_field :client_id, form: form_id %>
+      <%= criteria_fields.hidden_field :stable_id, form: form_id %>
+    <% end %>
+
+    <%= fields model: @stored_filter do |stored_filter_fields| %>
+      <%= stored_filter_fields.label :name, "#{t('.save_filter_label')}" %>
+
+      <%# TODO replace with content-editable that writes to hidden input %>
+      <div class="refine--save-filter-input-wrapper">
+        <div class="refine--tooltip"><%= sanitize t('.tooltip') %></div>
+
+        <%= stored_filter_fields.text_field :name,
+          class: "refine--save-filter-input",
+          placeholder: t('.save_filter_placeholder'),
+          autofocus: true,
+          form: form_id
+         %>
+      </div>
+    <% end %>
+
+  <% end %>
+<% end %>
+
+
+<%# The actual form tag is appended to the end of the body html.  Inputs are attached using the `form` attribute. This allows the query builder to be placed inside an outer form on the page. %>
+<%= turbo_stream.append_all "body" do %>
+  <%= form_with(
+    url: refine_advanced_inline_stored_filters_path,
+    method: :post,
+    class: "refine--save-filter-form",
+    id: form_id,
+    data: {
+      turbo_frame: dom_id(@criterion, :save)
+    }) %>
+<% end %>

data/app/views/refine/inline/criteria/_condition_list_item.html.erb

@@ -16,12 +16,5 @@
   {
     class: "refine--condition-list-item",
   }.merge(data: data)) do %>
-  <% if condition.has_icon? %>
-    <% if condition.icon_class.present? %>
-      <i class="<%= condition.icon_class %>"></i>
-    <% else %>
-      <%= render partial: condition.icon_template[:template_path], locals: condition.icon_template[:locals] %>
-    <% end %>
-  <% end %>
   <%= condition.display %>
 <% end %>

data/app/views/refine/inline/filters/_add_first_condition_button.html.erb

@@ -6,18 +6,13 @@
     conjunction: "and",
     position: position
   )
-  use_modal ||= false
-  fill_modal ||= false
-  src = use_modal ? index_advanced_refine_inline_criteria_path(criterion.to_params.merge(fill_modal: fill_modal)) : refine_inline_criteria_path(criterion.to_params)
 %>
 
- <%= render "refine/inline/filters/modal_or_popup",
+ <%= render "refine/inline/filters/popup",
     frame_id: dom_id(criterion),
-    use_modal: use_modal,
-    fill_modal: fill_modal,
-    src: src do
+    src: refine_inline_criteria_path(criterion.to_params) do
   %>
-  <button class="refine--add-condition-button refine--add-first-condition-button" href="#" data-action="click->refine--popup#show click->refine--modal#open" type="button">
+  <button class="refine--add-condition-button refine--add-first-condition-button" href="#" data-action="click->refine--popup#show" type="button">
     <span><%= t(".filter") %></span>
     <span class="icon material-icons-outlined refine--icon-sm">add</span>
   </button>