710 lines
40 KiB
Vue
710 lines
40 KiB
Vue
<script setup lang="ts">
|
|
import { getTrainingReport, getTrainingReports } from '@/api/trainingReport';
|
|
import { CourseAttendee, CourseEventDetails, CourseEventSummary } from '@shared/types/course';
|
|
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table'
|
|
import { ArrowUpDown, ChevronDown, ChevronLeft, ChevronUp, Funnel, Link, Plus, Search, X } from 'lucide-vue-next';
|
|
import Button from '@/components/ui/button/Button.vue';
|
|
import TrainingReportForm from '@/components/trainingReport/trainingReportForm.vue';
|
|
import Checkbox from '@/components/ui/checkbox/Checkbox.vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import Select from '@/components/ui/select/Select.vue';
|
|
import SelectTrigger from '@/components/ui/select/SelectTrigger.vue';
|
|
import SelectValue from '@/components/ui/select/SelectValue.vue';
|
|
import SelectContent from '@/components/ui/select/SelectContent.vue';
|
|
import SelectItem from '@/components/ui/select/SelectItem.vue';
|
|
import Input from '@/components/ui/input/Input.vue';
|
|
import MemberCard from '@/components/members/MemberCard.vue';
|
|
import Spinner from '@/components/ui/spinner/Spinner.vue';
|
|
import { pagination } from '@shared/types/pagination';
|
|
import {
|
|
Pagination,
|
|
PaginationContent,
|
|
PaginationEllipsis,
|
|
PaginationItem,
|
|
PaginationNext,
|
|
PaginationPrevious,
|
|
} from '@/components/ui/pagination'
|
|
import Tooltip from '@/components/tooltip/Tooltip.vue';
|
|
import { CopyLink } from '@/lib/copyLink';
|
|
|
|
enum sidePanelState { view, create, closed };
|
|
|
|
const trainingReports = ref<CourseEventSummary[] | null>(null);
|
|
const loaded = ref(false);
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const sidePanel = computed<sidePanelState>(() => {
|
|
if (route.path.endsWith('/new')) return sidePanelState.create;
|
|
if (route.params.id) return sidePanelState.view;
|
|
return sidePanelState.closed;
|
|
})
|
|
|
|
const isMobile = ref(false);
|
|
const mobilePanel = ref<sidePanelState>(sidePanelState.closed);
|
|
let mobileMediaQuery: MediaQueryList | null = null;
|
|
|
|
function syncMobileMode() {
|
|
isMobile.value = mobileMediaQuery?.matches ?? window.innerWidth < 1024;
|
|
if (!isMobile.value) {
|
|
mobilePanel.value = sidePanelState.closed;
|
|
}
|
|
}
|
|
|
|
const effectivePanel = computed<sidePanelState>(() => {
|
|
return isMobile.value ? mobilePanel.value : sidePanel.value;
|
|
})
|
|
|
|
watch(() => route.params.id, async (newID) => {
|
|
if (!newID) {
|
|
focusedTrainingReport.value = null;
|
|
return;
|
|
}
|
|
TRLoaded.value = false;
|
|
expanded.value = null;
|
|
viewTrainingReport(Number(route.params.id));
|
|
})
|
|
|
|
const focusedTrainingReport = ref<CourseEventDetails | null>(null);
|
|
const focusedTrainingTrainees = computed<CourseAttendee[] | null>(() => {
|
|
if (focusedTrainingReport.value == null) return null;
|
|
return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'Trainee');
|
|
})
|
|
const focusedNoShows = computed<CourseAttendee[] | null>(() => {
|
|
if (focusedTrainingReport.value == null) return null;
|
|
return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'No-Show');
|
|
})
|
|
const focusedTrainingTrainers = computed<CourseAttendee[] | null>(() => {
|
|
if (focusedTrainingReport.value == null) return null;
|
|
return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name != 'Trainee' && attendee.role.name != 'No-Show');
|
|
})
|
|
async function viewTrainingReport(id: number) {
|
|
focusedTrainingReport.value = await getTrainingReport(id);
|
|
TRLoaded.value = true;
|
|
}
|
|
|
|
async function closeTrainingReport() {
|
|
router.push(`/trainingReport`)
|
|
focusedTrainingReport.value = null;
|
|
}
|
|
|
|
async function openTrainingReport(id: number) {
|
|
if (isMobile.value) {
|
|
focusedTrainingReport.value = null;
|
|
TRLoaded.value = false;
|
|
expanded.value = null;
|
|
mobilePanel.value = sidePanelState.view;
|
|
await viewTrainingReport(id);
|
|
return;
|
|
}
|
|
|
|
router.push(`/trainingReport/${id}`);
|
|
}
|
|
|
|
function openCreatePanel() {
|
|
if (isMobile.value) {
|
|
mobilePanel.value = sidePanelState.create;
|
|
focusedTrainingReport.value = null;
|
|
return;
|
|
}
|
|
|
|
router.push('/trainingReport/new');
|
|
}
|
|
|
|
async function closePanel() {
|
|
if (isMobile.value) {
|
|
mobilePanel.value = sidePanelState.closed;
|
|
focusedTrainingReport.value = null;
|
|
TRLoaded.value = false;
|
|
expanded.value = null;
|
|
return;
|
|
}
|
|
|
|
await closeTrainingReport();
|
|
}
|
|
|
|
const sortMode = ref<string>("descending");
|
|
const searchString = ref<string>("");
|
|
let debounceTimer: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
watch(searchString, (newValue) => {
|
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
|
|
debounceTimer = setTimeout(() => {
|
|
loadTrainingReports();
|
|
}, 300); // 300ms debounce
|
|
});
|
|
|
|
watch(() => sortMode.value, async (newSortMode) => {
|
|
loadTrainingReports();
|
|
})
|
|
|
|
async function loadTrainingReports() {
|
|
let data = await getTrainingReports(sortMode.value, searchString.value, pageNum.value, pageSize.value);
|
|
trainingReports.value = data.data;
|
|
pageData.value = data.pagination;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
mobileMediaQuery = window.matchMedia('(max-width: 1023px)');
|
|
syncMobileMode();
|
|
mobileMediaQuery.addEventListener('change', syncMobileMode);
|
|
|
|
await loadTrainingReports();
|
|
if (route.params.id)
|
|
viewTrainingReport(Number(route.params.id))
|
|
loaded.value = true;
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
mobileMediaQuery?.removeEventListener('change', syncMobileMode);
|
|
})
|
|
|
|
const TRLoaded = ref(false);
|
|
|
|
const pageNum = ref<number>(1);
|
|
const pageData = ref<pagination>();
|
|
|
|
const pageSize = ref<number>(15)
|
|
const pageSizeOptions = [10, 15, 30]
|
|
|
|
function formatDate(date: Date | string): string {
|
|
if (!date) return '';
|
|
const dateObj = typeof date === 'string' ? new Date(date) : date;
|
|
return dateObj.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
});
|
|
}
|
|
|
|
function setPageSize(size: number) {
|
|
pageSize.value = size
|
|
pageNum.value = 1;
|
|
loadTrainingReports();
|
|
}
|
|
|
|
function setPage(pagenum: number) {
|
|
pageNum.value = pagenum;
|
|
loadTrainingReports();
|
|
}
|
|
|
|
const expanded = ref<number>(null);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mx-auto mt-5 flex w-full max-w-[100rem] flex-col px-3 sm:px-4 lg:flex-row lg:px-8 xl:px-20">
|
|
<!-- training report list -->
|
|
<div v-show="!isMobile || effectivePanel === sidePanelState.closed" class="my-3 px-0 lg:px-4"
|
|
:class="effectivePanel == sidePanelState.closed ? 'w-full' : 'w-full lg:flex-[0_0_26rem] xl:flex-[0_0_30rem]'">
|
|
<div class="flex justify-between mb-4">
|
|
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
|
|
<Button @click="openCreatePanel()">
|
|
<Plus></Plus> New Training Report
|
|
</Button>
|
|
</div>
|
|
<!-- search/filter -->
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
|
<!-- <Search></Search>
|
|
<Funnel></Funnel> -->
|
|
<div></div>
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:gap-5">
|
|
<div>
|
|
<label class="text-muted-foreground">Search</label>
|
|
<Input v-model="searchString" placeholder="Search..."></Input>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<label class="text-muted-foreground">Sort By</label>
|
|
<Select v-model="sortMode">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Sort By" />
|
|
<!-- <ArrowUpDown></ArrowUpDown> -->
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="ascending">
|
|
Date (Ascending)
|
|
</SelectItem>
|
|
<SelectItem value="descending">
|
|
Date (Descending)
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-5">
|
|
<div class="space-y-2 md:hidden">
|
|
<button v-for="report in trainingReports" :key="`mobile-report-${report.event_id}`"
|
|
class="w-full rounded-lg border bg-card px-3 py-2 text-left transition-colors hover:bg-muted/40"
|
|
@click="openTrainingReport(report.event_id)">
|
|
<p class="font-semibold text-foreground">
|
|
{{ report.course_name.length > 35 ? report.course_shortname : report.course_name }}
|
|
</p>
|
|
<p class="mt-1 text-sm text-muted-foreground">{{ formatDate(report.date) }}</p>
|
|
<div class="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
|
|
<span class="font-medium">Posted by:</span>
|
|
<MemberCard v-if="report.created_by" :member-id="report.created_by"></MemberCard>
|
|
<span v-else>Unknown User</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="hidden md:block">
|
|
<Table>
|
|
<TableHeader class="">
|
|
<TableRow>
|
|
<TableHead class="w-[100px]">
|
|
Training
|
|
</TableHead>
|
|
<TableHead>Date</TableHead>
|
|
<TableHead class="text-right">
|
|
Posted By
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody v-if="loaded">
|
|
<TableRow class="cursor-pointer" v-for="report in trainingReports" :key="report.event_id"
|
|
@click="openTrainingReport(report.event_id)">
|
|
<TableCell class="font-medium">{{ report.course_name.length > 30 ? report.course_shortname :
|
|
report.course_name }}</TableCell>
|
|
<TableCell>{{ report.date.split('T')[0] }}</TableCell>
|
|
<TableCell class="text-right">
|
|
<MemberCard v-if="report.created_by" :member-id="report.created_by"></MemberCard>
|
|
<span v-else>Unknown User</span>
|
|
</TableCell>
|
|
<!-- <TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" :
|
|
report.created_by_name
|
|
}}</TableCell> -->
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
<div class="mt-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between"
|
|
:class="effectivePanel !== sidePanelState.closed ? 'items-center' : ''">
|
|
<div class="hidden md:block"></div>
|
|
<Pagination v-slot="{ page }" :items-per-page="pageData?.pageSize || 10" :total="pageData?.total || 10"
|
|
:default-page="2" :page="pageNum" @update:page="setPage">
|
|
<PaginationContent v-slot="{ items }">
|
|
<PaginationPrevious />
|
|
<template v-for="(item, index) in items" :key="index">
|
|
<PaginationItem v-if="item.type === 'page'" :value="item.value"
|
|
:is-active="item.value === page">
|
|
{{ item.value }}
|
|
</PaginationItem>
|
|
</template>
|
|
<PaginationEllipsis :index="4" />
|
|
<PaginationNext />
|
|
</PaginationContent>
|
|
</Pagination>
|
|
<div class="flex flex-wrap items-center justify-end gap-2 text-sm"
|
|
:class="effectivePanel !== sidePanelState.closed ? 'w-full justify-center md:w-auto md:justify-end' : ''">
|
|
<p class="text-muted-foreground">Per page:</p>
|
|
|
|
<button v-for="size in pageSizeOptions" :key="size" @click="setPageSize(size)"
|
|
class="px-2 py-1 rounded transition-colors" :class="{
|
|
'bg-muted font-semibold': pageSize === size,
|
|
'hover:bg-muted/50': pageSize !== size
|
|
}">
|
|
{{ size }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- view training report section -->
|
|
<div v-if="focusedTrainingReport != null && effectivePanel == sidePanelState.view"
|
|
:class="isMobile ? 'fixed inset-0 z-[60] overflow-y-auto px-3 py-3' : 'my-3 mt-2 w-full min-w-0 lg:mt-0 lg:flex-1 lg:border-l lg:pl-9'"
|
|
:style="isMobile ? { top: 'var(--app-header-height, 60px)' } : {}">
|
|
<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="isMobile" @click="closePanel" class="cursor-pointer" variant="outline" size="sm">
|
|
<ChevronLeft class="size-4"></ChevronLeft> Back
|
|
</Button>
|
|
<Button v-else class="cursor-pointer" variant="ghost" size="icon" @click="CopyLink()">
|
|
<Link class="size-4" />
|
|
</Button>
|
|
<Button v-if="!isMobile" @click="closePanel" class="cursor-pointer" variant="ghost" size="icon">
|
|
<X class="size-6"></X>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div v-if="TRLoaded" :class="isMobile ? 'my-3 pb-8' : 'my-5 max-h-[70vh] overflow-y-auto overflow-x-hidden scrollbar-themed'">
|
|
<div class="flex flex-col mb-5 border rounded-lg bg-muted/70 p-2 py-3 px-4">
|
|
<p class="scroll-m-20 text-xl font-semibold tracking-tight">{{ focusedTrainingReport.course_name }}
|
|
</p>
|
|
<div class="mt-2 flex flex-col gap-2 text-sm sm:flex-row sm:items-center sm:gap-10">
|
|
<p class="text-muted-foreground">{{ formatDate(focusedTrainingReport.event_date) }}</p>
|
|
<div class="flex gap-2 items-center">Created by:
|
|
<MemberCard v-if="focusedTrainingReport.created_by"
|
|
:member-id="focusedTrainingReport.created_by" />
|
|
<span v-else>Unknown User</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-8 ">
|
|
<!-- Trainers -->
|
|
<div>
|
|
<label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainers</label>
|
|
<div class="mt-3 space-y-2 md:hidden">
|
|
<article v-for="person in focusedTrainingTrainers" :key="person.attendee_id ?? person.attendee_name"
|
|
class="rounded-xl border bg-card p-3 shadow-sm" :class="expanded === person.attendee_id && 'ring-1 ring-primary/30'">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div class="min-w-0">
|
|
<MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
|
|
class="max-w-full whitespace-nowrap overflow-hidden text-ellipsis"></MemberCard>
|
|
<p v-else class="font-medium whitespace-nowrap overflow-hidden text-ellipsis">{{ person.attendee_name }}</p>
|
|
</div>
|
|
<Button @click.stop="expanded === person.attendee_id ? expanded = null : expanded = person.attendee_id"
|
|
variant="ghost" size="icon" class="shrink-0">
|
|
<ChevronDown v-if="expanded !== person.attendee_id" class="size-5" />
|
|
<ChevronUp v-else class="size-5" />
|
|
</Button>
|
|
</div>
|
|
<div class="mt-3 grid grid-cols-1 gap-2 text-xs">
|
|
<div class="rounded-lg bg-muted px-3 py-2">
|
|
<p class="text-muted-foreground">Role</p>
|
|
<p class="font-medium text-foreground">{{ person.role.name }}</p>
|
|
</div>
|
|
<div class="rounded-lg bg-muted px-3 py-2">
|
|
<p class="text-muted-foreground">Remarks</p>
|
|
<p class="font-medium text-foreground truncate">{{ person.remarks || '--' }}</p>
|
|
</div>
|
|
</div>
|
|
<div v-if="expanded === person.attendee_id" class="mt-3 rounded-lg border bg-background px-3 py-2">
|
|
<p class="text-sm font-medium text-foreground">Full Remarks</p>
|
|
<p v-if="person.remarks"
|
|
class="mt-1 text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap max-h-72 overflow-y-auto">
|
|
{{ person.remarks }}
|
|
</p>
|
|
<p v-else class="mt-1 text-sm text-muted-foreground italic">
|
|
None provided
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="mt-2 hidden md:block">
|
|
<div
|
|
class="grid grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)_minmax(0,1.4fr)_2.5rem] py-2 text-sm font-medium text-muted-foreground border-b gap-x-2">
|
|
<span>Name</span>
|
|
<span>Role</span>
|
|
<span class="text-right">Remarks</span>
|
|
<span></span>
|
|
</div>
|
|
<div v-for="person in focusedTrainingTrainers" :key="person.attendee_id ?? person.attendee_name"
|
|
class="items-center border-b last:border-none"
|
|
:class="expanded === person.attendee_id && 'bg-muted/20'">
|
|
<div class="grid grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)_minmax(0,1.4fr)_2.5rem] items-center py-2 gap-x-2">
|
|
<div class="min-w-0">
|
|
<MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
|
|
class="justify-self-start max-w-full whitespace-nowrap overflow-hidden text-ellipsis"></MemberCard>
|
|
<p v-else class="whitespace-nowrap overflow-hidden text-ellipsis">{{ person.attendee_name }}</p>
|
|
</div>
|
|
<p class="truncate">{{ person.role.name }}</p>
|
|
<p class="text-right px-2 truncate"
|
|
:class="person.remarks == '' ? 'text-muted-foreground' : ''">
|
|
{{ person.remarks == "" ?
|
|
'--'
|
|
: person.remarks }}</p>
|
|
<div class="w-min mx-auto">
|
|
<Button v-if="expanded === person.attendee_id" @click.stop="expanded = null"
|
|
variant="ghost" size="icon">
|
|
<ChevronUp class="size-6" />
|
|
</Button>
|
|
<Button v-else @click.stop="expanded = person.attendee_id" variant="ghost"
|
|
size="icon">
|
|
<ChevronDown class="size-6" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-full" v-if="expanded === person.attendee_id">
|
|
<div class="px-6 pb-5 pt-2 space-y-2">
|
|
<p class="text-sm font-medium text-foreground">
|
|
Remarks
|
|
</p>
|
|
<p v-if="person.remarks"
|
|
class="text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap max-h-72 overflow-y-auto">
|
|
{{ person.remarks }}
|
|
</p>
|
|
<p v-else class="text-sm text-muted-foreground italic">
|
|
None provided
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- trainees -->
|
|
<div>
|
|
<div class="flex flex-col">
|
|
<label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainees</label>
|
|
<div class="mt-3 space-y-2 md:hidden">
|
|
<article v-for="person in focusedTrainingTrainees" :key="person.attendee_id ?? person.attendee_name"
|
|
class="rounded-xl border bg-card p-3 shadow-sm" :class="expanded === person.attendee_id && 'ring-1 ring-primary/30'">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div class="min-w-0">
|
|
<MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
|
|
class="max-w-full whitespace-nowrap overflow-hidden text-ellipsis"></MemberCard>
|
|
<p v-else class="font-medium whitespace-nowrap overflow-hidden text-ellipsis">{{ person.attendee_name }}</p>
|
|
</div>
|
|
<Button @click.stop="expanded === person.attendee_id ? expanded = null : expanded = person.attendee_id"
|
|
variant="ghost" size="icon" class="shrink-0">
|
|
<ChevronDown v-if="expanded !== person.attendee_id" class="size-5" />
|
|
<ChevronUp v-else class="size-5" />
|
|
</Button>
|
|
</div>
|
|
<div class="mt-3 grid grid-cols-2 gap-2 text-xs">
|
|
<div class="rounded-lg bg-muted px-3 py-2 text-center">
|
|
<p class="text-muted-foreground">Bookwork</p>
|
|
<p class="font-semibold text-foreground">{{ !focusedTrainingReport.course.hasBookwork ? 'N/A' : (person.passed_bookwork ? 'Pass' : 'Fail') }}</p>
|
|
</div>
|
|
<div class="rounded-lg bg-muted px-3 py-2 text-center">
|
|
<p class="text-muted-foreground">Qual</p>
|
|
<p class="font-semibold text-foreground">{{ !focusedTrainingReport.course.hasQual ? 'N/A' : (person.passed_qual ? 'Pass' : 'Fail') }}</p>
|
|
</div>
|
|
<div class="col-span-2 rounded-lg bg-muted px-3 py-2">
|
|
<p class="text-muted-foreground">Remarks</p>
|
|
<p class="font-medium text-foreground truncate">{{ person.remarks || '--' }}</p>
|
|
</div>
|
|
</div>
|
|
<div v-if="expanded === person.attendee_id" class="mt-3 rounded-lg border bg-background px-3 py-2">
|
|
<p class="text-sm font-medium text-foreground">Full Remarks</p>
|
|
<p v-if="person.remarks"
|
|
class="mt-1 text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap max-h-72 overflow-y-auto">
|
|
{{ person.remarks }}
|
|
</p>
|
|
<p v-else class="mt-1 text-sm text-muted-foreground italic">
|
|
None provided
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="hidden md:block">
|
|
<div
|
|
class="grid grid-cols-[minmax(0,1.6fr)_4.25rem_4.25rem_minmax(0,1.4fr)_2.5rem] py-2 text-sm font-medium text-muted-foreground border-b px-2 gap-x-2">
|
|
<span>Name</span>
|
|
<span class="text-center">Bookwork</span>
|
|
<span class="text-center">Qual</span>
|
|
<span class="text-right">Remarks</span>
|
|
<span class="w-15"></span>
|
|
</div>
|
|
<div v-for="person in focusedTrainingTrainees" :key="person.attendee_id ?? person.attendee_name" class="border-b last:border-none"
|
|
:class="expanded === person.attendee_id && 'bg-muted/20'">
|
|
<div class="grid grid-cols-[minmax(0,1.6fr)_4.25rem_4.25rem_minmax(0,1.4fr)_2.5rem] py-2 items-center px-2 gap-x-2">
|
|
<div class="min-w-0">
|
|
<MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
|
|
class="justify-self-start max-w-full whitespace-nowrap overflow-hidden text-ellipsis"></MemberCard>
|
|
<p v-else class="whitespace-nowrap overflow-hidden text-ellipsis">{{ person.attendee_name }}</p>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<Tooltip :open="!focusedTrainingReport.course.hasBookwork"
|
|
message="This course does not have bookwork">
|
|
<Checkbox :disabled="!focusedTrainingReport.course.hasBookwork"
|
|
:model-value="person.passed_bookwork" class="pointer-events-none">
|
|
</Checkbox>
|
|
</Tooltip>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<Tooltip :open="!focusedTrainingReport.course.hasQual"
|
|
message="This course does not have a qualification">
|
|
<Checkbox :disabled="!focusedTrainingReport.course.hasQual"
|
|
:model-value="person.passed_qual" class="pointer-events-none">
|
|
</Checkbox>
|
|
</Tooltip>
|
|
</div>
|
|
<p class="text-right truncate"
|
|
:class="person.remarks == '' ? 'text-muted-foreground' : ''">
|
|
{{ person.remarks == "" ?
|
|
'--'
|
|
: person.remarks }}</p>
|
|
<div class="w-min mx-auto">
|
|
<Button v-if="expanded === person.attendee_id" @click.stop="expanded = null"
|
|
variant="ghost" size="icon">
|
|
<ChevronUp class="size-6" />
|
|
</Button>
|
|
<Button v-else @click.stop="expanded = person.attendee_id" variant="ghost"
|
|
size="icon">
|
|
<ChevronDown class="size-6" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-full" v-if="expanded === person.attendee_id">
|
|
<div class="px-6 pb-5 pt-2 space-y-2">
|
|
<p class="text-sm font-medium text-foreground">
|
|
Remarks
|
|
</p>
|
|
<p v-if="person.remarks"
|
|
class="text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap max-h-72 overflow-y-auto">
|
|
{{ person.remarks }}
|
|
</p>
|
|
<p v-else class="text-sm text-muted-foreground italic">
|
|
None provided
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- No Shows -->
|
|
<div v-if="focusedNoShows.length != 0">
|
|
<div class="flex flex-col">
|
|
<label class="scroll-m-20 text-xl font-semibold tracking-tight">
|
|
No Shows
|
|
</label>
|
|
|
|
<div class="mt-3 space-y-2 md:hidden">
|
|
<article v-for="person in focusedNoShows" :key="person.attendee_id ?? person.attendee_name"
|
|
class="rounded-xl border bg-card p-3 shadow-sm" :class="expanded === person.attendee_id && 'ring-1 ring-primary/30'">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div class="min-w-0">
|
|
<MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
|
|
class="max-w-full whitespace-nowrap overflow-hidden text-ellipsis" />
|
|
<p v-else class="font-medium whitespace-nowrap overflow-hidden text-ellipsis">{{ person.attendee_name }}</p>
|
|
</div>
|
|
<Button variant="ghost" size="icon" class="shrink-0" @click.stop="expanded === person.attendee_id
|
|
? expanded = null
|
|
: expanded = person.attendee_id">
|
|
<ChevronDown v-if="expanded !== person.attendee_id" class="size-5" />
|
|
<ChevronUp v-else class="size-5" />
|
|
</Button>
|
|
</div>
|
|
<div class="mt-3 grid grid-cols-2 gap-2 text-xs">
|
|
<div class="rounded-lg bg-muted px-3 py-2 text-center">
|
|
<p class="text-muted-foreground">Bookwork</p>
|
|
<p class="font-semibold text-foreground">N/A</p>
|
|
</div>
|
|
<div class="rounded-lg bg-muted px-3 py-2 text-center">
|
|
<p class="text-muted-foreground">Qual</p>
|
|
<p class="font-semibold text-foreground">N/A</p>
|
|
</div>
|
|
<div class="col-span-2 rounded-lg bg-muted px-3 py-2">
|
|
<p class="text-muted-foreground">Remarks</p>
|
|
<p class="font-medium text-foreground truncate">{{ person.remarks || '--' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="expanded === person.attendee_id" class="mt-3 rounded-lg border bg-background px-3 py-2">
|
|
<p class="text-sm font-medium text-foreground">
|
|
Full Remarks
|
|
</p>
|
|
|
|
<p v-if="person.remarks"
|
|
class="mt-1 text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap max-h-72 overflow-y-auto">
|
|
{{ person.remarks }}
|
|
</p>
|
|
|
|
<p v-else class="mt-1 text-sm text-muted-foreground italic">
|
|
None provided
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="hidden md:block">
|
|
<div
|
|
class="grid grid-cols-[minmax(0,1.6fr)_4.25rem_4.25rem_minmax(0,1.4fr)_2.5rem] py-2 text-sm font-medium text-muted-foreground border-b gap-x-2">
|
|
<span>Name</span>
|
|
<span class="text-center">Bookwork</span>
|
|
<span class="text-center">Qual</span>
|
|
<span class="text-right">Remarks</span>
|
|
<span></span>
|
|
</div>
|
|
|
|
<div v-for="person in focusedNoShows" :key="person.attendee_id ?? person.attendee_name"
|
|
class="border-b last:border-none transition-colors"
|
|
:class="expanded === person.attendee_id && 'bg-muted/20'">
|
|
<div class="grid grid-cols-[minmax(0,1.6fr)_4.25rem_4.25rem_minmax(0,1.4fr)_2.5rem] py-2 items-center gap-x-2">
|
|
<div class="min-w-0">
|
|
<MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
|
|
class="max-w-full whitespace-nowrap overflow-hidden text-ellipsis" />
|
|
<p v-else class="whitespace-nowrap overflow-hidden text-ellipsis">{{ person.attendee_name }}</p>
|
|
</div>
|
|
|
|
<p class="text-center text-muted-foreground">-</p>
|
|
<p class="text-center text-muted-foreground">-</p>
|
|
|
|
<p class="text-right px-2 truncate" :class="!person.remarks && 'text-muted-foreground'">
|
|
{{ person.remarks || '--' }}
|
|
</p>
|
|
|
|
<Button variant="ghost" size="icon" @click.stop="expanded === person.attendee_id
|
|
? expanded = null
|
|
: expanded = person.attendee_id">
|
|
<ChevronDown v-if="expanded !== person.attendee_id" class="size-5" />
|
|
<ChevronUp v-else class="size-5" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div v-if="expanded === person.attendee_id" class="col-span-full">
|
|
<div class="px-6 py-4 space-y-2">
|
|
<p class="text-sm font-medium text-foreground">
|
|
Remarks
|
|
</p>
|
|
|
|
<p v-if="person.remarks"
|
|
class="text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap max-h-72 overflow-y-auto">
|
|
{{ person.remarks }}
|
|
</p>
|
|
|
|
<p v-else class="text-sm text-muted-foreground italic">
|
|
None provided
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="scroll-m-20 text-xl font-semibold tracking-tight">Remarks</label>
|
|
<p class="border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2"
|
|
:class="focusedTrainingReport.remarks == '' ? 'text-muted-foreground' : ''"> {{
|
|
focusedTrainingReport.remarks == "" ? 'None' : focusedTrainingReport.remarks }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="flex w-full items-center justify-center h-[80%]">
|
|
<Spinner class="size-8"></Spinner>
|
|
</div>
|
|
</div>
|
|
<div v-if="effectivePanel == sidePanelState.create" :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">New Training Report</p>
|
|
</div>
|
|
<Button v-if="isMobile" @click="closePanel" class="cursor-pointer" variant="outline" size="sm">
|
|
<ChevronLeft class="size-4"></ChevronLeft> Back
|
|
</Button>
|
|
<Button v-else @click="closePanel" 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"
|
|
@submit="async (newID) => {
|
|
if (isMobile) {
|
|
await viewTrainingReport(newID);
|
|
mobilePanel = sidePanelState.view;
|
|
} else {
|
|
router.push(`/trainingReport/${newID}`);
|
|
}
|
|
loadTrainingReports()
|
|
}">
|
|
</TrainingReportForm>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|