From 0bc5deb95869e5e7a42616fc432fc42cc131e8e9 Mon Sep 17 00:00:00 2001
From: kmacoders <hungkids3003@gmail.com>
Date: Tue, 6 Jul 2021 17:59:24 +0700
Subject: [PATCH] fix: wip pagination

---
 components/global/Pagination.vue      | 49 +++++++++++++++++++++++++++
 components/organisms/FeaturedBlog.vue |  2 +-
 components/organisms/ListBlog.vue     |  4 +--
 pages/blog/index.vue                  | 17 ++++++++--
 4 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 components/global/Pagination.vue

diff --git a/components/global/Pagination.vue b/components/global/Pagination.vue
new file mode 100644
index 0000000..991d3ab
--- /dev/null
+++ b/components/global/Pagination.vue
@@ -0,0 +1,49 @@
+<template>
+  <nav class="pagination is-rounded" role="navigation" aria-label="pagination">
+    <a class="pagination-previous">Previous</a>
+    <a class="pagination-next">Next page</a>
+    <ul class="pagination-list">
+      <li>
+        Page {{ currentPage }} / {{ totalPage }}
+      </li>
+    </ul>
+  </nav>
+</template>
+<script>
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+@Component
+export default class Pagination extends Vue {
+  @Prop({ type: Number }) total
+
+  @Prop({ type: Number }) perPage
+
+  get totalPage () {
+    return Math.ceil(this.total / this.perPage)
+  }
+
+  get currentPage () {
+    return Number(this.$route.query.page) || 1
+  }
+
+  get nextPage () {
+    return (this.currentPage <= this.totalPage) ? this.currentPage + 1 : this.currentPage
+  }
+
+  get prevPage () {
+    return (this.currentPage >= 1) ? this.currentPage - 1 : this.currentPage
+  }
+
+  get isFirstPage () {
+    return this.currentPage === 1
+  }
+
+  get isLastPage () {
+    return this.currentPage === this.totalPage
+  }
+
+  mounted () {
+    console.log('Total page: ' + this.totalPage)
+    console.log('Current page: ' + this.currentPage)
+  }
+}
+</script>
diff --git a/components/organisms/FeaturedBlog.vue b/components/organisms/FeaturedBlog.vue
index 018f106..2b3d50d 100644
--- a/components/organisms/FeaturedBlog.vue
+++ b/components/organisms/FeaturedBlog.vue
@@ -24,7 +24,7 @@
             </p>
             <br>
             <NuxtLink :to="{name: 'blog-slug', params: { slug: firstBlog.slug }}" class="button is-primary">
-              Read More
+              Đọc thêm
             </NuxtLink>
           </div>
         </div>
diff --git a/components/organisms/ListBlog.vue b/components/organisms/ListBlog.vue
index 7abfcab..7062488 100755
--- a/components/organisms/ListBlog.vue
+++ b/components/organisms/ListBlog.vue
@@ -26,10 +26,10 @@
           </p>
           <br>
           <NuxtLink
-            :to="blog.path"
+            :to="{ name: 'blog-slug', params: { slug: blog.slug }}"
             class="button is-primary"
           >
-            Read More
+            Đọc thêm
           </NuxtLink>
         </div>
       </article>
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index be745e7..b8e6bac 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -8,6 +8,14 @@
           <ListBlog :list-blogs="paginatedArticles" />
         </div>
       </div>
+      <div class="columns">
+        <div class="column is-10 is-offset-1">
+          <Pagination
+            :total="allArticles.length"
+            :per-page="perPage"
+          />
+        </div>
+      </div>
     </div>
   </section>
 </template>
@@ -24,12 +32,13 @@ import ListBlog from '@/components/organisms/ListBlog.vue'
     ListBlog
   },
   async asyncData ({ $content, params, error }) {
+    const perPage = 8
     const content = await getContent($content, params, error, 'blog')
 
-    console.log(content)
     return {
       allArticles: content.allArticles,
-      paginatedArticles: content.paginatedArticles
+      paginatedArticles: content.paginatedArticles,
+      perPage
     }
   },
   head () {
@@ -65,6 +74,10 @@ export default class PageBlog extends Vue {
   padding: 1.5rem;
 }
 
+.blog-posts nav {
+  padding: 1.5rem;
+}
+
 .blog-posts .post img {
   border-radius: 6px;
 }