From 958fc952936d03171b19a79a4d527819a8ac4151 Mon Sep 17 00:00:00 2001
From: "Anatoliy Osypenko (DreaMinder)" <dreaminder7@gmail.com>
Date: Mon, 23 Nov 2020 23:40:12 +0200
Subject: [PATCH] add pagination

---
 components/Pagination.vue | 81 +++++++++++++++++++++++++++++++--------
 components/README.md      |  7 ----
 pages/_homepage.vue       | 37 ++++++++++++++++++
 pages/index.vue           | 28 --------------
 4 files changed, 103 insertions(+), 50 deletions(-)
 delete mode 100644 components/README.md
 create mode 100644 pages/_homepage.vue
 delete mode 100644 pages/index.vue

diff --git a/components/Pagination.vue b/components/Pagination.vue
index 62d4da2d..d4a1665d 100644
--- a/components/Pagination.vue
+++ b/components/Pagination.vue
@@ -1,22 +1,73 @@
 <template>
-  <div class="w-full flex items-center justify-between space-x-2 mt-10 font-sans">
+  <nav class="w-full flex items-center justify-between space-x-2 mt-10 font-sans" v-if="pages > 1">
     <!-- Link PREV button -->
-    <button class="font-bold text-lighterblue py-2 opacity-50 cursor-not-allowed" @click="doSomething">
+    <n-link title="Prev"
+      class="font-bold text-lighterblue py-2 hover:text-lightblue focus:shadow-none focus:text-blue transition duration-75"
+      :to="page !== 1 ? goTo(page - 1) : goTo(page)"
+      :class="page === 1 ? 'opacity-50 cursor-not-allowed' : ''"
+    >
       <IconLeft />	
-    </button>
+    </n-link>
     <!-- Page numbers container -->
     <div class="flex space-x-2 text-lighterblue">
-      <div class="flex items-center justify-center px-1 h-10 cursor-pointer transition duration-75 sm:px-2">1</div>
-      <div class="flex items-center justify-center px-1 h-10 cursor-default transition duration-75 sm:px-2">&middot;&middot;&middot;</div>
-      <div class="flex items-center justify-center px-1 h-10 cursor-pointer transition duration-75 sm:px-2">3</div>
-      <div class="flex items-center justify-center px-1 h-10 cursor-default transition duration-75 sm:px-2 text-lightblue font-bold">4</div>
-      <div class="flex items-center justify-center px-1 h-10 cursor-pointer transition duration-75 sm:px-2">5</div>
-      <div class="flex items-center justify-center px-1 h-10 cursor-default transition duration-75 sm:px-2">&middot;&middot;&middot;</div>
-      <div class="flex items-center justify-center px-1 h-10 cursor-pointer transition duration-75 sm:px-2">7</div>
+      <n-link class="pagination-item cursor-pointer" :class="{'pagination-item--active': page === 1}" :to="goTo(1)">1</n-link>
+      <div class="pagination-item" v-if="page > delta + 1">&middot;&middot;&middot;</div>
+      <n-link
+        v-if="p !== 1 && p !== pages && Math.abs(p - page) < delta"
+        :class="{'pagination-item--active': page === p}"
+        class="pagination-item cursor-pointer"
+        v-for="p in pages" :key="p"
+        v-text="p"
+        :to="goTo(p)"
+      />
+      <div class="pagination-item" v-if="page < pages -  delta">&middot;&middot;&middot;</div>
+      <n-link class="pagination-item cursor-pointer" :class="{'pagination-item--active': page === pages}" :to="goTo(pages)">{{ pages }}</n-link>
     </div>
     <!-- Link NEXT button -->
