From e5506df5eaf9f7d1f81e32ebc4167a41d4f6f784 Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Thu, 10 Dec 2020 16:41:12 +1100
Subject: [PATCH] Replace bulk quantity label with input field

Enable the user to enter a number directly.
---
 .../controllers/shop_variant_controller.js.coffee        | 4 ++++
 .../javascripts/templates/bulk_buy_modal.html.haml       | 6 ++----
 app/assets/stylesheets/darkswarm/_shop-inputs.scss       | 9 ++++++---
 3 files changed, 12 insertions(+), 7 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 cf21446a8d..311dbbc0bc 100644
--- a/app/assets/javascripts/darkswarm/controllers/shop_variant_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/shop_variant_controller.js.coffee
@@ -34,6 +34,10 @@ Darkswarm.controller "ShopVariantCtrl", ($scope, $modal, Cart) ->
     wantedQuantity = variant.line_item.max_quantity + quantity
     $scope.quantityValid(wantedQuantity) && variant.line_item.quantity > 0
 
+  $scope.available = ->
+    variant = $scope.variant
+    variant.on_demand && Infinity || variant.on_hand
+
   $scope.quantityValid = (quantity) ->
     variant = $scope.variant
     minimum = 0
diff --git a/app/assets/javascripts/templates/bulk_buy_modal.html.haml b/app/assets/javascripts/templates/bulk_buy_modal.html.haml
index 9625c1bd8f..cc0ee3ec9e 100644
--- a/app/assets/javascripts/templates/bulk_buy_modal.html.haml
+++ b/app/assets/javascripts/templates/bulk_buy_modal.html.haml
@@ -16,8 +16,7 @@
       %button.bulk-buy-add.variant-quantity{type: "button", ng: {click: "add(-1)", disabled: "!canAdd(-1)"}}>
         -# U+FF0D Fullwidth Hyphen-Minus
         －
-      %span.bulk-buy.variant-quantity>
-        {{ variant.line_item.quantity }}
+      %input.bulk-buy.variant-quantity{type: "number", min: "0", max: "{{ available() }}", ng: {model: "variant.line_item.quantity"}}>
       %button.bulk-buy-add.variant-quantity{type: "button", ng: {click: "add(1)", disabled: "!canAdd(1)"}}
         -# U+FF0B Fullwidth Plus Sign
         ＋
@@ -28,8 +27,7 @@
       %button.bulk-buy-add.variant-quantity{type: "button", ng: {click: "addMax(-1)", disabled: "!canAddMax(-1)"}}>
         -# U+FF0D Fullwidth Hyphen-Minus
         －
-      %span.bulk-buy.variant-quantity>
-        {{ variant.line_item.max_quantity }}
+      %input.bulk-buy.variant-quantity{type: "number", min: "0", max: "{{ available() }}", ng: {model: "variant.line_item.max_quantity"}}>
       %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/stylesheets/darkswarm/_shop-inputs.scss b/app/assets/stylesheets/darkswarm/_shop-inputs.scss
index 591cc320b9..9c840a912a 100644
--- a/app/assets/stylesheets/darkswarm/_shop-inputs.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-inputs.scss
@@ -9,7 +9,7 @@
 }
 
 .reveal-modal.product-bulk-modal {
-  width: 26em;
+  width: 27em;
 }
 
 // Components to add variants to cart and change quantities
@@ -89,14 +89,17 @@ button.bulk-buy-add.variant-quantity {
   width: 2.5rem;
 }
 
-span.bulk-buy.variant-quantity {
+input[type="number"].bulk-buy.variant-quantity {
   border: .1em solid $grey-200;
   height: 2.5rem;
   display: inline-block;
-  min-width: 3em;
+  width: 5em;
   padding: .5em;
   text-align: center;
   vertical-align: top;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: textfield;
 }
 
 .variant-bulk-buy-price-summary {