From 5e1351d03311a3972fea13f02c31a56cd01d9eec Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Tue, 16 Dec 2025 19:07:42 -0500
Subject: [PATCH] Fixed performance issue with member search on LOA form

---
 ui/src/components/loa/loaForm.vue | 46 ++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/loa/loaForm.vue b/ui/src/components/loa/loaForm.vue
index a86fa96..8bea146 100644
--- a/ui/src/components/loa/loaForm.vue
+++ b/ui/src/components/loa/loaForm.vue
@@ -134,6 +134,22 @@ const maxEndDate = computed(() => {
         return null;
     }
 })
+
+const memberFilter = ref('');
+
+const filteredMembers = computed(() => {
+    const q = memberFilter?.value?.toLowerCase() ?? ""
+    const results: Member[] = []
+
+    for (const m of members.value ?? []) {
+        if (!q || (m.displayName || m.member_name).toLowerCase().includes(q)) {
+            results.push(m)
+            if (results.length >= 50) break
+        }
+    }
+
+    return results
+})
 </script>
 
 <template>
@@ -157,22 +173,24 @@ const maxEndDate = computed(() => {
                                         <ComboboxInput placeholder="Search members..." class="w-full pl-3"
                                             :display-value="(id) => {
                                                 const m = members.find(mem => mem.member_id === id)
-                                                return m ?  m.displayName || m.member_name : ''
-                                            }" />
+                                                return m ? m.displayName || m.member_name : ''
+                                            }" @input="memberFilter = $event.target.value" />
                                     </ComboboxAnchor>
                                     <ComboboxList class="*:w-64">
                                         <ComboboxEmpty class="text-muted-foreground w-full">No results</ComboboxEmpty>
                                         <ComboboxGroup>
-                                            <template v-for="member in members" :key="member.member_id">
-                                                <ComboboxItem :value="member.member_id"
-                                                    class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5 w-full">
-                                                    {{ member.displayName || member.member_name }}
-                                                    <ComboboxItemIndicator
-                                                        class="absolute left-2 inline-flex items-center">
-                                                        <Check class="h-4 w-4" />
-                                                    </ComboboxItemIndicator>
-                                                </ComboboxItem>
-                                            </template>
+                                            <div class="max-h-80 overflow-y-scroll scrollbar-themed min-w-3xs">
+                                                <template v-for="member in filteredMembers" :key="member.member_id">
+                                                    <ComboboxItem :value="member.member_id"
+                                                        class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5 w-full">
+                                                        {{ member.displayName || member.member_name }}
+                                                        <ComboboxItemIndicator
+                                                            class="absolute left-2 inline-flex items-center">
+                                                            <Check class="h-4 w-4" />
+                                                        </ComboboxItemIndicator>
+                                                    </ComboboxItem>
+                                                </template>
+                                            </div>
                                         </ComboboxGroup>
                                     </ComboboxList>
                                 </Combobox>
@@ -286,7 +304,9 @@ const maxEndDate = computed(() => {
                 </h2>
 
                 <p class="max-w-md text-muted-foreground">
-                    {{  adminMode ? 'You have successfully submitted a Leave of Absence on behalf of another member.' : `Your Leave of Absence request has been submitted successfully.
+                    {{ adminMode ? 'You have successfully submitted a Leave of Absence on behalf of another member.' :
+                        `Your Leave
+                    of Absence request has been submitted successfully.
                     It will take effect on your selected start date.` }}
                 </p>