search and page filter combined

.gitignore

@@ -1,3 +1,4 @@
 /config
 /wg0.conf
-/wg0.json
+/wg0.json
+/create config

src/www/index.html

@@ -79,7 +79,7 @@
 
           <div>
             <!-- Client -->
-            <div v-if="clients && clients.length > 0" v-for="client in filteredClients" :key="client.id"
+            <div v-if="clients && clients.length > 0" v-for="client in currentPage" :key="client.id"
               class="relative overflow-hidden border-b border-gray-100 border-solid">
 
               <!-- Chart -->
@@ -527,7 +527,30 @@
         </svg>
 
       </div>
+      <!-- Previous and Next Button-->
+      <div class="flex justify-between items-center mt-10">
+        <div class="flex-shrink-0">
+          <button v-if="pageNumber > 0" type="button" @click="previousPage"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-800 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
+            ← Previous
+          </button>
+          <button v-else type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-200 text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm cursor-not-allowed">
+            ← Previous
+          </button>
+        </div>
 
+        <div class="flex-shrink-0">
+          <button v-if="canGoToNextPage" type="button" @click="nextPage"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-800 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
+            Next →
+          </button>
+          <button v-else type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-200 text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm cursor-not-allowed">
+            Next →
+          </button>
+        </div>
+      </div>
     </div>
 
     <p v-cloak class="text-center m-10 text-gray-300 text-xs">Made by <a target="_blank" class="hover:underline"

src/www/js/app.js

@@ -31,7 +31,13 @@ new Vue({
     password: null,
     requiresPassword: null,
 
+    prepage: 10,
+    pageNumber: 0,
+    canGoToNextPage: false,
+
     search: null,
+    searchPrevious: null,
+    
     clients: null,
     clientsPersist: {},
     clientDelete: null,
@@ -120,14 +126,37 @@ new Vue({
       return this.clients.filter(client => {
         if (!this.search) return true;
 
+        // Reset page number if search changed
+        if (this.search !== this.searchPrevious) {
+          this.pageNumber = 0;
+          this.searchPrevious = this.search;
+        }
         const search = this.search.toLowerCase();
-        return client.name.toLowerCase().includes(search)
-          || client.address.toLowerCase().includes(search)
-          || client.id.toLowerCase().includes(search);
+        return client.name.toLowerCase().includes(search);
       });
+    },
+
+    currentPage() {
+      if (!this.filteredClients) return null;
+
+      this.canGoToNextPage = this.pageNumber+1 < this.filteredClients.length / this.prepage;
+      return this.filteredClients.slice(this.pageNumber * this.prepage, this.pageNumber * this.prepage + this.prepage);
     }
+
   },
   methods: {
+    nextPage() {
+      if (this.pageNumber < this.clients.length / this.prepage) {
+        this.pageNumber++;
+      }
+    },
+
+    previousPage() {
+      if (this.pageNumber > 0) {
+        this.pageNumber--;
+      }
+    },
+
     dateTime: value => {
       return new Intl.DateTimeFormat(undefined, {
         year: 'numeric',