Merge remote-tracking branch 'itenium/master'

Author: YentlItenium

cli-socks/src/components/Product.vue

@@ -28,6 +28,14 @@
           Add to Cart
         </button>
 
+        <button
+          @click="removeFromCart"
+          :disabled="cartLength === 0"
+          :class="['remove-from-cart', cartLength > 0 ? '' : 'disabledButton']"
+        >
+          Remove from cart
+        </button>
+
         <div v-for="(variant, index) in product.variants"
             :key="variant.id"
             class="color-box"
@@ -52,6 +60,7 @@ import ProductReview from './ProductReview.vue';
 })
 export default class Product extends Vue {
   @Prop({default: false}) private premium!: boolean;
+  @Prop() private cartLength: number;
 
   product = {
     name: "Vue Socks",
@@ -87,6 +96,12 @@ export default class Product extends Vue {
     this.$emit('add-to-cart', {product: this.product, variant: this.selectedVariant});
   }
 
+  removeFromCart() {
+    this.product.inventory++;
+    const selectedVariant = this.product.variants[this.selectedVariantIndex];
+    this.$emit('remove-from-cart', {product: this.product, variant: selectedVariant})
+  }
+
   addReview(review: any) {
     const reviews = this.product.reviews as any;
     reviews.push(review.rating);
@@ -145,6 +160,18 @@ button.add-to-cart {
   position: absolute;
   top: 85px;
   right: 13px;
+}
+
+button.remove-from-cart {
+  border: none;
+  background-color: #F12321;
+  color: white;
+  height: 40px;
+  width: 100px;
+  font-size: 14px;
+  position: absolute;
+  top: 135px;
+  right: 13px;
 } 
 
 .disabledButton {

cli-socks/src/store.ts

@@ -36,6 +36,7 @@ export default new Vuex.Store({
 // const productList = [{
 //   name: "Vue Socks",
 //   brand: "Vue",
+//   price: 5,
 //   variants: [
 //     {id: 1, color: "green"},
 //     {id: 2, color: "blue"}
@@ -45,7 +46,8 @@ export default new Vuex.Store({
 // },
 // {
 //   name: "Angular Socks",
-//   brand: "Angular",
+//   brand: "angular",
+//   price: 15,
 //   variants: [
 //     {id: 1, color: "red"},
 //     {id: 2, color: "blue"}
@@ -56,6 +58,7 @@ export default new Vuex.Store({
 // {
 //   name: "npm Socks",
 //   brand: "npm",
+//   price: 3,
 //   variants: [
 //     {id: 1, color: "red"},
 //   ],

cli-socks/src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Product :premium="premium" @add-to-cart="updateCart"></Product>
+    <Product :premium="premium" @add-to-cart="updateCart" @remove-from-cart="removeFromCart" :cartLength="cart.length"></Product>
 
     <div class="cart">
       {{ cart.length }}
@@ -26,5 +26,10 @@ export default class Home extends Vue {
     console.log("Adding to cart:", product);
     this.cart.push(product);
   }
+
+  removeFromCart(product: any) {
+    let index = this.cart.indexOf(product);
+    this.cart.splice(index);
+  }
 }
 </script>