Training-Report #27

Merged
Ajdj100 merged 47 commits from Training-Report into main 2025-11-22 14:20:51 -06:00
2 changed files with 23 additions and 24 deletions
Showing only changes of commit 9322affce5 - Show all commits

View File

@@ -117,11 +117,11 @@ onMounted(async () => {
<!-- Column Headers -->
<div
class="grid grid-cols-[180px_140px_50px_1fr_auto] gap-3 font-medium text-sm text-muted-foreground px-1">
class="grid grid-cols-[180px_160px_50px_50px_1fr_auto] gap-3 font-medium text-sm text-muted-foreground px-1">
<div>Member</div>
<div>Role</div>
<div v-if="selectedCourse?.hasBookwork">Bookwork</div>
<div v-if="selectedCourse?.hasQual">Qual</div>
<div>Bookwork</div>
<div>Qual</div>
<div>Remarks</div>
<div></div> <!-- empty for remove button -->
</div>
@@ -130,7 +130,7 @@ onMounted(async () => {
<!-- Attendee Rows -->
<template v-for="(field, index) in fields" :key="field.key">
<div class="grid grid-cols-[180px_140px_50px_1fr_auto] gap-3 items-start">
<div class="grid grid-cols-[180px_160px_50px_50px_1fr_auto] gap-3 items-start">
<!-- Member Select -->
<VeeField :name="`attendees[${index}].attendee_id`" v-slot="{ field: f, errors: e }">
@@ -161,41 +161,40 @@ onMounted(async () => {
</VeeField>
<!-- Passed Checkbox -->
<VeeField v-if="selectedCourse?.hasBookwork" v-slot="{ field }"
:name="`attendees[${index}].passed_bookwork`" type="checkbox" :value="true"
:unchecked-value="false">
<VeeField v-slot="{ field }" :name="`attendees[${index}].passed_bookwork`" type="checkbox"
:value="true" :unchecked-value="false">
<label>
<input type="checkbox" :name="`attendees[${index}].passed_bookwork`" v-bind="field"
:value="true" />
<!-- <Checkbox :name="`attendees[${index}].passed_bookwork`" v-bind="field" :value="true">
</Checkbox> -->
<!-- <input type="checkbox" :name="`attendees[${index}].passed_bookwork`" v-bind="field"
:value="true" /> -->
<Checkbox :disabled="!selectedCourse?.hasBookwork"
:name="`attendees[${index}].passed_bookwork`" v-bind="field" :value="true">
</Checkbox>
</label>
</VeeField>
<!-- Passed Checkbox -->
<VeeField v-if="selectedCourse?.hasQual" v-slot="{ field }"
:name="`attendees[${index}].passed_qual`" type="checkbox" :value="true"
:unchecked-value="false">
<VeeField v-slot="{ field }" :name="`attendees[${index}].passed_qual`" type="checkbox"
:value="true" :unchecked-value="false">
<label>
<input type="checkbox" :name="`attendees[${index}].passed_qual`" v-bind="field"
:value="true" />
<!-- <Checkbox :name="`attendees[${index}].passed_qual`" v-bind="field"></Checkbox> -->
<!-- <input type="checkbox" :name="`attendees[${index}].passed_qual`" v-bind="field"
:value="true" /> -->
<Checkbox :disabled="!selectedCourse?.hasQual"
:name="`attendees[${index}].passed_qual`" v-bind="field"></Checkbox>
</label>
</VeeField>
<!-- Remarks -->
<VeeField :name="`attendees[${index}].remarks`" v-slot="{ field: f, errors: e }">
<div>
<textarea v-bind="f" class="w-full border p-2 rounded-md h-[38px] resize-none"
<textarea v-bind="f" class="h-[38px] resize-none border rounded p-2 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none"
placeholder="Optional remarks"></textarea>
<FieldError v-if="e.length" :errors="e" />
</div>
</VeeField>
<!-- Remove button -->
<Button type="button" variant="ghost" size="xs" @click="remove(index)" class="self-center">
<X class="h-4 w-4" />
<Button type="button" variant="ghost" @click="remove(index)" class="self-center">
<X :size="10" />
</Button>
</div>
</template>

View File

@@ -58,7 +58,7 @@ onMounted(async () => {
<template>
<div class="max-w-7xl mx-auto flex mt-5">
<!-- training report list -->
<div class="px-4" :class="sidePanel == sidePanelState.closed ? 'w-full' : 'w-1/2'">
<div class="px-4" :class="sidePanel == sidePanelState.closed ? 'w-full' : 'w-2/5'">
<div class="flex justify-between">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
<Button @click="createTrainingReport">New Training Report</Button>
@@ -90,7 +90,7 @@ onMounted(async () => {
</div>
</div>
<!-- view training report section -->
<div v-if="sidePanel == sidePanelState.view" class="px-4 border-l w-1/2">
<div v-if="sidePanel == sidePanelState.view" class="px-4 border-l w-3/5">
<div class="flex justify-between my-3">
<div class="flex gap-5">
<p>{{ focusedTrainingReport.course_name }}</p>
@@ -132,7 +132,7 @@ onMounted(async () => {
</div>
</div>
</div>
<div v-if="sidePanel == sidePanelState.create" class="px-4 border-l w-1/2">
<div v-if="sidePanel == sidePanelState.create" class="px-4 border-l w-3/5">
<div class="flex justify-between my-3">
<div class="flex gap-5">
<p>New Training Report</p>