avo 2.13.6.pre.2 → 2.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: df7e0432320ebd04724b2f38afaf35d5bfe652aa0c68e70b17efcf648b4d98bd
-  data.tar.gz: 0bc309a2c8f0e756304504dea4ababec52defc34fc9bb24aed6547c1f09af6dd
+  metadata.gz: 58033ed16e041a89bae5bc13843079be1c9daa0f85004bf810645e24960e7526
+  data.tar.gz: d401c18ba4edb14825be275b68851c0b9e32e3ff2427a79a27b5bafb377f4d51
 SHA512:
-  metadata.gz: c1537d80c8714711ad1d181f27153c60762ec9a685703c28870c914b4e57af5c6c300da433247bc459e4f42555866fdb83f4bff74e226cd320f8175c6b3d3831
-  data.tar.gz: 6112b7a2b1e673938bcd7a0f048d0083eabe57b092710c40ddf20193e1efb3103d5fbcc9aa8ecdc29476fb805310a50ea5c806e3a25a0e8aff1a578b4921a64f
+  metadata.gz: 32d0cda8da582e3b3104a0f676c968d11ed28cd222b26014651fec4405bdd14b868c39685f257d473c4d41c2eab5e0c1923924df097e82cc8ace744150f46bab
+  data.tar.gz: 502abd413467a87d504ae3d82dffcee741fdc96a76a5458b8501826be5da494bf6e054af8a65d1a403a641e7475455a55acb1863e229ea6ad8a26037e255f731

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (2.13.6.pre.2)
+    avo (2.14.0)
       active_link_to
       addressable
       breadcrumbs_on_rails
@@ -256,8 +256,6 @@ GEM
     nokogiri (1.13.7)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
-    nokogiri (1.13.7-x86_64-linux)
-      racc (~> 1.4)
     orm_adapter (0.5.0)
     pagy (5.10.1)
       activesupport

data/README.md

@@ -7,12 +7,13 @@
 
 ![](./public/avo-assets/logo-on-white.png)
 
-**Configuration-based, no-maintenance, extendable Ruby on Rails admin**
+**Ruby on Rails application building framework.**
 
 Avo is a beautiful next-generation framework that empowers you, the developer, to create fantastic admin panels for your Ruby on Rails apps with the flexibility to fit your needs as you grow.
 
 ## Get started
 
