Merge pull request #1580 from mtomov/ajax-update-image-variant

Allow users to inline update the variant of an image in admin

api/app/controllers/spree/api/images_controller.rb

@@ -18,13 +18,13 @@ def create
       end
 
       def update
-        @image = scope.images.accessible_by(current_ability, :update).find(params[:id])
+        @image = Spree::Image.accessible_by(current_ability, :update).find(params[:id])
         @image.update_attributes(image_params)
         respond_with(@image, default_template: :show)
       end
 
       def destroy
-        @image = scope.images.accessible_by(current_ability, :destroy).find(params[:id])
+        @image = Spree::Image.accessible_by(current_ability, :destroy).find(params[:id])
         @image.destroy
         respond_with(@image, status: 204)
       end

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

@@ -32,6 +32,7 @@
 //= require spree/backend/components/number_with_currency
 //= require spree/backend/components/tabs
 //= require spree/backend/components/tooltips
+//= require spree/backend/components/editable_table
 //= require spree/backend/flash
 //= require spree/backend/gateway
 //= require spree/backend/handlebars_extensions

backend/app/assets/javascripts/spree/backend/components/editable_table.js.coffee

@@ -0,0 +1,3 @@
+Spree.ready ->
+  $('.inline-editable-table tr').each ->
+    Spree.Views.Tables.EditableTable.add $(this)

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

@@ -14,3 +14,5 @@
 //= require 'spree/backend/views/number_with_currency'
 //= require 'spree/backend/views/payment/new'
 //= require 'spree/backend/views/payment/edit_credit_card'
+//= require 'spree/backend/views/tables/editable_table'
+//= require 'spree/backend/views/tables/editable_table_row'

backend/app/assets/javascripts/spree/backend/views/tables/editable_table.js.coffee

@@ -0,0 +1,14 @@
+Spree.Views.Tables ||= {}
+
+class Spree.Views.Tables.EditableTable
+  @add: ($el) ->
+    new Spree.Views.Tables.EditableTableRow el: $el
+
+  @append: (html) ->
+    $row = $(html)
+
+    $('#images-table').removeClass('hidden').find('tbody').append($row)
+    $row.find('.select2').select2()
+    $('.no-objects-found').hide()
+
+    @add($row)

backend/app/assets/javascripts/spree/backend/views/tables/editable_table_row.js.coffee

@@ -0,0 +1,45 @@
+Spree.Views.Tables.EditableTableRow = Backbone.View.extend
+  events:
+    "select2-open": "onEdit"
+    "focus input": "onEdit"
+    "click [data-action=save]": "onSave"
+    "click [data-action=cancel]": "onCancel"
+    'keyup input': 'onKeypress'
+
+  onEdit: (e) ->
+    return if @$el.hasClass('editing')
+    @$el.addClass('editing')
+
+    @$el.find('input, select').each ->
+      $input = $(this)
+      $input.data 'original-value', $input.val()
+
+  onCancel: (e) ->
+    e.preventDefault()
+    @$el.removeClass("editing")
+
+    @$el.find('input, select').each ->
+      $input = $(this)
+      originalValue = $input.data('original-value')
+      $input.val(originalValue).change()
+
+  onSave: (e) ->
+    e.preventDefault()
+
+    Spree.ajax @$el.find('.actions [data-action=save]').attr('href'),
+      data: @$el.find('select, input').serialize()
+      dataType: 'json'
+      method: 'put'
+      success: (response) =>
+        @$el.removeClass("editing")
+      error: (response) =>
+        show_flash 'error', response.responseJSON.error
+
+  ENTER_KEY: 13
+  ESC_KEY: 27
+
+  onKeypress: (e) ->
+    key = e.keyCode || e.which
+    switch key
+      when @ENTER_KEY then @onSave(e)
+      when @ESC_KEY then @onCancel(e)

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

