Training-Report #27
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user