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

Implemented systems for editing training reports.

Browse Source
This commit is contained in:
ajdj100
2026-04-05 01:37:31 -04:00
parent ab9e6a6ebc
commit f0507beb88
6 changed files with 634 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ import { Course, CourseAttendee, CourseAttendeeRole, CourseEventDetails } from '
import { useForm, useFieldArray, FieldArray as VeeFieldArray, ErrorMessage, Field as VeeField } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
import { getAllAttendeeRoles, getAllTrainings, postTrainingReport } from '@/api/trainingReport'
import { getAllAttendeeRoles, getAllTrainings, postTrainingReport, putTrainingReport } from '@/api/trainingReport'
import { getAllLightMembers, getLightMembers, getMembers } from '@/api/member'
import { Member, MemberLight } from '@shared/types/member'
@@ -28,6 +28,40 @@ import Combobox from '../ui/combobox/Combobox.vue'
import Tooltip from '../tooltip/Tooltip.vue'
import Spinner from '../ui/spinner/Spinner.vue'
const props = withDefaults(defineProps<{
mode?: 'create' | 'edit';
report?: CourseEventDetails | null;
reportId?: number | null;
}>(), {
mode: 'create',
report: null,
reportId: null,
})
const emit = defineEmits(['submit'])
function toFormDate(dateValue: Date | string | null | undefined): string {
if (!dateValue) return "";
const d = new Date(dateValue);
if (isNaN(d.getTime())) return "";
return d.toISOString().split('T')[0];
}
function toFormValues(report: CourseEventDetails) {
return {
course_id: report.course_id,
event_date: toFormDate(report.event_date),
remarks: report.remarks ?? "",
attendees: (report.attendees ?? []).map((attendee) => ({
attendee_id: attendee.attendee_id,
attendee_role_id: attendee.attendee_role_id,
passed_bookwork: !!attendee.passed_bookwork,
passed_qual: !!attendee.passed_qual,
remarks: attendee.remarks ?? "",
})),
};
}
const { handleSubmit, resetForm, errors, values, setFieldValue } = useForm({
validationSchema: toTypedSchema(trainingReportSchema),
@@ -40,6 +74,53 @@ const { handleSubmit, resetForm, errors, values, setFieldValue } = useForm({
}
})
const hydratedReportId = ref<number | null>(null);
const comboboxRenderEpoch = ref(0);
watch(() => props.report, (report) => {
hydratedReportId.value = null;
if (!report) {
if (props.mode === 'create') {
resetForm();
comboboxRenderEpoch.value++;
}
return;
}
resetForm({
values: toFormValues(report),
});
comboboxRenderEpoch.value++;
}, { immediate: true });
function hydrateEditValuesWhenOptionsReady() {
if (props.mode !== 'edit' || !props.report) {
return;
}
if (!trainings.value || !members.value || !eventRoles.value) {
return;
}
const reportId = Number(props.report.id);
if (!Number.isFinite(reportId)) {
return;
}
if (hydratedReportId.value === reportId) {
return;
}
resetForm({
values: toFormValues(props.report),
});
hydratedReportId.value = reportId;
comboboxRenderEpoch.value++;
}
// watch(errors, (newErrors) => {
// console.log(newErrors)
// }, { deep: true })
@@ -79,9 +160,19 @@ async function onSubmit(vals) {
event_date: new Date(vals.event_date),
}
await postTrainingReport(clean).then((newID) => {
emit("submit", newID);
});
if (props.mode === 'edit') {
const id = Number(props.reportId);
if (!id || Number.isNaN(id)) {
throw new Error('Cannot edit report without a valid reportId');
}
await putTrainingReport(id, clean);
emit("submit", id);
} else {
await postTrainingReport(clean).then((newID) => {
emit("submit", newID);
});
}
} catch (err) {
console.error("There was an error submitting the training report", err);
} finally {
@@ -97,14 +188,18 @@ const trainings = ref<Course[] | 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 getAllLightMembers();
eventRoles.value = await getAllAttendeeRoles();
hydrateEditValuesWhenOptionsReady();
})
watch([trainings, members, eventRoles, () => props.report], () => {
hydrateEditValuesWhenOptionsReady();
});
const selectCourse = ref(false);
const openMap = reactive<Record<string, boolean>>({})
@@ -143,6 +238,7 @@ const filteredMembers = computed(() => {
<Field :data-invalid="!!errors.length">
<FieldLabel class="scroll-m-20 text-lg tracking-tight">Training Course</FieldLabel>
<Combobox :model-value="field.value" @update:open="selectCourse = $event"
:key="`course-${comboboxRenderEpoch}`"
:open="selectCourse" @update:model-value="(v) => {
field.onChange(v);
selectCourse = false
@@ -150,7 +246,7 @@ const filteredMembers = computed(() => {
<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)
const c = trainings?.find(t => Number(t.id) === Number(id))
return c ? c.name : '';
}" />
</ComboboxAnchor>
@@ -249,6 +345,7 @@ const filteredMembers = computed(() => {
<VeeField :name="`attendees[${index}].attendee_id`" v-slot="{ field: f, errors: e }">
<div>
<Combobox :model-value="f.value"
:key="`member-${field.key}-${comboboxRenderEpoch}`"
@update:open="openMap['member-' + field.key] = $event"
:open="openMap['member-' + field.key]" @update:model-value="(v) => {
f.onChange(v);
@@ -258,7 +355,7 @@ const filteredMembers = computed(() => {
<ComboboxInput
@focus="() => { openMap['member-' + field.key] = true; memberSearch = memberMap[f.value] }"
placeholder="Search members..." class="w-full pl-3"
:display-value="(id) => memberMap[id] || ''"
:display-value="(id) => memberMap[String(id)] || ''"
@input="memberSearch = $event.target.value" />
</ComboboxAnchor>
<ComboboxList class="w-full">
@@ -290,6 +387,7 @@ const filteredMembers = computed(() => {
<VeeField :name="`attendees[${index}].attendee_role_id`" v-slot="{ field: f, errors: e }">
<div>
<Combobox :model-value="f.value"
:key="`role-${field.key}-${comboboxRenderEpoch}`"
@update:open="openMap['role-' + field.key] = $event"
:open="openMap['role-' + field.key]" @update:model-value="(v) => {
f.onChange(v);
@@ -298,7 +396,7 @@ const filteredMembers = computed(() => {
<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)
const er = eventRoles?.find(t => Number(t.id) === Number(id))
return er?.name;
}" />
</ComboboxAnchor>
@@ -410,9 +508,9 @@ const filteredMembers = computed(() => {
<Button type="button" variant="outline" @click="resetForm">Reset</Button>
<Button type="submit" form="trainingForm" :disabled="submitting" class="w-35">
<span class="flex items-center gap-2" v-if="submitting">
<Spinner></Spinner> Submitting…
<Spinner></Spinner> {{ props.mode === 'edit' ? 'Saving…' : 'Submitting…' }}
</span>
<span v-else>Submit</span>
<span v-else>{{ props.mode === 'edit' ? 'Save Changes' : 'Submit' }}</span>
</Button>
</div>
</form>

58
ui/src/pages/TrainingReport.vue
View File

@@ -34,16 +34,19 @@ import {
} from '@/components/ui/pagination'
import Tooltip from '@/components/tooltip/Tooltip.vue';
import { CopyLink } from '@/lib/copyLink';
import { useUserStore } from '@/stores/user';
enum sidePanelState { view, create, closed };
enum sidePanelState { view, create, edit, closed };
const trainingReports = ref<CourseEventSummary[] | null>(null);
const loaded = ref(false);
const route = useRoute();
const router = useRouter();
const user = useUserStore();
const sidePanel = computed<sidePanelState>(() => {
if (route.path.endsWith('/edit')) return sidePanelState.edit;
if (route.path.endsWith('/new')) return sidePanelState.create;
if (route.params.id) return sidePanelState.view;
return sidePanelState.closed;
@@ -110,6 +113,17 @@ async function openTrainingReport(id: number) {
router.push(`/trainingReport/${id}`);
}
async function openEditPanel() {
if (!focusedTrainingReport.value) return;
if (isMobile.value) {
mobilePanel.value = sidePanelState.edit;
return;
}
router.push(`/trainingReport/${focusedTrainingReport.value.id}/edit`);
}
function openCreatePanel() {
if (isMobile.value) {
mobilePanel.value = sidePanelState.create;
@@ -132,6 +146,17 @@ async function closePanel() {
await closeTrainingReport();
}
const canEditFocusedReport = computed<boolean>(() => {
const report = focusedTrainingReport.value;
if (!report) return false;
const actorId = user.user?.member?.member_id;
const isAuthor = !!actorId && report.created_by === actorId;
const isAdmin = user.hasRole('17th Administrator');
return isAuthor || isAdmin;
});
const sortMode = ref<string>("descending");
const searchString = ref<string>("");
let debounceTimer: ReturnType<typeof setTimeout> | null = null;
@@ -328,6 +353,9 @@ const expanded = ref<number>(null);
<div class="flex justify-between items-center">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Report Details</p>
<div class="flex items-center gap-2">
<Button v-if="canEditFocusedReport" @click="openEditPanel" class="cursor-pointer" variant="outline" size="sm">
Edit
</Button>
<Button v-if="isMobile" @click="closePanel" class="cursor-pointer" variant="outline" size="sm">
<ChevronLeft class="size-4"></ChevronLeft> Back
</Button>
@@ -705,5 +733,33 @@ const expanded = ref<number>(null);
</TrainingReportForm>
</div>
</div>
<div v-if="focusedTrainingReport != null && effectivePanel == sidePanelState.edit" :class="isMobile ? 'fixed inset-0 z-[60] overflow-y-auto bg-background px-3 py-3' : 'mt-2 w-full max-w-5xl lg:mt-0 lg:w-3/5 lg:border-l lg:pl-7'"
:style="isMobile ? { top: 'var(--app-header-height, 60px)' } : {}">
<div class="flex justify-between items-center my-3">
<div class="flex gap-5 lg:pl-2">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Edit Training Report</p>
</div>
<Button v-if="isMobile" @click="mobilePanel = sidePanelState.view" class="cursor-pointer" variant="outline" size="sm">
<ChevronLeft class="size-4"></ChevronLeft> Back
</Button>
<Button v-else @click="router.push(`/trainingReport/${focusedTrainingReport.id}`)" class="cursor-pointer" variant="ghost" size="icon">
<X class="size-6"></X>
</Button>
</div>
<div :class="isMobile ? 'mt-3 pb-8' : 'overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed'">
<TrainingReportForm class="w-full lg:pl-2" mode="edit" :report-id="focusedTrainingReport.id"
:report="focusedTrainingReport"
@submit="async (id) => {
await loadTrainingReports();
await viewTrainingReport(id);
if (isMobile) {
mobilePanel = sidePanelState.view;
} else {
router.push(`/trainingReport/${id}`);
}
}" />
</div>
</div>
</div>
</template>

1
ui/src/router/index.ts
View File

@@ -26,6 +26,7 @@ const router = createRouter({
{ path: '/trainingReport', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
{ path: '/trainingReport/new', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
{ path: '/trainingReport/:id/edit', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
{ path: '/trainingReport/:id', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
{ path: '/developer', component: () => import('@/pages/DeveloperTools.vue'), meta: { requiresAuth: true, memberOnly: true, roles: ['Dev'] } },