105 lines
3.5 KiB
Vue
105 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog"
|
|
import Badge from "@/components/ui/badge/Badge.vue";
|
|
import { computed, ref } from "vue";
|
|
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";
|
|
import LoaForm from "@/components/loa/loaForm.vue";
|
|
|
|
const members = ref<Member[]>([]);
|
|
const router = useRouter();
|
|
|
|
const fetchMembers = async () => {
|
|
members.value = await getMembers();
|
|
};
|
|
|
|
function viewMember(id) {
|
|
router.push(`/member/${id}`)
|
|
}
|
|
|
|
fetchMembers();
|
|
|
|
const searchVal = ref<string>("");
|
|
const searchedMembers = computed(() => {
|
|
return members.value.filter(member => member.member_name.toLowerCase().includes(searchVal.value.toLowerCase()));
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<!-- table menu -->
|
|
<div class="w-4xl mx-auto">
|
|
<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>
|
|
<TableRow>
|
|
<TableHead class="w-[100px]">
|
|
Member
|
|
</TableHead>
|
|
<TableHead>Rank</TableHead>
|
|
<TableHead>Unit</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<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.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'">Discharge</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</template> |