reimplemented member page

This commit is contained in:
2026-01-21 16:34:35 -05:00
parent f087461e09
commit 1d6f17b725
3 changed files with 24 additions and 18 deletions

View File

@@ -25,7 +25,8 @@ import {
} from "@/components/ui/dialog"
import Badge from "@/components/ui/badge/Badge.vue";
import { computed, ref } from "vue";
import { Member, getMembers } from "@/api/member";
import { getMembers } from "@/api/member";
import { Member } from "@shared/types/member";
import { useRouter } from 'vue-router';
import { Ellipsis } from "lucide-vue-next";
import Input from "@/components/ui/input/Input.vue";
@@ -55,8 +56,13 @@ const searchedMembers = computed(() => {
<!-- table menu -->
<div class="w-4xl mx-auto">
<div class="flex justify-between mb-4">
<Input v-model="searchVal" placeholder="search..."></Input>
<div class="flex flex-row items-center justify-between">
<div class="flex items-center justify-between">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight my-5">Member Management</p>
</div>
<div class="flex justify-between items-center gap-3 mb-4">
<Input v-model="searchVal" placeholder="Search Members..."></Input>
</div>
</div>
<Table>
<TableHeader>
@@ -70,24 +76,25 @@ const searchedMembers = computed(() => {
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="member in searchedMembers" :key="member.member_id"
:onClick="() => { viewMember(member.member_id) }" class="cursor-pointer">
<TableRow v-for="member in searchedMembers" :key="member.member_id">
<TableCell class="font-medium">
{{ member.member_name }}
</TableCell>
<TableCell>{{ member.rank }}</TableCell>
<TableCell>{{ member.unit }}</TableCell>
<TableCell>{{ member.status }}</TableCell>
<TableCell><Badge v-if="member.on_loa">On LOA</Badge></TableCell>
<TableCell>
<Badge v-if="member.loa_until">On LOA</Badge>
</TableCell>
<TableCell @click.stop="" class="text-right">
<DropdownMenu>
<DropdownMenuTrigger class="cursor-pointer">
<Ellipsis></Ellipsis>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Change Rank</DropdownMenuItem>
<DropdownMenuItem>Transfer</DropdownMenuItem>
<DropdownMenuItem :variant="'destructive'">Retire</DropdownMenuItem>
<!-- <DropdownMenuItem>Change Rank</DropdownMenuItem>
<DropdownMenuItem>Transfer</DropdownMenuItem> -->
<DropdownMenuItem :variant="'destructive'">Discharge</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>