Cursus dag vuejsdevelopers#2

EdwinSchipper · EdwinSchipper · commit df0eb5323ee6 · 2020-09-04T11:36:58.000+02:00
diff --git a/index.html b/index.html
@@ -11,7 +11,10 @@
     <link rel="stylesheet" type="text/css" href="/public/style.css">
 </head>
 <body>
-<div id="app">
+<div id="app" v-cloak>
+
+<div id="loading">Loading...</div>
+
     <div class="header">
         <div class="container">
             <div class="title">
@@ -31,7 +34,7 @@ <h1>Vue.js Poster Shop</h1>
                 Loading...
             </div>
             <div class="search-results" v-else>
-                Found {{ products.length }} results for search term <em>{{ lastSearch }}</em>.
+                Found {{ results.length }} results for search term <em>{{ lastSearch }}</em>.
             </div>
             <div v-for="product in products" class="product" v-bind:key="product.id">
                 <div>
@@ -45,7 +48,9 @@ <h4 class="product-title">{{ product.title }}</h4>
                     <button v-on:click="addToCart(product)" class="add-to-cart btn">Add to cart</button>
                 </div>
             </div>
-            <div id="product-list-bottom"></div>
+            <div id="product-list-bottom">
+                <div v-if="products.length === results.length && results.length > 0">No More items.</div>
+            </div>
         </div>
         <div class="cart">
             <h2>Shopping Cart</h2>
diff --git a/public/script.js b/public/script.js
@@ -1,28 +1,30 @@
-console.log("It works!");
-
 var LOAD_NUM = 4;
+var watcher;
 
 new Vue({
     el: "#app",
     data: {
         total: 0,
         products: [
-            // { title: "product 1", id: 1, price: 9.99 },
-            // { title: "product 2", id: 2, price: 9.99 },
-            // { title: "product 3", id: 3, price: 9.99 }
+            // { title: "product 1", id: 1, price: 9.99 }
+            // Is now dynamic from search request!
         ],
         cart: [],
         search: "cat",
         lastSearch: "",
         loading: false,
         results: [],
     },
+
+    // Functions
     methods:  {
         addToCart: function(product){
 
             // Debug
-            console.log(product); // current object
-            console.log(this.total); // total from this element (app)
+            console.log('Current product object: ');
+            console.log(product);
+            console.log('Total price from element(#app): ');
+            console.log(this.total);
             
             // Real code
             this.total += product.price;
@@ -49,11 +51,14 @@ new Vue({
         },
 
         inc: function(item){
+            console.log('Current item: ');
+            console.log(item);
             item.qty++;
             this.total += item.price;
         },
 
         dec: function(item){
+            console.log('Current item: ');
             console.log(item);
             item.qty--;
             this.total -= item.price;
@@ -66,27 +71,59 @@ new Vue({
 
         onSubmit: function() {
             this.products = [];
+            this.results = [];
             this.loading = true;
-
             var path = "/search?q=".concat(this.search);    // search from this element (app)
             this.$http.get(path)
                 .then(function(response) {
+                        console.log('Response from search: ');    
                         console.log(response);
                         this.results = response.body;
-                        this.products = response.body.slice(0, LOAD_NUM); // fill product array with search results
+                        // this.products = response.body.slice(0, LOAD_NUM); // fill product array with search results
                         this.lastSearch = this.search;
+                        this.appendResults();
                         this.loading = false;
                 });
-        }
+        },
 
+        appendResults: function() {
+            console.log('Append results:');
+            console.log(this.products);
+            console.log(this.results);
+            if(this.products.length < this.results.length) {
+                var toAppend = this.results.slice(
+                    this.products.length, 
+                    LOAD_NUM + this.products.length
+                    );
+                    this.products = this.products.concat(toAppend);
+            }
+        }
     },
+    
+
+    // Filters
     filters: {
         currency: function(price) {
             return "$".concat(price.toFixed(2));
         }
     },
+
+
+    // Livecycle hooks
     created: function(){
         this.onSubmit ();
+    },
+    updated: function(){
+        var sensor = document.querySelector('#product-list-bottom');
+        watcher = scrollMonitor.create(sensor);
+        watcher.enterViewport(this.appendResults);
+    },
+    beforeUpdate: function(){
+        if(watcher) {
+            watcher.destroy();
+            watchter = null;
+        }
+        
     }
 
-});
+});
diff --git a/public/style.css b/public/style.css
@@ -378,4 +378,18 @@ body {
 
 .fade-enter-to {
     /* opacity: 1; */
+}
+
+
+[v-cloak] > * {
+    display: none;
+}
+
+[v-cloak] > #loading { 
+    display: block;
+    padding: 1em;
+}
+
+#loading {
+    display: none;
 }
