From a10b8f91eb45a456db562d935c6adab7ab9fe385 Mon Sep 17 00:00:00 2001
From: hoborg91 <hoborg91@gmail.com>
Date: Tue, 25 Aug 2020 14:48:52 +0300
Subject: [PATCH] Fix issue 51. Add promoted products component

1. Simplified product card for promoted products.
File: ProductsSimple.vue. The component is based on Products.vue.
The component utilizes different resolution images for different user
device size. Bulma responsive helpers are used to show the necessary
image: https://bulma.io/documentation/helpers/visibility-helpers/ .

2. Promo products list.
File: PromoProducts.vue. The component is base on CategoryProducts.vue.
The component utilizes the new store action pseudoFetchPromoProducts
which for now returns all products with calculated rating 3 or more.
The Pagination.vue component is modified in such a way that it accepts
one additional optional prop "gridIsConstant" with "false" default
value. One should set it "true" to remove a possibility to choose
diplayed items count. This modification is utilized by PromoProducts.

3. Promo products list integration.
The new component is integrated into the main page (Homepage.vue) and
into the page diplaying a single new (SingleNew.vue).

4. Other fixes.
4.1. Change "require" syntax to "import from" syntax (SingleNew.vue).
4.2. Remove redundant empty lines (SingleNew.vue).
4.3. Fix typo "rlinkk" -> "rlink" (Products.vue).

Signed-off-by: hoborg91 <hoborg91@gmail.com>
---
 CHANGELOG.md                                  |   1 +
 package-lock.json                             |   2 +-
 package.json                                  |   2 +-
 src/components/Products.vue                   |   2 +-
 src/components/homepage/Homepage.vue          |   5 +-
 src/components/news/SingleNew.vue             |  11 +-
 src/components/pagination/Pagination.vue      |   8 +-
 .../promo_products/ProductSimple.vue          | 110 ++++++++++++++++++
 .../promo_products/PromoProducts.vue          |  75 ++++++++++++
 src/store/modules/products.js                 |   7 ++
 10 files changed, 211 insertions(+), 12 deletions(-)
 create mode 100644 src/components/promo_products/ProductSimple.vue
 create mode 100644 src/components/promo_products/PromoProducts.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a1e92f1..f6027bf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,3 +18,4 @@
  - 05.2020 - В футере добавить форму для ввода email и кнопку. Необходимо добавить валидацию email. Пока пусть отправляет данные на https://vuemmerce.herokuapp.com/api/new-subscription и всегда показывает всплывающее окно об успешной подписке. by @Vshinf
  - 05.2020 - Добавлена форма для фильтрации товаров (цена и произоводитель) by @iskangiz
  - 05.2020 - Добавить форму обратной связи by @Dalion
+ - 08.2020 - Добавить блок промо товаров by @hoborg91
diff --git a/package-lock.json b/package-lock.json
index d3cdc3f..5e5e5bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "vuemmerce",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index a497277..d33468c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuemmerce",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "private": true,
   "description": "Responsive ecommerce template built with Vue.js",
   "author": "ivan lori <ivan.lori@protonmail.com>",
diff --git a/src/components/Products.vue b/src/components/Products.vue
index ea9600f..104ee57 100644
--- a/src/components/Products.vue
+++ b/src/components/Products.vue
@@ -229,7 +229,7 @@ export default {
     min-height: 50px;
   }
   .rlink,
