VietTH: Implement validate add_to_cart

Gemfile

@@ -93,3 +93,5 @@ end
 gem 'rubocop', '~> 0.32.1'
 gem 'rubocop', '~> 0.32.1'
 
 
 gem 'cartman', '~> 2.1.2'
 gem 'cartman', '~> 2.1.2'
+
+gem 'font-awesome-rails', '~> 4.3.0.0'
\ No newline at end of file

Gemfile.lock

@@ -112,6 +112,8 @@ GEM
       i18n (~> 0.5)
       i18n (~> 0.5)
     figaro (1.1.1)
     figaro (1.1.1)
       thor (~> 0.14)
       thor (~> 0.14)
+    font-awesome-rails (4.3.0.0)
+      railties (>= 3.2, < 5.0)
     font-awesome-sass (4.3.2.1)
     font-awesome-sass (4.3.2.1)
       sass (~> 3.2)
       sass (~> 3.2)
     globalid (0.3.5)
     globalid (0.3.5)
@@ -334,6 +336,7 @@ DEPENDENCIES
   factory_girl_rails (~> 4.5.0)
   factory_girl_rails (~> 4.5.0)
   faker (~> 1.4.3)
   faker (~> 1.4.3)
   figaro (~> 1.1.1)
   figaro (~> 1.1.1)
+  font-awesome-rails (~> 4.3.0.0)
   font-awesome-sass
   font-awesome-sass
   haml-rails (~> 0.9)
   haml-rails (~> 0.9)
   jbuilder (~> 2.0)
   jbuilder (~> 2.0)

app/assets/javascripts/application.js

@@ -11,6 +11,7 @@
 // about supported directives.
 // about supported directives.
 //
 //
 //= require jquery
 //= require jquery
+//= require jquery.spinner.min
 //= require jquery_ujs
 //= require jquery_ujs
 //= require jquery.validate.min
 //= require jquery.validate.min
 //= require additional-methods
 //= require additional-methods

app/assets/javascripts/order.js.coffee

 @orderLib = (->
 @orderLib = (->
+  @options = {}
+  self = @
+
   @validateCheckoutForm = ->
   @validateCheckoutForm = ->
     $('#checkout-cart form').validate()
     $('#checkout-cart form').validate()
-    jQuery.validator.addClassRules 'input-quantity', {
+    jQuery.validator.addClassRules 'input-add-quantity', {
       required: true
       required: true
       number: true
       number: true
       min: 1
       min: 1
     }
     }
 
 
-    $('.input-quantity').each ->
+    $('.input-add-quantity').each ->
       $(this).rules 'add', {max: $(this).data('max')}
       $(this).rules 'add', {max: $(this).data('max')}
 
 
+  @setOptions = (options)-> @options = options
+
+  @setEventChangeQuantity = (element, max)->
+    @updateTotalPrice()
+    $('.customize-spinner').spinner 'changed', (e, newVal, oldVal)->
+      self.updateQuantity($(e.target).data('id'), newVal)
+      self.updateTotalPrice()
+
+  @updateQuantity = (id, quantity)->
+    index = null
+    $.each @options.items, (i, item)->
+      index = i if parseInt(item.data.id) == id
+    @options.items[index].data.quantity = quantity
+
+  @updateTotalPrice = ->
+    total = 0
+    $.each @options.items, (index, item)->
+      total += parseInt(item.data.quantity) * parseInt(item.data.unit_cost)
+    $('#total-price').text(total)
 
 
   return @
   return @
 )()
 )()
\ No newline at end of file

app/assets/stylesheets/application.css

@@ -12,6 +12,8 @@
  *
  *
  *= require_self
  *= require_self
  *= require bootstrap_and_overrides
  *= require bootstrap_and_overrides
+ *= require font-awesome
+ *= require bootstrap-spinner
  *= require layout
  *= require layout
  *= require product
  *= require product
  *= require cart
  *= require cart

app/assets/stylesheets/cart.css.scss

 #cart-info{
 #cart-info{
   margin-bottom: 30px;
   margin-bottom: 30px;
 }
 }
+
+#checkout-cart{
+  table{
+    td.quantity{
+      width: 100px;
+      input{
+        width: 100%;
+      }
+    }
+    #total-price, #total-price-title{
+      font-size: 25px;
+    }
+
+    #total-price{
+      color: blue;
+    }
+  }
+  .input-group-addon{
+    padding: 7px 12px;
+  }
+  i.fa.fa-sort-down {
+    margin-top: -9px;
+    vertical-align: middle;
+  }
+}
\ No newline at end of file

