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

20
ui/src/components/tooltip/Tooltip.vue Normal file
View File

@@ -0,0 +1,20 @@
<script setup lang="ts">
defineProps<{
open: boolean,
message: string
}>();
</script>
<template>
<div class="relative inline-flex items-center group">
<slot></slot>
<div v-if="open" 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">
{{ message }}
</div>
</div>
</template>

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>

6
ui/src/pages/TrainingReport.vue
View File

@@ -312,8 +312,6 @@ function setPage(pagenum: number) {
<label class="scroll-m-20 text-xl font-semibold tracking-tight">No Shows</label>
<div class="grid grid-cols-5 py-2 text-sm font-medium text-muted-foreground border-b">
<span>Name</span>
<!-- <span class="">Role</span>
<span class="">Role</span> -->
<div></div>
<div></div>
<span class="text-right col-span-2">Remarks</span>
@@ -326,10 +324,6 @@ function setPage(pagenum: number) {
class="justify-self-start"></MemberCard>
<p v-else>{{ person.attendee_name }}</p>
</div>
<!-- <Checkbox :default-value="person.passed_bookwork ? true : false" class="pointer-events-none">
</Checkbox>
<Checkbox :default-value="person.passed_qual ? true : false" class="pointer-events-none">
</Checkbox> -->
<div></div>
<div></div>
<p class="col-span-2 text-right px-2"