Nebulab/bulk actions

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

@@ -25,6 +25,7 @@
 //= require spree/backend/admin
 //= require spree/backend/calculator
 //= require spree/backend/checkouts/edit
+//= require spree/backend/components/modals
 //= require spree/backend/components/number_with_currency
 //= require spree/backend/components/tabs
 //= require spree/backend/components/tooltips

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

@@ -0,0 +1,21 @@
+/**
+ * Use this file to retrieve and store the modal that should be global to the
+ * site
+ *
+ * e.g.
+ * Spree.ready(function() {
+ *   $('#batch-preview').each(function() {
+ *     Spree.Views.Modals.batchPreview($(this))
+ *   });
+ * });
+ *
+ */
+Spree.ready(function() {
+  $('#batch-preview').each(function() {
+    Spree.Views.Modals.batchPreview($(this))
+  })
+
+  $('#batch-result').each(function() {
+    Spree.Views.Modals.batchResult($(this))
+  })
+});

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

@@ -1,7 +1,12 @@
 Backbone.on('selectableTable:init', function(selectableTable){
   if(selectableTable.$el.find('.selectable').length > 0) {
     var tr = document.createElement('tr')
-    new Spree.Views.Tables.SelectableTable.Summary({el: tr, model: selectableTable.model , columns: selectableTable.maxColumns()});
+    new Spree.Views.Tables.SelectableTable.Summary({
+      el: tr,
+      model: selectableTable.model,
+      columns: selectableTable.maxColumns(),
+      selectableTable: selectableTable
+    });
     selectableTable.$el.find('thead').prepend(tr);
   }
 })

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

@@ -10,6 +10,7 @@ _.extend(window.Spree, {
     Payment: {},
     Promotions: {},
     Stock: {},
-    Tables: {}
+    Tables: {},
+    Modals: {}
   }
 })

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

@@ -1,6 +1,7 @@
 //= 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/tables/actions
 //= 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/actions.hbs

