From 1ded5a4bb291b39ad3db2e9135780bb71b4e10b4 Mon Sep 17 00:00:00 2001
From: Daniel-I-Am <djdecloet@gmail.com>
Date: Thu, 2 Sep 2021 15:05:30 +0200
Subject: [PATCH] Implement pagination properly

---
 resources/js/components/BlogRecent.vue |  3 ++-
 resources/js/components/Pagination.vue | 12 +++++----
 resources/scss/_pagination.scss        | 37 ++++++++++++++++++++++++++
 resources/scss/app.scss                |  1 +
 4 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 resources/scss/_pagination.scss

diff --git a/resources/js/components/BlogRecent.vue b/resources/js/components/BlogRecent.vue
index c09de68..58418f0 100644
--- a/resources/js/components/BlogRecent.vue
+++ b/resources/js/components/BlogRecent.vue
@@ -25,7 +25,7 @@
             </ul>
 
             <pagination
-                v-if="paginate"
+                v-if="paginate && !loading"
                 v-model:page="page"
                 v-model:itemsPerPage="itemsPerPage"
                 :max-pages="lastPage"
@@ -88,6 +88,7 @@ export default {
             this.$router.push({ name: 'blog-article', params: { year, month, day, id, slug }});
         },
         updateList(limit, page) {
+            this.loading = true;
             axios.get("/api/blog/recent", {
                 params: {
                     limit: limit,
diff --git a/resources/js/components/Pagination.vue b/resources/js/components/Pagination.vue
index d593757..c59a304 100644
--- a/resources/js/components/Pagination.vue
+++ b/resources/js/components/Pagination.vue
@@ -1,9 +1,11 @@
 <template>
-    <button @click="gotoPage(0)">First</button>
-    <button @click="gotoPage(page - 1)">Previous</button>
-    <span>{{ page + 1 }} / {{ maxPages }}</span>
-    <button @click="gotoPage(page + 1)">Next</button>
-    <button @click="gotoPage(maxPages)">Last</button>
+    <div class="pagination">
+        <button @click="gotoPage(0)">First</button>
+        <button @click="gotoPage(page - 1)">Previous</button>
+        <button class="unselectable">{{ page + 1 }} / {{ maxPages }}</button>
+        <button @click="gotoPage(page + 1)">Next</button>
+        <button @click="gotoPage(maxPages)">Last</button>
+    </div>
 </template>
 
 <script>
diff --git a/resources/scss/_pagination.scss b/resources/scss/_pagination.scss
new file mode 100644
index 0000000..27bebdf
--- /dev/null
+++ b/resources/scss/_pagination.scss
@@ -0,0 +1,37 @@
+.pagination {
+    display: flex;
+    justify-content: flex-start;
+
+    button {
+        background-color: #1c2d35;
+        border: 1px solid white;
+        color: white;
+
+        height: 40px;
+        width: 120px;
+        padding: .5rem;
+        flex-grow: 1;
+    }
+
+    button:not(.unselectable) {
+        cursor: pointer;
+    }
+
+    button:not(.unselectable):hover {
+        background-color: #2d3e46;
+    }
+
+    button:not(:last-child) {
+        border-right: none;
+    }
+
+    button:first-child {
+        border-top-left-radius: 15px;
+        border-bottom-left-radius: 15px;
+    }
+
+    button:last-child {
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
+    }
+}
diff --git a/resources/scss/app.scss b/resources/scss/app.scss
index 68d1cce..6871d8c 100644
--- a/resources/scss/app.scss
+++ b/resources/scss/app.scss
@@ -16,3 +16,4 @@
 @import "blog";
 @import "footer";
 @import "home";
+@import "pagination";