From 2ee225c11b2ff9e5d80c6bfae75da72ec5757d4a Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Sun, 15 Apr 2018 11:42:04 +0700 Subject: [PATCH 1/7] Completed --- index.html | 56 +++++++++++++++++++++++++---- public/script.js | 93 +++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 141 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 52365f64..6652ca11 100644 --- a/index.html +++ b/index.html @@ -2,29 +2,68 @@ - Codestin Search App - + + - + -
+

Vue.js Poster Store

+
+ + +
-

Products go here.

+
Loading...
+
+ Found {{ results.length }} results for search term {{ lastSearch }}. +
+
+
+
+ +
+
+
+

{{ item.title }}

+

Price: {{ price | currency }}

+ +
+
+
+
No more items.
+

Shopping Cart

-
+ +
  • +
    {{ item.title }}
    +
    + + {{ item.price | currency }} x {{ item.qty }} + + + +
    +
    • +     + +
    +
    Total: {{ total | currency }}
    +
    +     +
    No items in the cart.
    @@ -33,7 +72,10 @@

    Shopping Cart

    - + + + + diff --git a/public/script.js b/public/script.js index a96bcad1..ec8b5479 100644 --- a/public/script.js +++ b/public/script.js @@ -1 +1,92 @@ -console.log('It works.'); +var PRICE = 9.99; +var LOAD_NUM = 10; + +new Vue({ + el: '#app', + data: { + total: 0, + items: [], + results: [], + cart: [], + newSearch: 'anime', + lastSearch: '', + loading: false, + price: PRICE + }, + mounted: function() { + this.onSubmit(); + var elem = document.getElementById('product-list-bottom'); + var watcher = scrollMonitor.create(elem); + var vue = this; + watcher.enterViewport(function() { + vue.appendItems(); + }); + }, + filters: { + currency: function(price) { + return '$'.concat(price.toFixed(2)); + } + }, + computed: { + noMoreItems: function() { + return this.results.length === this.items.length && this.results.length; + } + }, + methods: { + appendItems: function() { + if (this.items.length < this.results.length) { + var append = this.results.slice(this.items.length, this.items.length + LOAD_NUM); + this.items = this.items.concat(append); + } + }, + onSubmit: function() { + this.lastSearch = this.newSearch; + this.loading = true; + this.items = []; + this.results = []; + this.$http + .get('/search/'.concat(this.newSearch)) + .then(function(res) { + this.loading = false; + this.results = res.data; + this.appendItems(); + }) + ; + }, + addItem: function(index) { + var item = this.items[index]; + var found = false; + for (var i = 0; i < this.cart.length; i++) { + if (this.cart[i].id === item.id) { + this.cart[i].qty++; + found = true; + } + } + if (!found) { + this.cart = this.cart.concat({ + id: item.id, + title: item.title, + qty: 1, + price: PRICE + }); + } + this.total += PRICE; + }, + inc: function(item) { + item.qty++; + this.total += PRICE; + }, + dec: function(item) { + item.qty--; + this.total -= PRICE; + if (item.qty <= 0) { + for (var i = 0; i < this.cart.length; i++) { + if (this.cart[i].id === item.id) { + this.cart.splice(i, 1); + break; + } + } + } + } + } +}); From e8085266f39c25484b7cdb1837505122cb4c735a Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Thu, 19 Apr 2018 13:20:07 +0700 Subject: [PATCH 2/7] Removing v-cloak --- index.html | 2 +- public/style.css | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/index.html b/index.html index 6652ca11..66302f4b 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ -
    +

    Vue.js Poster Store

    diff --git a/public/style.css b/public/style.css index ce9d0387..1dce9620 100644 --- a/public/style.css +++ b/public/style.css @@ -22,10 +22,6 @@ button:focus, input:focus { opacity: 0.8; } -[v-cloak] { - display: none !important; -} - .fade-enter-active { transition: opacity .5s } From b8a4a62b2fc054d08fa63b27447b37d6edefdbb0 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Thu, 19 Apr 2018 13:21:54 +0700 Subject: [PATCH 3/7] Requiring search term --- public/script.js | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/public/script.js b/public/script.js index ec8b5479..c38f64cb 100644 --- a/public/script.js +++ b/public/script.js @@ -40,18 +40,20 @@ new Vue({ } }, onSubmit: function() { - this.lastSearch = this.newSearch; - this.loading = true; - this.items = []; - this.results = []; - this.$http - .get('/search/'.concat(this.newSearch)) - .then(function(res) { - this.loading = false; - this.results = res.data; - this.appendItems(); - }) - ; + if (this.newSearch.length) { + this.lastSearch = this.newSearch; + this.loading = true; + this.items = []; + this.results = []; + this.$http + .get('/search/'.concat(this.newSearch)) + .then(function(res) { + this.loading = false; + this.results = res.data; + this.appendItems(); + }) + ; + } }, addItem: function(index) { var item = this.items[index]; From 4c64757c686bf206e5eac088223000e9d52aa1d9 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Thu, 19 Apr 2018 13:25:21 +0700 Subject: [PATCH 4/7] Removing noMoreItems --- index.html | 2 +- public/script.js | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/index.html b/index.html index 66302f4b..cde14540 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,7 @@

    {{ item.title }}

    -
    No more items.
    +
    No more items.
    diff --git a/public/script.js b/public/script.js index ec8b5479..46c41368 100644 --- a/public/script.js +++ b/public/script.js @@ -27,11 +27,6 @@ new Vue({ return '$'.concat(price.toFixed(2)); } }, - computed: { - noMoreItems: function() { - return this.results.length === this.items.length && this.results.length; - } - }, methods: { appendItems: function() { if (this.items.length < this.results.length) { From 30b91f1fe9e8a903c92e04a31630dca7ab6adea5 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Mon, 23 Apr 2018 12:33:23 +0700 Subject: [PATCH 5/7] Adding computed property # Conflicts: # public/script.js --- index.html | 2 +- public/script.js | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index cde14540..66302f4b 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,7 @@

    {{ item.title }}

    -
    No more items.
    +
    No more items.
    diff --git a/public/script.js b/public/script.js index 46c41368..9c1d565e 100644 --- a/public/script.js +++ b/public/script.js @@ -27,6 +27,11 @@ new Vue({ return '$'.concat(price.toFixed(2)); } }, + computed: { + noMoreItems: function() { + return this.results.length === this.items.length && this.results.length > 0; + } + }, methods: { appendItems: function() { if (this.items.length < this.results.length) { From 21cda4a03dc97b879d3e4baa14e879870c328892 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Mon, 23 Apr 2018 12:34:29 +0700 Subject: [PATCH 6/7] Adding v-cloak --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index cde14540..c458c4d5 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ -
    +

    Vue.js Poster Store

    From 97e2e38c3937c5b781538239261bd860a2628722 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Mon, 23 Apr 2018 12:35:34 +0700 Subject: [PATCH 7/7] Adding CSS rule back in --- public/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/style.css b/public/style.css index 1dce9620..ce9d0387 100644 --- a/public/style.css +++ b/public/style.css @@ -22,6 +22,10 @@ button:focus, input:focus { opacity: 0.8; } +[v-cloak] { + display: none !important; +} + .fade-enter-active { transition: opacity .5s }