Allow user to get maximum available quantity

When the user entered a number beyond the stock level, the browser was
correcting that to the max number which is very helpful. But Angular was
setting the model to undefined which removes the item from the cart.

Deactivating Angular's max behaviour let's us set the value ourselves
which is then used in the cart.

app/assets/javascripts/darkswarm/controllers/shop_variant_controller.js.coffee

@@ -8,6 +8,16 @@ Darkswarm.controller "ShopVariantCtrl", ($scope, $modal, Cart) ->
 
   $scope.variant.line_item.quantity ||= 0
 
+  $scope.$watch "variant.line_item.quantity", ->
+    item = $scope.variant.line_item
+    if item.quantity > $scope.available()
+      item.quantity = $scope.available()
+
+  $scope.$watch "variant.line_item.max_quantity", ->
+    item = $scope.variant.line_item
+    if item.max_quantity > $scope.available()
+      item.max_quantity = $scope.available()
+
   if $scope.variant.product.group_buy
     $scope.$watch "variant.line_item.quantity", ->
       item = $scope.variant.line_item

app/assets/javascripts/templates/bulk_buy_modal.html.haml

@@ -16,7 +16,11 @@
       %button.bulk-buy-add.variant-quantity{type: "button", ng: {click: "add(-1)", disabled: "!canAdd(-1)"}}>
         -# U+FF0D Fullwidth Hyphen-Minus
         －
-      %input.bulk-buy.variant-quantity{type: "number", min: "0", max: "{{ available() }}", ng: {model: "variant.line_item.quantity"}}>
+      %input.bulk-buy.variant-quantity{
+        type: "number",
+        min: "0",
+        max: "{{ available() }}",
+        ng: {model: "variant.line_item.quantity", max: "Infinity"}}>
       %button.bulk-buy-add.variant-quantity{type: "button", ng: {click: "add(1)", disabled: "!canAdd(1)"}}
         -# U+FF0B Fullwidth Plus Sign
         ＋
@@ -27,7 +31,11 @@
       %button.bulk-buy-add.variant-quantity{type: "button", ng: {click: "addMax(-1)", disabled: "!canAddMax(-1)"}}>
         -# U+FF0D Fullwidth Hyphen-Minus
         －
-      %input.bulk-buy.variant-quantity{type: "number", min: "0", max: "{{ available() }}", ng: {model: "variant.line_item.max_quantity"}}>
+      %input.bulk-buy.variant-quantity{
+        type: "number",
+        min: "0",
+        max: "{{ available() }}",
+        ng: {model: "variant.line_item.max_quantity", max: "Infinity"}}>
       %button.bulk-buy-add.variant-quantity{type: "button", ng: {click: "addMax(1)", disabled: "!canAddMax(1)"}}
         -# U+FF0B Fullwidth Plus Sign
         ＋

app/assets/javascripts/templates/partials/shop_variant_no_group_buy.html.haml

@@ -8,7 +8,12 @@
     %button.variant-quantity{type: "button", ng: {click: "add(-1)", disabled: "!canAdd(-1)"}}>
       -# U+FF0D Fullwidth Hyphen-Minus
       －
-    %input.variant-quantity{type: "number", min: "0", max: "{{ available() }}", ng: {model: "variant.line_item.quantity"}}>
+    %input.variant-quantity{
+      type: "number",
+      min: "0",
+      max: "{{ available() }}",
+      ng: {model: "variant.line_item.quantity", max: "Infinity"}
+      }>
     %button.variant-quantity{type: "button", ng: {click: "add(1)", disabled: "!canAdd(1)"}}
       -# U+FF0B Fullwidth Plus Sign
       ＋

spec/javascripts/unit/darkswarm/controllers/checkout/shop_variant_controller_spec.js.coffee

@@ -74,6 +74,16 @@ describe "ShopVariantCtrl", ->
     expect(scope.variant.line_item.quantity).toEqual 2
     expect(scope.variant.line_item.max_quantity).toEqual 2
 
+  it "caps at the available quantity", ->
+    scope.$apply ->
+      scope.variant.on_demand = false
+      scope.variant.on_hand = 3
+      scope.variant.line_item.quantity = 5
+      scope.variant.line_item.max_quantity = 7
+
+    expect(scope.variant.line_item.quantity).toEqual 3
+    expect(scope.variant.line_item.max_quantity).toEqual 3
+
   it "allows adding when variant is on demand", ->
     expect(scope.canAdd(5000)).toEqual true