update: check prodcuts length and prevent to receive products again

TehranJS-Workshops · Sep 17, 2018 · 47eea0c · 47eea0c
1 parent fef4705
commit 47eea0c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git a/src/components/products.vue b/src/components/products.vue
@@ -1,8 +1,9 @@
 <template>
   <el-main>
-    <h2>Products</h2>
+    <h2>Products ({{productsLength}})</h2>
 
-    <el-table :data="products" style="width: 100%" stripe border height="800" show-summary>
+    <el-table :data="products" style="width: 100%" stripe border height="800" show-summary class="products-table">
+      <el-table-column prop="id" label="#" width="50"></el-table-column>
       <el-table-column prop="title" label="Title" width="180"></el-table-column>
       <el-table-column prop="desc" label="Description"></el-table-column>
       <el-table-column prop="basePrice" label="Base price ($)" width="150" sortable></el-table-column>
@@ -20,26 +21,29 @@
 </style>
 
 <script>
-import { mapState, mapActions } from 'vuex'
+import { mapState, mapActions, mapGetters } from 'vuex'
 
 export default {
   name: 'Products',
   computed: {
-    ...mapState(['products'])
+    ...mapState(['products']),
+    ...mapGetters(['productsLength'])
   },
   mounted() {
-    const loading = this.$loading({
-      lock: true,
-      text: 'Loading',
-      spinner: 'el-icon-loading',
-      background: 'rgba(255, 255, 255, 0.7)'
-    })
+    if (!this.productsLength > 0) {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(255, 255, 255, 0.7)'
+      })
 
-    this.getProducts().then(() => {
-      setTimeout(() => {
-        loading.close()
-      }, 1000)
-    })
+      this.getProducts().then(() => {
+        setTimeout(() => {
+          loading.close()
+        }, 1000)
+      })
+    }
   },
   methods: {
     ...mapActions(['getProducts']),
@@ -51,4 +55,7 @@ export default {
 </script>
 
 <style scoped>
+.products-table {
+  text-align: center;
+}
 </style>
diff --git a/src/styles/transitions.css b/src/styles/transitions.css
@@ -1,6 +1,6 @@
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.5s ease;
+  transition: opacity 0.2s ease;
 }
 .fade-enter,
 .fade-leave-active {