From a9fdd8d516a571c33dd19a27d5ad4dbaee3d47d8 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Wed, 20 Apr 2022 21:54:35 +1000
Subject: [PATCH] chap2 -> Creating templates -> The cart-item template

---
 ko-cart/index.html      | 22 +++++++++++++++++++++-
 ko-cart/js/viewmodel.js | 10 +++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/ko-cart/index.html b/ko-cart/index.html
index 3e6a8dc..a67ca75 100644
--- a/ko-cart/index.html
+++ b/ko-cart/index.html
@@ -131,7 +131,27 @@
       Total Items: <span data-bind="text:totalItems"></span>
       Price: <span data-bind="text:grandTotal"></span>
     </script>
-    <script type="text/html" id="cart-item"></script>
+    <script type="text/html" id="cart-item">
+      <div class="list-group-item" style="overflow: hidden">
+        <button type="button" class="close pull-right" data-bind="click:$root.removeFromCart">
+          <span>&times;</span>
+        </button>
+        <h4 class="" data-bind="text:product.name"></h4>
+        <div class="input-group cart-unit">
+          <input type="text" class="form-control" data-bind="textInput:units" readonly/>
+          <span class="input-group-addon">
+            <div class="btn-group-vertical">
+              <button class="btn btn-default btn-xs" data-bind="click:addUnit">
+                <i class="glyphicon glyphicon-chevron-up"></i>
+              </button>
+              <button class="btn btn-default btn-xs" data-bind="click:removeUnit">
+                <i class="glyphicon glyphicon-chevron-down"></i>
+              </button>
+            </div>
+          </span>
+        </div>
+      </div>
+    </script>
     <script type="text/html" id="cart"></script>
     <script type="text/html" id="order"></script>
     <script type="text/html" id="finish-order-modal"></script>
diff --git a/ko-cart/js/viewmodel.js b/ko-cart/js/viewmodel.js
index dcd391f..02a3cc4 100644
--- a/ko-cart/js/viewmodel.js
+++ b/ko-cart/js/viewmodel.js
@@ -83,6 +83,13 @@ var vm = (function () {
     return total;
   })
 
+  var removeFromCart = function (data) {
+    var units = data.units();
+    var stock = data.product.stock();
+    data.product.stock(units + stock);
+    cart.remove(data);
+  }
+
   return {
     // first chapter
     searchTerm: searchTerm,
@@ -93,7 +100,8 @@ var vm = (function () {
     cart: cart,
     showCartDetails: showCartDetails,
     totalItems: totalItems,
-    grandTotal: grandTotal
+    grandTotal: grandTotal,
+    removeFromCart: removeFromCart
   };
 })();
 ko.applyBindings(vm);