Use selectable.js code on return items.

This commit updates the JS and HTML code related to return items, to
use the selectable.js code.

You can see the code working on:
/admin/orders/ORDER_NUMBER/customer_returns/new
/admin/orders/ORDER_NUMBER/return_authorizations/new

return_item_selection.js file is removed in favor of HBS template.

backend/app/assets/javascripts/spree/backend.js

@@ -31,6 +31,7 @@
 //= require spree/backend/components/editable_table
 //= require spree/backend/components/selectable_table
 //= require spree/backend/components/selectable_table/summary
+//= require spree/backend/components/selectable_table/return_items
 //= require spree/backend/components/sortable_table
 //= require spree/backend/components/admin_nav
 //= require spree/backend/datepicker
@@ -50,7 +51,6 @@
 //= require spree/backend/progress
 //= require spree/backend/promotions
 //= require spree/backend/promotions/activation
-//= require spree/backend/returns/return_item_selection
 //= require spree/backend/routes
 //= require spree/backend/shipments
 //= require spree/backend/spree-select2

backend/app/assets/javascripts/spree/backend/components/selectable_table/return_items.js

@@ -0,0 +1,5 @@
+Backbone.on('selectableTable:init', function(selectableTable){
+  if(selectableTable.$el.hasClass('return-items-table')) {
+    new Spree.Views.Tables.ReturnItems({el: selectableTable.el, model: selectableTable.model});
+  }
+})

backend/app/assets/javascripts/spree/backend/templates/index.js

@@ -1,5 +1,6 @@
 //= require spree/backend/templates/_image
 //= require spree/backend/templates/tables/selectable_label
+//= require spree/backend/templates/tables/return_item_sum_amount
 //= require spree/backend/templates/orders/customer_details/autocomplete
 //= require spree/backend/templates/orders/details_adjustment_row
 //= require spree/backend/templates/orders/line_item

backend/app/assets/javascripts/spree/backend/templates/tables/return_item_sum_amount.hbs

@@ -0,0 +1,7 @@
+<tr class="selectable-header">
+  <th class="selectable-table-summary" colspan="2">
+  </th>
+  <td colspan="7" class="text-right">
+    {{total_pre_tax_refund}} <span id="total_pre_tax_refund">{{total_selected_item_amount}}</span>
+  </td>
+</tr>

backend/app/assets/javascripts/spree/backend/views/index.js

@@ -24,5 +24,7 @@
 //= require 'spree/backend/views/promotions/option_values_rule'
 //= require 'spree/backend/views/tables/editable_table'
 //= require 'spree/backend/views/tables/editable_table_row'
+//= require 'spree/backend/views/tables/return_items'
 //= require 'spree/backend/views/tables/selectable_table'
 //= require 'spree/backend/views/tables/selectable_table/summary'
+//= require 'spree/backend/views/tables/selectable_table/sum_return_item_amount'

backend/app/assets/javascripts/spree/backend/views/tables/return_items.js

@@ -0,0 +1,9 @@
+Spree.Views.Tables.ReturnItems = Backbone.View.extend({
+  initialize: function() {
+    if(this.$el.hasClass('return-items-table')) {
+      var tfoot = document.createElement('tfoot')
+      new Spree.Views.Tables.SelectableTable.SumReturnItemAmount({el: tfoot, model: this.model});
+      this.$el.append(tfoot);
+    }
+  },
+})

backend/app/assets/javascripts/spree/backend/views/tables/selectable_table/sum_return_item_amount.js