app/assets/stylesheets/layout.css.scss

@@ -126,3 +126,10 @@ footer{
     font-size: 20px;
     font-size: 20px;
   }
   }
 }
 }
+
+.no-border{
+  border-top: 0 !important;
+  border-bottom: 0 !important;
+  border-left: 0 !important;
+  border-right: 0 !important;
+}
\ No newline at end of file

app/helpers/application_helper.rb

@@ -2,4 +2,8 @@ module ApplicationHelper
   def cart_valid?
   def cart_valid?
     user_signed_in? && !current_user.cart.count.zero?
     user_signed_in? && !current_user.cart.count.zero?
   end
   end
+
+  def format_price(price, delimiter = '.', separator = ',')
+    number_with_delimiter(price.ceil, delimiter: delimiter, separator: separator)
+  end
 end
 end

app/models/order_item.rb

@@ -2,7 +2,7 @@ class OrderItem < ActiveRecord::Base
   belongs_to :order
   belongs_to :order
   belongs_to :product
   belongs_to :product
 
 
-  before_save :update_product_quantity
+  after_save :update_product_quantity
 
 
   def update_product_quantity
   def update_product_quantity
     self.product.decrement!(:stock, self.quantity)
     self.product.decrement!(:stock, self.quantity)

app/views/orders/index.html.haml

+%h3.title Checkout
+
 - if cart_valid?
 - if cart_valid?
   #checkout-cart
   #checkout-cart
     = form_for Order.new do |f|
     = form_for Order.new do |f|
@@ -22,10 +24,25 @@
               %td
               %td
                 = order_item.stock
                 = order_item.stock
               %td.quantity
               %td.quantity
-                = text_field_tag "cart[items][#{index}][quantity]", order_item.quantity, class: 'form-control compare input-quantity', data: {max: order_item.stock}
+                .customize-spinner.input-group.spinner{"data-trigger" => "spinner"}
+                  = text_field_tag "cart[items][#{index}][quantity]", order_item.quantity, data: {max: order_item.stock, min: 1, step: 1, id: order_item.id}, class: 'form-control'
+                  .input-group-addon
+                    %a.spin-up{"data-spin" => "up", href: "javascript:;"}
+                      %i.fa.fa-sort-up
+                    %a.spin-down{"data-spin" => "down", href: "javascript:;"}
+                      %i.fa.fa-sort-down
 
 
         %tfoot
         %tfoot
           %tr
           %tr
-            %td.text-right{colspan: 5}
+            %td#total-price-title.text-right{colspan: 2} Total:
+            %td#total-price{colspan: 3}
+              = format_price(current_user.cart.total)
+
+          %tr
+            %td.no-border.text-right{colspan: 5}
               = f.submit 'Checkout', class: 'btn btn-primary'
               = f.submit 'Checkout', class: 'btn btn-primary'
 
 
+  :javascript
+    var items = #{current_user.cart.items.to_json.html_safe}
+    window.orderLib.setOptions({items: items})
+    window.orderLib.setEventChangeQuantity()
\ No newline at end of file

vendor/assets/javascripts/jquery.spinner.min.js

