4B: merged master

Author: stevenrobijns

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 package-lock.json
 Exercises.pdf
+.idea/

cli-socks/src/App.vue

@@ -5,7 +5,8 @@
 
       <div class="links">
         <router-link to="/">Home</router-link> |
-        <router-link to="/counter" title="Vuex example">Counter</router-link>
+        <router-link to="/counter" title="Vuex example">Counter</router-link> |
+        <router-link to="/cart" title="Cart summary">Cart</router-link>
       </div>
     </div>
 

cli-socks/src/components/Product.vue

@@ -6,20 +6,20 @@
 
     <div class="product-info">
         <h1>
-          {{ product.name }}
+          {{ title }}
           <!-- eslint-disable-next-line vue/no-unused-vars -->
           <i v-for="i in averageReviewScore" class="fa fa-star" :key="i"></i>
         </h1>
 
-        <div>All reviews:</div>
+        <div v-if="product.reviews.length">All reviews:</div>
         <div v-for="j in product.reviews" :key="j.name+j.rating">
             <label>{{ j.name}}: </label>
             <i v-for="k in j.rating" class="fa fa-star" :key="k"></i>
         </div>
 
         <div>
-          <p v-if="product.inventory > 10">In Stock</p>
-          <p v-else-if="product.inventory">Almost sold out</p>
+          <p v-if="selectedVariant.inventory > 10">In Stock</p>
+          <p v-else-if="selectedVariant.inventory">Almost sold out</p>
           <p v-else>Out of Stock</p>
         </div>
 
@@ -28,12 +28,20 @@
 
         <button
           @click="addToCart"
-          :disabled="!product.inventory"
-          :class="['add-to-cart', product.inventory ? '' : 'disabledButton']"
+          :disabled="!selectedVariant.inventory"
+          :class="['add-to-cart', selectedVariant.inventory ? '' : 'disabledButton']"
         >
           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"
@@ -59,17 +67,19 @@ 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",
     brand: "Vue",
+    price: 5,
     variants: [
-      {id: 1, color: "green"},
-      {id: 2, color: "blue"}
+      {id: 1, color: "green", inventory: 3},
+      {id: 2, color: "blue", inventory: 5}
     ],
     inventory: 3,
     reviews: []
-  }
+  };
 
   selectedVariantIndex = 0;
 
