Merge pull request #13168 from dacook/dfc-product-import-select-all-12301

[DFC Orders] Select/deselect all on DFC Product Import

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")

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

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)
 

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

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;

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

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;
+  }
+}

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"

spec/javascripts/stimulus/checked_controller_test.js

@@ -17,17 +17,14 @@ describe("CheckedController", () => {
         <input
           id="selectAllCheckbox"
           type="checkbox"
-          data-action="change->checked#toggleAll"
           data-checked-target="all">
         <input
           id="checkboxA"
           type="checkbox"
-          data-action="change->checked#toggleCheckbox"
           data-checked-target="checkbox">
         <input
           id="checkboxB"
           type="checkbox"
-          data-action="change->checked#toggleCheckbox"
           data-checked-target="checkbox">
       </div>
     `;
@@ -87,18 +84,15 @@ describe("CheckedController", () => {
           <input
             id="selectAllCheckbox"
             type="checkbox"
-            data-action="change->checked#toggleAll"
             data-checked-target="all">
           <input
             id="checkboxA"
             type="checkbox"
-            data-action="change->checked#toggleCheckbox"
             data-checked-target="checkbox"
             checked="checked">
           <input
             id="checkboxB"
             type="checkbox"
-            data-action="change->checked#toggleCheckbox"
             data-checked-target="checkbox"
             checked="checked">
         </div>

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"