exercises

Author: Laoujin

Exercises.md

@@ -1,35 +1,41 @@
 Exercises
 =========
+Claim an exercise at https://github.com/itenium-be/Vue.js-Tutorial/issues
 
-Remove from cart
-----------------
+
+1) Remove from cart
+-------------------
 Add a button to remove socks from the Cart.
-- Disable the button when the color is not present in the cart.
 
 
-Inventory per color
--------------------
-Keep track of inventory per color.
-- Add to cart should only be enabled when there are socks in that color left in the inventory.
+2) Inventory per color
+----------------------
+Keep track of inventory per color/variant.
 
 
-Reviews
--------
-- Add validation: name is required
-- Add validation: Must accept the terms
-- Display all reviews already submitted
+3) Reviews
+----------
+A. Add validation: Name is required. Must accept the terms.  
+B. Display all reviews already submitted.  
+C. Turn the rating `select` into ⭐⭐⭐⭐⭐.  
+    - Allow for partial selection. (See Github issue for code snippets)
 
 
-New page: Cart contents
------------------------
-Add a new router link `/cart` and... display the cart contents.
-- Create a new `CartProduct` component to display the information. (with an image?)
-- Add a product price.
-- Allow to order more/less of a product in the Cart
-- Calculate the total Cart cost. (with shipping costs?)
+4) New page: Cart contents
+--------------------------
+A. Add a product price.  
+B. Create a new `ProductLine` component to display the information. (with an image?)  
+C. Add a new router link `/cart` (`router.ts`)  
+D. Display the cart contents on the component of 4C.  
+E. Allow to order more/less of a product in the Cart.  
+F. Calculate the total Cart cost. (with shipping costs?)  
 
 
-Vuex
-----
-- Put the `Product.vue` product properties in the store.
-- On the main page, loop over the products and display them.
+5) Vuex
+-------
+A. Put the `Product.vue` product properties in `store.ts` in a products array.  
+B. Turn product into a `@Prop() product!: any` of `Product.vue`.  
+C. On the main page, loop over the products and display them.  
+D. Display a list of the `ProductLine` instead and a button to go to the detail page.  
+E. Create a new route to go to a `ProductDetail` page.
+F. The `cart` is now defined in `Home.vue`. Should probably move this to the store aswell?  

cli-socks/src/assets/socks-Angular-blue.jpg

@@ -1,19 +1,19 @@
 <template>
 <div class="product">
     <div class="product-image">
-      <img :src="require(`@/assets/socks-${imageColor}.jpg`)">
+      <img :src="require(`@/assets/socks-${product.brand}-${selectedVariant.color}.jpg`)">
     </div>
 
     <div class="product-info">
         <h1>
-          {{ product }}
+          {{ product.name }}
           <!-- eslint-disable-next-line vue/no-unused-vars -->
           <i v-for="i in averageReviewScore" class="fa fa-star" :key="i"></i>
         </h1>
 
         <div>
-          <p v-if="inventory > 10">In Stock</p>
-          <p v-else-if="inventory">Almost sold out</p>
+          <p v-if="product.inventory > 10">In Stock</p>
+          <p v-else-if="product.inventory">Almost sold out</p>
           <p v-else>Out of Stock</p>
         </div>
 
@@ -22,13 +22,13 @@
 
         <button
           @click="addToCart"
-          :disabled="!inventory"
-          :class="['add-to-cart', inventory ? '' : 'disabledButton']"
+          :disabled="!product.inventory"
+          :class="['add-to-cart', product.inventory ? '' : 'disabledButton']"
         >
           Add to Cart
         </button>
 
-        <div v-for="(variant, index) in variants"
+        <div v-for="(variant, index) in product.variants"
             :key="variant.id"
             class="color-box"
             :class="{active: selectedVariantIndex === index}"
@@ -53,35 +53,39 @@ import ProductReview from './ProductReview.vue';
 export default class Product extends Vue {
   @Prop({default: false}) private premium!: boolean;
 
-  product = "Socks";
+  product = {
+    name: "Vue Socks",
+    brand: "Vue",
+    variants: [
+      {id: 1, color: "green"},
+      {id: 2, color: "blue"}
+    ],
+    inventory: 3,
+    reviews: []
+  }
+
   selectedVariantIndex = 0;
-  variants = [
-    {id: 1, color: "green"},
-    {id: 2, color: "blue"}
-  ];
-  inventory = 3;
-  reviews: number[] = [];
-
-  get imageColor(): string {
-    return this.variants[this.selectedVariantIndex].color;
+
+  get selectedVariant(): any {
+    return this.product.variants[this.selectedVariantIndex];
   }
 
   get averageReviewScore(): number | null {
-    if (!this.reviews.length) {
+    if (!this.product.reviews.length) {
       return null;
     }
-    return Math.round(this.reviews.reduce((a, c) => a + c, 0) / this.reviews.length);
+    return Math.round(this.product.reviews.reduce((a, c) => a + c, 0) / this.product.reviews.length);
   }
 
   addToCart() {
-    console.log('uhoh', this.inventory);
-    this.inventory--;
-    const selectedVariant = this.variants[this.selectedVariantIndex];
+    this.product.inventory--;
+    const selectedVariant = this.product.variants[this.selectedVariantIndex];
     this.$emit('add-to-cart', {product: this.product, variant: selectedVariant});
   }
 
   addReview(review: any) {
-    this.reviews.push(review.rating);
+    const reviews = this.product.reviews as any;
+    reviews.push(review.rating);
   }
 }
 </script>

cli-socks/src/assets/socks-Angular-red.jpg

@@ -19,8 +19,16 @@ export default new Router({
       // route level code-splitting
       // this generates a separate chunk (counter.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () =>
-        import(/* webpackChunkName: "counter" */ "./views/Counter.vue")
-    }
+      component: () => import(/* webpackChunkName: "counter" */ "./views/Counter.vue")
+    },
+    // {
+    //   path: '/product/:id',
+    //   component: () => import(/* webpackChunkName: "productDetail" */ "./views/ProductPage.vue")
+    // }
+    // Get id with: {{ $route.params.id }}
+    // Example:
+    // path: "/user/:username/post/:post_id"
+    // Matches: /user/eve/post/42
+    // params are: { username: 'eve', post_id: '42' }
   ]
 });

cli-socks/src/assets/socks-blue.jpg cli-socks/src/assets/socks-Vue-blue.jpgcli-socks/src/assets/socks-blue.jpg renamed to cli-socks/src/assets/socks-Vue-blue.jpg

@@ -3,6 +3,8 @@ import Vuex from "vuex";
 
 Vue.use(Vuex);
 
+// Exercise 5? Kill the counter store and use the products store below!
+
 export default new Vuex.Store({
   // ~ component.data
   state: {
@@ -19,7 +21,7 @@ export default new Vuex.Store({
     }
   },
 
-  // ~ redux.actions
+  // ~ redux.reducers
   mutations: {
     increment(state) {
       state.count++;
@@ -29,3 +31,53 @@ export default new Vuex.Store({
     }
   },
 });
+
+
+// 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({
+//   state: {
+//     premium: true,
+//     cart: [],
+//     products: productList
+//   },
+
+//   actions: {},
+//   getters: {},
+
+//   mutations: {
+//     addToCart(state, product) {
+//       const cart = state.cart as any;
+//       cart.push(product);
+//     }
+//   },
+// });