refine-rails 2.10.1 → 2.11.1

data/app/assets/stylesheets/index.css

@@ -1203,20 +1203,23 @@
 .refine--filter-wrapper {
   font-size: 14px;
   display: flex;
-  flex-direction: column;
+  /* flex-direction: column; */
   gap: 12px;
   margin-top: 12px;
 }
 
 .refine--filter-row {
   display: flex;
+  width: 100%;
   gap: 10px;
   row-gap: 15px;
   align-items: center;
-  flex-wrap: wrap;
+  align-items: start;
+  justify-content: space-between;
 }
 
 .refine--groups-wrapper {
+  flex-grow: 1;
   display: flex;
   gap: 10px;
   row-gap: 15px;
@@ -1224,6 +1227,11 @@
   flex-wrap: wrap;
 }
 
+.refine--filter-control-group {
+  text-wrap: nowrap;
+  display: flex;
+}
+
 .refine--group-join, .refine--condition-join {
   position: relative;
   padding: 5px 0;
@@ -1250,6 +1258,7 @@
   position: relative;
   padding: 0 10px;
   align-items: center;
+  flex-wrap: wrap;
   &:before , &:after {
     content: "";
     position: absolute;
@@ -1304,13 +1313,58 @@
   text-decoration: none;
 }
 
-.refine--condition-pill-wrapper-wrapper {
+.refine--condition-pill-wrapper {
   display: flex;
   align-items: center;
   gap: 5px;
   position: relative;
 }
 
+.refine--condition-pill-start {
+  padding: 0 0 0 10px;
+  &:before {
+    content: "";
+    position: absolute;
+    left: -10px;
+    top: -2px;
+    bottom: -2px;
+    border: 2px solid #eee;
+    width: 3px;
+  }
+  &:hover {
+    &:before{
+      border-color: #aaa;
+    }
+  }
+  &:before {
+    border-radius: 6px 0 0 6px;
+    left: 0;
+    border-right: none;
+  }
+}
+
+.refine--condition-pill-end {
+  padding: 0 10px 0 0;
+  &:after {
+    content: "";
+    position: absolute;
+    right: -10px;
+    top: -6px;
+    bottom: -6px;
+    border: 2px solid #eee;
+    width: 3px;
+  }
+  &:hover {
+    &:after {
+      border-color: #aaa;
+    }
+  }
+  &:after {
+    border-radius: 0 6px 6px 0;
+    border-left: none;
+  }
+}
+
 .refine--condition-pill {
   background-color: #fff;
   border: 1px solid #bbb;
@@ -1634,10 +1688,6 @@ input.refine--text-condition-input:focus {
   text-decoration: none;
 }
 
-.refine--save-filter-link-label {
-  border-bottom: 1px dotted #111;
-}
-
 /*
   *********************************************
   Inline Final Styles
@@ -1670,6 +1720,7 @@ input.refine--text-condition-input:focus {
   padding: 5px;
   align-items: center;
   background-color: #fff;
+  position: relative;
   &:disabled {
     color: #111;
     background-color: #f8f8f8;
@@ -1681,6 +1732,10 @@ input.refine--text-condition-input:focus {
   }
 }
 
+.refine--add-group-button {
+  margin-left: 10px;
+}
+
 .refine--has-many-groups .refine--add-button-label {
   display: none;
 }
@@ -1791,16 +1846,20 @@ button.refine--apply-button {
   }
 }
 
-.refine--save-filter-link {
+.refine--save-filter-link, .refine--clear-filter-link {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 14px;
-  padding: 3px 0;
+  padding: 3px 0 3px 10px;
   border: 1px solid transparent;
   border-radius: 6px;
 }
 
+.refine--save-filter-link-label, .refine--clear-filter-link-label {
+  border-bottom: 1px dotted #111;
+}
+
 .refine--save-filter-input-wrapper {
   display: flex;
   gap: 5px;

data/app/assets/stylesheets/index.tailwind.css

@@ -382,20 +382,23 @@
 .refine--filter-wrapper {
   font-size: 14px;
   display: flex;
-  flex-direction: column;
+  /* flex-direction: column; */
   gap: 12px;
   margin-top: 12px;
 }
 
 .refine--filter-row {
   display: flex;
+  width: 100%;
   gap: 10px;
   row-gap: 15px;
   align-items: center;
-  flex-wrap: wrap;
+  align-items: start;
+  justify-content: space-between;
 }
 
 .refine--groups-wrapper {
+  flex-grow: 1;
   display: flex;
   gap: 10px;
   row-gap: 15px;
@@ -403,6 +406,11 @@
   flex-wrap: wrap;
 }
 
+.refine--filter-control-group {
+  text-wrap: nowrap;
+  display: flex;
+}
+
 .refine--group-join, .refine--condition-join {
   position: relative;
   padding: 5px 0;
@@ -429,6 +437,7 @@
   position: relative;
   padding: 0 10px;
   align-items: center;
+  flex-wrap: wrap;
 
   &:before , &:after {
     content: "";
@@ -484,13 +493,59 @@
   text-decoration: none;
 }
 
-.refine--condition-pill-wrapper-wrapper {
+.refine--condition-pill-wrapper {
   display: flex;
   align-items: center;
   gap: 5px;
   position: relative;
 }
 
+.refine--condition-pill-start {
+  padding: 0 0 0 10px;
+  &:before {
+    content: "";
+    position: absolute;
+    left: -10px;
+    top: -2px;
+    bottom: -2px;
+    border: 2px solid #eee;
+    width: 3px;
+  }
+  &:hover {
+    &:before{
+      border-color: #aaa;
+    }
+  }
+  &:before {
+    border-radius: 6px 0 0 6px;
+    left: 0;
+    border-right: none;
+  }
+  
+}
+
+.refine--condition-pill-end {
+  padding: 0 10px 0 0;
+  &:after {
+    content: "";
+    position: absolute;
+    right: -10px;
+    top: -6px;
+    bottom: -6px;
+    border: 2px solid #eee;
+    width: 3px;
+  }
+  &:hover {
+    &:after {
+      border-color: #aaa;
+    }
+  }
+  &:after {
+    border-radius: 0 6px 6px 0;
+    border-left: none;
+  }
+}
+
 .refine--condition-pill {
   background-color: #fff;
   border: 1px solid #bbb;
@@ -805,9 +860,6 @@ input.refine--text-condition-input:focus {
   text-decoration: none;
 }
 
-.refine--save-filter-link-label {
-  border-bottom: 1px dotted #111;
-}
 /*
   *********************************************
   Inline Final Styles
@@ -821,14 +873,14 @@ input.refine--text-condition-input:focus {
 
 .refine--add-condition-button.refine--add-first-condition-button,
 .refine--add-condition-group-button.refine--add-first-condition-button {
-    border: 1px dotted #aaa;
-    padding-right: 8px;
-    line-height: 16px;
-    &:hover {
-      background-color: #fff;
-      border-style: solid;
-      color: #111;
-    }
+  border: 1px dotted #aaa;
+  padding-right: 8px;
+  line-height: 16px;
+  &:hover {
+    background-color: #fff;
+    border-style: solid;
+    color: #111;
+  }
 }
 
 .refine--add-condition-button, .refine--add-group-button {
@@ -840,6 +892,7 @@ input.refine--text-condition-input:focus {
   padding: 5px;
   align-items: center;
   background-color: #fff;
+  position: relative;
   &:disabled {
     color: #111;
     background-color: #f8f8f8;
@@ -851,6 +904,10 @@ input.refine--text-condition-input:focus {
   }
 }
 
+.refine--add-group-button {
+  margin-left: 10px;
+}
+
 .refine--has-many-groups .refine--add-button-label {
   display: none;
 }
@@ -955,16 +1012,19 @@ button.refine--apply-button {
   }
 }
 
-.refine--save-filter-link {
+.refine--save-filter-link, .refine--clear-filter-link {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 14px;
-  padding: 3px 0;
+  padding: 3px 0 3px 10px;
   border: 1px solid transparent;
   border-radius: 6px;
 }
 
+.refine--save-filter-link-label, .refine--clear-filter-link-label {
+  border-bottom: 1px dotted #111;
+}
 .refine--save-filter-input-wrapper {
   display: flex;
   gap: 5px;

data/app/controllers/refine/inline/criteria_controller.rb

@@ -1,7 +1,6 @@
 class Refine::Inline::CriteriaController < ApplicationController
   layout false
   before_action :set_refine_filter
-
   # List available conditions for new criteria
   # Carries position and index forward
   def index
@@ -88,8 +87,18 @@ class Refine::Inline::CriteriaController < ApplicationController
     handle_filter_update(@refine_filter.to_stable_id)
   end
 
+  def clear
+    @refine_filter.clear_blueprint!
+    @criterion = Refine::Inline::Criterion.new(criterion_params.merge(refine_filter: @refine_filter))
+    handle_filter_update()
+  end
+
   private
 
+  def set_blank_filter
+    @refine_filter = Refine::Rails.configuration.stabilizer_classes[:url].new
+  end
+
   def set_refine_filter
     @refine_filter ||= Refine::Rails.configuration.stabilizer_classes[:url]
       .new
@@ -131,12 +140,14 @@ class Refine::Inline::CriteriaController < ApplicationController
   end
 
   # either directly redirect or emit a `filter-submit-success` event
-  def handle_filter_update(stable_id)
+  def handle_filter_update(stable_id=nil)
     # update_stable_id in url
     uri = URI(request.referrer)
     new_query_ar = URI.decode_www_form(String(uri.query))
     new_query_ar.reject! { |(k, _v)| k == "stable_id" }
-    new_query_ar << ["stable_id", stable_id]
+    if stable_id
+      new_query_ar << ["stable_id", stable_id]
+    end
     uri.query = URI.encode_www_form(new_query_ar)
 
     respond_to do |format|
@@ -146,7 +157,9 @@ class Refine::Inline::CriteriaController < ApplicationController
         @refine_client_id = @criterion.client_id
         render :create
       end
-      format.html {redirect_to uri.to_s }
+      format.html do 
+        redirect_to uri.to_s 
+      end
     end
   end
 

data/app/models/refine/conditions/condition.rb

@@ -10,6 +10,7 @@ module Refine::Conditions
     include HasMeta
     include UsesAttributes
     include HasRefinements
+    include HasIcon
 
     attr_reader :ensurances, :before_validations, :clause, :filter
     attr_accessor :display, :id, :is_refinement, :attribute

data/app/models/refine/conditions/has_icon.rb

@@ -0,0 +1,24 @@
+module Refine::Conditions::HasIcon
+  def icon_class
+    @icon_class ||= nil
+  end
+
+  def icon_template
+    @icon_template ||= {}
+  end
+
+  def with_icon_class(icon_class)
+    @icon_class = icon_class
+    self
+  end
+
+  def with_icon_template(template_path:, locals: {})
+    @icon_template = { template_path: template_path, locals: locals }
+    self
+  end
+
+  def has_icon?
+    icon_class.present? || !icon_template.empty?
+  end
+
+end

data/app/models/refine/filter.rb

@@ -316,5 +316,9 @@ module Refine
     def has_category_ordering?
       respond_to?(:category_order) && category_order.is_a?(Array) && category_order.any?
     end
+
+    def clear_blueprint!
+      @blueprint = []
+    end
   end
 end

data/app/views/refine/blueprints/_condition_select.html.erb

@@ -65,7 +65,9 @@
             value="<%= condition_option[:id] %>"
             <% if selected_condition_id == condition_option[:id] %>selected<% end %>
             title="<%= condition_option[:display] %>"
-          ><%= condition_option[:display] %></option>
+          >
+            <%= condition_option[:display] %>
+          </option>
         <% end %>
       </optgroup>
     <% end %>

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

@@ -0,0 +1,27 @@
+<% 
+  category ||= nil
+
+  data = {
+    controller: "refine--turbo-stream-link",
+    action: "refine--turbo-stream-link#visit",
+    refine__typeahead_list_target: "listItem",
+    list_item_value: condition.display,
+  } 
+  if category && category.present?
+    data[:category] = category
+  end
+%>
+<%= link_to(
+  new_refine_inline_criterion_url(@criterion.to_params.deep_merge(refine_inline_criterion: {condition_id: condition.id})),
+  {
+    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/criteria/index.html.erb

@@ -43,49 +43,21 @@
     <div class="refine--condition-list">
       <% if uncategorized_conditions&.any? %>
         <% uncategorized_conditions.each do |condition| %>
-          <%= link_to condition.display,
-            new_refine_inline_criterion_url(@criterion.to_params.deep_merge(refine_inline_criterion: {condition_id: condition.id})),
-            class: "refine--condition-list-item",
-            data: {
-              controller: "refine--turbo-stream-link",
-              action: "refine--turbo-stream-link#visit",
-              refine__typeahead_list_target: "listItem",
-              list_item_value: condition.display
-            }
-          %>
-          <% end %>
+          <%= render partial: "condition_list_item", locals: {condition: condition } %> 
+        <% end %>
       <% end %>
 
       <% if recommended_conditions.any? %>
         <b data-refine--typeahead-list-target="recommended"><%= t('.recommended') %></b>
         <% recommended_conditions.each do |condition| %>
-          <%= link_to condition.display,
-            new_refine_inline_criterion_url(@criterion.to_params.deep_merge(refine_inline_criterion: {condition_id: condition.id})),
-            class: "refine--condition-list-item",
-            data: {
-              controller: "refine--turbo-stream-link",
-              action: "refine--turbo-stream-link#visit",
-              refine__typeahead_list_target: "listItem",
-              list_item_value: condition.display
-            }
-          %>
+          <%= render partial: "condition_list_item", locals: {condition: condition } %> 
         <% end %>
       <% end %>
 
       <%  categorized_conditions.each do |(category, conditions)| %>
         <b data-refine--typeahead-list-target="category"><%= category %></b>
         <% conditions.each do |condition| %>
-          <%= link_to condition.display,
-            new_refine_inline_criterion_url(@criterion.to_params.deep_merge(refine_inline_criterion: {condition_id: condition.id})),
-            class: "refine--condition-list-item",
-            data: {
-              controller: "refine--turbo-stream-link",
-              action: "refine--turbo-stream-link#visit",
-              refine__typeahead_list_target: "listItem",
-              list_item_value: condition.display,
-              category: category
-            }
-          %>
+          <%= render partial: "condition_list_item", locals: {condition: condition, category: category } %> 
         <% end %>
       <% end %>
     </div>

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

@@ -9,7 +9,7 @@
 %>
 
 <% if @refine_filter.criteria_limit_reached? %>
-  <button disabled class="refine--add-condition-button" type="button" title="<%= t(".criteria_limit", criteria_limit: @refine_filter.criteria_limit) %>">
+  <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) %>">
     <span class="icon material-icons-outlined refine--icon-sm">add</span>
     <span class="refine--add-button-label"><%= t("refine.inline.filters.and_button.condition") %></span>
   </button>
@@ -18,7 +18,7 @@
     frame_id: dom_id(criterion),
     src: refine_inline_criteria_path(criterion.to_params) do
   %>
-    <button class="refine--add-condition-button" type="button" data-action="click->refine--popup#show">
+    <button class="refine--add-condition-button refine--group-last-item refine--condition-pill-end" type="button" data-action="click->refine--popup#show">
       <span class="icon material-icons-outlined refine--icon-sm">add</span>
       <span class="refine--add-button-label"><%= t("refine.inline.filters.and_button.condition") %></span>
     </button>

data/app/views/refine/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_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/inline/filters/_criterion.html.erb

@@ -1,10 +1,15 @@
 <%# Filter Pill partial %>
+<% 
+  pill_class = if placement == 0
+    "refine--condition-pill-start"
+  end
+%>
 
 <%= render "refine/inline/filters/popup",
   frame_id: dom_id(criterion) do
 %>
 
-  <div class="refine--condition-pill-wrapper">
+  <div class="refine--condition-pill-wrapper <%= pill_class %>">
     <div class="refine--condition-pill">
       <%= link_to criterion.condition_display, edit_refine_inline_criterion_path(criterion.position, criterion.to_params), class: "refine--condition-pill-name", data: {controller: "refine--turbo-stream-link", action: "refine--turbo-stream-link#visit"} %>
       <div class="refine--remove-condition"></div>

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

@@ -1,13 +1,7 @@
-<div class="refine--group">
-  <div class="refine--group-conditions-wrapper">
-    <div class="refine--group-conditions">
-      <% group.each.with_index do |criterion, i| %>
-        <% unless i == 0 %>
-          <div class="refine--condition-join"><%= t(".and") %></div>
-        <% end %>
-        <%= render "refine/inline/filters/criterion", criterion: criterion %>
-      <% end %>
-    </div>
-    <%= render "refine/inline/filters/and_button", position: group.last.position + 1 %>
-  </div>
-</div>
+<% group.each.with_index do |criterion, i| %>
+  <% unless i == 0 %>
+    <div class="refine--condition-join"><%= t(".and") %></div>
+  <% end %>
+  <%= render "refine/inline/filters/criterion", criterion: criterion, placement: i, size: group.length %>
+<% end %>
+<%= render "refine/inline/filters/and_button", position: group.last.position + 1 %>

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

@@ -1,38 +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}" do %>
+<%= 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/inline/filters/add_first_condition_button", position: 0, btn_class: "
-      refine--add-first-condition-btn" %>
+      <%= render "refine/inline/filters/add_first_condition_button", position: 0, btn_class: "refine--add-first-condition-btn" %>
     <% else %>
-      <div class="refine--filter-label">
-        <%= t('refine.inline.filters.filter') %>: 
-      </div>
       <div class="refine--groups-wrapper">
         <% groups.each.with_index do |group, i| %>
           <% unless i == 0 %>
-            <div class="refine--group-join"><%= t("refine.inline.filters.or") %></div>
-          <% end %>
-
-          <%= render "refine/inline/filters/group", group: group %>
+              <div class="refine--group-join"><%= t("refine.inline.filters.or") %></div>
+            <% end %>
+            <%= render "refine/inline/filters/group", group: group %>
+            <% if i == groups.length - 1 %>
+              <%= render "refine/inline/filters/or_button", position: @refine_filter.blueprint.length %>
+            <% end %>
         <% end %>
 
-        <div class="refine--group">
-          <div class="refine--group-conditions-wrapper">
-            <%= render "refine/inline/filters/or_button", position: @refine_filter.blueprint.length %>
-          </div>
-        </div>
-        <%= render "refine/inline/filters/save_button" %>
-        
       </div>
     <% end %>
+   <% if @refine_filter.blueprint&.any? %>
+      <div class="refine--filter-control-group">
+        <%= render "refine/inline/filters/clear_button" %>
+        <%= render "refine/inline/filters/save_button" %>
+      </div>
+    <% end %> 
   <% end %>
+  
 <% end %>
 
 

data/config/locales/en/refine.en.yml

@@ -58,7 +58,8 @@ en:
         or_button: "+ Add OR Group"
         filter: "Filter"
         criteria_limit: "You can only create up to %{criteria_limit} filter conditions"
-        save_filter: "Save Filter"
+        save_filter: "Save"
+        clear_filter: "Clear"
         or: "or"
         clear: "clear"
       inputs:

data/config/routes.rb

@@ -8,7 +8,9 @@ Rails.application.routes.draw do
       post "find", on: :collection
     end
     namespace :inline do
-      resources :criteria, except: [:show]
+      resources :criteria, except: [:show] do
+        post "clear", on: :collection
+      end
       resources :stored_filters, only: [:index, :new, :create] do
         post "find", on: :collection
       end