better

Former-commit-id: 13b1e0f5f992d0dc6650b24b273dd8a510c061b7

client/public/components/css/product-listing.css

@@ -111,13 +111,44 @@
     margin-block-end: 0.83em;
 }
 
-.product-quantity {
+.product-quantity-selector {
-    font-size: 1.5em;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-size: 1em;
+}
+
+.product-quantity-button {
+    cursor: pointer;
+    font-size: 1.7em;
+    border: #1A1A1A solid 1px;
+    background-color: #F5F6F6;
+    border-radius: 0.2em;
+    width: 1.5em;
+    height: 1.5em;
+}
+
+/* https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+input[type=number] {
+  -moz-appearance: textfield;
 }
 
 .quantity-input {
-    width: 5em;
+    height: 2.2em;
+    width: 3.7em;
+    background-color: #F5F6F6;
+    border-top: #1A1A1A solid 1px;
+    border-bottom: #1A1A1A solid 1px;
+    border-right: none;
+    border-left: none;
     text-align: center;
+    font-size: 1.2em;
 }
 
 .product-add-to-basket {

client/public/components/product-listing.mjs

@@ -50,9 +50,10 @@ class ProductListing extends Component {
                             <div class="product-description">{this.state.description}</div>
 
                             <div class="product-quantity-selector">
-                                <button class="product-quantity-button" type="button">-</button>
+                                <button class="product-quantity-button reduce-quantity" type="button">-</button>
-                                <input class="quantity-input" type="number" value="1" min="1" max="{this.state.quantity}">
+                                <input class="quantity-input" type="number" value="1" min="1" max="{this.state.stock}">
-                                <button class="product-quantity-button" type="button">+</button>
+                                <button class="product-quantity-button increase-quantity" type="button">+</button>
+                                <span class="product-quantity">&nbsp;{this.state.stock} in stock</span>
                             </div>
 
                             <div class="product-add-to-basket">
@@ -105,6 +106,34 @@ class ProductListing extends Component {
         });
 
         // TODO: add event listeners for quantity buttons
+        const quantityInput = this.root.querySelector('.quantity-input');
+        const increaseQuantityButton = this.root.querySelector('.increase-quantity');
+        const reduceQuantityButton = this.root.querySelector('.reduce-quantity');
+
+        quantityInput.value = 1;
+
+        quantityInput.addEventListener('change', () => {
+            if (typeof quantityInput.value !== 'number') {
+                quantityInput.value = 1;
+            }
+            if (quantityInput.value > this.state.stock) {
+                quantityInput.value = this.state.stock;
+            }
+        });
+
+        increaseQuantityButton.addEventListener('click', () => {
+            const quantity = parseInt(quantityInput.value);
+            if (quantity < this.state.stock) {
+                quantityInput.value = quantity + 1;
+            }
+        });
+
+        reduceQuantityButton.addEventListener('click', () => {
+            const quantity = parseInt(quantityInput.value);
+            if (quantity > 1) {
+                quantityInput.value = quantity - 1;
+            }
+        });
 
         // product details, collapsable
         const collapseButton = this.root.querySelector('.product-details-header');
@@ -118,11 +147,10 @@ class ProductListing extends Component {
 
         // add quantity to basket and then update the basket count
         const addToBasket = this.root.querySelector('.add-to-basket-button');
-        const basketCount = this.root.querySelector('.quantity-input');
 
         addToBasket.addEventListener('click', () => {
-            AddProductToBasket(this.state.id, Math.abs(parseInt(basketCount.value)));
+            AddProductToBasket(this.state.id, Math.abs(parseInt(quantityInput.value)));
-            basketCount.value = 1;
+            quantityInput.value = 1;
         });
     }
 }