From a2bb0c0a4d40bf0b4244f527e94c36a6ad9b655b Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Sun, 3 Apr 2022 22:17:07 +0200
Subject: [PATCH] Debounce contact filter

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 .../components/Event/OrganizerPickerWrapper.vue  | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/js/src/components/Event/OrganizerPickerWrapper.vue b/js/src/components/Event/OrganizerPickerWrapper.vue
index 2b07ddb9c..1e7161571 100644
--- a/js/src/components/Event/OrganizerPickerWrapper.vue
+++ b/js/src/components/Event/OrganizerPickerWrapper.vue
@@ -72,7 +72,8 @@
                 <p>{{ $t("Add a contact") }}</p>
                 <b-input
                   :placeholder="$t('Filter by name')"
-                  v-model="contactFilter"
+                  :value="contactFilter"
+                  @input="debounceSetFilterByName"
                   dir="auto"
                 />
                 <div v-if="actorMembers.length > 0">
@@ -152,6 +153,7 @@ import {
 import { Paginate } from "../../types/paginate";
 import { GROUP_MEMBERS } from "@/graphql/member";
 import { ActorType, MemberRole } from "@/types/enums";
+import debounce from "lodash/debounce";
 
 const MEMBER_ROLES = [
   MemberRole.CREATOR,
@@ -218,6 +220,12 @@ export default class OrganizerPickerWrapper extends Vue {
 
   userMemberships: Paginate<IMember> = { elements: [], total: 0 };
 
+  data(): Record<string, unknown> {
+    return {
+      debounceSetFilterByName: debounce(this.setContactFilter, 1000),
+    };
+  }
+
   get actualContacts(): (string | undefined)[] {
     return this.contacts.map(({ id }) => id);
   }
@@ -229,6 +237,10 @@ export default class OrganizerPickerWrapper extends Vue {
     );
   }
 
+  setContactFilter(contactFilter: string) {
+    this.contactFilter = contactFilter;
+  }
+
   @Watch("userMemberships")
   setInitialActor(): void {
     if (this.$route.query?.actorId) {
@@ -279,7 +291,7 @@ export default class OrganizerPickerWrapper extends Vue {
         actor.preferredUsername.toLowerCase(),
         actor.name?.toLowerCase(),
         actor.domain?.toLowerCase(),
-      ].some((match) => match?.includes(this.contactFilter.toLowerCase()));
+      ];
     });
   }