improved attendee remarks rendering
This commit is contained in:
@@ -10,7 +10,7 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { ArrowUpDown, Funnel, Plus, Search, X } from 'lucide-vue-next';
|
||||
import { ArrowUpDown, ChevronDown, ChevronUp, Funnel, 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';
|
||||
@@ -54,6 +54,7 @@ watch(() => route.params.id, async (newID) => {
|
||||
return;
|
||||
}
|
||||
TRLoaded.value = false;
|
||||
expanded.value = null;
|
||||
viewTrainingReport(Number(route.params.id));
|
||||
})
|
||||
|
||||
@@ -127,6 +128,8 @@ function setPage(pagenum: number) {
|
||||
pageNum.value = pagenum;
|
||||
loadTrainingReports();
|
||||
}
|
||||
|
||||
const expanded = ref<number>(null);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -256,90 +259,180 @@ function setPage(pagenum: number) {
|
||||
<!-- Trainers -->
|
||||
<div>
|
||||
<label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainers</label>
|
||||
<div class="grid grid-cols-4 py-2 text-sm font-medium text-muted-foreground border-b">
|
||||
<div
|
||||
class="grid grid-cols-[1fr_1fr_2fr_3rem] py-2 text-sm font-medium text-muted-foreground border-b">
|
||||
<span>Name</span>
|
||||
<span class="">Role</span>
|
||||
<span class="text-right col-span-2">Remarks</span>
|
||||
<span class="text-right">Remarks</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div v-for="person in focusedTrainingTrainers"
|
||||
class="grid grid-cols-4 py-2 items-center border-b last:border-none">
|
||||
<div v-for="person in focusedTrainingTrainers" class=" items-center border-b last:border-none"
|
||||
:class="expanded === person.attendee_id && 'bg-muted/20'">
|
||||
<div class="grid grid-cols-[1fr_1fr_2fr_3rem] items-center py-2">
|
||||
<div>
|
||||
<MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
|
||||
class="justify-self-start"></MemberCard>
|
||||
<p v-else>{{ person.attendee_name }}</p>
|
||||
</div>
|
||||
<p class="">{{ person.role.name }}</p>
|
||||
<p class="col-span-2 text-right px-2"
|
||||
<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>
|
||||
<!-- trainees -->
|
||||
<div>
|
||||
<div class="flex flex-col">
|
||||
<label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainees</label>
|
||||
<div class="grid grid-cols-5 py-2 text-sm font-medium text-muted-foreground border-b">
|
||||
<div
|
||||
class="grid grid-cols-[1fr_5rem_5rem_2fr_3rem] py-2 text-sm font-medium text-muted-foreground border-b px-2">
|
||||
<span>Name</span>
|
||||
<span class="">Bookwork</span>
|
||||
<span class="">Qual</span>
|
||||
<span class="text-right col-span-2">Remarks</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>
|
||||
<div v-for="person in focusedTrainingTrainees"
|
||||
class="grid grid-cols-5 py-2 items-center border-b last:border-none">
|
||||
<div v-for="person in focusedTrainingTrainees" class="border-b last:border-none"
|
||||
:class="expanded === person.attendee_id && 'bg-muted/20'">
|
||||
<div class="grid grid-cols-[1fr_5rem_5rem_2fr_3rem] py-2 items-center mx-2">
|
||||
<div>
|
||||
<MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
|
||||
class="justify-self-start"></MemberCard>
|
||||
<p v-else>{{ person.attendee_name }}</p>
|
||||
</div>
|
||||
<Tooltip :open="!focusedTrainingReport.course.hasBookwork"
|
||||
<Tooltip :open="!focusedTrainingReport.course.hasBookwork" class="mx-auto"
|
||||
message="This course does not have bookwork">
|
||||
<Checkbox :disabled="!focusedTrainingReport.course.hasBookwork"
|
||||
:model-value="person.passed_bookwork" class="pointer-events-none ml-5">
|
||||
:model-value="person.passed_bookwork" class="pointer-events-none">
|
||||
</Checkbox>
|
||||
</Tooltip>
|
||||
<Tooltip :open="!focusedTrainingReport.course.hasQual"
|
||||
<Tooltip :open="!focusedTrainingReport.course.hasQual" class="mx-auto"
|
||||
message="This course does not have a qualification">
|
||||
<Checkbox :disabled="!focusedTrainingReport.course.hasQual"
|
||||
:model-value="person.passed_qual" class="pointer-events-none ml-1">
|
||||
</Checkbox>
|
||||
</Tooltip>
|
||||
|
||||
<p class="col-span-2 text-right px-2"
|
||||
<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>
|
||||
<!-- 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="grid grid-cols-5 py-2 text-sm font-medium text-muted-foreground border-b">
|
||||
<label class="scroll-m-20 text-xl font-semibold tracking-tight">
|
||||
No Shows
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-[1fr_5rem_5rem_2fr_3rem] py-2 text-sm font-medium text-muted-foreground border-b">
|
||||
<span>Name</span>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<span class="text-right col-span-2">Remarks</span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="text-right">Remarks</span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="person in focusedNoShows"
|
||||
class="grid grid-cols-5 py-2 items-center border-b last:border-none">
|
||||
|
||||
<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'">
|
||||
<!-- Row -->
|
||||
<div class="grid grid-cols-[1fr_5rem_5rem_2fr_3rem] py-2 items-center">
|
||||
<!-- Name -->
|
||||
<div>
|
||||
<MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
|
||||
class="justify-self-start"></MemberCard>
|
||||
<MemberCard v-if="person.attendee_id" :member-id="person.attendee_id" />
|
||||
<p v-else>{{ person.attendee_name }}</p>
|
||||
</div>
|
||||
|
||||
<div></div>
|
||||
<div></div>
|
||||
<p class="col-span-2 text-right px-2"
|
||||
:class="person.remarks == '' ? 'text-muted-foreground' : ''">
|
||||
{{ person.remarks == "" ?
|
||||
'--'
|
||||
: person.remarks }}</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>
|
||||
<label class="scroll-m-20 text-xl font-semibold tracking-tight">Remarks</label>
|
||||
@@ -370,33 +463,3 @@ function setPage(pagenum: number) {
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Firefox */
|
||||
.scrollbar-themed {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #555 #1f1f1f;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
/* Chrome, Edge, Safari */
|
||||
.scrollbar-themed::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
/* slightly wider to allow padding look */
|
||||
}
|
||||
|
||||
.scrollbar-themed::-webkit-scrollbar-track {
|
||||
background: #1f1f1f;
|
||||
margin-left: 6px;
|
||||
/* ❗ adds space between content + scrollbar */
|
||||
}
|
||||
|
||||
.scrollbar-themed::-webkit-scrollbar-thumb {
|
||||
background: #555;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.scrollbar-themed::-webkit-scrollbar-thumb:hover {
|
||||
background: #777;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user