111 lines
3.7 KiB
Vue
111 lines
3.7 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 { computed, ref } from "vue";
|
|
import { Member, getMembers } from "@/api/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()));
|
|
});
|
|
|
|
// page state systems
|
|
const showLOADialog = ref(false);
|
|
const LOAuserId = ref<number | null>(null);
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog v-model:open="showLOADialog" v-on:update:open="showLOADialog = false">
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>LOA Menu</DialogTitle>
|
|
<DialogDescription>
|
|
Something something flavor text.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<LoaForm :adminMode="true"></LoaForm>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<!-- table menu -->
|
|
<div class="w-4xl mx-auto">
|
|
<div class="flex justify-between mb-4">
|
|
<Input v-model="searchVal" placeholder="search..."></Input>
|
|
</div>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead class="w-[100px]">
|
|
Member
|
|
</TableHead>
|
|
<TableHead>Rank</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow v-for="member in searchedMembers" :key="member.member_id"
|
|
:onClick="() => { viewMember(member.member_id) }" class="cursor-pointer">
|
|
<TableCell class="font-medium">
|
|
{{ member.member_name }}
|
|
</TableCell>
|
|
<TableCell>{{ member.rank }}</TableCell>
|
|
<TableCell>{{ member.status }}</TableCell>
|
|
<TableCell>{{ member.status }}</TableCell>
|
|
<TableCell>{{ member.status }}</TableCell>
|
|
<TableCell @click.stop="console.log('hi')" class="text-right">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger class="cursor-pointer">
|
|
<Ellipsis></Ellipsis>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem>Change Rank</DropdownMenuItem>
|
|
<DropdownMenuItem>Transfer</DropdownMenuItem>
|
|
<DropdownMenuItem @click="showLOADialog = true">LOA</DropdownMenuItem>
|
|
<DropdownMenuItem :variant="'destructive'">Retire</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</template> |