added initial members list

ui/src/pages/RankChange.vue

@@ -2,31 +2,37 @@
 import { Check, Search } from "lucide-vue-next"
 import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
 
-const frameworks = [
-  { value: "next.js", label: "Next.js" },
-  { value: "sveltekit", label: "SvelteKit" },
-  { value: "nuxt", label: "Nuxt" },
-  { value: "remix", label: "Remix" },
-  { value: "astro", label: "Astro" },
-]
+import { getRanks, Rank } from "@/api/rank"
+import { onMounted, ref } from "vue";
+import { Member, getMembers } from "@/api/member";
+import Button from "@/components/ui/button/Button.vue";
+
+const members = ref<Member[]>([])
+const ranks = ref<Rank[]>([])
+
+const currentMember = ref<Member | null>(null);
+const currentRank = ref<Rank | null>(null);
+onMounted(async () => {
+    members.value = await getMembers();
+    ranks.value = await getRanks();
+});
+
 </script>
 
 <template>
-    <div class="flex w-full items-center justify-center mt-20">
-        <Combobox>
+    <div class="flex w-full gap-5 mx-auto mt-10">
+        <Combobox v-model="currentMember">
             <ComboboxAnchor class="w-[300px]">
-                <ComboboxInput placeholder="Search framework..." class="w-full pl-9" />
-                <Search class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+                <ComboboxInput placeholder="Search members..." class="w-full pl-9"
+                    :display-value="(v) => v ? v.member_name : ''" />
             </ComboboxAnchor>
             <ComboboxList class="w-[300px]">
                 <ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
                 <ComboboxGroup>
-                    <template v-for="framework in frameworks" :key="framework.value">
-                        <ComboboxItem
-                            :value="framework.value"
-                            class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5"
-                        >
-                            {{ framework.label }}
+                    <template v-for="member in members" :key="member.member_id">
+                        <ComboboxItem :value="member"
+                            class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
+                            {{ member.member_name }}
                             <ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
                                 <Check class="h-4 w-4" />
                             </ComboboxItemIndicator>
@@ -35,5 +41,28 @@ const frameworks = [
                 </ComboboxGroup>
             </ComboboxList>
         </Combobox>
+
+        <!-- Rank Combobox -->
+        <Combobox v-model="currentRank">
+            <ComboboxAnchor class="w-[300px]">
+                <ComboboxInput placeholder="Search ranks..." class="w-full pl-9"
+                    :display-value="(v) => v ? v.short_name : ''" />
+            </ComboboxAnchor>
+            <ComboboxList class="w-[300px]">
+                <ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
+                <ComboboxGroup>
+                    <template v-for="rank in ranks" :key="rank.id">
+                        <ComboboxItem :value="rank"
+                            class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
+                            {{ rank.short_name }}
+                            <ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
+                                <Check class="h-4 w-4" />
+                            </ComboboxItemIndicator>
+                        </ComboboxItem>
+                    </template>
+                </ComboboxGroup>
+            </ComboboxList>
+        </Combobox>
+        <Button :onClick="() => {}">Submit</Button>
     </div>
 </template>

ui/src/pages/memberList.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+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";
+
+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 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 @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>LOA</DropdownMenuItem>
+                                <DropdownMenuItem :variant="'destructive'">Retire</DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </TableCell>
+                </TableRow>
+            </TableBody>
+        </Table>
+    </div>
+</template>