From 119bf412805b45c30dfed0499ae7c76e57d5b1f6 Mon Sep 17 00:00:00 2001
From: Brian Kuzma <hello@briankuzma.com>
Date: Thu, 7 Oct 2021 17:28:20 +0200
Subject: [PATCH] docs(pagination): fix bugs in Pagination use case example in
 docs (#1492)

* fix(Paginated): fix bugs in Pagination use case example in docs

Reset the current offset each type the search query changes; otherwise
there may be no results shown if the user clicked forward one or more
pages and then typed to search.

Replace instances of magic number 10 with the "limit" variable;
otherwise changing the value of the "limit" data prop will result in
buggy behavior because clicking forward and back still updates the
offset by 10.

Convert query and country name strings to lower case before filtering
the list so that the user doesn't have to match the exact case of the
country names.

* Update Paginated.vue

Co-authored-by: Jeff Sagal <sagalbot@gmail.com>
---
 docs/.vuepress/components/Paginated.vue | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/docs/.vuepress/components/Paginated.vue b/docs/.vuepress/components/Paginated.vue
index 9918d4c..30b04cc 100644
--- a/docs/.vuepress/components/Paginated.vue
+++ b/docs/.vuepress/components/Paginated.vue
@@ -1,12 +1,8 @@
 <template>
-  <v-select
-    :options="paginated"
-    :filterable="false"
-    @search="(query) => (search = query)"
-  >
+  <v-select :options="paginated" :filterable="false" @search="onSearch">
     <li slot="list-footer" class="pagination">
-      <button :disabled="!hasPrevPage" @click="offset -= 10">Prev</button>
-      <button :disabled="!hasNextPage" @click="offset += 10">Next</button>
+      <button :disabled="!hasPrevPage" @click="offset -= limit">Prev</button>
+      <button :disabled="!hasNextPage" @click="offset += limit">Next</button>
     </li>
   </v-select>
 </template>
@@ -22,24 +18,32 @@ export default {
   }),
   computed: {
     filtered() {
-      return this.countries.filter((country) => country.includes(this.search))
+      return this.countries.filter((country) =>
+        country.toLocaleLowerCase().includes(this.search.toLocaleLowerCase())
+      )
     },
     paginated() {
       return this.filtered.slice(this.offset, this.limit + this.offset)
     },
     hasNextPage() {
-      const nextOffset = this.offset + 10
+      const nextOffset = this.offset + this.limit
       return Boolean(
         this.filtered.slice(nextOffset, this.limit + nextOffset).length
       )
     },
     hasPrevPage() {
-      const prevOffset = this.offset - 10
+      const prevOffset = this.offset - this.limit
       return Boolean(
         this.filtered.slice(prevOffset, this.limit + prevOffset).length
       )
     },
   },
+  methods: {
+    onSearch(query) {
+      this.search = query
+      this.offset = 0
+    },
+  },
 }
 </script>