finished project 1

Jordan-McMillan · Sep 16, 2018 · 9fb6af1 · 9fb6af1
1 parent 8e332f6
commit 9fb6af1
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     <link rel="stylesheet" type="text/css" href="public/style.css">
 </head>
 <body>
-<div id="app">
+<div id="app" v-cloak>
     <div class="header">
         <h1>Vue.js Poster Store</h1>
         <form class="searchbar" @submit.prevent="onSubmit">
@@ -25,12 +25,12 @@ <h1>Vue.js Poster Store</h1>
     <div class="main">
         <div class="products">
             <div class="search-results" v-if="!loading">
-                Found {{ items.length }} results for search term {{ lastSearchTerm }}.
+                Found {{ results.length }} results for search term {{ lastSearchTerm }}.
             </div>
             <div v-else>
                 Loading...
             </div>
-            <div class="product" v-for="(item, index) in items">
+            <div class="product" v-for="(item, index) in items" v-bind:key="item.id">
                 <div>
                     <div class="product-image">
                         <img v-bind:src="item.link" alt="Poster" v-bind:title="item.title">
@@ -46,24 +46,28 @@ <h4 class="product-title">
                         <button @click="addToCart(index)" class="btn add-to-cart">Add to cart</button>
                 </div>
             </div>
+            <div id="product-list-bottom">
+                <div v-if="noMoreItems">No more items.</div>
+            </div>
         </div>
         <div class="cart">
             <h2>Shopping Cart</h2>
 
-            <ul>
-                <li v-for="item in cart" class="cart-item">
+            <transition-group name="fade" tag="ul">
+                <li v-for="item in cart" class="cart-item" v-bind:key="item.id">
                     <div class="item-title">{{ item.title }}</div>
                     Quantity: <span class="item-qty">{{ item.qty }}</span>
                     Total: <span class="item-qty">{{ item.qty * item.price | currency }}</span>
                     <button class="btn" @click="increment(item)">+</button>
                     <button class="btn" @click="decrement(item)" :disabled="item.qty <= 0">-</button>
-                </li>
-            </ul>
-
-            <div v-if="cart.length > 0">
-                <div>Total: {{ total | currency }}</div>
-            </div>
-            <div v-else class="empty-cart">
+                </li>                    
+            </transition-group>
+            <transition name="fade">
+                <div v-if="cart.length > 0">
+                    <div>Total: {{ total | currency }}</div>
+                </div>
+            </transition>
+            <div v-if="cart.length === 0" class="empty-cart">
                 <div>No items in the cart.</div>
             </div>
         </div>
@@ -74,6 +78,7 @@ <h2>Shopping Cart</h2>
 <script src="/reload/reload.js"></script>
 <script src="node_modules/vue/dist/vue.js"></script>
 <script src="node_modules/axios/dist/axios.js"></script>
+<script src="node_modules/scrollmonitor/scrollMonitor.js"></script>
 <script type="text/javascript" src="public/script.js"></script>
 
 </body>

diff --git a/public/script.js b/public/script.js
@@ -1,4 +1,6 @@
 
+var Load_Num = 10;
+
 Vue.filter('currency', (value) => {
     return '$' + value.toLocaleString();
 });
@@ -10,21 +12,40 @@ new Vue({
         lastSearchTerm: '',
         total: 0,
         items: [],
+        results: [],
         cart: [],
         loading: false
     },
+    computed: {
+        noMoreItems() {
+            return this.items.length === this.results.length && this.results.length > 0;
+        }
+    },
     methods: {
+        appendItems() {
+            if (this.results.length === this.items.length) {
+                return;
+            }
+            var nextResults = this.results.slice(this.items.length, this.items.length + Load_Num);
+            this.items = this.items.concat(nextResults);
+        },
         onSubmit() {
             var me = this;
+
+            if (!me.newSearchTerm) {
+                return;
+            }
+
             me.items = [];
             me.loading = true;
-            axios.get('/search/' + this.newSearchTerm)
+            axios.get('/search/' + me.newSearchTerm)
                 .then(response => {
                     var searchResults = response.data;
-                    me.items = searchResults;
-                    me.items.map(item => {
+                    searchResults.map(item => {
                         item.price = 0.99;
                     });
+                    me.results = searchResults;
+                    me.appendItems();
                     me.lastSearchTerm = me.newSearchTerm;
                     me.loading = false;
                 });
@@ -74,6 +95,15 @@ new Vue({
         }
     },
     mounted() {
-        this.onSubmit();
+        var me = this;
+        // run search on launch
+        me.onSubmit();
+
+        // load more on scroll
+        var scrollEl = document.getElementById('product-list-bottom');
+        var watcher = scrollMonitor.create(scrollEl);
+        watcher.enterViewport(function() {
+            me.appendItems();
+        });
     }
 });