+/*! jQuery spinner - v0.1.6 - 2015-03-09
+* https://github.com/xixilive/jquery-spinner
+* Copyright (c) 2015 xixilive; Licensed MIT */
+!function(a){"use strict";var b,c=function(b,d){return d=a.extend({},d),this.$el=b,this.options=a.extend({},c.rules.defaults,c.rules[d.rule]||{},d),this.min=parseFloat(this.options.min)||0,this.max=parseFloat(this.options.max)||0,this.$el.on("focus.spinner",a.proxy(function(b){b.preventDefault(),a(document).trigger("mouseup.spinner"),this.oldValue=this.value()},this)).on("change.spinner",a.proxy(function(a){a.preventDefault(),this.value(this.$el.val())},this)).on("keydown.spinner",a.proxy(function(a){var b={38:"up",40:"down"}[a.which];b&&(a.preventDefault(),this.spin(b))},this)),this.oldValue=this.value(),this.value(this.$el.val()),this};c.rules={defaults:{min:null,max:null,step:1,precision:0},currency:{min:0,max:null,step:.01,precision:2},quantity:{min:1,max:999,step:1,precision:0},percent:{min:1,max:100,step:1,precision:0},month:{min:1,max:12,step:1,precision:0},day:{min:1,max:31,step:1,precision:0},hour:{min:0,max:23,step:1,precision:0},minute:{min:1,max:59,step:1,precision:0},second:{min:1,max:59,step:1,precision:0}},c.prototype={spin:function(b){if("disabled"!==this.$el.attr("disabled")){this.oldValue=this.value();var c=a.isFunction(this.options.step)?this.options.step.call(this,b):this.options.step;switch(b){case"up":this.value(this.oldValue+Number(c,10));break;case"down":this.value(this.oldValue-Number(c,10))}}},value:function(c){if(null===c||void 0===c)return this.numeric(this.$el.val());c=this.numeric(c);var e=this.validate(c);0!==e&&(c=-1===e?this.min:this.max),this.$el.val(c.toFixed(this.options.precision)),this.oldValue!==this.value()&&(this.$el.trigger("changing.spinner",[this.value(),this.oldValue]),clearTimeout(b),b=setTimeout(a.proxy(function(){this.$el.trigger("changed.spinner",[this.value(),this.oldValue])},this),d.delay))},numeric:function(a){return a=this.options.precision>0?parseFloat(a,10):parseInt(a,10),!isNaN(parseFloat(a))&&isFinite(a)?a:a||this.options.min||0},validate:function(a){return null!==this.options.min&&a<this.min?-1:null!==this.options.max&&a>this.max?1:0}};var d=function(b,d){d=a.extend({},d),this.$el=b,this.$spinning=a("[data-spin='spinner']",this.$el),0===this.$spinning.length&&(this.$spinning=a(":input[type='text']",this.$el)),this.spinning=new c(this.$spinning,a.extend(this.$spinning.data(),d)),this.$el.on("click.spinner","[data-spin='up'],[data-spin='down']",a.proxy(this.spin,this)).on("mousedown.spinner","[data-spin='up'],[data-spin='down']",a.proxy(this.spin,this)),a(document).on("mouseup.spinner",a.proxy(function(){clearTimeout(this.spinTimeout),clearInterval(this.spinInterval)},this)),d.delay&&this.delay(d.delay),d.changed&&this.changed(d.changed),d.changing&&this.changing(d.changing)};d.delay=500,d.prototype={constructor:d,spin:function(b){var c=a(b.currentTarget).data("spin");switch(b.type){case"click":b.preventDefault(),this.spinning.spin(c);break;case"mousedown":1===b.which&&(this.spinTimeout=setTimeout(a.proxy(this.beginSpin,this,c),300))}},delay:function(a){var b=parseInt(a,10);b>=0&&(this.constructor.delay=b+100)},value:function(){return this.spinning.value()},changed:function(a){this.bindHandler("changed.spinner",a)},changing:function(a){this.bindHandler("changing.spinner",a)},bindHandler:function(b,c){a.isFunction(c)?this.$spinning.on(b,c):this.$spinning.off(b)},beginSpin:function(b){this.spinInterval=setInterval(a.proxy(this.spinning.spin,this.spinning,b),100)}},a.fn.spinner=function(b,c){return this.each(function(){var e=a(this),f=e.data("spinner");f||e.data("spinner",f=new d(e,a.extend({},e.data(),b))),("delay"===b||"changed"===b||"changing"===b)&&f[b](c),"step"===b&&c&&(f.spinning.step=c),"spin"===b&&c&&f.spinning.spin(c)})},a(function(){a('[data-trigger="spinner"]').spinner()})}(jQuery);
\ No newline at end of file

vendor/assets/stylesheets/bootstrap-spinner.css

+.spinner.input-group .input-group-addon a.spin-up,.spinner.input-group .input-group-addon a.spin-down{height:10px;width:10px;font-size:14px;overflow:hidden;display:block;text-align:center;text-decoration:none;position:relative;color:#999}.spinner.input-group .input-group-addon a.spin-up .icon-sort-down,.spinner.input-group .input-group-addon a.spin-down .icon-sort-down{position:relative;top:-6px}.spinner.input-group .input-group-addon a.spin-up:hover,.spinner.input-group .input-group-addon a.spin-down:hover{color:#555}.spinner.input-group input{text-align:center}.spinner.input-group.input-group-lg .input-group-addon a.spin-up,.spinner.input-group.input-group-lg .input-group-addon a.spin-down{font-size:16px;height:12px}.spinner.input-group.input-group-sm .input-group-addon a.spin-up,.spinner.input-group.input-group-sm .input-group-addon a.spin-down{font-size:12px;height:9px}
\ No newline at end of file