@@ -0,0 +1,37 @@
+.inline-editable-table tr:not(:hover):not(.editing)  {
+  input {
+    border: 1px solid transparent;
+    color: inherit;
+    background-color: transparent;
+  }
+
+  .select2-arrow {
+    display: none;
+  }
+
+  .select2-choice {
+    background-color: transparent;
+    border-color: transparent;
+    color: inherit;
+  }
+
+  .select2-chosen {
+    color: inherit;
+  }
+}
+
+.inline-editable-table tr {
+  .fa-check, .fa-cancel {
+    display: none !important;
+  }
+
+  &.editing {
+    .fa-check, .fa-cancel {
+      display: inline-block !important;
+    }
+
+    .fa {
+      display: none;
+    }
+  }
+}

backend/app/assets/stylesheets/spree/backend/plugins/_bootstrap_tooltip.scss

@@ -38,10 +38,10 @@
   &.action-edit, &.action-save, &.action-capture, &.action-add {
     @include bootstrap-tooltip-color($brand-success);
   }
-  &.action-clone {
+  &.action-clone, &.action-cancel {
     @include bootstrap-tooltip-color($brand-warning);
   }
-  &.action-void, &.action-failure, &.action-cancel, &.action-remove {
+  &.action-void, &.action-failure, &.action-remove {
     @include bootstrap-tooltip-color($brand-danger);
   }
 }

backend/app/assets/stylesheets/spree/backend/shared/_tables.scss

@@ -40,7 +40,7 @@ table {
         font-size: $font-size-base;
       }
 
-      [class*='fa-'].no-text {
+      .fa {
         font-size: 120%;
         background-color: very-light($color-3);
         border: 1px solid $color-border;

backend/app/assets/stylesheets/spree/backend/shared/_utilities.scss

@@ -20,6 +20,19 @@
   display: none;
 }
 
+/* hide and show elements based on editing */
+.editing .editing-hide {
+  display: none;
+}
+
+.editing .editing-show {
+  display: block;
+}
+
+.editing-show {
+  display: none;
+}
+
 // For block grids
 .frameless {
   margin-left: -10px;

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

@@ -35,6 +35,7 @@
 @import 'spree/backend/components/sidebar';
 @import 'spree/backend/components/number_field_update';
 @import 'spree/backend/components/stock_table';
+@import 'spree/backend/components/editable_table';
 @import 'spree/backend/components/tabs';
 
 @import 'font-awesome';
@@ -56,4 +57,3 @@
 @import 'spree/backend/sections/transfer_items';
 @import 'spree/backend/sections/stock_transfers';
 @import 'spree/backend/sections/style_guide';
-@import 'spree/backend/sections/payments';

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

@@ -103,7 +103,7 @@ def link_to_delete(resource, options = {})
         url = options[:url] || object_url(resource)
         name = options[:name] || Spree.t('actions.delete')
         confirm = options[:confirm] || Spree.t(:are_you_sure)
-        options[:class] = "delete-resource"
+        options[:class] = "#{options[:class]} delete-resource".strip
         options[:data] = { confirm: confirm, action: 'remove' }
         link_to_with_icon 'trash', name, url, options
       end

backend/app/views/spree/admin/images/_image_row.html.erb

@@ -1,22 +1,40 @@
 <tr id="<%= spree_dom_id image %>" data-hook="images_row" class="<%= cycle('odd', 'even')%>">
+
   <td class="no-border">
     <% if can?(:update_positions, Spree::Image) %>
       <span class="handle"></span>
     <% end %>
   </td>
+
   <td>
     <%= link_to image.attachment.url(:product) do %>
       <%= render 'spree/admin/shared/image', image: image, size: :mini %>
     <% end %>
   </td>
+
   <% if @product.has_variants? %>
-    <td><%= options_text_for(image) %></td>
-  <% end %>
-  <td><%= image.alt %></td>
+    <td>
+      <%= fields_for image do |f| %>
+        <%= f.select :viewable_id, options_for_select(@variants, image.viewable_id), {}, class: 'select2 fullwidth', autocomplete: "off" %>
+      <% end %>
+    </td>
+  <% end # @product.has_variants? %>
+
+  <td>
+    <%= fields_for image do |f| %>
+      <%= f.text_field :alt %>
+    <% end %>
+  </td>
+
   <td class="actions">
     <% if can?(:update, image) %>
-      <%= link_to_with_icon 'edit', Spree.t('actions.edit'), edit_admin_product_image_url(@product, image), no_text: true, data: {action: 'edit'} %>
+      <%= link_to_with_icon 'check', Spree.t('actions.save'), api_variant_image_path(@product, image), no_text: true, data: {action: 'save'} %>
+
+      <%= link_to_with_icon 'cancel', Spree.t('actions.cancel'), nil, no_text: true, data: {action: 'cancel'} %>
+
+      <%= link_to_with_icon 'edit', Spree.t('actions.edit'), edit_admin_product_image_path(@product, image), no_text: true, data: {action: 'edit'} %>
     <% end %>
+
     <% if can?(:destroy, image) %>
       <%= link_to_delete image, { url: admin_product_image_url(@product, image), no_text: true } %>
     <% end %>

backend/app/views/spree/admin/images/create.js.erb

@@ -1,9 +1,12 @@
-var uploadedRow = $('[data-upload-id="<%= params[:upload_id] %>"]');
+var $uploadEl = $('[data-upload-id="<%= params[:upload_id] %>"]');
 
 <% if @image.persisted? %>
-  uploadedRow.trigger('clear');
-  $('#images-table').removeClass('hidden').find('tbody').append('<%= j render partial: "image_row", locals: {image: @image } %>');
-  $('.no-objects-found').hide();
+
+  $uploadEl.trigger('clear');
+  Spree.Views.Tables.EditableTable.append('<%= j render "image_row", image: @image %>');
+
 <% else %>
-  uploadedRow.find('error').removeClass('hidden').html('<%= j @image.errors.full_messages.join("<br>").html_safe %>');
+
+  $uploadEl.find('error').removeClass('hidden').html('<%= j @image.errors.full_messages.join("<br>").html_safe %>');
+
 <% end %>

backend/app/views/spree/admin/images/index.html.erb

@@ -37,16 +37,17 @@
 
 <% no_images = @product.images.empty? && @product.variant_images.empty? %>
 
-<table class="index sortable <%= 'hidden' if no_images %>" id="images-table" data-hook="images_table" data-sortable-link="<%= update_positions_admin_product_images_url(@product) %>">
+<table class="index sortable inline-editable-table <%= 'hidden' if no_images %>" id="images-table" data-hook="images_table" data-sortable-link="<%= update_positions_admin_product_images_url(@product) %>">
   <colgroup>
     <col style="width: 5%">
     <col style="width: 10%">
     <% if @product.has_variants? %>
-      <col style="width: 25%">
+      <col style="width: 40%">
     <% end %>
-    <col style="width: 45%">
+    <col style="width: 30%">
     <col style="width: 15%">
   </colgroup>
+
   <thead>
     <tr data-hook="images_header">
       <th colspan="2"><%= Spree.t(:thumbnail) %></th>

backend/app/views/spree/admin/payments/_list.html.erb

@@ -16,7 +16,7 @@
         <td><%= link_to payment.number, spree.admin_order_payment_path(@order, payment) %></td>
         <td><%= pretty_time(payment.created_at) %></td>
         <td class="align-center amount">
-          <%= text_field_tag :amount, payment.amount, class: 'js-edit-amount edit-payment-amount editing-show' %>
+          <%= text_field_tag :amount, payment.amount, class: 'js-edit-amount align-right editing-show' %>
           <span class="js-display-amount editing-hide"><%= payment.display_amount.to_html %></span>
         </td>
         <td class="align-center"><%= payment_method_name(payment) %></td>