From 4c943b75756d9272e9064006927dbce656b550ab Mon Sep 17 00:00:00 2001
From: CuriousMagpie <eilatan@gmail.com>
Date: Fri, 16 Dec 2022 16:51:19 -0500
Subject: [PATCH] number-increment works on buy modal and there was much
 rejoicing...

---
 .../src/components/shared/numberIncrement.vue   | 17 ++++++++++-------
 .../client/src/components/shops/buyModal.vue    |  5 +++--
 website/client/src/mixins/numberInvalid.js      |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/website/client/src/components/shared/numberIncrement.vue b/website/client/src/components/shared/numberIncrement.vue
index 0cf0c002cb..10e613bdd6 100644
--- a/website/client/src/components/shared/numberIncrement.vue
+++ b/website/client/src/components/shared/numberIncrement.vue
@@ -19,7 +19,6 @@
         v-model="quantity"
         class="form-control alignment"
         step="1"
-        @input="$emit('update:quantity', $event.target.selectedAmountToBuy)"
       >
     </div>
     <div
@@ -95,12 +94,6 @@ import svgPositive from '@/assets/svg/positive.svg';
 import svgNegative from '@/assets/svg/negative.svg';
 
 export default {
-  props: {
-    quantity: {
-      type: Number,
-      default: 1,
-    },
-  },
   data () {
     return {
       icons: Object.freeze({
@@ -110,9 +103,19 @@ export default {
         svgNegative,
       }),
       item: { },
+      quantity: 1,
     };
   },
   computed: {
+    // validateQuantity () {
+    //   const validateQuantity = Number ? Number : NaN;
+    //   return validateQuantity;
+    // },
+  },
+  watch: {
+    quantity () {
+      this.$emit('updateQuantity', this.quantity);
+    },
   },
   methods: {
   },
diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index b6f5af2e6f..93b098af42 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -96,7 +96,7 @@
           </div>
           <div v-if="showAmountToBuy(item)">
             <number-increment
-              @input="$emit('update:quantity', target.value.selectedAmountToBuy)"
+              @updateQuantity="selectedAmountToBuy = $event"
             />
             <div :class="{'notEnough': notEnoughCurrency}">
               <span class="total-text">{{ $t('sendTotal') }}</span>
@@ -108,7 +108,7 @@
               <span
                 class="total"
                 :class="getPriceClass()"
-              >{{ item.value * selectedAmount }}</span>
+              >{{ item.value * selectedAmountToBuy }}</span>
             </div>
           </div>
           <div
@@ -584,6 +584,7 @@ export default {
     onChange ($event) {
       this.$emit('change', $event);
     },
+
     buyItem () {
       // @TODO: I  think we should buying to the items.
       // Turn the items into classes, and use polymorphism
diff --git a/website/client/src/mixins/numberInvalid.js b/website/client/src/mixins/numberInvalid.js
index 74db1d8be5..6424c0c24d 100644
--- a/website/client/src/mixins/numberInvalid.js
+++ b/website/client/src/mixins/numberInvalid.js
@@ -1,7 +1,7 @@
 export default {
   computed: {
     numberInvalid () {
-      return this.selectedAmountToBuy < 1 || !Number.isInteger(this.selectedAmountToBuy);
+      return this.selectedAmountToBuy < 1 || !Number.isInteger(this.selectedAmountToBuy) || NaN;
     },
   },
 };