From 691aff50e778f66a6e1ff8ea86d08d6c04abe644 Mon Sep 17 00:00:00 2001
From: Adrian Marin <adrian@adrianthedev.com>
Date: Thu, 5 Dec 2024 00:03:32 +0200
Subject: [PATCH 01/20] feature: shift select multiple records

---
 app/assets/stylesheets/avo.base.css           |  10 ++
 .../avo/index/resource_table_component.rb     |   5 +-
 .../avo/index/table_row_component.html.erb    |   5 +-
 .../avo/index/table_row_component.rb          |   1 +
 .../avo/items/panel_component.html.erb        |   5 +
 .../avo/row_selector_component.html.erb       |   7 +-
 app/components/avo/row_selector_component.rb  |   1 +
 .../views/resource_show_component.html.erb    |   3 +
 app/javascript/avo.base.js                    |  21 +++
 app/javascript/js/controllers.js              |   2 +
 .../controllers/item_selector_controller.js   |   6 +
 .../controllers/record_selector_controller.js | 133 ++++++++++++++++++
 .../js/controllers/table_row_controller.js    |   8 +-
 lib/avo.rb                                    |   1 +
 .../has_resource_stimulus_controllers.rb      |   2 +-
 spec/dummy/app/avo/resources/project.rb       |   2 +
 spec/dummy/app/avo/resources/user.rb          |  22 ++-
 .../app/views/avo/tools/custom_tool.html.erb  |  72 +++++++---
 tailwind.preset.js                            |   2 +
 19 files changed, 278 insertions(+), 30 deletions(-)
 create mode 100644 app/javascript/js/controllers/record_selector_controller.js

diff --git a/app/assets/stylesheets/avo.base.css b/app/assets/stylesheets/avo.base.css
index 67fa61f8d3..c1ccbc3a83 100644
--- a/app/assets/stylesheets/avo.base.css
+++ b/app/assets/stylesheets/avo.base.css
@@ -92,3 +92,13 @@ trix-editor {
 dialog#turbo-confirm {
   @apply bg-transparent;
 }
+
+.shift-pressed {
+  & .highlighted-row {
+    @apply !bg-slate-200;
+  }
+}
+
+.selected-row {
+  @apply !bg-slate-100;
+}
diff --git a/app/components/avo/index/resource_table_component.rb b/app/components/avo/index/resource_table_component.rb
index 68f0afcd67..d4803960b4 100644
--- a/app/components/avo/index/resource_table_component.rb
+++ b/app/components/avo/index/resource_table_component.rb
@@ -67,7 +67,7 @@ def generate_table_row_components
     table_row_components = []
 
     # Loop through each resource in @resources
-    @resources.each do |resource|
+    @resources.each_with_index do |resource, index|
       # Get fields for the current resource and concat them to the @header_fields
       row_fields = resource.get_fields(reflection: @reflection, only_root: true)
       header_fields.concat row_fields
@@ -79,7 +79,8 @@ def generate_table_row_components
         reflection: @reflection,
         parent_record: @parent_record,
         parent_resource: @parent_resource,
-        actions: @actions
+        actions: @actions,
+        index:
       )
     end
 
diff --git a/app/components/avo/index/table_row_component.html.erb b/app/components/avo/index/table_row_component.html.erb
index 1f682ab548..5668ae53e6 100644
--- a/app/components/avo/index/table_row_component.html.erb
+++ b/app/components/avo/index/table_row_component.html.erb
@@ -4,6 +4,7 @@
   id: "#{self.class.to_s.underscore}_#{@resource.record.to_param}",
   class: class_names("bg-white hover:bg-gray-50 hover:shadow-row z-21 border-b", {"cursor-pointer": click_row_to_view_record}),
   data: {
+    index: @index,
     component_name: self.class.to_s.underscore,
     resource_name: @resource.class.to_s,
     record_id: @resource.record.id,
@@ -15,9 +16,9 @@
     **(try(:drag_reorder_item_data_attributes) || {}),
   } do %>
   <% if @resource.record_selector %>
-    <td class="w-10">
+    <td class="item-selector-cell w-10">
       <div class="flex justify-center h-full">
-        <%= render Avo::RowSelectorComponent.new floating: false %>
+        <%= render Avo::RowSelectorComponent.new floating: false, index: @index %>
       </div>
     </td>
   <% end %>
diff --git a/app/components/avo/index/table_row_component.rb b/app/components/avo/index/table_row_component.rb
index 82cac0896e..3add2dbdfa 100644
--- a/app/components/avo/index/table_row_component.rb
+++ b/app/components/avo/index/table_row_component.rb
@@ -13,6 +13,7 @@ class Avo::Index::TableRowComponent < Avo::BaseComponent
   prop :actions
   prop :fields
   prop :header_fields
+  prop :index
 
   def resource_controls_component
     Avo::Index::ResourceControlsComponent.new(
diff --git a/app/components/avo/items/panel_component.html.erb b/app/components/avo/items/panel_component.html.erb
index 290546c852..759166d117 100644
--- a/app/components/avo/items/panel_component.html.erb
+++ b/app/components/avo/items/panel_component.html.erb
@@ -1,5 +1,10 @@
 <%= render Avo::PanelComponent.new(**args) do |c| %>
   <% if @is_main_panel %>
+    <% c.with_after_description_slot do %>
+      <% if Avo.plugin_manager.installed?("avo_collaborate") %>
+        <%#= render Avo::Collaborate::ReactionPickerComponent.new(target: @resource.record, resource: @resource) %>
+      <% end %>
+    <% end %>
     <% c.with_tools do %>
       <% controls.each do |control| %>
         <%= render_control control %>
diff --git a/app/components/avo/row_selector_component.html.erb b/app/components/avo/row_selector_component.html.erb
index 196014a317..9eafd752c1 100644
--- a/app/components/avo/row_selector_component.html.erb
+++ b/app/components/avo/row_selector_component.html.erb
@@ -11,7 +11,12 @@
       "w-4 h-4": @size.to_sym != :lg,
     }),
     data: {
-      action: "input->item-selector#toggle input->item-select-all#selectRow",
+      index: @index,
+      action: "
+        input->item-selector#toggle
+        input->item-select-all#selectRow
+        click->record-selector#toggleMultiple
+      ",
       item_select_all_target: "itemCheckbox",
       tippy: "tooltip"
     }
diff --git a/app/components/avo/row_selector_component.rb b/app/components/avo/row_selector_component.rb
index 734e309bd2..e0f65d4122 100644
--- a/app/components/avo/row_selector_component.rb
+++ b/app/components/avo/row_selector_component.rb
@@ -3,4 +3,5 @@
 class Avo::RowSelectorComponent < Avo::BaseComponent
   prop :floating, default: false
   prop :size, default: :md
+  prop :index
 end
diff --git a/app/components/avo/views/resource_show_component.html.erb b/app/components/avo/views/resource_show_component.html.erb
index a51bf0dff4..316d7b766b 100644
--- a/app/components/avo/views/resource_show_component.html.erb
+++ b/app/components/avo/views/resource_show_component.html.erb
@@ -23,6 +23,9 @@
       )%>
     <% end %>
   <% end %>
+  <div class="mt-4">
+    <%#= render Avo::Collaborate::TimelineComponent.new(resource: @resource) %>
+  </div>
   <% if should_display_invalid_fields_errors? %>
     <turbo-stream action="append" target="alerts">
       <template>
diff --git a/app/javascript/avo.base.js b/app/javascript/avo.base.js
index 5236707760..0e36a174f9 100644
--- a/app/javascript/avo.base.js
+++ b/app/javascript/avo.base.js
@@ -39,6 +39,20 @@ function isMac() {
     document.body.classList.remove('os-mac')
   }
 }
