Advanced condition category select

CHANGELOG.md

@@ -1,3 +1,6 @@
+### 2.12.0
+  * Feature Release - Advanced Condition Select: Fully releases a new option for condition selects built for more complex filters
+  * Fixes a bug with 2.11.12 where a is_one_of and is_not_one_of clause would break the old UI
 ### 2.11.12
   * Trims inputs in old and new UIs for values to remove leading and trailing whitespace
 ### 2.11.11

Gemfile.lock

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

app/assets/stylesheets/index.tailwind.css

@@ -1191,7 +1191,7 @@ input.refine--search-trigger[type="text"] {
 
 .refine--advanced-condition-category-header {
   display: flex;
-  padding: 16px 0 12px 0;
+  padding: 12px 0 12px 0;
   font-size: 14px;
   font-weight: 600;
   color: #1a202e; /* tailwind color cool-gray-900 */

app/javascript/controllers/refine/inline-advanced-modal-controller.js

@@ -2,14 +2,63 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
 
-  static targets = ['searchBarInput']
+  static targets = ['searchBarInput', 'categoryListItem', 'categoryBlockItem', 'categoryShortcutItem']
 
-  showSearchBar(event) {
+  connect() {
+    this.observer = new IntersectionObserver(
+      this.handleIntersection.bind(this), {
+        threshold: 1
+      }
+    )
+
+    this.categoryBlockItemTargets.forEach(item => this.observer.observe(item))
+  }
+
+  disconnect() {
+    this.observer.disconnect()
+  }
+
+  handleIntersection(entries) {
+    entries.forEach(entry => {
+      if(entry.isIntersecting) {
+        this.highlightCategory(entry.target.dataset.categoryListBlockValue)
+      }
+    })
+  }
+
+  highlightCategory(categoryName) {
+    this.categoryShortcutItemTargets.forEach(item => {
+      if(item.dataset.inlineAdvancedModalValue === categoryName) {
+        item.classList.add('active')
+      } else {
+        item.classList.remove('active')
+      }
+    })
+  }
+
+  showSearchBar() {
     this.searchBarInputTarget.hidden = false
   }
 
-  hideSearchBar(event) {
+  hideSearchBar() {
     this.searchBarInputTarget.hidden = true
   }
+
+  findCategoryElementByName(categoryName) {
+    // Use the find method to locate the target with the specified attribute value
+    return this.categoryListItemTargets.find(item => item.dataset.categoryListItemValue === categoryName)
+  }
+
+  scrollToCategory(event) {
+    const categoryName = event.target.dataset.inlineAdvancedModalValue
+    const categoryElement = this.findCategoryElementByName(categoryName)
+    if(categoryElement) {
+      categoryElement.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest"
+      })
+    }
+  }
 
 }

app/javascript/controllers/refine/update-controller.js

@@ -55,7 +55,8 @@ export default class extends ServerRefreshController {
     const inputId = dataset.inputId
     inputKey = inputKey || dataset.inputKey || 'value'
     value = value || event.target.value
-    value = value.trim()
+    if(typeof value === 'string')
+      value = value.trim()
     state.updateInput(
       criterionIdValue,
       {

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

@@ -21,7 +21,7 @@
 %>
 
 <%= turbo_frame_tag @criterion do %>
-  <sl-dialog open class="<%= dialog_class %>" no-header data-controller="refine--typeahead-list refine--inline-advanced-modal" >
+  <sl-dialog open class="<%= dialog_class %> <%= "uncategorized" if categorized_conditions&.empty? %>" no-header data-controller="refine--typeahead-list refine--inline-advanced-modal" >
 
     <div class="dialog__header-actions refine--modal-header">
       <h2 part="title" class="dialog__title refine--header-title" id="title">
@@ -51,31 +51,51 @@
       </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 } %> 
+        <div class="refine--advanced-condition-content" >
+          <% if categorized_conditions&.any? %>
+            <div class="refine--advanced-category-picker">
+              <% categorized_conditions.each do |category, conditions| %>
+                <div class="refine--condition-list-item refine--condition-list-card" 
+                  data-action="click->refine--inline-advanced-modal#scrollToCategory"
+                  data-inline-advanced-modal-value="<%= category %>"
+                  data-refine--inline-advanced-modal-target="categoryShortcutItem"
+                >
+                  <div class="refine--condition-list-icon-container bg-gray-200" >
+                    <i class="refine--condition-list-card-icon <%= conditions.last.category_icon_class %>"></i>
+                  </div> 
+                  <%= category %>
+                </div>
+              <% end %>
+            </div>
+          <% end %>
+          <div class="refine--advanced-condition-picker <%= "lone" if categorized_conditions&.empty? %>">
+            <% 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 %>
-          </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 } %> 
+            <% 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 %>
-          </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 } %> 
+            <% categorized_conditions.each do |(category, conditions)| %>
+              <b data-refine--typeahead-list-target="category" data-refine--inline-advanced-modal-target="categoryListItem" data-category-list-item-value="<%= category %>" class="refine--advanced-condition-category-header"><%= category %></b>
+              <div class="refine--advanced-condition-select-group" data-refine--inline-advanced-modal-target="categoryBlockItem"  data-category-list-block-value="<%= category %>">
+                <% conditions.each do |condition| %>
+                  <%= render partial: "condition_list_item_card", locals: {condition: condition, category: category } %> 
+                <% end %>
+              </div>
             <% end %>
           </div>
-        <% end %>
+        </div>
       </sl-tab-panel>
 
       <sl-tab-panel name="saved_filters" class="refine--advanced-condition-select">

lib/refine/rails/version.rb

@@ -1,5 +1,5 @@
 module Refine
   module Rails
-    VERSION = "2.11.12"
+    VERSION = "2.12.0"
   end
 end

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickfunnels/refine-stimulus",
-  "version": "2.11.12",
+  "version": "2.12.0",
   "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",