Feature - inline ui can now merge OR groupings

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 2.11.5
+  * New Feature - Adds the ability to delete OR groupings which merge them as AND conjunctions
+  * Inline UI - adds support for stimulus tooltip plugins
+  * Inline UI - tweaks to responsive behavior of the toolbar
 ### 2.11.4
   * Inline UI - Fixing bug with popup edit modals so clicking outside properly closes them
 ### 2.11.3

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    refine-rails (2.11.4)
+    refine-rails (2.11.5)
       rails (>= 6.0)
 
 GEM

app/assets/stylesheets/index.tailwind.css

@@ -418,12 +418,23 @@
   flex-wrap: wrap;
   display: flex;
   align-items: center;
+  justify-content: end;
 }
 
-@media (max-width: 960px) {
+
+@media (max-width: 1525px) {
+  .refine--filter-control-group {
+    width: 24%;
+  }
+}
+@media (max-width: 1200px) {
+  .refine--filter-control-group {
+    width: 30%; 
+  }
+}
+@media (max-width: 1100px) {
   .refine--filter-control-group {
-    justify-content: end;
-    width: 25%; 
+    width: 40%; 
   }
 }
 
@@ -444,6 +455,14 @@
   text-align: left;
 }
 
+.refine--group-join {
+  &:hover {
+    .refine--remove-group {
+      display: block;
+    }
+  }
+}
+
 .refine--group {
   display: flex;
   gap: 10px;
@@ -563,7 +582,7 @@
   padding: 4px;
 }
 
-.refine--remove-condition {
+.refine--remove-condition, .refine--remove-group {
   display: none;
   color: #fff;
   padding: 0px 2px 0px 2px;
@@ -580,15 +599,15 @@
   .icon.refine--icon-sm {
     padding: 2px 0 ;
   }
-
-}
-&:hover {
-  border-color: #999;
-  .remove-applied-condition {
-    display: block;
+  &:hover {
+    border-color: #999;
+    .remove-applied-condition {
+      display: block;
+    }
   }
 }
 
+
 .refine--condition-value-wrapper {
   position: absolute;
   top: 100%;

app/controllers/refine/inline/criteria_controller.rb

@@ -93,12 +93,17 @@ def clear
     handle_filter_update()
   end
 
-  private
+  def merge_groups
+    @criterion = Refine::Inline::Criterion.new(criterion_params.merge(refine_filter: @refine_filter)) 
+    Refine::Filters::BlueprintEditor
+    .new(@refine_filter.blueprint)
+    .change_conjunction(criterion_params[:position].to_i - 1, "and")
 
-  def set_blank_filter
-    @refine_filter = Refine::Rails.configuration.stabilizer_classes[:url].new
+    handle_filter_update(@refine_filter.to_stable_id)
   end
 
+  private
+
   def set_refine_filter
     @refine_filter ||= Refine::Rails.configuration.stabilizer_classes[:url]
       .new

app/models/refine/filters/blueprint_editor.rb

@@ -59,6 +59,14 @@ def update(index, criterion:)
     blueprint[index][:input] = input
   end
 
+  def change_conjunction(index, conjunction_word)
+    if conjunction_word == "and"
+      blueprint[index][:word] = "and"
+    elsif conjunction_word == "or"
+      blueprint[index][:word] = "or"
+    end
+  end
+
   def delete(index)
    # To support 'groups' there is some complicated logic for deleting criterion.
    #

app/views/refine/inline/filters/_criterion.html.erb

@@ -12,7 +12,7 @@
       <%= link_to edit_refine_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 %>">
+        <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 %>

app/views/refine/inline/filters/_or_separator.html.erb

@@ -0,0 +1,16 @@
+<% group_position ||= 0 %>
+
+<% unless group_position == 0 %>
+  <% if render_stack %>
+    <div class="refine--group-join-stack">
+  <% end %>
+  <div class="refine--group-join">
+    <%= t("refine.inline.filters.or") %>
+    <%= link_to merge_groups_refine_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>
+  <% if render_stack %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -15,15 +15,7 @@
     <% else %>
       <div class="refine--groups-wrapper">
         <% groups.each.with_index do |group, i| %>
-          <% unless i == 0 %>
-            <% if render_stack %>
-              <div class="refine--group-join-stack">
-            <% end %>
-              <div class="refine--group-join"><%= t("refine.inline.filters.or") %></div>
-            <% if render_stack %>
-              </div>
-            <% end %>
-          <% end %>
+          <%= render "refine/inline/filters/or_separator", group: group, group_position: i, render_stack: render_stack %>
           <%= render "refine/inline/filters/group", group: group, group_count: groups.count, condition_count: group.count, render_stack: render_stack %>
           <% if i == groups.length - 1 %>
             <%= render "refine/inline/filters/or_button", position: @refine_filter.blueprint.length %>

config/routes.rb

@@ -9,6 +9,7 @@
     end
     namespace :inline do
       resources :criteria, except: [:show] do
+        post "merge_groups", on: :collection
         post "clear", on: :collection
       end
       resources :stored_filters, only: [:index, :new, :create] do

lib/refine/rails/version.rb

@@ -1,5 +1,5 @@
 module Refine
   module Rails
-    VERSION = "2.11.4"
+    VERSION = "2.11.5"
   end
 end

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickfunnels/refine-stimulus",
-  "version": "2.11.4",
+  "version": "2.11.5",
   "description": "Refine is a flexible query builder for your apps. It lets your users filter down to exactly what they're looking for. Completely configured on the backend.",
   "browserslist": [
     "defaults",