@@ -81,13 +91,27 @@ export default class Product extends Vue {
     if (!this.product.reviews.length) {
       return null;
     }
-    return Math.round(this.product.reviews.map(x => x.rating).reduce((a, c) => a + c, 0) / this.product.reviews.length);
+    const reviews = this.product.reviews as any;
+    const totalStars = reviews
+      .map((x: any) => x.rating)
+      .reduce((a: any, c: any) => a + c, 0);
+
+    return Math.round(totalStars / this.product.reviews.length);
+  }
+
+  get title() {
+      return `${this.product.name} ($${this.product.price})`;
   }
 
   addToCart() {
-    this.product.inventory--;
+    this.selectedVariant.inventory--;
+    this.$emit('add-to-cart', {product: this.product, variant: this.selectedVariant});
+  }
+
+  removeFromCart() {
+    this.product.inventory++;
     const selectedVariant = this.product.variants[this.selectedVariantIndex];
-    this.$emit('add-to-cart', {product: this.product, variant: selectedVariant});
+    this.$emit('remove-from-cart', {product: this.product, variant: selectedVariant})
   }
 
   addReview(review: any) {
@@ -148,6 +172,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/components/ProductReview.vue

@@ -4,10 +4,10 @@
       <label>Name</label>
       <input v-model="name" @keydown.ctrl.v.prevent="blockPaste">
 
-      <div class="error" v-for="error in errors" :key="error">
-        * {{ error }}
-      </div>
- 
+      <ul class="error" v-for="error in errors" :key="error">
+        <li>{{error}}</li>
+      </ul>
+
       <label>Rating</label>
       <select v-model.number="rating">
         <option disabled value="">select</option>
@@ -45,10 +45,18 @@ export default class ProductReview extends Vue {
     this.errors = [];
     if (!this.rating) {
         this.errors.push('Please select a rating');
+    }
+    if (!this.name) {
+        this.errors.push('Please provide your name');
+    }
+    if (!this.acceptTerms) {
+        this.errors.push('Please accept the terms');
+    }
+    if (this.errors.length) {
         return;
     }
 
-    const review = {name: this.name, rating: this.rating}
+    const review = {name: this.name, rating: this.rating};
     console.log('Submitting', review);
     this.$emit('add-review', review);
   }
@@ -72,7 +80,7 @@ h3 {
 }
 
 input:not([type=checkbox]) {
-  width: 100%;  
+  width: 100%;
   height: 25px;
   margin-bottom: 10px;
 }

cli-socks/src/router.ts

@@ -3,6 +3,7 @@ import Router from "vue-router";
 import Home from "./views/Home.vue";
 import Product from "./components/Product.vue";
 
+import Cart from "./views/Cart.vue";
 Vue.use(Router);
 
 export default new Router({
@@ -26,7 +27,16 @@ export default new Router({
       name: 'product',
       path: '/product/:id',
       component: Product
-    }
+    },
+    {
+      path: "/cart",
+      name: "cart",
+      component: Cart
+    },
+    // {
+    //   path: '/product/:id',
+    //   component: () => import(/* webpackChunkName: "productDetail" */ "./views/ProductPage.vue")
+    // }
     // Get id with: {{ $route.params.id }}
     // Example:
     // path: "/user/:username/post/:post_id"

cli-socks/src/store.ts

@@ -3,81 +3,87 @@ import Vuex from "vuex";
 
 Vue.use(Vuex);
 
-// Exercise 5? Kill the counter store and use the products store below!
+
+const productList = [{
+  name: "Vue Socks",
+  brand: "Vue",
+  price: 5,
+  variants: [
+    {id: 1, color: "green"},
+    {id: 2, color: "blue"}
+  ],
+  inventory: 3,
+  reviews: []
+},
+{
+  name: "Angular Socks",
+  brand: "angular",
+  price: 15,
+  variants: [
+    {id: 1, color: "red"},
+    {id: 2, color: "blue"}
+  ],
+  inventory: 3,
+  reviews: []
+},
+{
+  name: "npm Socks",
+  brand: "npm",
+  price: 3,
+  variants: [
+    {id: 1, color: "red"},
+  ],
+  inventory: 3,
+  reviews: []
+}];
+
 
 export default new Vuex.Store({
-  // ~ component.data
   state: {
-    count: 0
+    premium: true,
+    cart: [],
+    products: productList
   },
 
-  // ~ component.methods
-  actions: {},
+  actions: {
 
-  // ~ component.computed
+  },
   getters: {
-    countAlias(state) {
-      return state.count;
-    }
+    
   },
 
-  // ~ redux.reducers
   mutations: {
-    increment(state) {
-      state.count++;
-    },
-    decrement(state) {
-      state.count--;
+    addToCart(state, product) {
+      const cart = state.cart as any;
+      cart.push(product);
     }
   },
 });
 
 
-// const productList = [{
-//   name: "Vue Socks",
-//   brand: "Vue",
-//   variants: [
-//     {id: 1, color: "green"},
-//     {id: 2, color: "blue"}
-//   ],
-//   inventory: 3,
-//   reviews: []
-// },
-// {
-//   name: "Angular Socks",
-//   brand: "Angular",
-//   variants: [
-//     {id: 1, color: "red"},
-//     {id: 2, color: "blue"}
-//   ],
-//   inventory: 3,
-//   reviews: []
-// },
-// {
-//   name: "npm Socks",
-//   brand: "npm",
-//   variants: [
-//     {id: 1, color: "red"},
-//   ],
-//   inventory: 3,
-//   reviews: []
-// }];
-
-
 // export default new Vuex.Store({
+//   // ~ component.data
 //   state: {
-//     premium: true,
-//     cart: [],
-//     products: productList
+//     count: 0
 //   },
 
+//   // ~ component.methods
 //   actions: {},
-//   getters: {},
 
+//   // ~ component.computed
+//   getters: {
+//     countAlias(state) {
+//       return state.count;
+//     }
+//   },
+
+//   // ~ redux.reducers
 //   mutations: {
-//     addToCart(state, product) {
-//       const cart = state.cart as any;
-//       cart.push(product);
+//     increment(state) {
+//       state.count++;
+//     },
+//     decrement(state) {
+//       state.count--;
 //     }
 //   },
 // });

cli-socks/src/views/Cart.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    HELLO FROM THE CART
+  </div>
+
+</template>
+
+<script>
+    import {Component, Vue} from "vue-property-decorator";
+
+    @Component({
+        components: {}
+    })
+    export default class Cart extends Vue {
+
+    }
+</script>
+
+<style scoped>
+
+</style>

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>-->
     <ProductLine v-for="k in products" :key="k.name" :product="k"></ProductLine>
 
     <div class="cart">
@@ -42,5 +42,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>