17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 21 Pull Requests Actions 3 Packages Projects Releases 8 Wiki Activity

added initial members list

Browse Source
This commit is contained in:
ajdj100
2025-09-15 10:38:31 -04:00
parent 1d4d469a0b
commit 3da4d33167
20 changed files with 601 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
ui/src/pages/RankChange.vue
View File

@@ -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>