Merge pull request #68 from microservices-demo/update-basket

Update basket functionality

Author: vlal

api/cart/index.js

@@ -61,6 +61,32 @@
     });
   });
 
+  // Update item
+  app.put("/cart/:id", function (req, res, next) {
+    if (req.params.id == null) {
+      return next(new Error("Must pass id of item to update"), 400);
+    }
+
+     console.log("Updating item: " + req.params.id + " quantity: " + req.body.quantity);
+
+    var custId = helpers.getCustomerId(req, app.get("env"));
+    var options = {
+      uri: endpoints.cartsUrl + "/" + custId + "/items",
+      method: 'PATCH',
+      json: true,
+      body: {itemId: req.params.id, quantity: req.body.quantity}
+    };
+    console.log(options.uri)
+    request(options, function (error, response, body) {
+      if (error) {
+        return next(error);
+      }
+      console.log('Item updated with status: ' + response.statusCode);
+      helpers.respondStatus(res, response.statusCode);
+    });
+
+  });
+
   // Add new item to cart
   app.post("/cart", function (req, res, next) {
     console.log("Attempting to add to cart: " + JSON.stringify(req.body));

public/basket.html

@@ -99,12 +99,11 @@ <h1>Shopping cart</h1>
                                     shopping</a>
                             </div>
                             <div class="pull-right">
-                                <a class="btn btn-default" onclick="alert('Stub. Todo.')"><i
+                                <a class="btn btn-default" onclick="updateCart()"><i
                                         class="fa fa-refresh"></i> Update basket
                                 </a>
                                 <button id="orderButton" type="submit" class="btn btn-primary" disabled>
-                                    Proceed to checkout <i
-                                        class="fa fa-chevron-right"></i>
+                                    Proceed to checkout <i class="fa fa-chevron-right"></i>
                                 </button>
                             </div>
                         </div>
@@ -335,6 +334,27 @@ <h4>Coupon code</h4>
         });
     }
 
+    function updateCart() {
+        console.log('Updating cart.');
+        $("tr.item").each(function (){
+            var id = $(this).find("input.id").val(),
+                quantity = $(this).find("input.form-control").val();
+            console.log("Item nr " + id  + " has " + quantity);
+            $.ajax({
+                url: "cart/" + id,
+                type: "PUT",
+                data: JSON.stringify({"quantity": quantity}),
+                success: function (data, textStatus, jqXHR) {
+                    console.log('Worked!');
+                    location.reload();
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    console.error('Could not update item: ' + id + ', due to: ' + textStatus + ' | ' + errorThrown);
+                }
+            });
+        });
+    }
+
     $(document).ready(function () {
         $.ajaxSetup({
             contentType: "application/json; charset=utf-8"
@@ -349,7 +369,8 @@ <h4>Coupon code</h4>
                     if (element != null && element.itemId != null && element.itemId != "null") {
                         $.getJSON('/catalogue/' + element.itemId, function (data) {
                             console.log(JSON.stringify(data));
-                            $('#cart-list').append(' <tr>\
+                            $('#cart-list').append(' <tr class="item">\
+                                                <input class="id" type="hidden" value="' + data.id + '">\
                                                 <td>\
                                                     <a href="#">\
                                                         <img src="' + data.imageUrl[0] + '" alt="' + data.namex + '">\
@@ -359,7 +380,7 @@ <h4>Coupon code</h4>
                                                     <a href="#">' + data.name + '</a>\
                                                 </td>\
                                                 <td>\
-                                                    <input type="number" min="0" value="' + element.quantity + '" class="form-control">\
+                                                    <input type="number" min="1" value="' + element.quantity + '" class="form-control">\
                                                 </td>\
                                                 <td>$' + data.price.toFixed(2) + '</td>\
                                                 <td>$0.00</td>\