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

Moved tooltip to a reusable component

Browse Source
This commit is contained in:
ajdj100
2025-12-28 14:27:37 -05:00
parent 3848eb939a
commit 7661b3c8d5
3 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,6 +25,7 @@ import Popover from "@/components/ui/popover/Popover.vue";
import PopoverTrigger from "@/components/ui/popover/PopoverTrigger.vue";
import PopoverContent from "@/components/ui/popover/PopoverContent.vue";
import Combobox from '../ui/combobox/Combobox.vue'
import Tooltip from '../tooltip/Tooltip.vue'
const { handleSubmit, resetForm, errors, values, setFieldValue } = useForm({
@@ -50,7 +51,9 @@ watch(() => values.course_id, (newCourseId, oldCourseId) => {
if (!oldCourseId) return;
values.attendees.forEach((a, index) => {
// @ts-ignore
setFieldValue(`attendees[${index}].passed_bookwork`, false);
// @ts-ignore
setFieldValue(`attendees[${index}].passed_qual`, false);
});
});
@@ -326,22 +329,13 @@ const filteredMembers = computed(() => {
<VeeField v-slot="{ field }" :name="`attendees[${index}].passed_bookwork`" type="checkbox"
:value="false" :unchecked-value="true">
<div class="flex flex-col items-center">
<div class="relative inline-flex items-center group">
<Tooltip :open="!selectedCourse?.hasBookwork"
message="This course does not have bookwork">
<Checkbox :disabled="!selectedCourse?.hasBookwork"
:name="`attendees[${index}].passed_bookwork`" :model-value="!field.checked"
@update:model-value="field['onUpdate:modelValue']">
</Checkbox>
<!-- 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>
</Tooltip>
<div class="h-4">
</div>
</div>
@@ -351,20 +345,12 @@ const filteredMembers = computed(() => {
<VeeField v-slot="{ field }" :name="`attendees[${index}].passed_qual`" type="checkbox"
:value="false" :unchecked-value="true">
<div class="flex flex-col items-center">
<div class="relative inline-flex items-center group">
<Tooltip :open="!selectedCourse?.hasQual"
message="This course does not have a qualification">
<Checkbox :disabled="!selectedCourse?.hasQual"
:name="`attendees[${index}].passed_qual`" :model-value="!field.checked"
@update:model-value="field['onUpdate:modelValue']"></Checkbox>
<!-- 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>
</Tooltip>
<div class="h-4">
</div>
</div>