diff --git a/app/views/admin/dfc_product_imports/index.html.haml b/app/views/admin/dfc_product_imports/index.html.haml
index f647ab75c4..720705d373 100644
--- a/app/views/admin/dfc_product_imports/index.html.haml
+++ b/app/views/admin/dfc_product_imports/index.html.haml
@@ -1,31 +1,40 @@
- content_for :page_title do
#{t(".title")}
-= render partial: 'spree/admin/shared/product_sub_menu'
-
-%p= t('.catalog_url', count: @items.count, catalog_url: @catalog_url)
-%p= t('.enterprise', enterprise_name: @enterprise.name)
-%br
-
-= form_with url: main_app.import_admin_dfc_product_imports_path do |form|
- -# This is a very inefficient way of holding a json blob. Maybe base64 encode or store as a temporary file
- = form.hidden_field :enterprise_id, value: @enterprise.id
- = form.hidden_field :catalog_json, value: @catalog_json
-
- %table
- %tbody
- - @items.each do |supplied_product, existing_product|
- %tr{id: supplied_product.semanticId }
- %td
- %label
- = form.check_box 'semanticIds[]', { checked: true }, supplied_product.semanticId, ""
- = supplied_product.name
- %td
- - if existing_product.present?
- = t(".update")
- = link_to(existing_product.id, edit_admin_product_path(existing_product))
- - else
- = t(".new")
+#dfc_product_imports
+ = render partial: 'spree/admin/shared/product_sub_menu'
+ %p= t('.catalog_url', count: @items.count, catalog_url: @catalog_url)
+ %p= t('.enterprise', enterprise_name: @enterprise.name)
%br
- = form.submit t(".import")
+
+ = form_with url: main_app.import_admin_dfc_product_imports_path, html: { "data-controller": "checked" } do |form|
+ -# This is a very inefficient way of holding a json blob. Maybe base64 encode or store as a temporary file
+ = form.hidden_field :enterprise_id, value: @enterprise.id
+ = form.hidden_field :catalog_json, value: @catalog_json
+
+ %table
+ %thead
+ %tr
+ %th
+ %input{ type: 'checkbox', title: t('.select_all'), 'aria-label': t('.select_all'), 'data-checked-target': "all" }
+ %th
+ %tbody
+ - @items.each do |supplied_product, existing_product|
+ %tr{id: supplied_product.semanticId }
+ %td
+ %label
+ = form.check_box 'semanticIds[]', { checked: true, 'data-checked-target': "checkbox" }, supplied_product.semanticId, ""
+ = supplied_product.name
+ %td
+ - if existing_product.present?
+ = t(".update")
+ = link_to(existing_product.id, edit_admin_product_path(existing_product))
+ - else
+ = t(".new")
+
+ %span{ "data-controller": "checked-feedback", "data-checked-feedback-translation-value": "admin.dfc_product_imports.index.selected" }
+ = t(".selected", count: @items.count)
+
+ %br
+ = form.submit t(".import")
diff --git a/app/views/admin/order_cycles/checkout_options.html.haml b/app/views/admin/order_cycles/checkout_options.html.haml
index e43d322b09..ac0fc1abf5 100644
--- a/app/views/admin/order_cycles/checkout_options.html.haml
+++ b/app/views/admin/order_cycles/checkout_options.html.haml
@@ -25,7 +25,7 @@
%td.text-center
- if distributor_shipping_methods.many?
%label
- = check_box_tag nil, nil, nil, { "data-action": "change->checked#toggleAll", "data-checked-target": "all" }
+ = check_box_tag nil, nil, nil, { "data-checked-target": "all" }
= t(".select_all")
%td
%em= distributor.name
@@ -36,7 +36,7 @@
distributor_shipping_method.id,
@order_cycle.distributor_shipping_methods.include?(distributor_shipping_method),
id: "order_cycle_selected_distributor_shipping_method_ids_#{distributor_shipping_method.id}",
- data: ({ "action" => "change->checked#toggleCheckbox", "checked-target" => "checkbox" } if distributor_shipping_method.shipping_method.frontend?)
+ data: ({ "checked-target" => "checkbox" } if distributor_shipping_method.shipping_method.frontend?)
= distributor_shipping_method.shipping_method.name
- distributor.shipping_methods.backend.each do |shipping_method|
%label.disabled
@@ -67,7 +67,7 @@
distributor_payment_method.id,
@order_cycle.distributor_payment_methods.include?(distributor_payment_method),
id: "order_cycle_selected_distributor_payment_method_ids_#{distributor_payment_method.id}",
- data: ({ "action" => "change->checked#toggleCheckbox", "checked-target" => "checkbox" } if distributor_payment_method.payment_method.frontend?)
+ data: ({ "checked-target" => "checkbox" } if distributor_payment_method.payment_method.frontend?)
= distributor_payment_method.payment_method.name
- distributor.payment_methods.inactive_or_backend.each do |payment_method|
%label.disabled
diff --git a/app/views/spree/admin/orders/_table.html.haml b/app/views/spree/admin/orders/_table.html.haml
index 237e309106..65ff904bec 100644
--- a/app/views/spree/admin/orders/_table.html.haml
+++ b/app/views/spree/admin/orders/_table.html.haml
@@ -10,7 +10,7 @@
%thead
%tr
%th
- %input#selectAll{ type: 'checkbox', data: { "checked-target": "all", action: "change->checked#toggleAll" } }
+ %input#selectAll{ type: 'checkbox', 'data-checked-target': "all" }
%th
= t(:products_distributor)
diff --git a/app/views/spree/admin/orders/_table_row.html.haml b/app/views/spree/admin/orders/_table_row.html.haml
index 7cc4aae10f..4027bcf6da 100644
--- a/app/views/spree/admin/orders/_table_row.html.haml
+++ b/app/views/spree/admin/orders/_table_row.html.haml
@@ -1,6 +1,6 @@
%tr{ id: dom_id(order), class: "state-#{order.state}" }
%td.align-left
- %input{type: 'checkbox', value: order.id, name: 'bulk_ids[]', "data-checked-target": "checkbox", "data-action": "change->checked#toggleCheckbox" }
+ %input{type: 'checkbox', value: order.id, name: 'bulk_ids[]', "data-checked-target": "checkbox" }
%td.align-left
= order.distributor.name
%td.align-left
diff --git a/app/webpacker/controllers/checked_controller.js b/app/webpacker/controllers/checked_controller.js
index acca8ec0dd..cc0c8392bd 100644
--- a/app/webpacker/controllers/checked_controller.js
+++ b/app/webpacker/controllers/checked_controller.js
@@ -8,6 +8,14 @@ export default class extends Controller {
this.toggleCheckbox();
}
+ allTargetConnected(allTarget) {
+ allTarget.addEventListener("change", this.toggleAll.bind(this));
+ }
+
+ checkboxTargetConnected(checkboxTarget) {
+ checkboxTarget.addEventListener("change", this.toggleCheckbox.bind(this));
+ }
+
toggleAll() {
this.checkboxTargets.forEach((checkbox) => {
checkbox.checked = this.allTarget.checked;
diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 32eba7ddde..a339a20457 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -133,3 +133,4 @@
@import "terms_of_service_banner"; // admin_v3
@import "pages/product_preview"; // admin_v3
+@import "pages/dfc_product_imports"; // admin_v3
diff --git a/app/webpacker/css/admin_v3/pages/dfc_product_imports.scss b/app/webpacker/css/admin_v3/pages/dfc_product_imports.scss
new file mode 100644
index 0000000000..4f96a6b3c3
--- /dev/null
+++ b/app/webpacker/css/admin_v3/pages/dfc_product_imports.scss
@@ -0,0 +1,12 @@
+
+#dfc_product_imports {
+ // Ensure label reaches to edge of table cell
+ td:has(> label) {
+ padding: 0;
+ }
+ td > label {
+ display: block;
+ padding: 7px 5px;
+ font-size: inherit;
+ }
+}
\ No newline at end of file
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 5e62783784..b9babe4178 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -854,8 +854,13 @@ en:
title: "DFC product catalog"
catalog_url: "%{count} products to be imported from: %{catalog_url}"
enterprise: "Import to enterprise: %{enterprise_name}"
+ select_all: "Select/deselect all"
update: Update
new: New
+ selected:
+ zero: "0 selected"
+ one: "1 selected"
+ other: "%{count} selected"
import: Import
import:
title: "DFC product catalog import"
diff --git a/spec/javascripts/stimulus/checked_controller_test.js b/spec/javascripts/stimulus/checked_controller_test.js
index 772d519ea0..1018f1ff6d 100644
--- a/spec/javascripts/stimulus/checked_controller_test.js
+++ b/spec/javascripts/stimulus/checked_controller_test.js
@@ -17,17 +17,14 @@ describe("CheckedController", () => {
`;
@@ -87,18 +84,15 @@ describe("CheckedController", () => {
diff --git a/spec/system/admin/dfc_product_import_spec.rb b/spec/system/admin/dfc_product_import_spec.rb
index 55bcdd7ec9..7955217ea7 100644
--- a/spec/system/admin/dfc_product_import_spec.rb
+++ b/spec/system/admin/dfc_product_import_spec.rb
@@ -65,7 +65,13 @@ RSpec.describe "DFC Product Import" do
expect(page).to have_content "Beans - Case, 12 x 400g (can) New"
expect(page).to have_content "Chia Seed, Organic - Retail pack, 300g"
- uncheck "Chia Seed, Organic - Case, 8 x 300g" # don't import this one
+ # I can select all
+ uncheck "Chia Seed, Organic - Case, 8 x 300g"
+ check "Select/deselect all"
+ expect(page).to have_checked_field "Chia Seed, Organic - Case, 8 x 300g"
+
+ # And deselect one
+ uncheck "Chia Seed, Organic - Case, 8 x 300g"
expect {
click_button "Import"