From df43159acfcacf93ad262ff315d34e389cdc189b Mon Sep 17 00:00:00 2001
From: busti <mbust@live.de>
Date: Wed, 8 Jan 2020 22:20:45 +0100
Subject: [PATCH] debounce search box

---
 package.json              | 1 +
 src/components/Navbar.vue | 9 ++++++++-
 src/main.js               | 4 ++++
 yarn.lock                 | 5 +++++
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e0fb99b..238550c 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "sass-loader": "^8.0.0",
     "utf8": "^3.0.0",
     "vue": "^2.6.10",
+    "vue-debounce": "^2.2.0",
     "vue-router": "^3.1.3",
     "vuex": "^3.1.2",
     "vuex-router-sync": "^5.0.0"
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 32a5299..1b16c05 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -31,7 +31,14 @@
         </button>
 
         <form class="form-inline mt-1 my-lg-auto my-xl-auto w-100 d-inline">
-            <input class="form-control w-100" type="search" placeholder="Search" aria-label="Search" @input="searchEventItems($event.target.value)">
+            <input
+              class="form-control w-100"
+              type="search"
+              placeholder="Search"
+              aria-label="Search"
+              v-debounce:500ms="myFunc"
+              @input="searchEventItems($event.target.value)"
+            >
         </form>
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
diff --git a/src/main.js b/src/main.js
index da94c01..1de3322 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,8 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
+import vueDebounce from 'vue-debounce';
+
 library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);
@@ -26,3 +28,5 @@ new Vue({
   router,
   render: h => h(App),
 });
+
+Vue.use(vueDebounce);
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index e11e534..b42c6bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8353,6 +8353,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-debounce@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/vue-debounce/-/vue-debounce-2.2.0.tgz#b081aba94a7faf99145312e86fc1b2b1117990de"
+  integrity sha512-H9Z6gp7zsgLMgtYtQKZ1htxw/QC1NLYkzu3ElB+2RECEMLtejRM1+hGrFgBPVdnBamGA/R9uSt+lYdtx+GSnhQ==
+
 vue-eslint-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz#00f4e4da94ec974b821a26ff0ed0f7a78402b8a1"