add view of products logic

client/index.html

@@ -120,9 +120,10 @@
                     </div>
                 </div>
                 <nav class="category-nav">
+                    {{P.listView}}
                     <ul id="product-category-nav">
-                        <li class="category-item" v-for="category in categories">
-                            <router-link :to="category.path" v-on:click="activeCategory = category.name" >{{category.name}}</router-link>
+                        <li class="category-item" v-for="category in categories" v-on:click="showProducts(category.name)">
+                            <router-link :to="category.path"  >{{category.name}}</router-link>
                         </li>
                     </ul>
                 </nav> 
@@ -137,19 +138,29 @@
 
     <template id="category">
         <div class="row" :key="$route.params.category">
-            <ul class="product-list">
-                <li v-for="product in products" class="product-details">
-                    <div class="product-container product-short-desc">
+            <transition name="fade" mode="out-in">
+            <ul class="product-list" v-show="P.listView">
+                <li v-for="product in products" >
+                    <div class=" product-short-desc">
                         <img>
-                        <span><router-link :to="'/producto/' + product._id" class="product-link">{{ product.name }}</router-link></span>
-                        <p >{{ product.text.shortDesc }}</p>
+                        <span v-on:click="showDesc(product)"><router-link :to="'/productos/' + category + '/' + product._id" class="product-link">{{ product.name }}</router-link></span>
+                        <p>{{ product.text.shortDesc }}</p>
                     </div>
                 </li>
             </ul>
+            </transition>
             <router-view></router-view>
         </div>
     </template>
 
+    <template id="product">
+        <transition name="fade" mode="out-in">
+            <div class="product-full-desc section">
+                <h4 v-show="P.descView">{{P.shown.name}}</h4>
+
+            </div>
+        </transition>
+    </template>
     <script src="js/app.js"></script>
 
 </body>

client/js/app.js

@@ -15,7 +15,10 @@ var ProductService = {
                 return { path: '/productos/' + p._id, name: p.name };
             })
         })
-    }
+    },
+    listView: true,
+    descView: false,
+    shown: {}
 }
 /* ----------------------------------- */
 
@@ -68,11 +71,17 @@ var Productos = {
         return {
             titulo: 'Productos',
             categories: null,
-            activeCategory: null
+            activeCategory: null,
+            P: ProductService
         }
     },
     methods: {
-        fetchCategories: ProductService.getCategories
+        fetchCategories: ProductService.getCategories,
+        showProducts: function (categoryName) {
+            this.activeCategory = categoryName; 
+            this.P.listView = true;
+            this.P.descView = false;
+        }
     },
     beforeRouteEnter: function (to, from, next) {
         ProductService.getCategories().then(function (data) {
@@ -100,7 +109,15 @@ var CategoriasProducto = {
     data: function () {
         return {
             loading: true,
-            products: null
+            products: null,
+            P: ProductService
+        }
+    },
+    methods: {
+        showDesc: function (product) {
+            this.P.descView = true;
+            this.P.listView = false;
+            this.P.shown = product;
         }
     },
     beforeRouteEnter: function (to, from, next) {
@@ -122,6 +139,16 @@ var CategoriasProducto = {
         }
     }
 }
+
+var Producto = {
+    template: '#product',
+    props: ['product'],
+    data: function () {
+        return {
+            P: ProductService
+        };
+    },
+}
 /* ----------------------------------- */
 /**
  * ROUTES
@@ -142,7 +169,11 @@ var routes = [{
         children: [{
             path: ':category',
             component: CategoriasProducto,
-            props: true
+            props: true,
+            children: [{
+                component: Producto,
+                path: ':product'
+            }]
         }]
     }
 ]
@@ -201,7 +232,9 @@ new Vue({
     el: '#app',
     router: router,
     data: {
-        routes: routes
+        routes: routes,
+        productView: true,
+        productListView: true
     },
     http: {
         root: URL,

client/js/main.js

@@ -203,7 +203,9 @@ new Vue({
     el: '#app',
     router: router,
     data: {
-        routes: routes
+        routes: routes,
+        productListView: true,
+        productDescView: false
     },
     http: {
         root: URL,