17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 21 Pull Requests Actions 3 Packages Projects Releases 8 Wiki Activity

Fixed performance issue with member search on LOA form

Browse Source
This commit is contained in:
ajdj100
2025-12-16 19:07:42 -05:00
parent 5f6c17361b
commit 5e1351d033
1 changed files with 33 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
ui/src/components/loa/loaForm.vue
View File

@@ -134,6 +134,22 @@ const maxEndDate = computed(() => {
return null; 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> </script>
<template> <template>
@@ -157,22 +173,24 @@ const maxEndDate = computed(() => {
<ComboboxInput placeholder="Search members..." class="w-full pl-3" <ComboboxInput placeholder="Search members..." class="w-full pl-3"
:display-value="(id) => { :display-value="(id) => {
const m = members.find(mem => mem.member_id === 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> </ComboboxAnchor>
<ComboboxList class="*:w-64"> <ComboboxList class="*:w-64">
<ComboboxEmpty class="text-muted-foreground w-full">No results</ComboboxEmpty> <ComboboxEmpty class="text-muted-foreground w-full">No results</ComboboxEmpty>
<ComboboxGroup> <ComboboxGroup>
<template v-for="member in members" :key="member.member_id"> <div class="max-h-80 overflow-y-scroll scrollbar-themed min-w-3xs">
<ComboboxItem :value="member.member_id" <template v-for="member in filteredMembers" :key="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"> <ComboboxItem :value="member.member_id"
{{ member.displayName || member.member_name }} class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5 w-full">
<ComboboxItemIndicator {{ member.displayName || member.member_name }}
class="absolute left-2 inline-flex items-center"> <ComboboxItemIndicator
<Check class="h-4 w-4" /> class="absolute left-2 inline-flex items-center">
</ComboboxItemIndicator> <Check class="h-4 w-4" />
</ComboboxItem> </ComboboxItemIndicator>
</template> </ComboboxItem>
</template>
</div>
</ComboboxGroup> </ComboboxGroup>
</ComboboxList> </ComboboxList>
</Combobox> </Combobox>
@@ -286,7 +304,9 @@ const maxEndDate = computed(() => {
</h2> </h2>
<p class="max-w-md text-muted-foreground"> <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.` }} It will take effect on your selected start date.` }}
</p> </p>