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

47-Training-Report-Input-Upgrade #105

Merged
Ajdj100 merged 3 commits from 47-Training-Report-Input-Upgrade into main 2025-12-16 00:00:05 -06:00
Conversation 0 Commits 3 Files Changed 8 +174 -27
4 changed files with 174 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 627f6bfe3d - Show all commits

13
api/src/routes/members.ts
View File

@@ -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;

12
api/src/services/memberService.ts
View File

@@ -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]);

14
ui/src/api/member.ts
View File

@@ -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 [];

158
ui/src/components/trainingReport/trainingReportForm.vue
View File

@@ -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"
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">
<option value="" disabled>Select a course</option>
<option v-for="course in trainings" :key="course.id" :value="course.id">
<Combobox :model-value="field.value" @update:open="selectCourse = $event"
:open="selectCourse" @update:model-value="(v) => {
field.onChange(v);
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>
</select>
<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="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"
class="border rounded p-2 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none">
<option value="">Select member...</option>
<option v-for="m in members" :key="m.member_id" :value="m.member_id">
{{ m.member_name }}
</option>
</select>
<Combobox :model-value="f.value"
@update:open="openMap['member-' + field.key] = $event"
:open="openMap['member-' + field.key]" @update:model-value="(v) => {
f.onChange(v);
openMap['member-' + field.key] = false
}" class="w-full">
<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"
class="border rounded p-2 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none">
<option value="">Select role...</option>
<option v-for="r in eventRoles" :key="r.id" :value="r.id">
<Combobox :model-value="f.value"
@update:open="openMap['role-' + field.key] = $event"
:open="openMap['role-' + field.key]" @update:model-value="(v) => {
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>
</select>
<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>