Reinstate dropdown-with-prepend

app/views/spree/admin/orders/_bulk_actions.html.haml

@@ -1,20 +1,25 @@
-%button.plain.ofn-drop-down.disabled{ "data-checked-target": "disable" }
-  %span{ class: 'icon-reorder' }
-    ="#{t('admin.actions')}".html_safe
-  %span.toggle-off.icon-caret-up
-  %span.toggle-on.icon-caret-down
+.ofn-drop-down-with-prepend
+  .ofn-drop-down-prepend.disabled{ "data-checked-target": "disable" }
+    %span{ "data-controller": "checked-feedback", "data-checked-feedback-translation-value": "spree.admin.orders.index.selected" }
+      = t("spree.admin.orders.index.selected", count: 0)
 
-  %div.menu.dropdown-content
-    %div.menu_item
-      %span.name{ "data-controller": "modal-link", "data-action": "click->modal-link#open", "data-modal-link-target-value": "resend_confirmation" }
-        = t('spree.admin.orders.index.resend_confirmation')
-    - if Spree::Config[:enable_invoices?]
+  %button.plain.ofn-drop-down.disabled{ "data-checked-target": "disable" }
+    %span{ class: 'icon-reorder' }
+      ="#{t('admin.actions')}".html_safe
+    %span.toggle-off.icon-caret-up
+    %span.toggle-on.icon-caret-down
+
+    %div.menu.dropdown-content
       %div.menu_item
-        %span.name{ "data-controller": "modal-link", "data-action": "click->modal-link#open", "data-modal-link-target-value": "send_invoice" }
-          = t('spree.admin.orders.index.send_invoice')
+        %span.name{ "data-controller": "modal-link", "data-action": "click->modal-link#open", "data-modal-link-target-value": "resend_confirmation" }
+          = t('spree.admin.orders.index.resend_confirmation')
+      - if Spree::Config[:enable_invoices?]
+        %div.menu_item
+          %span.name{ "data-controller": "modal-link", "data-action": "click->modal-link#open", "data-modal-link-target-value": "send_invoice" }
+            = t('spree.admin.orders.index.send_invoice')
+        %div.menu_item
+          %span.name{ "data-controller": "bulk-actions", "data-action": "click->bulk-actions#perform", "data-bulk-actions-reflex-value": "Admin::Orders#bulk_invoice" }
+            = t('spree.admin.orders.index.print_invoices')
       %div.menu_item
-        %span.name{ "data-controller": "bulk-actions", "data-action": "click->bulk-actions#perform", "data-bulk-actions-reflex-value": "Admin::Orders#bulk_invoice" }
-          = t('spree.admin.orders.index.print_invoices')
-    %div.menu_item
-      %span.name{ "data-controller": "modal-link", "data-action": "click->modal-link#open", "data-modal-link-target-value": "cancel_orders" }
-        = t('spree.admin.orders.index.cancel_orders')
+        %span.name{ "data-controller": "modal-link", "data-action": "click->modal-link#open", "data-modal-link-target-value": "cancel_orders" }
+          = t('spree.admin.orders.index.cancel_orders')

app/webpacker/controllers/checked_controller.js

@@ -2,6 +2,7 @@ import { Controller } from "stimulus";
 
 export default class extends Controller {
   static targets = ["all", "checkbox", "disable"];
+  static values = { count: Number };
 
   connect() {
     this.toggleCheckbox();
@@ -11,29 +12,44 @@ export default class extends Controller {
     this.checkboxTargets.forEach((checkbox) => {
       checkbox.checked = this.allTarget.checked;
     });
+
+    this.countValue = this.allTarget.checked ? this.checkboxTargets.length : 0;
+
     this.#toggleDisabled();
   }
 
   toggleCheckbox() {
-    this.allTarget.checked = this.checkboxTargets.every((checkbox) => checkbox.checked);
+    this.countValue = this.#checkedCount();
+    this.allTarget.checked = this.#allChecked();
+
     this.#toggleDisabled();
   }
 
+  countValueChanged() {
+    window.dispatchEvent(
+      new CustomEvent("checked:updated", { detail: { count: this.countValue } })
+    );
+  }
+
   // private
 
+  #checkedCount() {
+    return this.checkboxTargets.filter((checkbox) => checkbox.checked).length;
+  }
+
+  #allChecked() {
+    return this.countValue === this.checkboxTargets.length;
+  }
+
   #toggleDisabled() {
     if (!this.hasDisableTarget) {
       return;
     }
 
-    if (this.#noneChecked()) {
+    if (this.#checkedCount() === 0) {
       this.disableTargets.forEach((element) => element.classList.add("disabled"));
     } else {
       this.disableTargets.forEach((element) => element.classList.remove("disabled"));
     }
   }
-
-  #noneChecked() {
-    return this.checkboxTargets.every((checkbox) => !checkbox.checked);
-  }
 }

app/webpacker/controllers/checked_feedback_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static values = { translation: String };
+
+  connect() {
+    window.addEventListener("checked:updated", this.updateFeedback);
+  }
+
+  disconnect() {
+    window.removeEventListener("checked:updated", this.updateFeedback);
+  }
+
+  updateFeedback = (event) => {
+    this.element.textContent = I18n.t(this.translationValue, {
+      count: event?.detail?.count ? event.detail.count : 0,
+    });
+  };
+}