From 0d0fe63667a667c101405dbb424ba2b68390c683 Mon Sep 17 00:00:00 2001
From: JJ-8 <34778827+JJ-8@users.noreply.github.com>
Date: Tue, 12 Nov 2024 22:29:01 +0100
Subject: [PATCH] Add possibility to search for guests in invites

When  you have a lot of accounts, it becomes difficult to find specific users in the list of chips.
With the search possibility you can now filter the list to find specific users without using ctrl+f in your browser.
---
 front/src/components/CTF/Guests.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/front/src/components/CTF/Guests.vue b/front/src/components/CTF/Guests.vue
index 24920d34..b2e0e7c6 100644
--- a/front/src/components/CTF/Guests.vue
+++ b/front/src/components/CTF/Guests.vue
@@ -1,6 +1,15 @@
 <template>
   <div class="q-gutter-md">
     <div class="row text-h6">Invite guests</div>
+    <div class="row q-mt-sm">
+      <div style="width: 590px">
+        <q-input v-model="filter" filled dense placeholder="Search">
+          <template #prepend>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </div>
+    </div>
     <div class="row q-mt-sm" style="margin-left: 12px">
       <template v-if="guestsWithInvitation.length > 0">
         <div
@@ -61,8 +70,10 @@ export default defineComponent({
     const team = ctfnote.profiles.injectTeam();
     const now = ref(new Date());
     const settings = ctfnote.settings.injectSettings();
+    const filter = ref('');
 
     return {
+      filter,
       now,
       team,
       settings,
@@ -79,7 +90,14 @@ export default defineComponent({
       );
     },
     guestsWithInvitation() {
-      return this.guests.map((g) => {
+      let guests = this.guests;
+      if (this.filter) {
+        guests = guests.filter((g) =>
+          g.username.toLowerCase().includes(this.filter.toLowerCase()),
+        );
+      }
+
+      return guests.map((g) => {
         const invitation = this.ctf.invitations.find(
           (i) => i.profileId == g.id,
         );