@@ -0,0 +1,32 @@
+Spree.Views.Tables.SelectableTable.SumReturnItemAmount = Backbone.View.extend({
+  initialize: function(options) {
+    this.listenTo(this.model, 'change', this.render);
+
+    this.render();
+  },
+
+  render: function() {
+    var html = HandlebarsTemplates['tables/return_item_sum_amount']({
+      total_pre_tax_refund: Spree.t("total_pre_tax_refund"),
+      total_selected_item_amount: this.totalSelectedReturnItemAmount()
+    });
+
+    this.$el.html(html);
+  },
+
+  totalSelectedReturnItemAmount: function () {
+    var totalAmount = 0.00;
+    var selectedItems = [];
+
+    if(this.model.get('allSelected')) {
+      selectedItems = $('.selectable');
+    } else {
+      selectedItems = $(this.model.attributes.selectedItems);
+    }
+    selectedItems.each(function(_, selectedItem){
+      totalAmount += $(selectedItem).data('price');
+    })
+
+    return totalAmount;
+  },
+});

backend/app/views/spree/admin/customer_returns/_return_item_selection.html.erb

@@ -1,8 +1,7 @@
-<table class="index return-items-table">
+<table class="index return-items-table selectable-table">
   <thead>
     <tr>
       <th>
-        <%= check_box_tag 'select-all' %>
       </th>
       <th><%= Spree::Product.model_name.human %></th>
       <th><%= Spree::Variant.human_attribute_name(:sku) %></th>
@@ -25,7 +24,7 @@
             <%= item_fields.hidden_field :return_authorization_id %>
             <%= item_fields.hidden_field :amount %>
           </div>
-          <%= item_fields.check_box :returned, {checked: false, class: 'add-item', "data-price" => return_item.amount}, '1', '0' %>
+          <%= item_fields.check_box :returned, {checked: false, class: 'selectable add-item', "data-price" => return_item.amount}, '1', '0' %>
         </td>
         <td>
           <div class="variant-name"><%= return_item.inventory_unit.variant.name %></div>

backend/app/views/spree/admin/return_authorizations/_form.html.erb

@@ -1,13 +1,10 @@
 <% allow_return_item_changes = !@return_authorization.customer_returned_items? %>
 
 <div data-hook="admin_return_authorization_form_fields">
-  <table class="index return-items-table">
+  <table class="index return-items-table selectable-table">
     <thead>
       <tr data-hook="rma_header">
-        <th class="return-item-checkbox">
-          <% if allow_return_item_changes %>
-            <%= check_box_tag 'select-all' %>
-          <% end %>
+        <th>
         </th>
         <th class="return-item-product"><%= Spree::Product.model_name.human %></th>
         <th class="return-item-state"><%= Spree::ReturnAuthorization.human_attribute_name(:state) %></th>
@@ -27,7 +24,7 @@
           <td class="return-item-checkbox inventory-unit-checkbox">
             <% if editable %>
               <%= item_fields.hidden_field :inventory_unit_id %>
-              <%= item_fields.check_box :_destroy, {checked: return_item.persisted?, class: 'add-item', "data-price" => return_item.amount}, '0', '1' %>
+              <%= item_fields.check_box :_destroy, {checked: return_item.persisted?, class: 'selectable add-item', "data-price" => return_item.amount}, '0', '1' %>
             <% end %>
           </td>
           <td class="return-item-product">
@@ -75,10 +72,6 @@
     </tbody>
   </table>
 
-  <%= f.field_container :amount do %>
-    <%= t('spree.total_pre_tax_refund') %>: <span id="total_pre_tax_refund">0.00</span>
-  <% end %>
-
   <%= f.field_container :stock_location do %>
     <%= f.label :stock_location_id, Spree::StockLocation.model_name.human %>
     <%= f.select :stock_location_id, @stock_locations.to_a.collect{|l|[l.name, l.id]}, {include_blank: true}, {class: 'custom-select fullwidth', "data-placeholder" => t('spree.select_a_stock_location')} %>

backend/spec/features/admin/orders/return_authorizations_spec.rb

@@ -38,7 +38,7 @@ def create_return_authorization
         visit spree.new_admin_order_return_authorization_path(order)
       end
 
-      it "creates a return authorization" do
+      it "creates a return authorization", :js do
         create_return_authorization
 
         expect(page).to have_content "Return Authorization has been successfully created!"