From bd731267ecb30b12854bb8aa8a05796b22b21a28 Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Wed, 6 Jan 2021 11:23:18 +1100
Subject: [PATCH] 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.
---
 .../controllers/shop_variant_controller.js.coffee    | 10 ++++++++++
 .../javascripts/templates/bulk_buy_modal.html.haml   | 12 ++++++++++--
 .../partials/shop_variant_no_group_buy.html.haml     |  7 ++++++-
 .../checkout/shop_variant_controller_spec.js.coffee  | 10 ++++++++++
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/darkswarm/controllers/shop_variant_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/shop_variant_controller.js.coffee
index 94e2686c3e..825bc9f39f 100644
--- a/app/assets/javascripts/darkswarm/controllers/shop_variant_controller.js.coffee
+++ b/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
diff --git a/app/assets/javascripts/templates/bulk_buy_modal.html.haml b/app/assets/javascripts/templates/bulk_buy_modal.html.haml
index cc0ee3ec9e..d2b6ff5f12 100644
--- a/app/assets/javascripts/templates/bulk_buy_modal.html.haml
+++ b/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
         ＋
diff --git a/app/assets/javascripts/templates/partials/shop_variant_no_group_buy.html.haml b/app/assets/javascripts/templates/partials/shop_variant_no_group_buy.html.haml
index e0f6d16aae..ad8abdf747 100644
--- a/app/assets/javascripts/templates/partials/shop_variant_no_group_buy.html.haml
+++ b/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
       ＋
diff --git a/spec/javascripts/unit/darkswarm/controllers/checkout/shop_variant_controller_spec.js.coffee b/spec/javascripts/unit/darkswarm/controllers/checkout/shop_variant_controller_spec.js.coffee
index 3ca2e6394a..4576e376c7 100644
--- a/spec/javascripts/unit/darkswarm/controllers/checkout/shop_variant_controller_spec.js.coffee
+++ b/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