+⚡️ **Install**: [docs.avohq.io/2.0/installation](https://docs.avohq.io/2.0/installation.html)\
 ✨ **Website**: [avohq.io](https://avohq.io)\
 📚 **Documentation**: [docs.avohq.io](https://docs.avohq.io)\
 🗺 **Roadmap**: [GitHub Roadmap](https://github.com/orgs/avo-hq/projects/3)\
@@ -43,24 +44,19 @@ Avo is a beautiful next-generation framework that empowers you, the developer, t
   - **Localization** - Have it available in any language you need. [docs](https://docs.avohq.io/2.0/localization.html)
   - **No asset pipeline pollution** - Bring your own asset pipeline. [docs](https://docs.avohq.io/2.0/custom-asset-pipeline.html)
   - **Mobile interface** - Check your data on the go from any mobile device.
+  - **Tabbed interface** - Conditionally show the data you need
+  - **Menu builder** - Group and surface information as you need to
+  - **Branding** - Make it look
 
 ## Some of the things we're going focusing on next
 
-Theming ⭐️   notifications ⭐️   Resource segmentation ⭐️   filterable fields ⭐️   inline editing ⭐️   multilingual records ⭐️   associations in tabs ⭐️   keyboard shortcuts ⭐️   track resource changes ⭐️   smart resource generation ⭐️   sidebar editor ⭐️   live resources ⭐️   tags field ⭐️   columns view ⭐️   list view ⭐️   custom action items ⭐️   command bar
+Theming ⭐️   notifications ⭐️   Resource segmentation ⭐️   filterable fields ⭐️   inline editing ⭐️   multilingual records ⭐️   keyboard shortcuts ⭐️   track resource changes ⭐️   smart resource generation ⭐️   live resources ⭐️   columns view ⭐️   list view ⭐️   custom action items ⭐️   command bar ⭐️    use fields DSL in your custom views
 
 For more up-to-date info check out our 🗺 [Roadmap](https://github.com/orgs/avo-hq/projects/3).
 
 # Installation
-Add this line to your application's `Gemfile`:
 
-```ruby
-gem 'avo'
-```
-
-And then execute:
-```bash
-$ bundle install
-```
+Use this RailsBytes template to get started quick `rails app:template LOCATION='https://avohq.io/app-template'`. If you need a more detailed guide, follow [this page](https://docs.avohq.io/2.0/installation.html).
 
 # Contributing
 

data/app/components/avo/button_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 # A button/link can have the following settings:
-# style: primary/secondary/ternary
+# style: primary/outline/text
 # size: :xs :sm, :md, :lg
 class Avo::ButtonComponent < ViewComponent::Base
   def initialize(path = nil, size: :md, style: :outline, color: :gray, icon: nil, icon_class: "", is_link: false, rounded: true, compact: false, **args)

data/app/components/avo/fields/common/progress_bar_component.html.erb

@@ -0,0 +1,8 @@
+<div class="flex items-center">
+  <% if display_value %>
+    <div class="text-right text-sm font-semibold leading-none mr-2 min-w-[2rem]">
+      <%= value %><%= value_suffix if value_suffix.present? %>
+    </div>
+  <% end %>
+  <progress min="0" max="<%= max %>" value="<%= value %>" class="block w-full min-w-[6rem]"></progress>
+</div>

data/app/components/avo/fields/common/progress_bar_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Avo::Fields::Common::ProgressBarComponent < ViewComponent::Base
+  attr_reader :value
+  attr_reader :display_value
+  attr_reader :value_suffix
+  attr_reader :max
+
+  def initialize(value:, display_value: false, value_suffix: nil, max: 100)
+    @value = value
+    @display_value = display_value
+    @value_suffix = value_suffix
+    @max = max
+  end
+end

data/app/components/avo/fields/common/single_file_viewer_component.html.erb

@@ -21,8 +21,7 @@
     <div class="flex space-x-2">
       <div class="flex">
         <% if @resource.authorization.authorize_action(:download_attachments?, raise_exception: false) %>
-          <!-- <%= file.inspect %> -->
-          <%= a_link file.service_url(disposition: :attachment),
+          <%= a_link file.url(disposition: :attachment),
             icon: 'heroicons/outline/download',
             color: :primary,
             download: true,

data/app/components/avo/fields/common/single_file_viewer_component.rb

@@ -40,4 +40,16 @@ class Avo::Fields::Common::SingleFileViewerComponent < ViewComponent::Base
   rescue
     false
   end
+
+  def render?
+    record_persisted?
+  end
+
+   # If model is not persistent blob is automatically destroyed otherwise it can be "lost" on storage
+  def record_persisted?
+    return true if @resource.model.persisted?
+
+    ActiveStorage::Blob.destroy(file.blob_id) if file.blob_id.present?
+    false
+  end
 end

data/app/components/avo/fields/progress_bar_field/index_component.html.erb

@@ -1,8 +1,3 @@
 <%= index_field_wrapper field: @field, resource: @resource, flush: true do %>
-  <% if @field.display_value %>
-    <div class="text-center text-sm font-semibold w-full leading-none mb-1">
-      <%= @field.value %><%= @field.value_suffix if @field.value_suffix.present? %>
-    </div>
-  <% end %>
-  <progress min="0" max="<%= @field.max %>" value="<%= @field.value %>" class="block w-24"></progress>
+  <%= render Avo::Fields::Common::ProgressBarComponent.new value: @field.value, display_value: @field.display_value, value_suffix: @field.value_suffix, max: @field.max %>
 <% end %>

data/app/components/avo/fields/progress_bar_field/show_component.html.erb

@@ -1,8 +1,3 @@
 <%= show_field_wrapper field: @field, resource: @resource, index: @index do %>
-  <% if @field.display_value %>
-    <div class="text-center text-sm font-semibold w-full leading-none mb-1">
-      <%= @field.value %><%= @field.value_suffix if @field.value_suffix.present? %>
-    </div>
-  <% end %>
-  <progress min="0" max="<%= @field.max %>" value="<%= @field.value %>" class="block w-full"></progress>
+  <%= render Avo::Fields::Common::ProgressBarComponent.new value: @field.value, display_value: @field.display_value, value_suffix: @field.value_suffix, max: @field.max %>
 <% end %>

data/app/components/avo/filters_component.html.erb

@@ -22,7 +22,7 @@
       <% end %>
       <div class="p-4 border-gray-300 border-t">
         <% if params[:filters].present? %>
-          <%= a_link helpers.resources_path(resource: @resource, filters: nil, keep_query_params: true), color: :gray, size: :sm, class: 'w-full justify-center' do %>
+          <%= a_link reset_path, data: {turbo_frame: params[:turbo_frame]}, color: :gray, size: :sm, class: 'w-full justify-center' do %>
             <%= t('avo.reset_filters') %>
           <% end %>
         <% else %>

data/app/components/avo/filters_component.rb

@@ -3,13 +3,23 @@
 class Avo::FiltersComponent < ViewComponent::Base
   include Avo::ApplicationHelper
 
-  def initialize(filters: [], resource: nil, applied_filters: [])
+  def initialize(filters: [], resource: nil, applied_filters: [], parent_model: nil)
     @filters = filters
     @resource = resource
     @applied_filters = applied_filters
+    @parent_model = parent_model
   end
 
   def render?
     @filters.present?
   end
+
+  def reset_path
+    # If come from a association page
+    if @parent_model.present?
+      helpers.related_resources_path(@parent_model, @parent_model, filters: nil, keep_query_params: true)
+    else
+      helpers.resources_path(resource: @resource, filters: nil, keep_query_params: true)
+    end
+  end
 end

data/app/components/avo/index/resource_table_component.html.erb

@@ -1,5 +1,40 @@
-<div class="w-full ">
-  <table class="w-full px-4 bg-white" data-resource-name='<%= @resource.model_key %>' data-controller='item-select-all'>
+<div class="w-full relative"
+  data-controller="item-select-all"
+  data-resource-name="<%= @resource.model_key %>"
+  data-item-select-all-selected-all-value="false"
+  data-item-select-all-selected-all-query-value="<%= encrypted_query %>"
+  data-selected-resources-name="<%= @resource.model_key %>"
+  data-selected-resources="[]"
+>
+  <% if pagy.pages > 1 %>
+    <div class="absolute z-30 w-full ml-10 pt-px hidden" data-item-select-all-target="selectAllOvelay">
+      <div class="bg-white flex items-center h-9 mt-0.5">
+        <div class="mt-1.5" data-item-select-all-target="unselectedMessage">
+          <%= t "avo.x_records_selected_from_a_total_of_x_html", selected: pagy.in, count: pagy.count %>
+          <%= a_link request.url,
+            size: :xs,
+            color: :primary,
+            class: "relative -top-[0.1rem] ml-2 cursor-pointer text-primary-500",
+            data: {action: "click->item-select-all#selectAll"} do
+          %>
+            <%= t "avo.select_all_matching" %>
+          <% end %>
+        </div>
+        <div class="mt-1.5" data-item-select-all-target="selectedMessage" class="hidden">
+          <%= t "avo.x_records_selected_from_all_pages_html", count: pagy.count %>
+          <%= a_link request.url,
+            size: :xs,
+            color: :primary,
+            class: "relative -top-[0.1rem] ml-2 cursor-pointer text-primary-500",
+            data: {action: "click->item-select-all#selectAll"} do
+          %>
+            <%= t("avo.undo").humanize %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+  <table class="w-full px-4 bg-white">
     <%= render partial: 'avo/partials/table_header', locals: {fields: @resource.get_fields(reflection: @reflection, only_root: true)} %>
     <tbody class="divide-y">
       <% @resources.each_with_index do |resource, index| %>

data/app/components/avo/index/resource_table_component.rb

@@ -1,11 +1,25 @@
 # frozen_string_literal: true
 
 class Avo::Index::ResourceTableComponent < ViewComponent::Base
-  def initialize(resources: nil, resource: nil, reflection: nil, parent_model: nil, parent_resource: nil)
+  include Avo::ApplicationHelper
+  attr_reader :pagy
+
+  def initialize(resources: nil, resource: nil, reflection: nil, parent_model: nil, parent_resource: nil, pagy: nil, query: nil)
     @resources = resources
     @resource = resource
     @reflection = reflection
     @parent_model = parent_model
     @parent_resource = parent_resource
+    @pagy = pagy
+    @query = query
+  end
+
+  def encrypted_query
+    return if @query.nil?
+
+    Avo::Services::EncryptionService.encrypt(
+      message: @query.to_sql,
+      purpose: :select_all
+    )
   end
 end

data/app/components/avo/item_switcher_component.rb

@@ -38,7 +38,7 @@ class Avo::ItemSwitcherComponent < Avo::BaseComponent
   end
 
   def tab_group_component
-    Avo::TabGroupComponent.new resource: @resource, group: item.hydrate(view: view), index: index, params: params, form: form, view: view
+    Avo::TabGroupComponent.new resource: @resource, group: item.hydrate(view: view), index: index, params: params, form: form, view: view, tabs_style: item.style
   end
 
   def field_component

data/app/components/avo/tab_group_component.html.erb

@@ -15,7 +15,7 @@
         data: {
           # Add a marker to know if we already loaded a turbo frame
           loaded: tab.name == active_tab_name,
-          tabs_target: :tab,
+          tabs_target: :tabPanel,
           tab_id: tab.name,
         }
       }
@@ -32,17 +32,17 @@
       end
 
       if should_lazy_load
-        args[:src] = helpers.resource_path(resource: @resource, model: @resource.model, keep_query_params: true, active_tab_name: tab.name, tab_turbo_frame: group.turbo_frame_id)
+        args[:src] = helpers.resource_path(resource: resource, model: resource.model, keep_query_params: true, active_tab_name: tab.name, tab_turbo_frame: group.turbo_frame_id)
         args[:loading] = :lazy
       end
     %>
     <%= turbo_frame_tag tab.turbo_frame_id(parent: @group), **args do %>
       <div class="border rounded-lg p-2 -mx-2 -my-2 lg:p-4 lg:-mx-4 lg:-my-4 space-y-4">
-        <%= render Avo::TabSwitcherComponent.new resource: @resource, current_tab: tab, group: group, active_tab_name: active_tab_name, view: view %>
+        <%= render Avo::TabSwitcherComponent.new resource: resource, current_tab: tab, group: group, active_tab_name: active_tab_name, view: view, style: tabs_style %>
         <% if !should_lazy_load && !tab.empty? %>
           <div class="space-y-12">
             <% tab.visible_items.each do |item| %>
-              <%= render Avo::ItemSwitcherComponent.new resource: @resource, item: item, index: index, form: form, view: @view %>
+              <%= render Avo::ItemSwitcherComponent.new resource: resource, item: item, index: index, form: form, view: @view %>
             <% end %>
           </div>
         <% end %>

data/app/components/avo/tab_group_component.rb

@@ -5,14 +5,16 @@ class Avo::TabGroupComponent < Avo::BaseComponent
   attr_reader :index
   attr_reader :view
   attr_reader :form
+  attr_reader :resource
 
-  def initialize(resource:, group:, index:, form:, params:, view:)
+  def initialize(resource:, group:, index:, form:, params:, view:, tabs_style:)
     @resource = resource
     @group = group
     @index = index
     @form = form
     @params = params
     @view = view
+    @tabs_style = tabs_style
 
     @group.index = index
   end
@@ -48,4 +50,8 @@ class Avo::TabGroupComponent < Avo::BaseComponent
       tab.name.to_s == active_tab_name.to_s
     end
   end
+
+  def tabs_style
+    @tabs_style || Avo.configuration.tabs_style
+  end
 end

data/app/components/avo/tab_switcher_component.html.erb

@@ -1,21 +1,41 @@
-<div class="flex overflow-auto mac-styled-scrollbar" data-target="tab-switcher">
-  <div class="button-group">
-    <% visible_items.each do |tab| %>
-      <%= a_link tab_path(tab),
-          color: selected?(tab) ? :gray : :primary,
+<% if style == :tabs %>
+  <div class="flex overflow-auto mac-styled-scrollbar" data-target="tab-switcher" data-style="tabs">
+    <div class="button-group">
+      <% visible_items.each do |tab| %>
+        <%= a_link tab_path(tab),
+          color: selected?(tab) ? :primary : :gray ,
           rounded: false,
           size: :sm,
-          class: selected?(tab) ? ' bg-gray-100 border-gray-300' : ' z-20',
+          class: "active:outline-0 #{selected?(tab) ? "z-20" : "bg-gray-100 border-gray-300"}",
           title: tab.description,
           data: {
             tippy: tab.description.present? ? 'tooltip' : '',
-            control: "view-type-toggle-#{tab.name}",
             selected: selected?(tab),
             action: 'click->tabs#changeTab',
             tabs_id_param: tab.name
           } do %>
+          <%= tab.name %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% else %>
+  <div class="flex flex-wrap gap-2" data-target="tab-switcher" data-style="pills">
+    <% visible_items.each do |tab| %>
+      <%= a_link tab_path(tab),
+      color: selected?(tab) ? :primary : :gray,
+      style: selected?(tab) ? :outline : :text,
+      size: :sm,
+      class: selected?(tab) ? "z-20" : "",
+      title: tab.description,
+      data: {
+        tippy: tab.description.present? ? 'tooltip' : '',
+        selected: selected?(tab),
+        action: 'click->tabs#changeTab',
+        tabs_id_param: tab.name
+      } do %>
         <%= tab.name %>
       <% end %>
     <% end %>
   </div>
-</div>
+<% end %>

data/app/components/avo/tab_switcher_component.rb

@@ -9,14 +9,16 @@ class Avo::TabSwitcherComponent < Avo::BaseComponent
   attr_reader :current_tab
   attr_reader :tabs
   attr_reader :view
+  attr_reader :style
 
-  def initialize(resource:, group:, current_tab:, active_tab_name:, view:)
+  def initialize(resource:, group:, current_tab:, active_tab_name:, view:, style:)
     @active_tab_name = active_tab_name
     @resource = resource
     @group = group
     @current_tab = current_tab
     @tabs = group.items
     @view = view
+    @style = style
   end
 
   def tab_path(tab)

data/app/components/avo/views/resource_index_component.html.erb

@@ -28,10 +28,7 @@
       <% end %>
     <% end %>
     <% c.body do %>
-      <div class="flex flex-col xs:flex-row xs:justify-between space-y-2 xs:space-y-0 py-4 <%= 'hidden' if @resource.search_query.nil? && @filters.empty? && available_view_types.count <= 1 %>"
-        data-selected-resources-name="<%= @resource.model_key %>"
-        data-selected-resources="[]"
-      >
+      <div class="flex flex-col xs:flex-row xs:justify-between space-y-2 xs:space-y-0 py-4 <%= 'hidden' if @resource.search_query.nil? && @filters.empty? && available_view_types.count <= 1 %>">
         <% unless hide_search_input %>
           <div class="flex items-center px-4 w-64">
             <%= render partial: 'avo/partials/resource_search', locals: {resource: @resource.route_key, via_reflection: via_reflection} %>
@@ -42,7 +39,7 @@
         <% end %>
         <% if @filters.present? || available_view_types.count > 1 %>
           <div class="justify-self-end flex justify-start xs:justify-end items-center px-4 space-x-3">
-            <%= render Avo::FiltersComponent.new filters: @filters, resource: @resource, applied_filters: @applied_filters %>
+            <%= render Avo::FiltersComponent.new filters: @filters, resource: @resource, applied_filters: @applied_filters, parent_model: @parent_model %>
             <%= render partial: 'avo/partials/view_toggle_button', locals: { available_view_types: available_view_types, view_type: view_type, turbo_frame: @turbo_frame } if available_view_types.count > 1 %>
           </div>
         <% end %>
@@ -51,7 +48,7 @@
         <% if @resources.present? %>
           <div class="w-full overflow-auto flex flex-col mt-0 mac-styled-scrollbar">
             <div class="relative flex-1 flex">
-              <%= render(Avo::Index::ResourceTableComponent.new(resources: @resources, resource: @resource, reflection: @reflection, parent_model: @parent_model, parent_resource: @parent_resource)) %>
+              <%= render(Avo::Index::ResourceTableComponent.new(resources: @resources, resource: @resource, reflection: @reflection, parent_model: @parent_model, parent_resource: @parent_resource, pagy: @pagy, query: @query)) %>
             </div>
           </div>
         <% else %>

data/app/components/avo/views/resource_index_component.rb

@@ -16,7 +16,8 @@ class Avo::Views::ResourceIndexComponent < Avo::ResourceComponent
     turbo_frame: "",
     parent_model: nil,
     parent_resource: nil,
-    applied_filters: []
+    applied_filters: [],
+    query: nil
   )
     @resource = resource
     @resources = resources
@@ -31,6 +32,7 @@ class Avo::Views::ResourceIndexComponent < Avo::ResourceComponent
     @parent_resource = parent_resource
     @applied_filters = applied_filters
     @view = :index
+    @query = query
   end
 
   def title
@@ -146,5 +148,4 @@ class Avo::Views::ResourceIndexComponent < Avo::ResourceComponent
       id: @parent_model.id
     }
   end
-
 end

data/app/controllers/avo/actions_controller.rb

@@ -11,10 +11,10 @@ module Avo
     end
 
     def handle
-      resource_ids = action_params[:fields][:resource_ids].split(",")
-      models = @resource.class.find_scope.find resource_ids
+      resource_ids = action_params[:fields][:avo_resource_ids].split(",")
+      @selected_query = action_params[:fields][:avo_selected_query]
 
-      fields = action_params[:fields].except("resource_ids")
+      fields = action_params[:fields].except(:avo_resource_ids, :avo_selected_query)
 
       args = {
         fields: fields,
@@ -22,7 +22,13 @@ module Avo
         resource: resource
       }
 
-      args[:models] = models unless @action.standalone
+      unless @action.standalone
+        args[:models] = if @selected_query.present?
+          @resource.model_class.find_by_sql decrypted_query
+        else
+          @resource.class.find_scope.find resource_ids
+        end
+      end
 
       performed_action = @action.handle_action(**args)
 
@@ -90,5 +96,12 @@ module Avo
         message[:type] != :silent
       end
     end
+
+    def decrypted_query
+      Avo::Services::EncryptionService.decrypt(
+        message: @selected_query,
+        purpose: :select_all
+      )
+    end
   end
 end

data/app/helpers/avo/resources_helper.rb

@@ -48,7 +48,7 @@ module Avo
     def item_selector_input(floating: false, size: :md)
       "<input type='checkbox'
         class='mx-3 rounded #{"absolute inset-auto left-0 mt-2 z-10 hidden group-hover:block checked:block" if floating} #{size.to_sym == :lg ? "w-5 h-5" : "w-4 h-4"}'
-        data-action='input->item-selector#toggle input->item-select-all#update'
+        data-action='input->item-selector#toggle input->item-select-all#selectRow'
         data-item-select-all-target='itemCheckbox'
         name='#{t "avo.select_item"}'
         title='#{t "avo.select_item"}'

data/app/javascript/js/controllers/action_controller.js

@@ -2,11 +2,16 @@ import { Controller } from '@hotwired/stimulus'
 import { castBoolean } from '../helpers/cast_boolean'
 
 export default class extends Controller {
-  static targets = ['controllerDiv', 'resourceIds', 'form']
+  static targets = ['controllerDiv', 'resourceIds', 'form', 'selectedAllQuery']
 
   connect() {
     this.resourceIdsTarget.value = this.resourceIds
 
+    // This value is picked up from the DOM so we check true/false as strings
+    if (this.selectionOptions.itemSelectAllSelectedAllValue === 'true') {
+      this.selectedAllQueryTarget.value = this.selectionOptions.itemSelectAllSelectedAllQueryValue
+    }
+
     if (this.noConfirmation) {
       this.formTarget.submit()
     } else {
@@ -24,9 +29,13 @@ export default class extends Controller {
 
   get resourceIds() {
     try {
-      return JSON.parse(document.querySelector(`[data-selected-resources-name="${this.resourceName}"]`).dataset.selectedResources)
+      return JSON.parse(this.selectionOptions.selectedResources)
     } catch (error) {
       return []
     }
   }
+
+  get selectionOptions() {
+    return document.querySelector(`[data-selected-resources-name="${this.resourceName}"]`).dataset
+  }
 }

data/app/javascript/js/controllers/item_select_all_controller.js

@@ -1,21 +1,59 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static targets = ['itemCheckbox', 'checkbox']
+  static targets = ['itemCheckbox', 'checkbox', 'selectAllOvelay', 'unselectedMessage', 'selectedMessage']
+
+  static values = {
+    selectedAll: Boolean,
+    selectedAllQuery: String,
+  }
 
   connect() {
     this.resourceName = this.element.dataset.resourceName
   }
 
   toggle(event) {
-    const value = !!event.target.checked
+    const checked = !!event.target.checked
     document.querySelectorAll(`[data-controller="item-selector"][data-resource-name="${this.resourceName}"] input[type=checkbox]`)
-      .forEach((checkbox) => checkbox.checked != value && checkbox.click())
+      .forEach((checkbox) => checkbox.checked !== checked && checkbox.click())
+
+    this.selectAllOverlay(checked)
+
+    // When de-selecting everything, ensure the selectAll toggle is false and hide overlay.
+    if (!checked) {
+      this.resetUnselected()
+    }
   }
 
-  update() {
+  selectRow() {
     let allSelected = true
+    // eslint-disable-next-line no-return-assign
     this.itemCheckboxTargets.forEach((checkbox) => allSelected = allSelected && checkbox.checked)
     this.checkboxTarget.checked = allSelected
+
+    this.selectAllOverlay(allSelected)
+    this.resetUnselected()
+  }
+
+  selectAll(event) {
+    event.preventDefault()
+
+    this.selectedAllValue = !this.selectedAllValue
+    this.unselectedMessageTarget.classList.toggle('hidden')
+    this.selectedMessageTarget.classList.toggle('hidden')
+  }
+
+  resetUnselected() {
+    this.selectedAllValue = false
+    this.unselectedMessageTarget.classList.remove('hidden')
+    this.selectedMessageTarget.classList.add('hidden')
+  }
+
+  selectAllOverlay(show) {
+    if (show) {
+      this.selectAllOvelayTarget.classList.remove('hidden')
+    } else {
+      this.selectAllOvelayTarget.classList.add('hidden')
+    }
   }
 }