From f5c839f1f983583a8af390e13cf878a83f9f7531 Mon Sep 17 00:00:00 2001
From: Daniel-I-Am <djdecloet@gmail.com>
Date: Thu, 2 Sep 2021 15:24:06 +0200
Subject: [PATCH] Add itemsPerPage selector to pagination

---
 resources/js/components/BlogRecent.vue |  8 ++++++--
 resources/js/components/Pagination.vue |  9 +++++++++
 resources/scss/_pagination.scss        | 13 +++++++++----
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/BlogRecent.vue b/resources/js/components/BlogRecent.vue
index b30c5cc..06efadf 100644
--- a/resources/js/components/BlogRecent.vue
+++ b/resources/js/components/BlogRecent.vue
@@ -114,8 +114,12 @@ export default {
         },
     },
     watch: {
-        itemsPerPage() {
-            this.page = 0;
+        itemsPerPage(value) {
+            if (this.page > 0) {
+                this.page = 0;
+            } else {
+                this.updateList(value, this.page);
+            }
         },
         page(value) {
             this.updateList(this.itemsPerPage, value);
diff --git a/resources/js/components/Pagination.vue b/resources/js/components/Pagination.vue
index c59a304..d099e78 100644
--- a/resources/js/components/Pagination.vue
+++ b/resources/js/components/Pagination.vue
@@ -6,6 +6,12 @@
         <button @click="gotoPage(page + 1)">Next</button>
         <button @click="gotoPage(maxPages)">Last</button>
     </div>
+
+    <div class="pagination">
+        <button class="unselectable">Items per page</button>
+
+        <button :class="{ active: (itemsPerPage === n) }" @click="setPageSize(n)" v-for="n of [5, 10, 20, 50]" :key="n">{{ n }}</button>
+    </div>
 </template>
 
 <script>
@@ -29,6 +35,9 @@ export default {
                 this.$emit('update:page', page);
             }
         },
+        setPageSize(n) {
+            this.$emit('update:itemsPerPage', n);
+        }
     }
 }
 </script>
diff --git a/resources/scss/_pagination.scss b/resources/scss/_pagination.scss
index 27bebdf..5ec2439 100644
--- a/resources/scss/_pagination.scss
+++ b/resources/scss/_pagination.scss
@@ -2,10 +2,14 @@
     display: flex;
     justify-content: flex-start;
 
+    &:not(:last-of-type) {
+        margin-bottom: .5rem;
+    }
+
     button {
-        background-color: #1c2d35;
+        background-color: $background;
         border: 1px solid white;
-        color: white;
+        color: $text-color;
 
         height: 40px;
         width: 120px;
@@ -17,8 +21,9 @@
         cursor: pointer;
     }
 
-    button:not(.unselectable):hover {
-        background-color: #2d3e46;
+    button:not(.unselectable):hover,
+    button.active {
+        background-color: $background-lighter;
     }
 
     button:not(:last-child) {