+
+// Add the shift-pressed class to the body when the shift key is pressed
+document.addEventListener('keydown', (event) => {
+  if (event.shiftKey) {
+    document.body.classList.add('shift-pressed')
+  }
+})
+// Remove the shift-pressed class from the body when the shift key is released
+document.addEventListener('keyup', (event) => {
+  if (!event.shiftKey) {
+    document.body.classList.remove('shift-pressed')
+  }
+})
+
 function initTippy() {
   tippy('[data-tippy="tooltip"]', {
     theme: 'light',
@@ -69,6 +83,13 @@ window.initTippy = initTippy
 
 ActiveStorage.start()
 
+document.addEventListener('turbo:before-stream-render', () => {
+  // We're using the timeout feature so we can fake the `turbo:after-stream-render` event
+  setTimeout(() => {
+    initTippy()
+  }, 1)
+})
+
 document.addEventListener('turbo:load', () => {
   initTippy()
   isMac()
diff --git a/app/javascript/js/controllers.js b/app/javascript/js/controllers.js
index de91a986b0..75fafdd539 100644
--- a/app/javascript/js/controllers.js
+++ b/app/javascript/js/controllers.js
@@ -28,6 +28,7 @@ import PanelRefreshController from './controllers/fields/panel_refresh_controlle
 import PerPageController from './controllers/per_page_controller'
 import PreviewController from './controllers/preview_controller'
 import ProgressBarFieldController from './controllers/fields/progress_bar_field_controller'
+import RecordSelectorController from './controllers/record_selector_controller'
 import ReloadBelongsToFieldController from './controllers/fields/reload_belongs_to_field_controller'
 import ResourceEditController from './controllers/resource_edit_controller'
 import ResourceIndexController from './controllers/resource_index_controller'
@@ -70,6 +71,7 @@ application.register('modal', ModalController)
 application.register('multiple-select-filter', MultipleSelectFilterController)
 application.register('per-page', PerPageController)
 application.register('preview', PreviewController)
+application.register('record-selector', RecordSelectorController)
 application.register('resource-edit', ResourceEditController)
 application.register('resource-index', ResourceIndexController)
 application.register('resource-show', ResourceShowController)
diff --git a/app/javascript/js/controllers/item_selector_controller.js b/app/javascript/js/controllers/item_selector_controller.js
index d85c7b6530..2c241edf59 100644
--- a/app/javascript/js/controllers/item_selector_controller.js
+++ b/app/javascript/js/controllers/item_selector_controller.js
@@ -44,10 +44,16 @@ export default class extends Controller {
 
     ids.push(this.resourceId)
 
+    // Mark the row as selected
+    this.element.closest('tr').classList.add('selected-row')
+
     this.currentIds = ids
   }
 
   removeFromSelected() {
+    // Un-mark the row as selected
+    this.element.closest('tr').classList.remove('selected-row')
+
     this.currentIds = this.currentIds.filter(
       (item) => item.toString() !== this.resourceId,
     )
diff --git a/app/javascript/js/controllers/record_selector_controller.js b/app/javascript/js/controllers/record_selector_controller.js
new file mode 100644
index 0000000000..e08b4ef50e
--- /dev/null
+++ b/app/javascript/js/controllers/record_selector_controller.js
@@ -0,0 +1,133 @@
+/* eslint-disable radix */
+import { Controller } from '@hotwired/stimulus'
+import difference from 'lodash/difference'
+import range from 'lodash/range'
+
+// Hopefully we'll never need to touch this code again
+export default class extends Controller {
+  lastCheckedIndex = null
+
+  autoClicking = false
+
+  get itemSelectorCells() {
+    return document.querySelectorAll('.item-selector-cell')
+  }
+
+  connect() {
+    // Attach event listeners to item selector cells
+    Array.from(this.itemSelectorCells).forEach((itemSelectorCell) => {
+      itemSelectorCell.addEventListener('mouseenter', this.#selectorMouseenterHandler.bind(this))
+      itemSelectorCell.addEventListener('mouseleave', this.#selectorMouseleaveHandler.bind(this))
+    })
+
+    // Attach event listeners to keyboard events
+    document.addEventListener('keydown', this.#keydownHandler)
+    document.addEventListener('keyup', this.#keyupHandler)
+  }
+
+  disconnect() {
+    // Remove event listeners
+    Array.from(this.itemSelectorCells).forEach((itemSelectorCell) => {
+      itemSelectorCell.removeEventListener('mouseenter', this.#selectorMouseenterHandler.bind(this))
+      itemSelectorCell.removeEventListener('mouseleave', this.#selectorMouseleaveHandler.bind(this))
+    })
+    document.removeEventListener('keydown', this.#keydownHandler)
+    document.removeEventListener('keyup', this.#keyupHandler)
+  }
+
+  #selectorMouseenterHandler(event) {
+    // Add the highlighted-row class to the row that the mouse is over
+    event.target.closest('tr').classList.add('highlighted-row')
+    // Highlight the range of rows between the last checked index and the current index
+    this.#highlightRange(this.lastCheckedIndex, parseInt(event.target.closest('tr').dataset.index))
+  }
+
+  #selectorMouseleaveHandler(event) {
+    // Remove the highlighted-row class from the row that the mouse is over
+    event.target.closest('tr').classList.remove('highlighted-row')
+    // Remove the highlighted-row class from all rows
+    document.querySelectorAll('tr[data-index]').forEach((tr) => {
+      tr.classList.remove('highlighted-row')
+    })
+  }
+
+  // Highlight the range of rows between the start index and the end index
+  #highlightRange(startIndex, endIndex) {
+    const theRange = difference(range(startIndex, endIndex))
+    theRange.forEach((index) => {
+      const tr = document.querySelector(`tr[data-index="${index}"]`)
+      tr.classList.add('highlighted-row')
+    })
+  }
+
+  // Add the shift-pressed class to the body when the shift key is pressed
+  #keydownHandler(event) {
+    if (event.shiftKey) {
+      document.body.classList.add('shift-pressed')
+    }
+  }
+
+  // Remove the shift-pressed class from the body when the shift key is released
+  #keyupHandler(event) {
+    if (!event.shiftKey) {
+      document.body.classList.remove('shift-pressed')
+    }
+  }
+
+  // Toggle multiple items
+  toggleMultiple(event) {
+    // this check is to prevent the method from running twice when the script clicks the checkboxes
+    if (this.autoClicking) {
+      return
+    }
+
+    if (!this.lastCheckedIndex && !event.shiftKey) {
+      this.#setStartingIndex(event)
+
+      return
+    }
+
+    // Ignore action if shift key is not pressed
+    if (!event.shiftKey) {
+      return
+    }
+
+    const currentIndex = parseInt(event.target.dataset.index)
+    const theRange = difference(range(this.lastCheckedIndex, currentIndex), [this.lastCheckedIndex, currentIndex])
+
+    this.lastCheckedIndex = null
+
+    // Set the autoClicking flag to true to prevent the method from running twice
+    this.autoClicking = true
+
+    // Get the state of the target checkbox
+    const state = event.target.checked
+
+    // Loop through the range of rows and toggle the checkboxes
+    theRange.forEach((index) => {
+      const checkbox = document.querySelector(`input[type="checkbox"][data-index="${index}"]`)
+
+      // Toggle the checkbox if it's not in the same state as the target checkbox
+      if (checkbox.checked !== state) {
+        checkbox.click()
+      }
+    })
+
+    this.#setEndingIndex(event)
+
+    // Reset the autoClicking flag
+    this.autoClicking = false
+  }
+
+  // Set the starting index
+  #setStartingIndex(event) {
+    this.lastCheckedIndex = parseInt(event.target.dataset.index)
+    event.target.closest('tr').classList.add('highlighted-row')
+  }
+
+  // Set the ending index
+  #setEndingIndex(event) {
+    this.lastCheckedIndex = parseInt(event.target.dataset.index)
+    event.target.closest('tr').classList.add('highlighted-row')
+  }
+}
diff --git a/app/javascript/js/controllers/table_row_controller.js b/app/javascript/js/controllers/table_row_controller.js
index 4234cb659b..8f59a94ae8 100644
--- a/app/javascript/js/controllers/table_row_controller.js
+++ b/app/javascript/js/controllers/table_row_controller.js
@@ -6,10 +6,16 @@ export default class extends Controller {
       return
     }
 
+    // We won't navigate if shift is pressed. That is usually used to select multiple rows.
+    const isShiftPressed = event.shiftKey
+    // We won't navigate if the user clicks on the item selector cell
+    const isItemSelector = event.target.closest('.item-selector-cell')
+    // We won't navigate if the user clicks on a link or button
     const isLinkOrButton = event.target.closest('a, button')
+    // We won't navigate if the user clicks on a checkbox
     const isCheckbox = event.target.closest('input[type="checkbox"]')
 
-    if (isLinkOrButton || isCheckbox) {
+    if (isShiftPressed || isLinkOrButton || isCheckbox || isItemSelector) {
       return // Don't navigate if a link or button is clicked
     }
 
diff --git a/lib/avo.rb b/lib/avo.rb
index 58aa297430..90e03ceb9d 100644
--- a/lib/avo.rb
+++ b/lib/avo.rb
@@ -137,6 +137,7 @@ def mount_engines
         mount Avo::Dashboards::Engine, at: "/dashboards" if defined?(Avo::Dashboards::Engine)
         mount Avo::Pro::Engine, at: "/avo-pro" if defined?(Avo::Pro::Engine)
         mount Avo::Kanban::Engine, at: "/boards" if defined?(Avo::Kanban::Engine)
+        mount Avo::Collaborate::Engine, at: "/collaborate" if defined?(Avo::Collaborate::Engine)
       }
     end
 
diff --git a/lib/avo/concerns/has_resource_stimulus_controllers.rb b/lib/avo/concerns/has_resource_stimulus_controllers.rb
index b560dfd3da..c8b8bf0f30 100644
--- a/lib/avo/concerns/has_resource_stimulus_controllers.rb
+++ b/lib/avo/concerns/has_resource_stimulus_controllers.rb
@@ -18,7 +18,7 @@ def get_stimulus_controllers
         when :new, :edit
           controllers << "resource-edit"
         when :index
-          controllers << "resource-index"
+          controllers << "resource-index record-selector"
         end
 
         controllers << self.class.stimulus_controllers
diff --git a/spec/dummy/app/avo/resources/project.rb b/spec/dummy/app/avo/resources/project.rb
index cb09ce3d3a..7e985b7921 100644
--- a/spec/dummy/app/avo/resources/project.rb
+++ b/spec/dummy/app/avo/resources/project.rb
@@ -12,6 +12,7 @@ class Avo::Resources::Project < Avo::BaseResource
     query.unscoped
   }
 
+
   def fields
     field :id, as: :id, link_to_record: true
     field :status,
@@ -74,6 +75,7 @@ def fields
     end
 
     field :users, as: :has_and_belongs_to_many
+
     field :comments, as: :has_many, searchable: true
     field :even_reviews, as: :has_many, for_attribute: :reviews, scope: -> { query.where("reviews.id % 2 = ?", "0") }
     field :reviews, as: :has_many
diff --git a/spec/dummy/app/avo/resources/user.rb b/spec/dummy/app/avo/resources/user.rb
index 81636ac29c..a88c7a865c 100644
--- a/spec/dummy/app/avo/resources/user.rb
+++ b/spec/dummy/app/avo/resources/user.rb
@@ -46,6 +46,7 @@ class Avo::Resources::User < Avo::BaseResource
   }
 
   def fields
+    # table
     test_field("Heading")
 
     main_panel do
@@ -105,8 +106,27 @@ def main_panel_fields
       field :first_name, placeholder: "John"
       field :last_name, placeholder: "Doe", filterable: true
     end
-    field :email, as: :text, name: "User Email", required: true, protocol: :mailto
+
+
+
+
+
     field :active, as: :boolean, name: "Is active", only_on: :index
+    field :email, as: :text, dependent: {
+      on: [:active, :id],
+      on_change: -> {
+        # changed_attribute
+        # form_data
+        self.value = "something"
+        self.required = form_data[:active]
+      }
+    }
+
+
+
+
+
+
     field :cv, as: :file, name: "CV"
     field :is_admin?, as: :boolean, name: "Is admin", only_on: :index
     field :roles, as: :boolean_group, options: {admin: "Administrator", manager: "Manager", writer: "Writer"}
diff --git a/spec/dummy/app/views/avo/tools/custom_tool.html.erb b/spec/dummy/app/views/avo/tools/custom_tool.html.erb
index 4b7b287f0e..511b8c4546 100644
--- a/spec/dummy/app/views/avo/tools/custom_tool.html.erb
+++ b/spec/dummy/app/views/avo/tools/custom_tool.html.erb
@@ -1,29 +1,57 @@
 <div class="flex flex-col">
-  <%= render Avo::PanelComponent.new(name: "Custom tool", description: "Custom tool description", display_breadcrumbs: true) do |c| %>
-    <% c.with_tools do %>
-      <div class="text-sm italic">This is the panels tools section.</div>
-    <% end %>
+  <%
+    fields = [:id, :name, :age]
+    fields = {
+      id: {
+        type: :id,
+        required: true
+      },
+      name: {},
+      age: {
+        type: :number,
+      }
+    }
+    items = [
+      {
+        id: 123,
+        name: "User",
+        age: 14,
+        email: "test@test.com",
+      },
+      {
+        id: 124,
+        name: "User 2",
+        age: 15,
+        email: "test2@test.com",
+      },
+      {
+        id: 125,
+        name: "User 3",
+        age: 16,
+        email: "test3@test.com",
+        _options: {
+          id_param: :id,
+          show_path: "/users/123"
+        }
+      }
+      # .name
+      # [:name]
+    ]
 
-    <% c.with_body do %>
-      <div class="py-6 min-h-24">
-        <div class="px-6 space-y-4">
-          <h3>What a nice new tool 👋</h3>
+    options = {
+      id_param: :id,
+      path: "/users/123"
+    }
 
-          Go to <%= link_to "new comment", avo.new_resources_comment_path %>, <%= link_to 'the first user', avo.resources_user_path(1) %>, or <%= link_to 'hey on main app', main_app.hey_path %>.
+    model_key = "users"
+    cache_hash = [model_key, Digest::MD5.hexdigest(model_key)] # ai
+    options = {}
 
-          <p>
-            You can edit this file here <code class='p-1 rounded bg-gray-500 text-white text-sm'>app/views/avo/tools/custom_tool.html.erb</code>.
-          </p>
 
-          <p>
-            For this tool we created the <code class='p-1 rounded bg-gray-500 text-white text-sm'>custom_tool</code> method in the <code class='p-1 rounded bg-gray-500 text-white text-sm'>Avo::ToolsController</code>. You may delete it or move it to your own controller.
-          </p>
+    #Avo::Resources::Base.for_dumb(name: "Users", fields:, options:)
+  %>
 
-          <p>
-            A new <code class='p-1 rounded bg-gray-500 text-white text-sm'>Custom tool</code> item should have been added to the sidebar. Edit it in <code class='p-1 rounded bg-gray-500 text-white text-sm'>app/views/avo/sidebar/items/_custom_tool.html.erb</code>
-          </p>
-        </div>
-      </div>
-    <% end %>
-  <% end %>
+  <%#= render Avo::RecordTableComponent.new(name: "Users", items:, fields:, options:, data: {}) %>
+
+  <%#= render Avo::RecordTableComponent.new(items:, fields:, options:, data: {}) %>
 </div>
diff --git a/tailwind.preset.js b/tailwind.preset.js
index 217aa275df..5d0b823544 100644
--- a/tailwind.preset.js
+++ b/tailwind.preset.js
@@ -24,6 +24,7 @@ module.exports = {
   content: [
     ...contentPaths('./tmp/avo/packages/*'),
     ...contentPaths('./../avo-kanban/*'),
+    ...contentPaths('./../avo-collaborate'),
     ...contentPaths(avoPath),
   ],
   theme: {
@@ -162,6 +163,7 @@ module.exports = {
       addVariant('index-grid-view', '.index-grid-view & ')
       addVariant('index-table-view', '.index-table-view & ')
       addVariant('kanban-dragging', '.kanban-dragging & ')
+      addVariant('shift-pressed', '.shift-pressed & ')
     }),
   ],
 }

From ac6a9c1a7df2d3cd5dbe8505dfa08b96755e88f5 Mon Sep 17 00:00:00 2001
From: Adrian Marin <adrian@adrianthedev.com>
Date: Thu, 5 Dec 2024 09:48:29 +0200
Subject: [PATCH 02/20] wip

---
 .../controllers/record_selector_controller.js | 55 ++++++++++++++++---
 1 file changed, 48 insertions(+), 7 deletions(-)

diff --git a/app/javascript/js/controllers/record_selector_controller.js b/app/javascript/js/controllers/record_selector_controller.js
index e08b4ef50e..4f93844b19 100644
--- a/app/javascript/js/controllers/record_selector_controller.js
+++ b/app/javascript/js/controllers/record_selector_controller.js
@@ -13,7 +13,20 @@ export default class extends Controller {
     return document.querySelectorAll('.item-selector-cell')
   }
 
+  get hasLastCheckedIndex() {
+    return this.lastCheckedIndex !== null
+  }
+
   connect() {
+    this.#addEventListeners()
+  }
+
+  #resetEventListeners() {
+    this.#removeEventListeners()
+    this.#addEventListeners()
+  }
+
+  #addEventListeners() {
     // Attach event listeners to item selector cells
     Array.from(this.itemSelectorCells).forEach((itemSelectorCell) => {
       itemSelectorCell.addEventListener('mouseenter', this.#selectorMouseenterHandler.bind(this))
@@ -26,20 +39,27 @@ export default class extends Controller {
   }
 
   disconnect() {
+    this.#removeEventListeners()
+  }
+
+  #removeEventListeners() {
+    console.log('removeEventListeners')
     // Remove event listeners
     Array.from(this.itemSelectorCells).forEach((itemSelectorCell) => {
       itemSelectorCell.removeEventListener('mouseenter', this.#selectorMouseenterHandler.bind(this))
       itemSelectorCell.removeEventListener('mouseleave', this.#selectorMouseleaveHandler.bind(this))
     })
-    document.removeEventListener('keydown', this.#keydownHandler)
-    document.removeEventListener('keyup', this.#keyupHandler)
+    document.removeEventListener('keydown', this.#keydownHandler.bind(this))
+    document.removeEventListener('keyup', this.#keyupHandler.bind(this))
   }
 
   #selectorMouseenterHandler(event) {
     // Add the highlighted-row class to the row that the mouse is over
     event.target.closest('tr').classList.add('highlighted-row')
-    // Highlight the range of rows between the last checked index and the current index
-    this.#highlightRange(this.lastCheckedIndex, parseInt(event.target.closest('tr').dataset.index))
+    if (this.lastCheckedIndex) {
+      // Highlight the range of rows between the last checked index and the current index
+      this.#highlightRange(this.lastCheckedIndex, parseInt(event.target.closest('tr').dataset.index))
+    }
   }
 
   #selectorMouseleaveHandler(event) {
@@ -76,27 +96,36 @@ export default class extends Controller {
 
   // Toggle multiple items
   toggleMultiple(event) {
+    console.log('toggleMultiple', this.autoClicking, this.lastCheckedIndex, event.shiftKey, !this.lastCheckedIndex && !event.shiftKey)
     // this check is to prevent the method from running twice when the script clicks the checkboxes
     if (this.autoClicking) {
       return
     }
 
-    if (!this.lastCheckedIndex && !event.shiftKey) {
+    // If there's no last checked index and the shift key isn't pressed, set the starting index
+    // if (!this.hasLastCheckedIndex && !event.shiftKey) {
+    if (!this.hasLastCheckedIndex) {
       this.#setStartingIndex(event)
 
       return
     }
 
+    // // If there's no last checked index and the shift key isn't pressed, set the starting index
+    // if (!this.hasLastCheckedIndex && event.shiftKey) {
+    //   return
+    // }
+
     // Ignore action if shift key is not pressed
     if (!event.shiftKey) {
+      this.#resetLastCheckedIndex()
+
       return
     }
+    console.log('starting')
 
     const currentIndex = parseInt(event.target.dataset.index)
     const theRange = difference(range(this.lastCheckedIndex, currentIndex), [this.lastCheckedIndex, currentIndex])
 
-    this.lastCheckedIndex = null
-
     // Set the autoClicking flag to true to prevent the method from running twice
     this.autoClicking = true
 
@@ -117,6 +146,18 @@ export default class extends Controller {
 
     // Reset the autoClicking flag
     this.autoClicking = false
+    // console.log('autoClicking', this.autoClicking)
+
+    // Reset the last checked index
+    this.#resetLastCheckedIndex()
+
+    this.#resetEventListeners()
+
+    console.log('reached the end', this.lastCheckedIndex)
+  }
+
+  #resetLastCheckedIndex() {
+    this.lastCheckedIndex = null
   }
 
   // Set the starting index

From dd9d6b2430526d67e3188c80d93186a76f430c22 Mon Sep 17 00:00:00 2001
From: Adrian Marin <adrian@adrianthedev.com>
Date: Sat, 7 Dec 2024 13:53:13 +0200
Subject: [PATCH 03/20] add empty spec

---
 spec/system/avo/avo_record_selectors_spec.rb | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 spec/system/avo/avo_record_selectors_spec.rb

diff --git a/spec/system/avo/avo_record_selectors_spec.rb b/spec/system/avo/avo_record_selectors_spec.rb
new file mode 100644
index 0000000000..1071aead16
--- /dev/null
+++ b/spec/system/avo/avo_record_selectors_spec.rb
@@ -0,0 +1,9 @@
+require 'rails_helper'
+
+RSpec.describe "RecordSelectors", type: :system do
+  before do
+    driven_by(:rack_test)
+  end
+
+  pending "add some scenarios (or delete) #{__FILE__}"
+end

From 32b3d1878504feec20f51720f0f2926f430f9597 Mon Sep 17 00:00:00 2001
From: Adrian Marin <adrian@adrianthedev.com>
Date: Wed, 8 Jan 2025 17:05:50 +0200
Subject: [PATCH 04/20] tweak select all checkbox

---
 Gemfile.lock                                  |   4 +
 .../controllers/item_select_all_controller.js |  28 +++-
 .../controllers/record_selector_controller.js | 128 +++++++++---------
 3 files changed, 92 insertions(+), 68 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 33fa75f36a..b90c63592a 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -289,6 +289,7 @@ GEM
       concurrent-ruby (~> 1.1)
       webrick (~> 1.7)
       websocket-driver (~> 0.7)
+    ffi (1.17.1-arm64-darwin)
     ffi (1.17.1-x86_64-linux-gnu)
     flay (2.13.3)
       erubi (~> 1.10)
@@ -412,6 +413,8 @@ GEM
     net-smtp (0.5.0)
       net-protocol
     nio4r (2.7.4)
+    nokogiri (1.18.1-arm64-darwin)
+      racc (~> 1.4)
     nokogiri (1.18.1-x86_64-linux-gnu)
       racc (~> 1.4)
     orm_adapter (0.5.0)
@@ -676,6 +679,7 @@ GEM
     zeitwerk (2.7.1)
 
 PLATFORMS
+  arm64-darwin-23
   x86_64-linux
 
 DEPENDENCIES
diff --git a/app/javascript/js/controllers/item_select_all_controller.js b/app/javascript/js/controllers/item_select_all_controller.js
index ee1605acc1..2fac63cd4d 100644
--- a/app/javascript/js/controllers/item_select_all_controller.js
+++ b/app/javascript/js/controllers/item_select_all_controller.js
@@ -1,4 +1,4 @@
-import { Controller } from '@hotwired/stimulus'
+import { AttributeObserver, Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
   static targets = [
@@ -17,6 +17,32 @@ export default class extends Controller {
 
   connect() {
     this.resourceName = this.element.dataset.resourceName
+    this.selectedResourcesObserver = new AttributeObserver(this.element, 'data-selected-resources', this)
+    this.selectedResourcesObserver.start()
+  }
+
+  elementAttributeValueChanged(element) {
+    // Check if anything is selected.
+    const selectedResources = JSON.parse(element.dataset.selectedResources)
+    // If all are selected, mark the checkbox as checked.
+    const rowCount = this.element.querySelectorAll('tbody tr').length
+    // Reset the checkbox
+    this.checkboxTarget.indeterminate = false
+    this.checkboxTarget.checked = false
+
+    if (selectedResources.length === rowCount) {
+      this.checkboxTarget.checked = true
+    } else if (selectedResources.length === 0) {
+      // If nothing is selected, mark the checkbox as unchecked.
+      this.checkboxTarget.checked = false
+    } else if (selectedResources.length > 0 && selectedResources.length < rowCount) {
+      // If some are selected, mark the checkbox as indeterminate.
+      this.checkboxTarget.indeterminate = true
+    }
+  }
+
+  disconnect() {
+    this.selectedResourcesObserver.stop()
   }
 
   toggle(event) {
diff --git a/app/javascript/js/controllers/record_selector_controller.js b/app/javascript/js/controllers/record_selector_controller.js
index 4f93844b19..defed0a180 100644
--- a/app/javascript/js/controllers/record_selector_controller.js
+++ b/app/javascript/js/controllers/record_selector_controller.js
@@ -21,6 +21,67 @@ export default class extends Controller {
     this.#addEventListeners()
   }
 
+  disconnect() {
+    this.#removeEventListeners()
+  }
+
+  // Toggle multiple items
+  toggleMultiple(event) {
+    // this check is to prevent the method from running twice when the script clicks the checkboxes
+    if (this.autoClicking) {
+      return
+    }
+
+    // If there's no last checked index and the shift key isn't pressed, set the starting index
+    // if (!this.hasLastCheckedIndex && !event.shiftKey) {
+    if (!this.hasLastCheckedIndex) {
+      this.#setStartingIndex(event)
+
+      return
+    }
+
+    // // If there's no last checked index and the shift key isn't pressed, set the starting index
+    // if (!this.hasLastCheckedIndex && event.shiftKey) {
+    //   return
+    // }
+
+    // Ignore action if shift key is not pressed
+    if (!event.shiftKey) {
+      this.#resetLastCheckedIndex()
+
+      return
+    }
+
+    const currentIndex = parseInt(event.target.dataset.index)
+    const theRange = difference(range(this.lastCheckedIndex, currentIndex), [this.lastCheckedIndex, currentIndex])
+
+    // Set the autoClicking flag to true to prevent the method from running twice
+    this.autoClicking = true
+
+    // Get the state of the target checkbox
+    const state = event.target.checked
+
+    // Loop through the range of rows and toggle the checkboxes
+    theRange.forEach((index) => {
+      const checkbox = document.querySelector(`input[type="checkbox"][data-index="${index}"]`)
+
+      // Toggle the checkbox if it's not in the same state as the target checkbox
+      if (checkbox.checked !== state) {
+        checkbox.click()
+      }
+    })
+
+    this.#setEndingIndex(event)
+
+    // Reset the autoClicking flag
+    this.autoClicking = false
+
+    // Reset the last checked index
+    this.#resetLastCheckedIndex()
+
+    this.#resetEventListeners()
+  }
+
   #resetEventListeners() {
     this.#removeEventListeners()
     this.#addEventListeners()
@@ -38,12 +99,7 @@ export default class extends Controller {
     document.addEventListener('keyup', this.#keyupHandler)
   }
 
-  disconnect() {
-    this.#removeEventListeners()
-  }
-
   #removeEventListeners() {
-    console.log('removeEventListeners')
     // Remove event listeners
     Array.from(this.itemSelectorCells).forEach((itemSelectorCell) => {
       itemSelectorCell.removeEventListener('mouseenter', this.#selectorMouseenterHandler.bind(this))
@@ -94,68 +150,6 @@ export default class extends Controller {
     }
   }
 
-  // Toggle multiple items
-  toggleMultiple(event) {
-    console.log('toggleMultiple', this.autoClicking, this.lastCheckedIndex, event.shiftKey, !this.lastCheckedIndex && !event.shiftKey)
-    // this check is to prevent the method from running twice when the script clicks the checkboxes
-    if (this.autoClicking) {
-      return
-    }
-
-    // If there's no last checked index and the shift key isn't pressed, set the starting index
-    // if (!this.hasLastCheckedIndex && !event.shiftKey) {
-    if (!this.hasLastCheckedIndex) {
-      this.#setStartingIndex(event)
-
-      return
-    }
-
-    // // If there's no last checked index and the shift key isn't pressed, set the starting index
-    // if (!this.hasLastCheckedIndex && event.shiftKey) {
-    //   return
-    // }
-
-    // Ignore action if shift key is not pressed
-    if (!event.shiftKey) {
-      this.#resetLastCheckedIndex()
-
-      return
-    }
-    console.log('starting')
-
-    const currentIndex = parseInt(event.target.dataset.index)
-    const theRange = difference(range(this.lastCheckedIndex, currentIndex), [this.lastCheckedIndex, currentIndex])
-
-    // Set the autoClicking flag to true to prevent the method from running twice
-    this.autoClicking = true
-
-    // Get the state of the target checkbox
-    const state = event.target.checked
-
-    // Loop through the range of rows and toggle the checkboxes
-    theRange.forEach((index) => {
-      const checkbox = document.querySelector(`input[type="checkbox"][data-index="${index}"]`)
-
-      // Toggle the checkbox if it's not in the same state as the target checkbox
-      if (checkbox.checked !== state) {
-        checkbox.click()
-      }
-    })
-
-    this.#setEndingIndex(event)
-
-    // Reset the autoClicking flag
-    this.autoClicking = false
-    // console.log('autoClicking', this.autoClicking)
-
-    // Reset the last checked index
-    this.#resetLastCheckedIndex()
-
-    this.#resetEventListeners()
-
-    console.log('reached the end', this.lastCheckedIndex)
-  }
-
   #resetLastCheckedIndex() {
     this.lastCheckedIndex = null
   }

From 18e604de1497255d4f5bbeb5d156f24a225871fd Mon Sep 17 00:00:00 2001
From: Adrian Marin <adrian@adrianthedev.com>
Date: Wed, 8 Jan 2025 17:08:05 +0200
Subject: [PATCH 05/20] update colors

---
 app/assets/stylesheets/avo.base.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/avo.base.css b/app/assets/stylesheets/avo.base.css
index c1ccbc3a83..4ed8088797 100644
--- a/app/assets/stylesheets/avo.base.css
+++ b/app/assets/stylesheets/avo.base.css
@@ -95,10 +95,10 @@ dialog#turbo-confirm {
 
 .shift-pressed {
   & .highlighted-row {
-    @apply !bg-slate-200;
+    @apply !bg-neutral-200;
   }
 }
 
 .selected-row {
-  @apply !bg-slate-100;
+  @apply !bg-neutral-100;
 }

From 1952ee3b1def6b3772b9e9bc5141526751a13285 Mon Sep 17 00:00:00 2001
From: Adrian Marin <adrian@adrianthedev.com>
Date: Wed, 8 Jan 2025 17:09:01 +0200
Subject: [PATCH 06/20] remove collaboration code

---
 app/components/avo/items/panel_component.html.erb | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/app/components/avo/items/panel_component.html.erb b/app/components/avo/items/panel_component.html.erb
index 759166d117..290546c852 100644
--- a/app/components/avo/items/panel_component.html.erb
+++ b/app/components/avo/items/panel_component.html.erb
@@ -1,10 +1,5 @@
 <%= render Avo::PanelComponent.new(**args) do |c| %>
   <% if @is_main_panel %>
-    <% c.with_after_description_slot do %>
-      <% if Avo.plugin_manager.installed?("avo_collaborate") %>
-        <%#= render Avo::Collaborate::ReactionPickerComponent.new(target: @resource.record, resource: @resource) %>
-      <% end %>
-    <% end %>
     <% c.with_tools do %>
       <% controls.each do |control| %>
         <%= render_control control %>

From b91507e97953202bc5d4f0c50ebf13b884aa0758 Mon Sep 17 00:00:00 2001
From: Adrian Marin <adrian@adrianthedev.com>
Date: Wed, 8 Jan 2025 17:09:35 +0200
Subject: [PATCH 07/20] remove code

---
 app/components/avo/views/resource_show_component.html.erb | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/components/avo/views/resource_show_component.html.erb b/app/components/avo/views/resource_show_component.html.erb
index 316d7b766b..a51bf0dff4 100644
--- a/app/components/avo/views/resource_show_component.html.erb
+++ b/app/components/avo/views/resource_show_component.html.erb
@@ -23,9 +23,6 @@
       )%>
     <% end %>
   <% end %>
-  <div class="mt-4">
-    <%#= render Avo::Collaborate::TimelineComponent.new(resource: @resource) %>
-  </div>
   <% if should_display_invalid_fields_errors? %>
     <turbo-stream action="append" target="alerts">
       <template>

From 4f39ce5e8267aa1b46e82240acbe8eaa4e5db935 Mon Sep 17 00:00:00 2001
From: Adrian Marin <adrian@adrianthedev.com>
Date: Wed, 8 Jan 2025 17:10:35 +0200
Subject: [PATCH 08/20] wip

---
 app/javascript/js/controllers/record_selector_controller.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/app/javascript/js/controllers/record_selector_controller.js b/app/javascript/js/controllers/record_selector_controller.js
index defed0a180..d2d248c1a5 100644
--- a/app/javascript/js/controllers/record_selector_controller.js
+++ b/app/javascript/js/controllers/record_selector_controller.js
@@ -33,18 +33,12 @@ export default class extends Controller {
     }
 
     // If there's no last checked index and the shift key isn't pressed, set the starting index
-    // if (!this.hasLastCheckedIndex && !event.shiftKey) {
     if (!this.hasLastCheckedIndex) {
       this.#setStartingIndex(event)
 
       return
     }
 
-    // // If there's no last checked index and the shift key isn't pressed, set the starting index
-    // if (!this.hasLastCheckedIndex && event.shiftKey) {
-    //   return
-    // }
-
     // Ignore action if shift key is not pressed
     if (!event.shiftKey) {
       this.#resetLastCheckedIndex()

From 5703b6f934c9731c0c32062fb9b815105cb1b987 Mon Sep 17 00:00:00 2001
From: Adrian Marin <adrian@adrianthedev.com>
Date: Wed, 8 Jan 2025 17:10:56 +0200
Subject: [PATCH 09/20] wip

---
 spec/dummy/app/avo/resources/project.rb | 1 -
 1 file changed, 1 deletion(-)

diff --git a/spec/dummy/app/avo/resources/project.rb b/spec/dummy/app/avo/resources/project.rb
index 54da778a5d..51a13bd2e1 100644
--- a/spec/dummy/app/avo/resources/project.rb
+++ b/spec/dummy/app/avo/resources/project.rb
@@ -12,7 +12,6 @@ class Avo::Resources::Project < Avo::BaseResource
     query.unscoped
   }
 
-
   def fields
     field :id, as: :id, link_to_record: true
     field :status,

From 44681f2e991d1a2465f0d2402fe1610c4373529d Mon Sep 17 00:00:00 2001
From: Adrian Marin <adrian@adrianthedev.com>
Date: Wed, 8 Jan 2025 17:11:44 +0200
Subject: [PATCH 10/20] wip

---
 spec/dummy/app/avo/resources/user.rb | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/spec/dummy/app/avo/resources/user.rb b/spec/dummy/app/avo/resources/user.rb
index 6677a31dc6..a475a9300b 100644
--- a/spec/dummy/app/avo/resources/user.rb
+++ b/spec/dummy/app/avo/resources/user.rb
@@ -46,7 +46,6 @@ class Avo::Resources::User < Avo::BaseResource
   }
 
   def fields
-    # table
     test_field("Heading")
 
     main_panel do
@@ -109,15 +108,6 @@ def main_panel_fields
     end
     field :email, as: :text, name: "User Email", required: true, protocol: :mailto, copyable: true
     field :active, as: :boolean, name: "Is active", only_on: :index
-    field :email, as: :text, dependent: {
-      on: [:active, :id],
-      on_change: -> {
-        # changed_attribute
-        # form_data
-        self.value = "something"
-        self.required = form_data[:active]
-      }
-    }
     field :cv, as: :file, name: "CV"
     field :is_admin?, as: :boolean, name: "Is admin", only_on: :index
     field :roles, as: :boolean_group, options: {admin: "Administrator", manager: "Manager", writer: "Writer"}

From bccfbe6955fcade7dcfb045f426f60aefc4406a7 Mon Sep 17 00:00:00 2001
From: Adrian Marin <adrian@adrianthedev.com>
Date: Wed, 8 Jan 2025 17:14:22 +0200
Subject: [PATCH 11/20] wip

---
 .../app/views/avo/tools/custom_tool.html.erb  | 72 ++++++-------------
 1 file changed, 22 insertions(+), 50 deletions(-)

diff --git a/spec/dummy/app/views/avo/tools/custom_tool.html.erb b/spec/dummy/app/views/avo/tools/custom_tool.html.erb
index 511b8c4546..4b7b287f0e 100644
--- a/spec/dummy/app/views/avo/tools/custom_tool.html.erb
+++ b/spec/dummy/app/views/avo/tools/custom_tool.html.erb
@@ -1,57 +1,29 @@
 <div class="flex flex-col">
-  <%
-    fields = [:id, :name, :age]
-    fields = {
-      id: {
-        type: :id,
-        required: true
-      },
-      name: {},
-      age: {
-        type: :number,
-      }
-    }
-    items = [
-      {
-        id: 123,
-        name: "User",
-        age: 14,
-        email: "test@test.com",
-      },
-      {
-        id: 124,
-        name: "User 2",
-        age: 15,
-        email: "test2@test.com",
-      },
-      {
-        id: 125,
-        name: "User 3",
-        age: 16,
-        email: "test3@test.com",
-        _options: {
-          id_param: :id,
-          show_path: "/users/123"
-        }
-      }
-      # .name
-      # [:name]
-    ]
+  <%= render Avo::PanelComponent.new(name: "Custom tool", description: "Custom tool description", display_breadcrumbs: true) do |c| %>
+    <% c.with_tools do %>
+      <div class="text-sm italic">This is the panels tools section.</div>
+    <% end %>
 
-    options = {
-      id_param: :id,
-      path: "/users/123"
-    }
+    <% c.with_body do %>
+      <div class="py-6 min-h-24">
+        <div class="px-6 space-y-4">
+          <h3>What a nice new tool 👋</h3>
 
-    model_key = "users"
-    cache_hash = [model_key, Digest::MD5.hexdigest(model_key)] # ai
-    options = {}
+          Go to <%= link_to "new comment", avo.new_resources_comment_path %>, <%= link_to 'the first user', avo.resources_user_path(1) %>, or <%= link_to 'hey on main app', main_app.hey_path %>.
 
+          <p>
+            You can edit this file here <code class='p-1 rounded bg-gray-500 text-white text-sm'>app/views/avo/tools/custom_tool.html.erb</code>.
+          </p>
 
-    #Avo::Resources::Base.for_dumb(name: "Users", fields:, options:)
-  %>
+          <p>
+            For this tool we created the <code class='p-1 rounded bg-gray-500 text-white text-sm'>custom_tool</code> method in the <code class='p-1 rounded bg-gray-500 text-white text-sm'>Avo::ToolsController</code>. You may delete it or move it to your own controller.
+          </p>
 
-  <%#= render Avo::RecordTableComponent.new(name: "Users", items:, fields:, options:, data: {}) %>
-
-  <%#= render Avo::RecordTableComponent.new(items:, fields:, options:, data: {}) %>
+          <p>
+            A new <code class='p-1 rounded bg-gray-500 text-white text-sm'>Custom tool</code> item should have been added to the sidebar. Edit it in <code class='p-1 rounded bg-gray-500 text-white text-sm'>app/views/avo/sidebar/items/_custom_tool.html.erb</code>
+          </p>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
 </div>

From c9a8a202c794b4f258bc28210e921bcfb7388854 Mon Sep 17 00:00:00 2001
From: Adrian Marin <adrian@adrianthedev.com>
Date: Wed, 8 Jan 2025 17:14:50 +0200
Subject: [PATCH 12/20] wip

---
 spec/dummy/app/avo/resources/project.rb | 1 -
 1 file changed, 1 deletion(-)

diff --git a/spec/dummy/app/avo/resources/project.rb b/spec/dummy/app/avo/resources/project.rb
index 51a13bd2e1..9d8d70f802 100644
--- a/spec/dummy/app/avo/resources/project.rb
+++ b/spec/dummy/app/avo/resources/project.rb
@@ -74,7 +74,6 @@ def fields
     end
 
     field :users, as: :has_and_belongs_to_many
-
     field :comments, as: :has_many, searchable: true
     field :even_reviews, as: :has_many, for_attribute: :reviews, scope: -> { query.where("reviews.id % 2 = ?", "0") }
     field :reviews, as: :has_many

From 41558328e3327969376b5c9f500cf13ebaa17d73 Mon Sep 17 00:00:00 2001
From: Adrian Marin <adrian@adrianthedev.com>
Date: Wed, 8 Jan 2025 17:15:08 +0200
Subject: [PATCH 13/20] wip

---
 spec/system/avo/avo_record_selectors_spec.rb | 9 ---------
 1 file changed, 9 deletions(-)
 delete mode 100644 spec/system/avo/avo_record_selectors_spec.rb

diff --git a/spec/system/avo/avo_record_selectors_spec.rb b/spec/system/avo/avo_record_selectors_spec.rb
deleted file mode 100644
index 1071aead16..0000000000
--- a/spec/system/avo/avo_record_selectors_spec.rb
+++ /dev/null
@@ -1,9 +0,0 @@
-require 'rails_helper'
-
-RSpec.describe "RecordSelectors", type: :system do
-  before do
-    driven_by(:rack_test)
-  end
-
-  pending "add some scenarios (or delete) #{__FILE__}"
-end

From a635b9c5d8a911cc49eabee8b7d3813f2387c588 Mon Sep 17 00:00:00 2001
From: Adrian Marin <adrian@adrianthedev.com>
Date: Wed, 8 Jan 2025 17:15:22 +0200
Subject: [PATCH 14/20] wip

---
 tailwind.preset.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tailwind.preset.js b/tailwind.preset.js
index 5d0b823544..71e617ad09 100644
--- a/tailwind.preset.js
+++ b/tailwind.preset.js
@@ -24,7 +24,6 @@ module.exports = {
   content: [
     ...contentPaths('./tmp/avo/packages/*'),
     ...contentPaths('./../avo-kanban/*'),
-    ...contentPaths('./../avo-collaborate'),
     ...contentPaths(avoPath),
   ],
   theme: {

From f5258b758dcb528f89b99d9db29df7278e6174f7 Mon Sep 17 00:00:00 2001
From: Paul Bob <paul.ionut.bob@gmail.com>
Date: Thu, 9 Jan 2025 11:02:26 +0200
Subject: [PATCH 15/20] fix `spec/features/avo/record_selector_spec.rb`

---
 spec/features/avo/record_selector_spec.rb | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/spec/features/avo/record_selector_spec.rb b/spec/features/avo/record_selector_spec.rb
index bba0eb48fc..0d3c030901 100644
--- a/spec/features/avo/record_selector_spec.rb
+++ b/spec/features/avo/record_selector_spec.rb
@@ -8,18 +8,30 @@
   it "hides the record selector" do
     visit "/admin/resources/comments"
 
-    expect(page).not_to have_selector 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow"]'
+    expect(page).not_to have_selector 'input[type="checkbox"][data-action="
+        input->item-selector#toggle
+        input->item-select-all#selectRow
+        click->record-selector#toggleMultiple
+      "]'
   end
 
   it "displays the record selector" do
     visit "/admin/resources/users"
 
-    expect(page).to have_selector 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow"]'
+    expect(page).to have_selector 'input[type="checkbox"][data-action="
+        input->item-selector#toggle
+        input->item-select-all#selectRow
+        click->record-selector#toggleMultiple
+      "]'
   end
 
   it "displays the record selector on grid" do
     visit "/admin/resources/posts"
 
-    expect(page).to have_selector 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow"]'
+    expect(page).to have_selector 'input[type="checkbox"][data-action="
+        input->item-selector#toggle
+        input->item-select-all#selectRow
+        click->record-selector#toggleMultiple
+      "]'
   end
 end

From 7ebefd5996f69a2e196ee1e658fabc32c7d81473 Mon Sep 17 00:00:00 2001
From: Paul Bob <paul.ionut.bob@gmail.com>
Date: Thu, 9 Jan 2025 11:17:30 +0200
Subject: [PATCH 16/20] fix action data indentation & tests

---
 .../avo/row_selector_component.html.erb        |  6 +-----
 spec/features/avo/record_selector_spec.rb      | 18 +++---------------
 spec/system/avo/multiple_actions_flux_spec.rb  |  2 +-
 spec/system/avo/select_all_spec.rb             |  2 +-
 4 files changed, 6 insertions(+), 22 deletions(-)

diff --git a/app/components/avo/row_selector_component.html.erb b/app/components/avo/row_selector_component.html.erb
index 9eafd752c1..43bdc6da3b 100644
--- a/app/components/avo/row_selector_component.html.erb
+++ b/app/components/avo/row_selector_component.html.erb
@@ -12,11 +12,7 @@
     }),
     data: {
       index: @index,
-      action: "
-        input->item-selector#toggle
-        input->item-select-all#selectRow
-        click->record-selector#toggleMultiple
-      ",
+      action: "input->item-selector#toggle input->item-select-all#selectRow click->record-selector#toggleMultiple",
       item_select_all_target: "itemCheckbox",
       tippy: "tooltip"
     }
diff --git a/spec/features/avo/record_selector_spec.rb b/spec/features/avo/record_selector_spec.rb
index 0d3c030901..3e28da1b7b 100644
--- a/spec/features/avo/record_selector_spec.rb
+++ b/spec/features/avo/record_selector_spec.rb
@@ -8,30 +8,18 @@
   it "hides the record selector" do
     visit "/admin/resources/comments"
 
-    expect(page).not_to have_selector 'input[type="checkbox"][data-action="
-        input->item-selector#toggle
-        input->item-select-all#selectRow
-        click->record-selector#toggleMultiple
-      "]'
+    expect(page).not_to have_selector 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow click->record-selector#toggleMultiple"]'
   end
 
   it "displays the record selector" do
     visit "/admin/resources/users"
 
-    expect(page).to have_selector 'input[type="checkbox"][data-action="
-        input->item-selector#toggle
-        input->item-select-all#selectRow
-        click->record-selector#toggleMultiple
-      "]'
+    expect(page).to have_selector 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow click->record-selector#toggleMultiple"]'
   end
 
   it "displays the record selector on grid" do
     visit "/admin/resources/posts"
 
-    expect(page).to have_selector 'input[type="checkbox"][data-action="
-        input->item-selector#toggle
-        input->item-select-all#selectRow
-        click->record-selector#toggleMultiple
-      "]'
+    expect(page).to have_selector 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow click->record-selector#toggleMultiple"]'
   end
 end
diff --git a/spec/system/avo/multiple_actions_flux_spec.rb b/spec/system/avo/multiple_actions_flux_spec.rb
index 4a4679341e..dc2942affe 100644
--- a/spec/system/avo/multiple_actions_flux_spec.rb
+++ b/spec/system/avo/multiple_actions_flux_spec.rb
@@ -11,7 +11,7 @@
         expect(page).to have_text "Spec City"
         expect(page).to have_text "123456"
 
-        find(:css, 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow"]', match: :first).set(true)
+        find(:css, 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow click->record-selector#toggleMultiple"]', match: :first).set(true)
 
         open_panel_action(action_name: "Update")
 
diff --git a/spec/system/avo/select_all_spec.rb b/spec/system/avo/select_all_spec.rb
index ef7a20fbbf..b910ab17ac 100644
--- a/spec/system/avo/select_all_spec.rb
+++ b/spec/system/avo/select_all_spec.rb
@@ -150,7 +150,7 @@
 end
 
 def uncheck_first_record
-  find(:css, 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow"]', match: :first).set(false)
+  find(:css, 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow click->record-selector#toggleMultiple"]', match: :first).set(false)
   expect(page).not_to have_text info_string
 end
 

From acf7e54b02172b48b9245c1c478f6e7ef79601a0 Mon Sep 17 00:00:00 2001
From: Paul Bob <paul.ionut.bob@gmail.com>
Date: Thu, 9 Jan 2025 11:44:40 +0200
Subject: [PATCH 17/20] add test

---
 spec/system/avo/record_selector_spec.rb | 43 +++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 spec/system/avo/record_selector_spec.rb

diff --git a/spec/system/avo/record_selector_spec.rb b/spec/system/avo/record_selector_spec.rb
new file mode 100644
index 0000000000..130d36f9d9
--- /dev/null
+++ b/spec/system/avo/record_selector_spec.rb
@@ -0,0 +1,43 @@
+require "rails_helper"
+
+RSpec.feature "RecordSelectors", type: :system do
+  let!(:projects) { create_list :project, 5}
+
+  it "hold shift and select" do
+    visit avo.resources_projects_path
+
+    all_checkboxes = all(:css, 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow click->record-selector#toggleMultiple"]')
+
+    select_all_checkbox = find(:css, 'input[type="checkbox"][data-action="input->item-select-all#toggle"]')
+
+    expect(indeterminate?(select_all_checkbox)).to be false
+
+    # Click the first checkbox
+    all_checkboxes.first.click
+
+    expect(indeterminate?(select_all_checkbox)).to be true
+
+    # Hold shift and click the last checkbox
+    all_checkboxes.last.click(:shift)
+
+    # Validate that all checkboxes are selected
+    expect(all_checkboxes.select(&:checked?).count).to be == projects.count
+
+    # Click second checkbox
+    all_checkboxes[1].click
+
+    # Hold shift and click the last checkbox
+    all_checkboxes.last.click(:shift)
+
+    # Validate that only first checkbox is selected
+    expect(all_checkboxes.select(&:checked?).count).to be == 1
+    expect(all_checkboxes.first.checked?).to be true
+
+    all_checkboxes.first.click
+    expect(indeterminate?(select_all_checkbox)).to be false
+  end
+
+  def indeterminate?(checkbox)
+    page.evaluate_script("arguments[0].indeterminate", checkbox.native)
+  end
+end

From 0327b6d7cdf1bf5d40510e18b418b816f1fb907d Mon Sep 17 00:00:00 2001
From: Paul Bob <paul.ionut.bob@gmail.com>
Date: Thu, 9 Jan 2025 11:59:20 +0200
Subject: [PATCH 18/20] lint

---
 spec/system/avo/record_selector_spec.rb | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/spec/system/avo/record_selector_spec.rb b/spec/system/avo/record_selector_spec.rb
index 130d36f9d9..6cf6b08eda 100644
--- a/spec/system/avo/record_selector_spec.rb
+++ b/spec/system/avo/record_selector_spec.rb
@@ -1,7 +1,7 @@
 require "rails_helper"
 
 RSpec.feature "RecordSelectors", type: :system do
-  let!(:projects) { create_list :project, 5}
+  let!(:projects) { create_list :project, 5 }
 
   it "hold shift and select" do
     visit avo.resources_projects_path
@@ -21,7 +21,7 @@
     all_checkboxes.last.click(:shift)
 
     # Validate that all checkboxes are selected
-    expect(all_checkboxes.select(&:checked?).count).to be == projects.count
+    expect(all_checkboxes.count(&:checked?)).to be == projects.count
 
     # Click second checkbox
     all_checkboxes[1].click
@@ -30,7 +30,7 @@
     all_checkboxes.last.click(:shift)
 
     # Validate that only first checkbox is selected
-    expect(all_checkboxes.select(&:checked?).count).to be == 1
+    expect(all_checkboxes.count(&:checked?)).to be == 1
     expect(all_checkboxes.first.checked?).to be true
 
     all_checkboxes.first.click

From 9e70b76e9e219899ac9cbb1d0aa0527e2b72ed91 Mon Sep 17 00:00:00 2001
From: Paul Bob <paul.ionut.bob@gmail.com>
Date: Thu, 9 Jan 2025 12:32:13 +0200
Subject: [PATCH 19/20] pro check

---
 app/components/avo/row_selector_component.html.erb |  2 +-
 app/components/avo/row_selector_component.rb       | 10 ++++++++++
 spec/features/avo/record_selector_spec.rb          |  6 +++---
 spec/system/avo/multiple_actions_flux_spec.rb      |  2 +-
 spec/system/avo/select_all_spec.rb                 |  2 +-
 5 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/components/avo/row_selector_component.html.erb b/app/components/avo/row_selector_component.html.erb
index 43bdc6da3b..adb629da64 100644
--- a/app/components/avo/row_selector_component.html.erb
+++ b/app/components/avo/row_selector_component.html.erb
@@ -12,7 +12,7 @@
     }),
     data: {
       index: @index,
-      action: "input->item-selector#toggle input->item-select-all#selectRow click->record-selector#toggleMultiple",
+      action: data_action,
       item_select_all_target: "itemCheckbox",
       tippy: "tooltip"
     }
diff --git a/app/components/avo/row_selector_component.rb b/app/components/avo/row_selector_component.rb
index e0f65d4122..2aab60c652 100644
--- a/app/components/avo/row_selector_component.rb
+++ b/app/components/avo/row_selector_component.rb
@@ -4,4 +4,14 @@ class Avo::RowSelectorComponent < Avo::BaseComponent
   prop :floating, default: false
   prop :size, default: :md
   prop :index
+
+  def data_action
+    data = "input->item-selector#toggle input->item-select-all#selectRow"
+
+    if Avo.plugin_manager.installed?(:avo_pro)
+      data += " click->record-selector#toggleMultiple"
+    end
+
+    data
+  end
 end
diff --git a/spec/features/avo/record_selector_spec.rb b/spec/features/avo/record_selector_spec.rb
index 3e28da1b7b..bba0eb48fc 100644
--- a/spec/features/avo/record_selector_spec.rb
+++ b/spec/features/avo/record_selector_spec.rb
@@ -8,18 +8,18 @@
   it "hides the record selector" do
     visit "/admin/resources/comments"
 
-    expect(page).not_to have_selector 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow click->record-selector#toggleMultiple"]'
+    expect(page).not_to have_selector 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow"]'
   end
 
   it "displays the record selector" do
     visit "/admin/resources/users"
 
-    expect(page).to have_selector 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow click->record-selector#toggleMultiple"]'
+    expect(page).to have_selector 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow"]'
   end
 
   it "displays the record selector on grid" do
     visit "/admin/resources/posts"
 
-    expect(page).to have_selector 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow click->record-selector#toggleMultiple"]'
+    expect(page).to have_selector 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow"]'
   end
 end
diff --git a/spec/system/avo/multiple_actions_flux_spec.rb b/spec/system/avo/multiple_actions_flux_spec.rb
index dc2942affe..4a4679341e 100644
--- a/spec/system/avo/multiple_actions_flux_spec.rb
+++ b/spec/system/avo/multiple_actions_flux_spec.rb
@@ -11,7 +11,7 @@
         expect(page).to have_text "Spec City"
         expect(page).to have_text "123456"
 
-        find(:css, 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow click->record-selector#toggleMultiple"]', match: :first).set(true)
+        find(:css, 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow"]', match: :first).set(true)
 
         open_panel_action(action_name: "Update")
 
diff --git a/spec/system/avo/select_all_spec.rb b/spec/system/avo/select_all_spec.rb
index b910ab17ac..ef7a20fbbf 100644
--- a/spec/system/avo/select_all_spec.rb
+++ b/spec/system/avo/select_all_spec.rb
@@ -150,7 +150,7 @@
 end
 
 def uncheck_first_record
-  find(:css, 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow click->record-selector#toggleMultiple"]', match: :first).set(false)
+  find(:css, 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow"]', match: :first).set(false)
   expect(page).not_to have_text info_string
 end
 

From c04d079a7577480e13cdf4b70419229e22a0ee88 Mon Sep 17 00:00:00 2001
From: Paul Bob <paul.ionut.bob@gmail.com>
Date: Thu, 9 Jan 2025 13:44:37 +0200
Subject: [PATCH 20/20] rm pro test

---
 spec/system/avo/record_selector_spec.rb | 43 -------------------------
 1 file changed, 43 deletions(-)
 delete mode 100644 spec/system/avo/record_selector_spec.rb

diff --git a/spec/system/avo/record_selector_spec.rb b/spec/system/avo/record_selector_spec.rb
deleted file mode 100644
index 6cf6b08eda..0000000000
--- a/spec/system/avo/record_selector_spec.rb
+++ /dev/null
@@ -1,43 +0,0 @@
-require "rails_helper"
-
-RSpec.feature "RecordSelectors", type: :system do
-  let!(:projects) { create_list :project, 5 }
-
-  it "hold shift and select" do
-    visit avo.resources_projects_path
-
-    all_checkboxes = all(:css, 'input[type="checkbox"][data-action="input->item-selector#toggle input->item-select-all#selectRow click->record-selector#toggleMultiple"]')
-
-    select_all_checkbox = find(:css, 'input[type="checkbox"][data-action="input->item-select-all#toggle"]')
-
-    expect(indeterminate?(select_all_checkbox)).to be false
-
-    # Click the first checkbox
-    all_checkboxes.first.click
-
-    expect(indeterminate?(select_all_checkbox)).to be true
-
-    # Hold shift and click the last checkbox
-    all_checkboxes.last.click(:shift)
-
-    # Validate that all checkboxes are selected
-    expect(all_checkboxes.count(&:checked?)).to be == projects.count
-
-    # Click second checkbox
-    all_checkboxes[1].click
-
-    # Hold shift and click the last checkbox
-    all_checkboxes.last.click(:shift)
-
-    # Validate that only first checkbox is selected
-    expect(all_checkboxes.count(&:checked?)).to be == 1
-    expect(all_checkboxes.first.checked?).to be true
-
-    all_checkboxes.first.click
-    expect(indeterminate?(select_all_checkbox)).to be false
-  end
-
-  def indeterminate?(checkbox)
-    page.evaluate_script("arguments[0].indeterminate", checkbox.native)
-  end
-end