Merge pull request #2862 from tvdeyen/stock-items-modify

[RFC] New stock management

backend/app/assets/javascripts/spree/backend/templates/stock_items/stock_location_stock_item.hbs

@@ -1,36 +1,35 @@
-<td>{{stockLocationName}}</td>
-<td>
+<td class="stock-location-name">{{stockLocationName}}</td>
+<td class="align-center">
   <input id="backorderable-{{id}}"
          name="backorderable"
          type="checkbox"
          value="backorderable"
-         {{#unless editing}} disabled="disabled" {{/unless}}
          {{#if backorderable}} checked="checked" {{/if}}
    >
 </td>
+<td class="align-center">
+  <span
+    {{#if negative}}
+    class="negative count-on-hand-display"
+    {{else}}
+    class="count-on-hand-display"
+    {{/if}}
+    >{{count_on_hand}}</span>
+</td>
 <td>
-  {{#if editing}}
-    <form>
-      <input
-      {{#if negative}}
-        class="fullwidth negative"
-      {{else}}
-        class="fullwidth"
-      {{/if}}
-      name="count_on_hand"
-      type="number"
-      value="{{count_on_hand}}"
-    >
-    </form>
-  {{else}}
-    <span {{#if negative}}class="negative"{{/if}}>{{count_on_hand}}</span>
-  {{/if}}
+  <form>
+    <input
+    {{#if negative}}
+      class="fullwidth negative"
+    {{else}}
+      class="fullwidth"
+    {{/if}}
+    name="count_on_hand"
+    type="number"
+    value="0">
+  </form>
 </td>
 <td class="actions">
-  {{#if editing}}
-    <a class="submit fa fa-check icon_link with-tip no-text" data-action="save" href="#"></a>
-    <a class="cancel fa fa-cancel icon_link with-tip no-text" data-action="cancel" href="#"></a>
-  {{else}}
-    <a class="edit fa fa-edit icon_link with-tip no-text" data-action="edit" href="#"></a>
-  {{/if}}
+  <a class="submit fa fa-check icon_link with-tip no-text" data-action="save" href="#"></a>
+  <a class="cancel fa fa-cancel icon_link with-tip no-text" data-action="cancel" href="#"></a>
 </td>

backend/app/assets/javascripts/spree/backend/views/stock/add_stock_item.js

@@ -6,14 +6,23 @@ Spree.Views.Stock.AddStockItem = Backbone.View.extend({
   },
 
   events: {
-    "click .submit": "onSubmit"
+    "click .submit": "onSubmit",
+    "submit form": "onSubmit",
+    'input [name="count_on_hand"]': "onChange",
+    'change [name="stock_location_id"]': "onChange",
+    'click [name="backorderable"]': "onChange"
   },
 
   validate: function() {
-    var locationSelectContainer = this.$locationSelect.siblings('.select2-container');
-    locationSelectContainer.toggleClass('error', !this.$locationSelect.val());
+    this.$locationSelect.toggleClass('error', !this.$locationSelect.val());
     this.$countInput.toggleClass('error', !this.$countInput.val());
-    return locationSelectContainer.hasClass('error') || this.$countInput.hasClass('error');
+    return this.$locationSelect.hasClass('error') || this.$countInput.hasClass('error');
+  },
+
+  onChange: function (event) {
+    var $target = $(event.target)
+    if ($target.val() !== '') $target.removeClass('error');
+    this.$el.addClass('changed');
   },
 
   onSuccess: function() {
@@ -25,6 +34,7 @@ Spree.Views.Stock.AddStockItem = Backbone.View.extend({
       stockLocationName: stockLocationName
     });
     editView.$el.insertBefore(this.$el);
+    editView.$el.addClass('stock-item-edit-row');
     this.model = new Spree.Models.StockItem({
       variant_id: this.model.get('variant_id'),
       stock_location_id: this.model.get('stock_location_id')
@@ -58,6 +68,7 @@ Spree.Views.Stock.AddStockItem = Backbone.View.extend({
       success: this.onSuccess.bind(this),
       error: this.onError.bind(this)
     };
+    this.$el.removeClass('changed');
     this.model.save(null, options);
   }
 });

backend/app/assets/javascripts/spree/backend/views/stock/edit_stock_item_row.js

@@ -3,16 +3,17 @@ Spree.Views.Stock.EditStockItemRow = Backbone.View.extend({
 
   initialize: function(options) {
     this.stockLocationName = options.stockLocationName;
-    this.editing = false;
     this.negative = this.model.attributes.count_on_hand < 0;
+    this.previousAttributes = _.clone(this.model.attributes);
+    this.listenTo(this.model, 'sync', this.onSuccess);
     this.render();
   },
 
   events: {
-    "click .edit": "onEdit",
     "click .submit": "onSubmit",
     "submit form": "onSubmit",
-    "click .cancel": "onCancel"
+    "click .cancel": "onCancel",
+    'input [name="count_on_hand"]': "countOnHandChanged"
   },
 
   template: HandlebarsTemplates['stock_items/stock_location_stock_item'],
@@ -26,26 +27,43 @@ Spree.Views.Stock.EditStockItemRow = Backbone.View.extend({
     _.extend(renderAttr, this.model.attributes);
     this.$el.attr("data-variant-id", this.model.get('variant_id'));
     this.$el.html(this.template(renderAttr));
+    this.$count_on_hand_display = this.$('.count-on-hand-display');
     return this;
   },
 
   onEdit: function(ev) {
     ev.preventDefault();
-    this.editing = true;
     this.render();
   },
 
   onCancel: function(ev) {
     ev.preventDefault();
-    this.model.set(this.model.previousAttributes());
-    this.editing = false;
+    this.model.set(this.previousAttributes);
+    this.$el.removeClass('changed');
     this.render();
   },
 
+  countOnHandChanged: function(ev) {
+    var diff = parseInt(ev.currentTarget.value), newCount;
+    if (isNaN(diff)) diff = 0;
+    newCount = this.previousAttributes.count_on_hand + diff;
+    ev.preventDefault();
+    // Do not allow negative stock values
+    if (newCount < 0) {
+      ev.currentTarget.value = -1 * this.previousAttributes.count_on_hand;
+      this.$count_on_hand_display.text(0);
+    } else {
+      this.model.set("count_on_hand", newCount);
+      this.$count_on_hand_display.text(newCount);
+    }
+    this.$el.toggleClass('changed', diff !== 0);
+  },
+
   onSuccess: function() {
-    this.editing = false;
+    this.$el.removeClass('changed');
+    this.previousAttributes = _.clone(this.model.attributes);
     this.render();
-    show_flash("success", Spree.translations.updated_successfully);
+    this.$('[name="count_on_hand"]').focus();
   },
 
   onError: function(model, response, options) {
@@ -62,9 +80,11 @@ Spree.Views.Stock.EditStockItemRow = Backbone.View.extend({
       backorderable: backorderable
     });
     var options = {
-      success: this.onSuccess.bind(this),
+      success: function() {
+        show_flash("success", Spree.translations.updated_successfully);
+      },
       error: this.onError.bind(this)
     };
-    this.model.save({ force: true }, options);
+    this.model.save({}, options);
   }
 });

backend/app/assets/stylesheets/spree/backend/sections/_stock_management.scss

@@ -1,11 +1,33 @@
-#listing_product_stock {
+.stock-table {
 
   tbody + tbody {
     border-top-width: 1px;
   }
 
+  .stock-item-edit-row {
+    &.changed {
+      .submit, .cancel {
+        display: inline-block;
+      }
+    }
+
+    td {
+      vertical-align: middle;
+
+      &:not(.actions) {
+        padding: 0.5rem 0.75rem;
+      }
+    }
+  }
+
+  .actions {
+    .submit, .cancel {
+      display: none;
+    }
+  }
+
   td {
-    input.error {
+    .error {
       border-color: theme-color("danger");
     }
 
@@ -14,4 +36,57 @@
       border: 1px solid theme-color("danger");
     }
   }
+
+  .variant-stock-items {
+    border: 0 none;
+  }
+
+  table {
+    td {
+      padding: 4px 0;
+      border: none;
+    }
+
+    &.stock-variant-field-table {
+      margin-bottom: 0;
+
+      td {
+        text-align: left;
+
+        &:first-child {
+          font-weight: bold;
+          text-align: left;
+          padding-right: 0.5rem;
+          width: 15%;
+        }
+      }
+    }
+  }
+
+  > tbody {
+    .variant-image {
+      width: 31%;
+      padding: 0 2%;
+      img { width: 100%; }
+    }
+    .variant-details {
+      width: 65%;
+      padding: 0px 5px;
+    }
+    .variant-image,
+    .variant-details {
+      float: left;
+    }
+    .variant-container {
+      overflow: hidden;
+    }
+  }
+}
+
+.stock-location-items-cell {
+  padding: 0;
+}
+
+.stock-location-items-table {
+  margin-bottom: 0;
 }

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

@@ -29,7 +29,6 @@
 @import 'spree/backend/components/table-filter';
 @import 'spree/backend/components/navigation';
 @import 'spree/backend/components/sidebar';
-@import 'spree/backend/components/stock_table';
 @import 'spree/backend/components/editable_table';
 @import 'spree/backend/components/pills';
 @import 'spree/backend/components/tabs';

backend/app/views/spree/admin/shared/_variant_search.html.erb

@@ -4,7 +4,7 @@
       <div class="field-block col-3">
         <div class="field">
           <%= label_tag nil, Spree::StockLocation.model_name.human %>
-          <%= select_tag :stock_location_id, options_from_collection_for_select(stock_locations, :id, :name, params[:stock_location_id]), { include_blank: true, class: 'custom-select fullwidth', "data-placeholder" => t('spree.select_a_stock_location') } %>
+          <%= select_tag :stock_location_id, options_from_collection_for_select(stock_locations, :id, :name, params[:stock_location_id]), { include_blank: t('spree.all'), class: 'custom-select fullwidth', "data-placeholder" => t('spree.select_a_stock_location') } %>
         </div>
       </div>
       <div class="<%= if content_for?(:sidebar) then 'col-6' else 'col-9' end %>">