Merge branch 'master' into master

Author: Laoujin

.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/ProductLine.vue

@@ -0,0 +1,24 @@
+<template>
+    <div>{{product.name}}
+        <router-link :to="{ name: 'product', params: { id: product.name }}">Link</router-link>
+    </div>
+</template>
+
+
+<script lang="ts">
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { ProductModel } from '../models';
+
+    @Component({
+        components: {
+        }
+    })
+
+    export default class ProductLine extends Vue {
+        @Prop({default: undefined}) private product!: ProductModel;
+    }
+</script>
+
+<style scoped>
+
+</style>

cli-socks/src/models.ts

@@ -0,0 +1,10 @@
+export class ProductModel {
+    name: string = "";
+    brand: string = "";
+    variants: [
+        // {id: 1, color: "green"},
+        // {id: 2, color: "blue"}
+    ] = [];
+    inventory: number = 0;
+    reviews: [] = [];
+}

cli-socks/src/router.ts

@@ -1,7 +1,9 @@
 import Vue from "vue";
 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({
@@ -21,6 +23,16 @@ export default new Router({
       // which is lazy-loaded when the route is visited.
       component: () => import(/* webpackChunkName: "counter" */ "./views/Counter.vue")
     },
+    {
+      name: 'product',
+      path: '/product/:id',
+      component: Product
+    },
+    {
+      path: "/cart",
+      name: "cart",
+      component: Cart
+    },
     // {
     //   path: '/product/:id',
     //   component: () => import(/* webpackChunkName: "productDetail" */ "./views/ProductPage.vue")

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,12 +1,10 @@
 <template>
   <div>
-    <Product v-for="product in products"
+
+    <ProductLine v-for="product in products"
              :key="product.brand"
-             :premium="premium"
              :product="product"
-             @add-to-cart="updateCart"
-             @remove-from-cart="removeFromCart"
-             :cartLength="cart.length"></Product>
+    ></ProductLine>
 
     <div class="cart">
       {{ cart.length }}
@@ -18,13 +16,17 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import Product from "../components/Product.vue";
+import ProductLine from "../components/ProductLine.vue";
+import { ProductModel } from '../models';
 
 @Component({
   components: {
-    Product
+    Product,
+    ProductLine
   }
 })
 export default class Home extends Vue {
+
   premium = true;
   cart: string[] = [];