4B: added productlines

Author: stevenrobijns

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,6 +1,7 @@
 import Vue from "vue";
 import Router from "vue-router";
 import Home from "./views/Home.vue";
+import Product from "./components/Product.vue";
 
 Vue.use(Router);
 
@@ -21,10 +22,11 @@ export default new Router({
       // which is lazy-loaded when the route is visited.
       component: () => import(/* webpackChunkName: "counter" */ "./views/Counter.vue")
     },
-    // {
-    //   path: '/product/:id',
-    //   component: () => import(/* webpackChunkName: "productDetail" */ "./views/ProductPage.vue")
-    // }
+    {
+      name: 'product',
+      path: '/product/:id',
+      component: Product
+    }
     // Get id with: {{ $route.params.id }}
     // Example:
     // path: "/user/:username/post/:post_id"

cli-socks/src/views/Home.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <Product :premium="premium" @add-to-cart="updateCart"></Product>
+    <!--<Product :premium="premium" @add-to-cart="updateCart"></Product>-->
+    <ProductLine v-for="k in products" :key="k.name" :product="k"></ProductLine>
 
     <div class="cart">
       {{ cart.length }}
@@ -12,16 +13,31 @@
 <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 {
+
+  products: ProductModel[] = [];
   premium = true;
   cart: string[] = [];
 
+  constructor() {
+      super();
+      const product1 = new ProductModel();
+      product1.name = "product1";
+      const product2 = new ProductModel();
+      product2.name = "product2";
+      this.products.push(product1);
+      this.products.push(product2);
+  }
+
   updateCart(product: any) {
     console.log("Adding to cart:", product);
     this.cart.push(product);