-  .rlinkk:hover,
+  .rlink:hover,
   .rlink:focus,
   .rlink:active {
     padding: 0;
diff --git a/src/components/homepage/Homepage.vue b/src/components/homepage/Homepage.vue
index c50b0e3..28eb5ca 100644
--- a/src/components/homepage/Homepage.vue
+++ b/src/components/homepage/Homepage.vue
@@ -4,13 +4,15 @@
     <ads></ads>
     <news></news>
     <categories_list-container></categories_list-container>
+    <promo-products></promo-products>
   </div>
 </template>
 
 <script>
 import CategoriesListContainer from '../categories/CategoriesListContainer';
 import HeroSection from '../hero/Hero';
-import VmNewsList from "../news/NewsListContainer";
+import VmNewsList from '../news/NewsListContainer';
+import PromoProducts from '../promo_products/PromoProducts';
 import ads from '../ads/ads';
 
 export default {
@@ -19,6 +21,7 @@ export default {
     'categories_list-container': CategoriesListContainer,
     'hero': HeroSection,
     'news': VmNewsList,
+    'promo-products': PromoProducts,
     ads
   },
   metaInfo: {
diff --git a/src/components/news/SingleNew.vue b/src/components/news/SingleNew.vue
index 8b4692f..6eb7b83 100644
--- a/src/components/news/SingleNew.vue
+++ b/src/components/news/SingleNew.vue
@@ -37,18 +37,20 @@
     </div>
   </social-sharing>
     
+    <promo-products></promo-products>
   </section>
 </template>
 
 <script>
 
-var SocialSharing = require('vue-social-sharing');
-
+import SocialSharing from 'vue-social-sharing';
+import PromoProducts from '../promo_products/PromoProducts';
 
 export default {
   name: 'news_detail-id',
   components: {
-    SocialSharing
+    SocialSharing,
+    'promo-products': PromoProducts,
   },
   computed: {
     currentUrl() {
@@ -76,7 +78,4 @@ export default {
   .description {
     margin-bottom: 30px;
   }
-
-
 </style>
-
diff --git a/src/components/pagination/Pagination.vue b/src/components/pagination/Pagination.vue
index 652fa3d..8e1a4bd 100644
--- a/src/components/pagination/Pagination.vue
+++ b/src/components/pagination/Pagination.vue
@@ -1,6 +1,6 @@
 <template>
     <section>
-        <div class="level" v-if="total">
+        <div class="level" v-if="total && !gridIsConstant">
             <div class="level-left"></div>
             <div class="level-right">
                 <div class="level-item">
@@ -50,7 +50,11 @@
       grid: {
         type: Number,
         default: 3
-      }
+      },
+      gridIsConstant: {
+        type: Boolean,
+        default: false,
+      },
     },
 
     data() {
diff --git a/src/components/promo_products/ProductSimple.vue b/src/components/promo_products/ProductSimple.vue
new file mode 100644
index 0000000..ce62838
--- /dev/null
+++ b/src/components/promo_products/ProductSimple.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="top-margin bottom-margin">
+    <table>
+      <tr>
+        <td class="is-hidden-mobile">
+          <div class="card-image">
+            <figure class="image">
+              <img src="https://bulma.io/images/placeholders/480x480.png" alt="Placeholder image">
+            </figure>
+          </div>
+        </td>
+        <td class="is-hidden-tablet">
+          <div class="card-image">
+            <figure class="image">
+              <img src="https://bulma.io/images/placeholders/128x128.png" alt="Placeholder image">
+            </figure>
+          </div>
+        </td>
+        <td>
+          <div class="card-content">
+            <div class="media">
+              <div class="media-content">
+                <p class="title is-6">{{ product.title }}</p>
+              </div>
+            </div>
+            <div class="content is-clearfix">
+              <div class="is-pulled-left box1">
+                <b-rate v-model="overallRating"
+                        :icon-pack="packs"
+                        :disabled="isDisabled"
+                        size="is-small">
+                </b-rate>
+              </div>
+              <p class="is-pulled-left">
+                <span class="title is-6"><strong>&euro; {{ product.price }}</strong></span>
+              </p>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </table>
+    
+    <router-link
+      class="details"
+      :to="{
+        path: '/product-detail',
+        name: 'product-detail-component',
+        params: {
+          id: product.id,
+          title: product.title,
+          price: product.price,
+          rating: product.ratings,
+          reviews: product.reviews,
+          category: product.category,
+          isAddedBtn: product.isAddedBtn
+        }
+      }"
+    >
+    </router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'product-simple',
+
+  props: {
+    product: {
+      type: Object,
+      required: true,
+    },
+  },
+  
+  data () {
+    return {
+      packs: 'fas',
+      isDisabled: true,
+    };
+  },
+
+  computed: {
+    overallRating () {
+      return this.$store.getters.getOverallRatingProductById(this.product.id);
+    },
+  },
+
+  methods: {
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  .details {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+
+    &:hover {
+      border: 1px solid #51bafc;
+    }
+  }
+  .box1 {
+    position: relative;
+    min-height: 50px;
+  }
+</style>
diff --git a/src/components/promo_products/PromoProducts.vue b/src/components/promo_products/PromoProducts.vue
new file mode 100644
index 0000000..f75ae34
--- /dev/null
+++ b/src/components/promo_products/PromoProducts.vue
@@ -0,0 +1,75 @@
+<template>
+  <div ref="loader" class="top-margin bottom-margin">
+    <div class="title is-4">
+      Promoted products
+    </div>
+    <pagination-component :items="products" :grid="3" :grid-is-constant="true">
+      <template slot="itemsOnPage"
+                slot-scope="{ itemsOnPage: products }">
+        <div class="columns is-centered is-multiline">
+          <div class="card column is-one-quarter"
+               v-for="product in products"
+               :key="product.id">
+            <product-simple :product="product"></product-simple>
+          </div>
+          <div class="section" v-if="products.length === 0">
+            <p>{{ noProductLabel }}</p>
+          </div>
+        </div>
+      </template>
+    </pagination-component>
+  </div>
+</template>
+
+<script>
+import ProductSimple from './ProductSimple';
+import PaginationComponent from '../pagination/Pagination';
+
+export default {
+  name: 'promo-products',
+
+  components: {
+    ProductSimple,
+    PaginationComponent,
+  },
+
+  data () {
+    return {
+      noProductLabel: 'Come here later to see our promoted products.',
+      products: [],
+    };
+  },
+
+  mounted() {
+    this.pseudoLoadingPage();
+  },
+
+  watch: {
+    $route(to, from) {
+      this.pseudoLoadingPage();
+    }
+  },
+
+  methods: {
+    pseudoLoadingPage() {
+      this.$store.dispatch('pseudoFetchPromoProducts')
+        .then(products => this.products = products);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .top-margin {
+    margin-top: 10px;
+  }
+  .bottom-margin {
+    margin-bottom: 10px;
+  }
+  .card {
+    margin: 10px;
+  }
+  .title {
+    text-align: center;
+  }
+</style>
diff --git a/src/store/modules/products.js b/src/store/modules/products.js
index a30572f..51400a6 100644
--- a/src/store/modules/products.js
+++ b/src/store/modules/products.js
@@ -709,6 +709,13 @@ const actions = {
       }, 2000);
     })
   },
+  pseudoFetchPromoProducts ({ commit, getters }) {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve(getters.getProductsList.filter(product => getters.getOverallRatingProductById(product.id) >= 3));
+      }, 2000);
+    })
+  },
   pseudoFetchProductsWithFilter ({ commit, getters }, params) {
       return new Promise((resolve, reject) => {
           setTimeout(() => {