Major style pass to the form
This commit is contained in:
@@ -73,46 +73,54 @@ onMounted(async () => {
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<form id="trainingForm" @submit.prevent="submitForm" class="flex flex-col gap-5 pl-2">
|
||||
<form id="trainingForm" @submit.prevent="submitForm" class="flex flex-col gap-5">
|
||||
|
||||
<FieldGroup>
|
||||
<VeeField v-slot="{ field, errors }" name="course_id">
|
||||
<Field :data-invalid="!!errors.length">
|
||||
<FieldLabel>Training Course</FieldLabel>
|
||||
|
||||
<select v-bind="field"
|
||||
class="border rounded p-2 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none">
|
||||
<option value="" disabled>Select a course</option>
|
||||
<option v-for="course in trainings" :key="course.id" :value="course.id">
|
||||
{{ course.name }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</Field>
|
||||
</VeeField>
|
||||
</FieldGroup>
|
||||
<FieldGroup>
|
||||
<VeeField v-slot="{ field, errors }" name="event_date">
|
||||
<Field :data-invalid="!!errors.length">
|
||||
<FieldLabel>Event Date</FieldLabel>
|
||||
<input type="date" v-bind="field"
|
||||
class="border rounded p-2 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</Field>
|
||||
</VeeField>
|
||||
</FieldGroup>
|
||||
<div class="flex gap-5">
|
||||
<div class="flex-1">
|
||||
<FieldGroup>
|
||||
<VeeField v-slot="{ field, errors }" name="course_id">
|
||||
<Field :data-invalid="!!errors.length">
|
||||
<FieldLabel class="scroll-m-20 text-lg tracking-tight">Training Course</FieldLabel>
|
||||
<select v-bind="field"
|
||||
class="h-9 border rounded p-2 w-auto focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none">
|
||||
<option value="" disabled>Select a course</option>
|
||||
<option v-for="course in trainings" :key="course.id" :value="course.id">
|
||||
{{ course.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="h-4">
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</Field>
|
||||
</VeeField>
|
||||
</FieldGroup>
|
||||
</div>
|
||||
<div class="w-[150px]">
|
||||
<FieldGroup>
|
||||
<VeeField v-slot="{ field, errors }" name="event_date">
|
||||
<Field :data-invalid="!!errors.length">
|
||||
<FieldLabel class="scroll-m-20 text-lg tracking-tight">Event Date</FieldLabel>
|
||||
<input type="date" v-bind="field"
|
||||
class="h-9 border rounded p-2 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none" />
|
||||
<div class="h-4">
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</Field>
|
||||
</VeeField>
|
||||
</FieldGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VeeFieldArray name="attendees" v-slot="{ fields, push, remove }">
|
||||
<FieldSet class="gap-4">
|
||||
<FieldLegend>Attendees</FieldLegend>
|
||||
<FieldLegend class="scroll-m-20 text-lg tracking-tight">Attendees</FieldLegend>
|
||||
<FieldDescription>Add members who attended this session.</FieldDescription>
|
||||
|
||||
<FieldGroup class="gap-4">
|
||||
|
||||
<!-- Column Headers -->
|
||||
<div
|
||||
class="grid grid-cols-[180px_160px_50px_50px_1fr_auto] gap-3 font-medium text-sm text-muted-foreground px-1">
|
||||
class="grid grid-cols-[180px_150px_65px_45px_1fr_auto] gap-3 font-medium text-sm text-muted-foreground px-1">
|
||||
<div>Member</div>
|
||||
<div>Role</div>
|
||||
<div>Bookwork</div>
|
||||
@@ -137,7 +145,9 @@ onMounted(async () => {
|
||||
{{ m.member_name }}
|
||||
</option>
|
||||
</select>
|
||||
<FieldError v-if="e.length" :errors="e" />
|
||||
<div class="h-4">
|
||||
<FieldError v-if="e.length" :errors="e" />
|
||||
</div>
|
||||
</div>
|
||||
</VeeField>
|
||||
|
||||
@@ -151,14 +161,16 @@ onMounted(async () => {
|
||||
{{ r.name }}
|
||||
</option>
|
||||
</select>
|
||||
<FieldError v-if="e.length" :errors="e" />
|
||||
<div class="h-4">
|
||||
<FieldError v-if="e.length" :errors="e" />
|
||||
</div>
|
||||
</div>
|
||||
</VeeField>
|
||||
|
||||
<!-- Passed Checkbox -->
|
||||
<VeeField v-slot="{ field }" :name="`attendees[${index}].passed_bookwork`" type="checkbox"
|
||||
:value="true" :unchecked-value="false">
|
||||
<div class="flex justify-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="relative inline-flex items-center group">
|
||||
|
||||
<Checkbox :disabled="!selectedCourse?.hasBookwork"
|
||||
@@ -174,13 +186,15 @@ onMounted(async () => {
|
||||
This course does not have bookwork
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-4">
|
||||
</div>
|
||||
</div>
|
||||
</VeeField>
|
||||
|
||||
<!-- Passed Checkbox -->
|
||||
<VeeField v-slot="{ field }" :name="`attendees[${index}].passed_qual`" type="checkbox"
|
||||
:value="true" :unchecked-value="false">
|
||||
<div class="flex justify-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="relative inline-flex items-center group">
|
||||
<Checkbox :disabled="!selectedCourse?.hasQual"
|
||||
:name="`attendees[${index}].passed_qual`" v-bind="field"></Checkbox>
|
||||
@@ -194,6 +208,8 @@ onMounted(async () => {
|
||||
This course does not have a qualification
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-4">
|
||||
</div>
|
||||
</div>
|
||||
</VeeField>
|
||||
|
||||
@@ -203,14 +219,21 @@ onMounted(async () => {
|
||||
<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 class="h-4">
|
||||
<FieldError v-if="e.length" :errors="e" />
|
||||
</div>
|
||||
</div>
|
||||
</VeeField>
|
||||
|
||||
<!-- Remove button -->
|
||||
<Button type="button" variant="ghost" size="sm" @click="remove(index)" class="self-center">
|
||||
<X :size="10" />
|
||||
</Button>
|
||||
<div>
|
||||
<!-- Remove button -->
|
||||
<Button type="button" variant="ghost" size="sm" @click="remove(index)"
|
||||
class="self-center">
|
||||
<X :size="10" />
|
||||
</Button>
|
||||
<div class="h-4">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</FieldGroup>
|
||||
@@ -224,19 +247,19 @@ onMounted(async () => {
|
||||
</FieldSet>
|
||||
</VeeFieldArray>
|
||||
|
||||
<FieldGroup>
|
||||
<FieldGroup class="pt-3">
|
||||
<VeeField v-slot="{ field, errors }" name="remarks">
|
||||
<Field :data-invalid="!!errors.length">
|
||||
<FieldLabel>Remarks</FieldLabel>
|
||||
<FieldLabel class="scroll-m-20 text-lg tracking-tight">Remarks</FieldLabel>
|
||||
<Textarea v-bind="field" placeholder="Any remarks about this training event..."
|
||||
autocomplete="off" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</Field>
|
||||
</VeeField>
|
||||
</FieldGroup>
|
||||
<Field orientation="horizontal">
|
||||
<div class="flex gap-3 justify-end">
|
||||
<Button type="button" variant="outline" @click="resetForm">Reset</Button>
|
||||
<Button type="submit" form="trainingForm">Submit</Button>
|
||||
</Field>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user