Add itemsPerPage selector to pagination

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);

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>

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) {