api/src/routes/members.ts

@@ -5,7 +5,7 @@ import { Request, Response } from 'express';
 import pool from '../db';
 import { requireLogin, requireMemberState, requireRole } from '../middleware/auth';
 import { getUserActiveLOA } from '../services/loaService';
-import { getMemberSettings, getMembersFull, getMembersLite, getUserData, setUserSettings } from '../services/memberService';
+import { getAllMembersLite, getMemberSettings, getMembersFull, getMembersLite, getUserData, setUserSettings } from '../services/memberService';
 import { getUserRoles } from '../services/rolesService';
 import { memberSettings, MemberState } from '@app/shared/types/member';
 
@@ -75,6 +75,16 @@ router.put('/settings', [requireLogin], async (req: Request, res: Response) => {
     }
 })
 
+router.get('/lite', [requireLogin], async (req: Request, res: Response) => {
+    try {
+        let out = await getAllMembersLite();
+        res.status(200).json(out);
+    } catch (error) {
+        console.error(error);
+        res.status(500).json(error);
+    }
+})
+
 router.post('/lite/bulk', async (req: Request, res: Response) => {
     try {
         let ids = req.body.ids;
@@ -86,6 +96,7 @@ router.post('/lite/bulk', async (req: Request, res: Response) => {
     }
 })
 
+
 router.post('/full/bulk', async (req: Request, res: Response) => {
     try {
         let ids = req.body.ids;

api/src/services/memberService.ts

@@ -49,6 +49,18 @@ export async function getMembersLite(ids: number[]): Promise<MemberLight[]> {
   return res;
 }
 
+export async function getAllMembersLite(): Promise<MemberLight[]> {
+  const sql = `SELECT m.member_id AS id,
+                  m.member_name AS username,
+                  m.displayName,
+                  u.color
+              FROM view_member_rank_unit_status_latest m
+                  LEFT JOIN units u ON u.name = m.unit;`;
+
+  const res: MemberLight[] = await pool.query(sql);
+  return res;
+}
+
 export async function getMembersFull(ids: number[]): Promise<Member[]> {
   const sql = `SELECT * FROM view_member_rank_unit_status_latest WHERE member_id IN (?);`;
   const res: Member[] = await pool.query(sql, [ids]);

ui/src/api/member.ts

@@ -38,6 +38,20 @@ export async function setMemberSettings(settings: memberSettings) {
     return;
 }
 
+export async function getAllLightMembers(): Promise<MemberLight[]> {
+    const response = await fetch(`${addr}/members/lite`, {
+        credentials: 'include',
+        headers: {
+            "Content-Type": "application/json",
+        }
+    });
+
+    if (!response.ok) {
+        throw new Error("Failed to fetch light members");
+    }
+    return response.json();
+}
+
 export async function getLightMembers(ids: number[]): Promise<MemberLight[]> {
 
     if (ids.length === 0) return [];

ui/src/components/trainingReport/trainingReportForm.vue

@@ -3,9 +3,10 @@ import { trainingReportSchema, courseEventAttendeeSchema } from '@shared/schemas
 import { Course, CourseAttendee, CourseAttendeeRole, CourseEventDetails } from '@shared/types/course'
 import { useForm, useFieldArray, FieldArray as VeeFieldArray, ErrorMessage, Field as VeeField } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import { getAllAttendeeRoles, getAllTrainings, postTrainingReport } from '@/api/trainingReport'
-import { getMembers, Member } from '@/api/member'
+import { getAllLightMembers, getLightMembers, getMembers } from '@/api/member'
+import { Member, MemberLight } from '@shared/types/member'
 
 import FieldGroup from '../ui/field/FieldGroup.vue'
 import Field from '../ui/field/Field.vue'
@@ -13,12 +14,17 @@ import FieldLabel from '../ui/field/FieldLabel.vue'
 import FieldError from '../ui/field/FieldError.vue'
 import Button from '../ui/button/Button.vue'
 import Textarea from '../ui/textarea/Textarea.vue'
-import { Plus, X } from 'lucide-vue-next';
+import { Check, Plus, X } from 'lucide-vue-next';
 import FieldSet from '../ui/field/FieldSet.vue'
 import FieldLegend from '../ui/field/FieldLegend.vue'
 import FieldDescription from '../ui/field/FieldDescription.vue'
 import Checkbox from '../ui/checkbox/Checkbox.vue'
 import { configure } from 'vee-validate'
+import { ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
+import Popover from "@/components/ui/popover/Popover.vue";
+import PopoverTrigger from "@/components/ui/popover/PopoverTrigger.vue";
+import PopoverContent from "@/components/ui/popover/PopoverContent.vue";
+import Combobox from '../ui/combobox/Combobox.vue'
 
 
 const { handleSubmit, resetForm, errors, values, setFieldValue } = useForm({
@@ -79,16 +85,44 @@ const { remove, push, fields } = useFieldArray('attendees');
 const selectedCourse = computed<Course | undefined>(() => { return trainings.value?.find(c => c.id == values.course_id) })
 
 const trainings = ref<Course[] | null>(null);
-const members = ref<Member[] | null>(null);
+const members = ref<MemberLight[] | null>(null);
 const eventRoles = ref<CourseAttendeeRole[] | null>(null);
 
 const emit = defineEmits(['submit'])
 
 onMounted(async () => {
     trainings.value = await getAllTrainings();
-    members.value = await getMembers();
+    members.value = await getAllLightMembers();
     eventRoles.value = await getAllAttendeeRoles();
 })
+
+const selectCourse = ref(false);
+const openMap = reactive<Record<string, boolean>>({})
+
+const memberMap = computed(() =>
+    Object.fromEntries(
+        members.value?.map(m => [m.id, m.displayName || m.username]) ?? []
+    )
+)
+
+const memberSearch = ref('')
+
+const MAX_RESULTS = 50
+
+const filteredMembers = computed(() => {
+    const q = memberSearch?.value?.toLowerCase() ?? ""
+    const results: MemberLight[] = []
+
+    for (const m of members.value ?? []) {
+        if (!q || (m.displayName || m.username).toLowerCase().includes(q)) {
+            results.push(m)
+            if (results.length >= MAX_RESULTS) break
+        }
+    }
+
+    return results
+})
+
 </script>
 <template>
     <form id="trainingForm" @submit.prevent="submitForm" class="flex flex-col gap-5">
@@ -99,13 +133,37 @@ onMounted(async () => {
                     <VeeField v-slot="{ field, errors }" name="course_id">
                         <Field :data-invalid="!!errors.length">
                             <FieldLabel class="scroll-m-20 text-lg tracking-tight">Training Course</FieldLabel>
-                            <select v-bind="field"
+                            <Combobox :model-value="field.value" @update:open="selectCourse = $event"
-                                class="h-9 border rounded p-2 w-auto focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none">
+                                :open="selectCourse" @update:model-value="(v) => {
-                                <option value="" disabled>Select a course</option>
+                                    field.onChange(v);
-                                <option v-for="course in trainings" :key="course.id" :value="course.id">
+                                    selectCourse = false
+                                }" class="w-full">
+                                <ComboboxAnchor class="w-full">
+                                    <ComboboxInput @focus="selectCourse = true" placeholder="Search courses..."
+                                        class="w-full pl-3" :display-value="(id) => {
+                                            const c = trainings?.find(t => t.id === id)
+                                            return c ? c.name : '';
+                                        }" />
+                                </ComboboxAnchor>
+
+                                <ComboboxList class="w-full">
+                                    <ComboboxEmpty class="text-muted-foreground w-full">No results</ComboboxEmpty>
+                                    <ComboboxGroup>
+                                        <div class="max-h-80 overflow-y-scroll scrollbar-themed min-w-md">
+                                            <template v-for="course in trainings" :key="course.id">
+                                                <ComboboxItem :value="course.id"
+                                                    class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5 w-full">
                                                     {{ course.name }}
-                                </option>
+                                                    <ComboboxItemIndicator
-                            </select>
+                                                        class="absolute left-2 inline-flex items-center">
+                                                        <Check class="h-4 w-4" />
+                                                    </ComboboxItemIndicator>
+                                                </ComboboxItem>
+                                            </template>
+                                        </div>
+                                    </ComboboxGroup>
+                                </ComboboxList>
+                            </Combobox>
                             <div class="h-4">
                                 <FieldError v-if="errors.length" :errors="errors" />
                             </div>
@@ -113,6 +171,7 @@ onMounted(async () => {
                     </VeeField>
                 </FieldGroup>
             </div>
+
             <div class="w-[150px]">
                 <FieldGroup>
                     <VeeField v-slot="{ field, errors }" name="event_date">
@@ -180,13 +239,38 @@ onMounted(async () => {
                             <!-- Member Select -->
                             <VeeField :name="`attendees[${index}].attendee_id`" v-slot="{ field: f, errors: e }">
                                 <div>
-                                    <select v-bind="f"
+                                    <Combobox :model-value="f.value"
-                                        class="border rounded p-2 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none">
+                                        @update:open="openMap['member-' + field.key] = $event"
-                                        <option value="">Select member...</option>
+                                        :open="openMap['member-' + field.key]" @update:model-value="(v) => {
-                                        <option v-for="m in members" :key="m.member_id" :value="m.member_id">
+                                            f.onChange(v);
-                                            {{ m.member_name }}
+                                            openMap['member-' + field.key] = false
-                                        </option>
+                                        }" class="w-full">
-                                    </select>
+                                        <ComboboxAnchor class="w-full">
+                                            <ComboboxInput
+                                                @focus="() => { openMap['member-' + field.key] = true; memberSearch = memberMap[f.value] }"
+                                                placeholder="Search members..." class="w-full pl-3"
+                                                :display-value="(id) => memberMap[id] || ''"
+                                                @input="memberSearch = $event.target.value" />
+                                        </ComboboxAnchor>
+                                        <ComboboxList class="w-full">
+                                            <ComboboxEmpty class="text-muted-foreground w-full">No results
+                                            </ComboboxEmpty>
+                                            <ComboboxGroup>
+                                                <div class="max-h-80 overflow-y-scroll scrollbar-themed min-w-3xs">
+                                                    <template v-for="m in filteredMembers" :key="m.id">
+                                                        <ComboboxItem :value="m.id"
+                                                            class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5 w-full">
+                                                            {{ m.displayName || m.username }}
+                                                            <ComboboxItemIndicator
+                                                                class="absolute left-2 inline-flex items-center">
+                                                                <Check class="h-4 w-4" />
+                                                            </ComboboxItemIndicator>
+                                                        </ComboboxItem>
+                                                    </template>
+                                                </div>
+                                            </ComboboxGroup>
+                                        </ComboboxList>
+                                    </Combobox>
                                     <div class="h-4">
                                         <FieldError v-if="e.length" :errors="e" />
                                     </div>
@@ -196,13 +280,39 @@ onMounted(async () => {
                             <!-- Role Select -->
                             <VeeField :name="`attendees[${index}].attendee_role_id`" v-slot="{ field: f, errors: e }">
                                 <div>
-                                    <select v-bind="f"
+                                    <Combobox :model-value="f.value"
-                                        class="border rounded p-2 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none">
+                                        @update:open="openMap['role-' + field.key] = $event"
-                                        <option value="">Select role...</option>
+                                        :open="openMap['role-' + field.key]" @update:model-value="(v) => {
-                                        <option v-for="r in eventRoles" :key="r.id" :value="r.id">
+                                            f.onChange(v);
+                                            openMap['role-' + field.key] = false
+                                        }" class="w-full">
+                                        <ComboboxAnchor class="w-full">
+                                            <ComboboxInput @focus="openMap['role-' + field.key] = true"
+                                                placeholder="Search roles..." class="w-full pl-3" :display-value="(id) => {
+                                                    const er = eventRoles?.find(t => t.id === id)
+                                                    return er?.name;
+                                                }" />
+                                        </ComboboxAnchor>
+                                        <ComboboxList class="w-full">
+                                            <ComboboxEmpty class="text-muted-foreground w-full">No results
+                                            </ComboboxEmpty>
+                                            <ComboboxGroup>
+                                                <div class="max-h-80 overflow-y-scroll scrollbar-themed min-w-3xs">
+                                                    <template v-for="r in eventRoles" :key="r.id">
+                                                        <ComboboxItem :value="r.id"
+                                                            class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5 w-full">
                                                             {{ r.name }}
-                                        </option>
+                                                            <ComboboxItemIndicator
-                                    </select>
+                                                                class="absolute left-2 inline-flex items-center">
+                                                                <Check class="h-4 w-4" />
+                                                            </ComboboxItemIndicator>
+                                                        </ComboboxItem>
+                                                    </template>
+                                                </div>
+                                            </ComboboxGroup>
+                                        </ComboboxList>
+                                    </Combobox>
+
                                     <div class="h-4">
                                         <FieldError v-if="e.length" :errors="e" />
                                     </div>