@@ -0,0 +1,5 @@
+{{#if itemSelected}}
+  {{#each actions}}
+    {{{this}}}
+  {{/each}}
+{{/if}}

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

@@ -1,6 +1,10 @@
 <th>
   <input type="checkbox" {{#if all_items_selected}}checked="checked"{{/if}} name="select-all" class="selectAll" id="select-all" value="1">
 </th>
-<th colspan="{{colspan}}">
+<th colspan="{{colspan}}" class="label">
   {{item_selected_label}}
 </th>
+{{#if actionable}}
+<th colspan="{{actionableColspan}}" class="actions">
+</th>
+{{/if}}

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

@@ -28,3 +28,8 @@
 //= 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'
+//= require 'spree/backend/views/tables/selectable_table/actions'
+//= require 'spree/backend/views/modals'
+//= require 'spree/backend/views/modals/batch'
+//= require 'spree/backend/views/modals/batch/preview'
+//= require 'spree/backend/views/modals/batch/result'

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

@@ -0,0 +1,32 @@
+/**
+ * Use this file to store the global modal
+ *
+ * e.g.
+ * Spree.Views.Modals = {
+ *   myModal: function($el = null) {
+ *     if($el != null) {
+ *       this.myGlobalModal = new Spree.Views.Modals.MyModal({el: $el})
+ *     }
+ *
+ *     return this.myGlobalModal;
+ *   },
+ * }
+ *
+ */
+Spree.Views.Modals = {
+  batchPreview: function($el = null) {
+    if($el != null) {
+      this.modalBatchPreview = new Spree.Views.Modals.Batch.Preview({el: $el})
+    }
+
+    return this.modalBatchPreview;
+  },
+
+  batchResult: function($el = null) {
+    if($el != null) {
+      this.modalBatchResult = new Spree.Views.Modals.Batch.Result({el: $el})
+    }
+
+    return this.modalBatchResult;
+  }
+};

backend/app/assets/javascripts/spree/backend/views/modals/batch.js

@@ -0,0 +1 @@
+Spree.Views.Modals.Batch = {}

backend/app/assets/javascripts/spree/backend/views/modals/batch/preview.js

@@ -0,0 +1,37 @@
+Spree.Views.Modals.Batch.Preview = Backbone.View.extend({
+  events: {
+    'click #btn-process': 'process'
+  },
+
+  show: function(options) {
+    this.processBatchUrl = options.processBatchUrl;
+    this.searchForm = options.searchForm;
+    this.action = options.action;
+    this.$el.modal('show');
+  },
+
+  process: function() {
+    var inputAction = document.createElement('input');
+    inputAction.name = 'batch_action_type';
+    inputAction.value = this.action;
+    this.searchForm.append(inputAction);
+
+    this.$el.modal('hide');
+
+    Spree.ajax({
+      type: 'POST',
+      url: this.processBatchUrl,
+      data: this.searchForm.serialize(),
+      success: function() {
+        Spree.Views.Modals.batchResult().show()
+      },
+      error: function(msg) {
+        if (msg.responseJSON["error"]) {
+          show_flash('error', msg.responseJSON["error"]);
+        } else {
+          show_flash('error', "There was a problem adding this coupon code.");
+        }
+      }
+    });
+  }
+})

backend/app/assets/javascripts/spree/backend/views/modals/batch/result.js

@@ -0,0 +1,14 @@
+Spree.Views.Modals.Batch.Result = Backbone.View.extend({
+  events: {
+    'click #btn-close': 'close'
+  },
+
+  show: function() {
+    this.$el.modal('show');
+  },
+
+  close: function() {
+    this.$el.modal('hide');
+    document.location.reload();
+  }
+})

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

@@ -0,0 +1,67 @@
+Spree.Views.Tables.SelectableTable.Actions = Backbone.View.extend({
+  events: {
+    'click a.batch-action': 'previewBatchAction'
+  },
+
+  initialize: function(options) {
+    this.listenTo(this.model, 'change', this.render);
+
+    this.selectableTable = options.selectableTable;
+    this.actions = this.selectableTable.$el.data('actions');
+    this.searchForm = $(this.selectableTable.$el.data('searchFormSelector')).clone();
+    this.previewBatchUrl = this.selectableTable.$el.data('previewBatchUrl');
+    this.processBatchUrl = this.selectableTable.$el.data('processBatchUrl');
+
+    this.render();
+  },
+
+  render: function() {
+    var html = HandlebarsTemplates['tables/actions']({
+      itemSelected: this.model.get('selectedItems').length > 0 || this.model.get('allSelected'),
+      actions: this.actions
+    });
+
+    this.$el.html(html);
+  },
+
+  previewBatchAction: function(e) {
+    var self = this;
+
+    var action = $(e.currentTarget).data('action');
+    var inputAction = document.createElement('input');
+    inputAction.name = 'batch_action_type';
+    inputAction.value = action;
+
+    if(this.selectableTable.$el.find('.selectAll:checked').length == 0) {
+      this.selectableTable.$el.find('.selectable:checked').each(function(_i, item){
+        self.searchForm.append($(item).clone());
+      })
+    }
+
+    this.searchForm.append(inputAction);
+
+    options = {
+      processBatchUrl: this.processBatchUrl,
+      searchForm: this.searchForm,
+      action: action
+    }
+
+    Spree.ajax({
+      type: 'POST',
+      url: this.previewBatchUrl,
+      data: this.searchForm.serialize(),
+      success: function() {
+        Spree.Views.Modals.batchPreview().show(options);
+      },
+      error: function(msg) {
+        if (msg.responseJSON["error"]) {
+          show_flash('error', msg.responseJSON["error"]);
+        } else {
+          show_flash('error', "There was a problem adding this coupon code.");
+        }
+      }
+    });
+
+    this.searchForm = $(this.selectableTable.$el.data('searchFormSelector')).clone();
+  }
+});

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

@@ -14,6 +14,15 @@ Spree.Views.Tables.SelectableTable.Summary = Backbone.View.extend({
     this.listenTo(this.model, 'change', this.render)
 
     this.colspan = options.columns - 1;
+    this.actionableColspan = 0
+
+    this.selectableTable = options.selectableTable;
+    this.actionable = this.selectableTable.$el.hasClass('actionable')
+
+    if(this.actionable) {
+      this.colspan = options.columns - 3
+      this.actionableColspan = 3
+    }
 
     this.render();
   },
@@ -23,12 +32,22 @@ Spree.Views.Tables.SelectableTable.Summary = Backbone.View.extend({
     var all_items_selected = this.model.get('allSelected');
 
     var html = HandlebarsTemplates['tables/selectable_label']({
+      actionable: this.actionable,
+      actionableColspan: this.actionableColspan,
       colspan: this.colspan,
       item_selected_label: this.selectedItemLabel(all_items_selected, selectedItemLength),
       all_items_selected: all_items_selected
     });
 
     this.$el.html(html);
+
+    if(this.actionable) {
+      new Spree.Views.Tables.SelectableTable.Actions({
+        el: this.$el.find('th.actions'),
+        model: this.model,
+        selectableTable: this.selectableTable,
+      });
+    }
   },
 
   selectedItemLabel: function(all_selected, selected_item_length) {

backend/app/assets/stylesheets/spree/backend/components/selectable_table.scss

@@ -0,0 +1,4 @@
+.selectable-table .action-buttons {
+  margin-right: 0px;
+  float: right;
+}

backend/app/assets/stylesheets/spree/backend/spree_admin.scss

@@ -33,6 +33,7 @@
 @import 'spree/backend/components/navigation';
 @import 'spree/backend/components/sidebar';
 @import 'spree/backend/components/editable_table';
+@import 'spree/backend/components/selectable_table';
 @import 'spree/backend/components/pills';
 @import 'spree/backend/components/tabs';
 

backend/app/controllers/spree/admin/products_controller.rb

@@ -5,6 +5,11 @@ module Admin
     class ProductsController < ResourceController
       helper 'spree/products'
 
+      include Spree::Backend::Batch
+      set_batch_actions [
+        { action: 'Spree::BatchAction::DestroyRecordAction', icon: :trash, label: :delete }
+      ]
+
       before_action :load_data, except: [:index]
       update.before :update_before
       helper_method :clone_object_url

backend/app/helpers/spree/admin/actionable_helper.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Spree
+  module Admin
+    module ActionableHelper
+      extend ActiveSupport::Concern
+
+      def batch_action_buttons(batch_actions)
+        batch_actions.map do |batch_action|
+          link_to_batch_action(batch_action)
+        end
+      end
+
+      def link_to_batch_action(icon:, label:, action:)
+        options = {}
+        options[:class] = "fa fa-#{icon} icon_link with-tip batch-action no-text"
+        options[:title] = label
+        options[:data] = { action: action }
+        options.delete(:no_text)
+        link_to('', '#', options)
+      end
+    end
+  end
+end

backend/app/views/spree/admin/batch_actions/_preview.html.erb

@@ -0,0 +1,19 @@
+<div class="modal fade" id="<%= target %>" role="dialog" aria-labelledby="<%= target %>" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="<%= target %>"><%= title %></h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <%= content %>
+      </div>
+      <div class="modal-footer">
+        <button type="button" id="btn-process" class="btn btn-primary">Process</button>
+        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+      </div>
+    </div>
+  </div>
+</div>

backend/app/views/spree/admin/batch_actions/_process.html.erb

@@ -0,0 +1,18 @@
+<div class="modal fade" id="<%= target %>" role="dialog" aria-labelledby="<%= target %>" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="<%= target %>"><%= title %></h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <%= content %>
+      </div>
+      <div class="modal-footer">
+        <button type="button" id="btn-close" class="btn btn-primary">Close</button>
+      </div>
+    </div>
+  </div>
+</div>

backend/app/views/spree/admin/batch_actions/destroy_record_action/_preview.html.erb

@@ -0,0 +1 @@
+<%= t('spree.batch_actions.destroy_record_action.confirm', total_count: @batch_action_collection.total_count) %>

backend/app/views/spree/admin/batch_actions/destroy_record_action/_result.html.erb

@@ -0,0 +1 @@
+<%= t('spree.batch_actions.destroy_record_action.result', total_count: @batch_action_collection.total_count) %>