Add Stimulus controller for batch-action triggers

frontend/js/controllers/batch_action_controller.js

@@ -0,0 +1,59 @@
+import ApplicationController from './application_controller'
+
+export default class extends ApplicationController {
+  static outlets = ['checkbox-select']
+
+  connect () {
+    if (!this.hasCheckboxSelectOutlet) {
+      // Set default outlet if none specified
+      this.element.setAttribute(`data-${this.identifier}-checkbox-select-outlet`, '.trestle-table')
+    }
+
+    this.baseHref = this.element.href
+
+    this.update()
+  }
+
+  update () {
+    this.toggleEnabled()
+    this.updateHref()
+  }
+
+  toggleEnabled () {
+    this.element.classList.toggle('disabled', this.checkboxes.length === 0)
+  }
+
+  updateHref () {
+    this.element.href = this.hrefWithSelectedIds
+  }
+
+  get checkboxes () {
+    if (this.hasCheckboxSelectOutlet) {
+      return this.checkboxSelectOutlet.checked
+    } else {
+      return []
+    }
+  }
+
+  get selectedIds () {
+    return this.checkboxes.map(c => c.value)
+  }
+
+  get hrefWithSelectedIds () {
+    const ids = this.selectedIds
+
+    if (ids.length) {
+      return `${this.baseHref}?ids=${ids.join(',')}`
+    } else {
+      return this.baseHref
+    }
+  }
+
+  checkboxSelectOutletConnected (outlet, element) {
+    element.addEventListener('checkbox-select:change', this.update.bind(this))
+  }
+
+  checkboxSelectOutletDisconnected (outlet, element) {
+    element.removeEventListener('checkbox-select:change', this.update.bind(this))
+  }
+}

frontend/js/controllers/checkbox_select_controller.js

@@ -5,6 +5,7 @@ export default class extends ApplicationController {
 
   toggle () {
     this.updateSelectAllState()
+    this.dispatch('change')
   }
 
   toggleAll () {
@@ -13,6 +14,8 @@ export default class extends ApplicationController {
     this.checkboxTargets.forEach((checkbox) => {
       checkbox.checked = isChecked
     })
+
+    this.dispatch('change')
   }
 
   updateSelectAllState () {

sandbox/app/admin/articles_admin.rb

@@ -57,4 +57,25 @@
       tag_select :tags
     end
   end
+
+  controller do
+    def batch_get
+      ids = params[:ids].split(",")
+      flash[:message] = { title: "Success!", message: "Performed batch action via GET with #{ids.size} articles." }
+      redirect_back fallback_location: admin.path
+    end
+
+    def batch_post
+      ids = params[:ids].split(",")
+      flash[:message] = { title: "Success!", message: "Performed batch action via POST with #{ids.size} articles." }
+      redirect_back fallback_location: admin.path
+    end
+  end
+
+  routes do
+    collection do
+      get :batch_get
+      post :batch_post
+    end
+  end
 end

sandbox/app/views/admin/articles/index.html.erb

@@ -0,0 +1,32 @@
+<% content_for(:title, admin.t("titles.index", default: "Listing %{pluralized_model_name}")) %>
+
+<% toolbar(:primary) do |t| %>
+  <%= t.new %>
+<% end %>
+
+<% toolbar(:secondary) do |t| %>
+  <%= t.link "Batch Action (GET)", action: :batch_get, style: :info, data: { controller: "batch-action" } %>
+  <%= t.link "Batch Action (POST)", action: :batch_post, style: :warning, data: { controller: "confirm batch-action", turbo_method: :post } %>
+<% end %>
+
+<% content_for(:utilities) do %>
+  <%= render "scopes" %>
+<% end if admin.scopes.any? %>
+
+<%= render layout: "layout" do %>
+  <%= index_turbo_frame do %>
+    <% if hook?("resource.index.header") %>
+      <header class="main-content-header">
+        <%= hook("resource.index.header") %>
+      </header>
+    <% end %>
+
+    <%= render "trestle/table/table", table: admin.table, collection: collection %>
+
+    <footer class="main-content-footer">
+      <%= hook("resource.index.footer") %>
+
+      <%= pagination collection: collection, entry_name: admin.model_name, remote: admin.pagination_options[:ajax] %>
+    </footer>
+  <% end %>
+<% end %>