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

added roles to member card

Browse Source
This commit is contained in:
ajdj100
2025-12-18 17:39:44 -05:00
parent a699c20f9b
commit f124e41630
5 changed files with 81 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
ui/src/components/members/MemberCard.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { useMemberDirectory } from '@/stores/memberDirectory';
import { ref, onMounted, computed } from 'vue';
import { Member, type MemberLight } from '@shared/types/member'
import { Member, MemberCardDetails, type MemberLight } from '@shared/types/member'
import Popover from '../ui/popover/Popover.vue';
import PopoverTrigger from '../ui/popover/PopoverTrigger.vue';
import PopoverContent from '../ui/popover/PopoverContent.vue';
@@ -21,7 +21,7 @@ const props = defineProps({
// Local state
const memberLight = ref<MemberLight | null>(null);
const memberFull = ref<Member | null>(null)
const memberFull = ref<MemberCardDetails | null>(null)
const loadingFull = ref(false)
const membersStore = useMemberDirectory();
@@ -63,7 +63,7 @@ const hasFullInfo = computed(() => {
if (!memberFull.value) return false
// check if any field has a value
const { rank, unit, status } = memberFull.value
const { rank, unit, status } = memberFull.value.member
return !!(rank || unit || status)
})
@@ -90,7 +90,7 @@ function formatDate(date: Date): string {
{{ displayName }}
</p>
</PopoverTrigger>
<PopoverContent class="w-72 p-0 overflow-hidden">
<PopoverContent class="w-80 p-0 overflow-hidden">
<!-- Loading -->
<div v-if="loadingFull" class="p-4 text-sm text-muted-foreground mx-auto flex justify-center my-5">
<Spinner></Spinner>
@@ -114,26 +114,33 @@ function formatDate(date: Date): string {
<div class="p-4 space-y-3 text-sm">
<!-- Full info -->
<template v-if="hasFullInfo">
<div v-if="memberFull.loa_until"
<div v-if="memberFull.member.loa_until"
class=" rounded-md text-center bg-yellow-500/10 px-2 py-1 text-xs text-yellow-600">
On Leave of Absence until {{ formatDate(memberFull.loa_until) }}
On Leave of Absence until {{ formatDate(memberFull.member.loa_until) }}
</div>
<div v-if="memberFull.rank" class="flex justify-between">
<div v-if="memberFull.member.rank" class="flex justify-between">
<span class="text-muted-foreground">Rank</span>
<span class="font-medium">{{ memberFull.rank }}</span>
<span class="font-medium">{{ memberFull.member.rank }}</span>
</div>
<div v-if="memberFull.unit" class="flex justify-between">
<div v-if="memberFull.member.unit" class="flex justify-between">
<span class="text-muted-foreground">Unit</span>
<span class="font-medium">{{ memberFull.unit }}</span>
<span class="font-medium">{{ memberFull.member.unit }}</span>
</div>
<div v-if="memberFull.status" class="flex justify-between">
<div v-if="memberFull.member.status" class="flex justify-between">
<span class="text-muted-foreground">Status</span>
<span class="font-medium">{{ memberFull.status }}</span>
<span class="font-medium">{{ memberFull.member.status }}</span>
</div>
<div class="flex gap-2 flex-wrap mt-6">
<div v-for="role in memberFull.roles" class="border rounded-full px-3 text-nowrap">
{{ role.name }}
</div>
</div>
</template>
<!-- No info fallback -->