95 lines
4.4 KiB
Vue
95 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { Check, Search } from "lucide-vue-next"
|
|
import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
|
|
|
|
import { onMounted, ref } from "vue";
|
|
import { Member, getMembers } from "@/api/member";
|
|
import Button from "@/components/ui/button/Button.vue";
|
|
import { Status, getAllStatuses, assignStatus } from "@/api/status";
|
|
import { Rank, getRanks } from "@/api/rank";
|
|
|
|
const members = ref<Member[]>([])
|
|
const statuses = ref<Status[]>([])
|
|
const allRanks = ref<Rank[]>([])
|
|
|
|
const currentMember = ref<Member | null>(null);
|
|
const currentStatus = ref<Status | null>(null);
|
|
const currentRank = ref<Rank | null>(null);
|
|
|
|
onMounted(async () => {
|
|
members.value = await getMembers();
|
|
statuses.value = await getAllStatuses();
|
|
allRanks.value = await getRanks();
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-row gap-6 mx-auto m-10 max-w-5xl">
|
|
<Combobox v-model="currentMember">
|
|
<ComboboxAnchor class="w-[300px]">
|
|
<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="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>
|
|
</ComboboxItem>
|
|
</template>
|
|
</ComboboxGroup>
|
|
</ComboboxList>
|
|
</Combobox>
|
|
|
|
<!-- Status Combobox -->
|
|
<Combobox v-model="currentStatus">
|
|
<ComboboxAnchor class="w-[300px]">
|
|
<ComboboxInput placeholder="Search statuses..." class="w-full pl-9"
|
|
:display-value="(v) => v ? v.name : ''" />
|
|
</ComboboxAnchor>
|
|
<ComboboxList class="w-[300px]">
|
|
<ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
|
|
<ComboboxGroup>
|
|
<template v-for="status in statuses" :key="status.id">
|
|
<ComboboxItem :value="status"
|
|
class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
|
|
{{ status.name }}
|
|
<ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
|
|
<Check class="h-4 w-4" />
|
|
</ComboboxItemIndicator>
|
|
</ComboboxItem>
|
|
</template>
|
|
</ComboboxGroup>
|
|
</ComboboxList>
|
|
</Combobox>
|
|
|
|
<!-- rank -->
|
|
<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 allRanks" :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> |