-    <button class="font-bold text-lighterblue py-2 hover:text-lightblue focus:shadow-none focus:text-blue transition duration-75" @click="doSomething">
-      <IconRight />
-    </button>
-  </div>
-</template>
\ No newline at end of file
+    <n-link title="Next"
+      class="font-bold text-lighterblue py-2 hover:text-lightblue focus:shadow-none focus:text-blue transition duration-75"
+      :to="page !== pages ? goTo(page + 1) : goTo(page)"
+      :class="page === pages ? 'opacity-50 cursor-not-allowed' : ''"
+    >
+      <IconRight />	
+    </n-link>
+  </nav>
+</template>
+
+<script>
+const VISIBLE_PAGES_DELTA = 2
+
+export default {
+  props: {
+    page: Number,
+    posts: Number,
+    perPage: Number
+  },
+  computed: {
+    pages(){
+      return Math.ceil(this.posts / this.perPage)
+    },
+    delta() {
+      return VISIBLE_PAGES_DELTA
+    }
+  },
+  methods: {
+    goTo(page) {
+      if (page === 1) return '/'
+      return '/' + page
+    }
+  }
+}
+</script>
+
+<style>
+.pagination-item {
+  @apply flex items-center justify-center px-1 h-10 transition duration-75;
+  @screen sm {
+    @apply px-2;
+  }
+}
+.pagination-item--active {
+  @apply text-lightblue font-bold cursor-default;
+}
+</style>
\ No newline at end of file
diff --git a/components/README.md b/components/README.md
deleted file mode 100644
index a079f106..00000000
--- a/components/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# COMPONENTS
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-The components directory contains your Vue.js Components.
-
-_Nuxt.js doesn't supercharge these components._
diff --git a/pages/_homepage.vue b/pages/_homepage.vue
new file mode 100644
index 00000000..fcc4e43f
--- /dev/null
+++ b/pages/_homepage.vue
@@ -0,0 +1,37 @@
+<template>
+	<div class="my-grid">
+		<aside class="md:sticky top-0 lg:space-y-4">
+			<h1 class="lg:hidden mb-4">Tous les articles</h1>
+			<Sidebar :categories="categories" baseurl="articles" :main="{url: '/', title: 'Tous les articles'}"/>
+		</aside>
+
+		<div class="md:col-span-3">
+			<Articles :posts="posts" baseurl="articles" />
+			<Pagination :perPage="perPage" :page="page" :posts="totalPosts" />
+		</div>
+	</div>
+</template>
+
+<script>
+	const PER_PAGE = 12
+
+	export default {
+		async asyncData({$content, params}) {
+			const perPage = PER_PAGE;
+			const page = parseInt(params.homepage || 1) || 1;
+			const totalPosts = (await $content("posts").fetch()).length;
+			const skip = PER_PAGE * (page - 1);
+			const posts = await $content("posts")
+				.sortBy("date", "desc").skip(skip).limit(perPage).fetch();
+			const categories = await $content("categories")
+				.sortBy("ordre", "asc").fetch();
+			if (!posts.length) throw new Error('Not found')
+
+			posts.forEach((p, i) => {
+				let c = categories.find(c => p.categories.includes(c.titre));
+				p.category = c;
+			})
+			return { posts, categories, page, perPage, totalPosts };
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
deleted file mode 100644
index 3f134ae4..00000000
--- a/pages/index.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-	<div class="my-grid">
-		<aside class="md:sticky top-0 lg:space-y-4">
-			<h1 class="lg:hidden mb-4">Tous les articles</h1>
-			<Sidebar :categories="categories" baseurl="articles" :main="{url: '/', title: 'Tous les articles'}"/>
-		</aside>
-
-		<div class="md:col-span-3">
-			<Articles :posts="posts" baseurl="articles" />
-			<Pagination />
-		</div>
-	</div>
-</template>
-
-<script>
-	export default {
-		async asyncData({$content}) {
-			const posts = await $content("posts").sortBy("date", "desc").fetch();
-			const categories = await $content("categories").sortBy("ordre", "asc").fetch();
-
-			posts.forEach((p, i) => {
-				let c = categories.find(c => p.categories.includes(c.titre));
-				p.category = c;
-			})
-			return { posts, categories };
-		}
-	}
-</script>
\ No newline at end of file