314 lines
14 KiB
Vue
314 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import { getTrainingReport, getTrainingReports } from '@/api/trainingReport';
|
|
import { CourseAttendee, CourseEventDetails, CourseEventSummary } from '@shared/types/course';
|
|
import { computed, onMounted, ref, watch } from 'vue';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table'
|
|
import { ArrowUpDown, 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';
|
|
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';
|
|
|
|
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;
|
|
})
|
|
|
|
watch(() => route.params.id, async (newID) => {
|
|
if (!newID) {
|
|
focusedTrainingReport.value = null;
|
|
return;
|
|
}
|
|
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);
|
|
}
|
|
|
|
async function closeTrainingReport() {
|
|
router.push(`/trainingReport`)
|
|
focusedTrainingReport.value = null;
|
|
}
|
|
|
|
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() {
|
|
trainingReports.value = await getTrainingReports(sortMode.value, searchString.value);
|
|
}
|
|
|
|
onMounted(async () => {
|
|
loadTrainingReports();
|
|
if (route.params.id)
|
|
viewTrainingReport(Number(route.params.id))
|
|
loaded.value = true;
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="px-20 mx-auto max-w-[100rem] w-full flex mt-5">
|
|
<!-- training report list -->
|
|
<div class="px-4 my-3" :class="sidePanel == sidePanelState.closed ? 'w-full' : 'w-2/5'">
|
|
<div class="flex justify-between mb-4">
|
|
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
|
|
<Button @click="router.push('/trainingReport/new')">
|
|
<Plus></Plus> New Training Report
|
|
</Button>
|
|
</div>
|
|
<!-- search/filter -->
|
|
<div class="flex justify-between">
|
|
<!-- <Search></Search>
|
|
<Funnel></Funnel> -->
|
|
<div></div>
|
|
<div class="flex flex-row gap-5">
|
|
<div>
|
|
<label class="text-muted-foreground">Search</label>
|
|
<Input v-model="searchString"></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="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
|
|
<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="router.push(`/trainingReport/${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">{{ report.created_by_name === null ? "Unknown User" :
|
|
report.created_by_name
|
|
}}</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
<!-- view training report section -->
|
|
<div v-if="focusedTrainingReport != null && sidePanel == sidePanelState.view" class="pl-9 my-3 border-l w-3/5">
|
|
<div class="flex justify-between">
|
|
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Report Details</p>
|
|
<button @click="closeTrainingReport" class="cursor-pointer">
|
|
<X></X>
|
|
</button>
|
|
</div>
|
|
<div class="max-h-[70vh] overflow-auto scrollbar-themed my-5">
|
|
<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="flex gap-10">
|
|
<p class="text-muted-foreground">{{ focusedTrainingReport.event_date.split('T')[0] }}</p>
|
|
<p class="">Created by {{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
|
|
focusedTrainingReport.created_by_name
|
|
}}
|
|
</p>
|
|
</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="grid grid-cols-4 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>
|
|
</div>
|
|
<div v-for="person in focusedTrainingTrainers"
|
|
class="grid grid-cols-4 py-2 items-center border-b last:border-none">
|
|
<p>{{ person.attendee_name }}</p>
|
|
<p class="">{{ person.role.name }}</p>
|
|
<p class="col-span-2 text-right px-2"
|
|
:class="person.remarks == '' ? 'text-muted-foreground' : ''">
|
|
{{ person.remarks == "" ?
|
|
'--'
|
|
: person.remarks }}</p>
|
|
</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">
|
|
<span>Name</span>
|
|
<span class="">Bookwork</span>
|
|
<span class="">Qual</span>
|
|
<span class="text-right col-span-2">Remarks</span>
|
|
</div>
|
|
</div>
|
|
<div v-for="person in focusedTrainingTrainees"
|
|
class="grid grid-cols-5 py-2 items-center border-b last:border-none">
|
|
<p>{{ person.attendee_name }}</p>
|
|
<Checkbox :disabled="!focusedTrainingReport.course.hasQual"
|
|
:model-value="person.passed_bookwork" class="pointer-events-none ml-5">
|
|
</Checkbox>
|
|
<Checkbox :disabled="!focusedTrainingReport.course.hasQual"
|
|
:model-value="person.passed_qual" class="pointer-events-none ml-1">
|
|
</Checkbox>
|
|
<p class="col-span-2 text-right px-2"
|
|
:class="person.remarks == '' ? 'text-muted-foreground' : ''">
|
|
{{ person.remarks == "" ?
|
|
'--'
|
|
: person.remarks }}</p>
|
|
</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">
|
|
<span>Name</span>
|
|
<!-- <span class="">Role</span>
|
|
<span class="">Role</span> -->
|
|
<div></div>
|
|
<div></div>
|
|
<span class="text-right col-span-2">Remarks</span>
|
|
</div>
|
|
</div>
|
|
<div v-for="person in focusedNoShows"
|
|
class="grid grid-cols-5 py-2 items-center border-b last:border-none">
|
|
<p>{{ person.attendee_name }}</p>
|
|
<!-- <Checkbox :default-value="person.passed_bookwork ? true : false" class="pointer-events-none">
|
|
</Checkbox>
|
|
<Checkbox :default-value="person.passed_qual ? true : false" class="pointer-events-none">
|
|
</Checkbox> -->
|
|
<div></div>
|
|
<div></div>
|
|
<p class="col-span-2 text-right px-2"
|
|
:class="person.remarks == '' ? 'text-muted-foreground' : ''">
|
|
{{ person.remarks == "" ?
|
|
'--'
|
|
: person.remarks }}</p>
|
|
</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>
|
|
<div v-if="sidePanel == sidePanelState.create" class="pl-7 border-l w-3/5 max-w-5xl">
|
|
<div class="flex justify-between my-3">
|
|
<div class="flex pl-2 gap-5">
|
|
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">New Training Report</p>
|
|
</div>
|
|
<button @click="closeTrainingReport" class="cursor-pointer">
|
|
<X></X>
|
|
</button>
|
|
</div>
|
|
<div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
|
|
<TrainingReportForm class="w-full pl-2"
|
|
@submit="(newID) => { router.push(`/trainingReport/${newID}`); loadTrainingReports() }">
|
|
</TrainingReportForm>
|
|
</div>
|
|
</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> |