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

Close #124 fixed checkmark visual state and added tooltip

Browse Source
This commit is contained in:
ajdj100
2025-12-28 14:46:04 -05:00
parent 7661b3c8d5
commit 3c689fbb30
2 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/tooltip/Tooltip.vue
View File

@@ -6,7 +6,7 @@ defineProps<{
</script> </script>
<template> <template>
<div class="relative inline-flex items-center group"> <div class="relative inline-flex items-center group w-min">
<slot></slot> <slot></slot>
<div v-if="open" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 <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 whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs

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

@@ -32,6 +32,7 @@ import {
PaginationNext, PaginationNext,
PaginationPrevious, PaginationPrevious,
} from '@/components/ui/pagination' } from '@/components/ui/pagination'
import Tooltip from '@/components/tooltip/Tooltip.vue';
enum sidePanelState { view, create, closed }; enum sidePanelState { view, create, closed };
@@ -197,8 +198,8 @@ function setPage(pagenum: number) {
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
<div class="mt-5 flex justify-between" :class="sidePanel !== sidePanelState.closed ? 'flex-col items-center' : 'items-center justify-between'" <div class="mt-5 flex justify-between"
> :class="sidePanel !== sidePanelState.closed ? 'flex-col items-center' : 'items-center justify-between'">
<div></div> <div></div>
<Pagination v-slot="{ page }" :items-per-page="pageData?.pageSize || 10" :total="pageData?.total || 10" <Pagination v-slot="{ page }" :items-per-page="pageData?.pageSize || 10" :total="pageData?.total || 10"
:default-page="2" :page="pageNum" @update:page="setPage"> :default-page="2" :page="pageNum" @update:page="setPage">
@@ -214,7 +215,7 @@ function setPage(pagenum: number) {
<PaginationNext /> <PaginationNext />
</PaginationContent> </PaginationContent>
</Pagination> </Pagination>
<div class="flex items-center gap-3 text-sm" :class="sidePanel !== sidePanelState.closed ? 'mt-3' : ''" > <div class="flex items-center gap-3 text-sm" :class="sidePanel !== sidePanelState.closed ? 'mt-3' : ''">
<p class="text-muted-foreground text-nowrap">Per page:</p> <p class="text-muted-foreground text-nowrap">Per page:</p>
<button v-for="size in pageSizeOptions" :key="size" @click="setPageSize(size)" <button v-for="size in pageSizeOptions" :key="size" @click="setPageSize(size)"
@@ -247,7 +248,7 @@ function setPage(pagenum: number) {
:member-id="focusedTrainingReport.created_by" /> :member-id="focusedTrainingReport.created_by" />
<p v-else>{{ focusedTrainingReport.created_by_name === null ? "Unknown User" : <p v-else>{{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
focusedTrainingReport.created_by_name focusedTrainingReport.created_by_name
}}</p> }}</p>
</p> </p>
</div> </div>
</div> </div>
@@ -293,12 +294,19 @@ function setPage(pagenum: number) {
class="justify-self-start"></MemberCard> class="justify-self-start"></MemberCard>
<p v-else>{{ person.attendee_name }}</p> <p v-else>{{ person.attendee_name }}</p>
</div> </div>
<Checkbox :disabled="!focusedTrainingReport.course.hasQual" <Tooltip :open="!focusedTrainingReport.course.hasBookwork"
:model-value="person.passed_bookwork" class="pointer-events-none ml-5"> message="This course does not have bookwork">
</Checkbox> <Checkbox :disabled="!focusedTrainingReport.course.hasBookwork"
<Checkbox :disabled="!focusedTrainingReport.course.hasQual" :model-value="person.passed_bookwork" class="pointer-events-none ml-5">
:model-value="person.passed_qual" class="pointer-events-none ml-1"> </Checkbox>
</Checkbox> </Tooltip>
<Tooltip :open="!focusedTrainingReport.course.hasQual"
message="This course does not have a qualification">
<Checkbox :disabled="!focusedTrainingReport.course.hasQual"
:model-value="person.passed_qual" class="pointer-events-none ml-1">
</Checkbox>
</Tooltip>
<p class="col-span-2 text-right px-2" <p class="col-span-2 text-right px-2"
:class="person.remarks == '' ? 'text-muted-foreground' : ''"> :class="person.remarks == '' ? 'text-muted-foreground' : ''">
{{ person.remarks == "" ? {{ person.remarks == "" ?