17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 22 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

Implemented tooltips for disabled inputs

Browse Source
This commit is contained in:
ajdj100
2025-11-20 17:39:46 -05:00
parent 9322affce5
commit a5461359b7
1 changed files with 37 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
ui/src/components/trainingReport/trainingReportForm.vue
View File

@@ -32,11 +32,6 @@ const { handleSubmit, resetForm, errors, values } = useForm({
} }
}) })
watch(errors, (e) => {
console.warn("Validation errors:", e);
}, { deep: true });
const submitForm = handleSubmit(onSubmit); const submitForm = handleSubmit(onSubmit);
function toMySQLDateTime(date: Date): string { function toMySQLDateTime(date: Date): string {
@@ -130,7 +125,7 @@ onMounted(async () => {
<!-- Attendee Rows --> <!-- Attendee Rows -->
<template v-for="(field, index) in fields" :key="field.key"> <template v-for="(field, index) in fields" :key="field.key">
<div class="grid grid-cols-[180px_160px_50px_50px_1fr_auto] gap-3 items-start"> <div class="grid grid-cols-[180px_160px_50px_50px_1fr_auto] gap-3 items-center">
<!-- Member Select --> <!-- Member Select -->
<VeeField :name="`attendees[${index}].attendee_id`" v-slot="{ field: f, errors: e }"> <VeeField :name="`attendees[${index}].attendee_id`" v-slot="{ field: f, errors: e }">
@@ -163,37 +158,57 @@ onMounted(async () => {
<!-- Passed Checkbox --> <!-- Passed Checkbox -->
<VeeField v-slot="{ field }" :name="`attendees[${index}].passed_bookwork`" type="checkbox" <VeeField v-slot="{ field }" :name="`attendees[${index}].passed_bookwork`" type="checkbox"
:value="true" :unchecked-value="false"> :value="true" :unchecked-value="false">
<label> <div class="flex justify-center">
<!-- <input type="checkbox" :name="`attendees[${index}].passed_bookwork`" v-bind="field" <div class="relative inline-flex items-center group">
:value="true" /> -->
<Checkbox :disabled="!selectedCourse?.hasBookwork" <Checkbox :disabled="!selectedCourse?.hasBookwork"
:name="`attendees[${index}].passed_bookwork`" v-bind="field" :value="true"> :name="`attendees[${index}].passed_bookwork`" v-bind="field" :value="true">
</Checkbox> </Checkbox>
</label> <!-- Tooltip bubble -->
<div v-if="!selectedCourse?.hasBookwork" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2
whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs
text-popover-foreground shadow-md border border-border
opacity-0 translate-y-1
group-hover:opacity-100 group-hover:translate-y-0
transition-opacity transition-transform duration-150">
This course does not have bookwork
</div>
</div>
</div>
</VeeField> </VeeField>
<!-- Passed Checkbox --> <!-- Passed Checkbox -->
<VeeField v-slot="{ field }" :name="`attendees[${index}].passed_qual`" type="checkbox" <VeeField v-slot="{ field }" :name="`attendees[${index}].passed_qual`" type="checkbox"
:value="true" :unchecked-value="false"> :value="true" :unchecked-value="false">
<label> <div class="flex justify-center">
<!-- <input type="checkbox" :name="`attendees[${index}].passed_qual`" v-bind="field" <div class="relative inline-flex items-center group">
:value="true" /> -->
<Checkbox :disabled="!selectedCourse?.hasQual" <Checkbox :disabled="!selectedCourse?.hasQual"
:name="`attendees[${index}].passed_qual`" v-bind="field"></Checkbox> :name="`attendees[${index}].passed_qual`" v-bind="field"></Checkbox>
</label> <!-- Tooltip bubble -->
<div v-if="!selectedCourse?.hasQual" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2
whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs
text-popover-foreground shadow-md border border-border
opacity-0 translate-y-1
group-hover:opacity-100 group-hover:translate-y-0
transition-opacity transition-transform duration-150">
This course does not have a qualification
</div>
</div>
</div>
</VeeField> </VeeField>
<!-- Remarks --> <!-- Remarks -->
<VeeField :name="`attendees[${index}].remarks`" v-slot="{ field: f, errors: e }"> <VeeField :name="`attendees[${index}].remarks`" v-slot="{ field: f, errors: e }">
<div> <div class="flex flex-col">
<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" <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> placeholder="Optional remarks"></textarea>
<FieldError v-if="e.length" :errors="e" /> <FieldError v-if="e.length" :errors="e" />
</div> </div>
</VeeField> </VeeField>
<!-- Remove button --> <!-- Remove button -->
<Button type="button" variant="ghost" @click="remove(index)" class="self-center"> <Button type="button" variant="ghost" size="sm" @click="remove(index)" class="self-center">
<X :size="10" /> <X :size="10" />
</Button> </Button>
</div> </div>