106 lines
4.1 KiB
Vue
106 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import Badge from '@/components/ui/badge/Badge.vue';
|
|
import Button from '@/components/ui/button/Button.vue';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@/components/ui/dialog'
|
|
import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
|
|
|
|
import { onMounted, ref } from 'vue';
|
|
import { getRanks } from '@/api/rank';
|
|
|
|
const setRankDialog = ref(false);
|
|
const rankOnTransfer = ref();
|
|
const ranks = ref(null);
|
|
|
|
onMounted(async () => {
|
|
ranks.value = await getRanks();
|
|
});
|
|
</script>
|
|
<template>
|
|
<Dialog :open="setRankDialog" @update:open="setRankDialog = false">
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Set Rank on Transfer</DialogTitle>
|
|
<DialogDescription>
|
|
Assign MEMBER a rank on transfer completion.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<!-- Rank Combobox -->
|
|
<Combobox v-model="rankOnTransfer">
|
|
<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>
|
|
<DialogFooter>
|
|
<Button variant="outline" @click="setRankDialog = false">Cancel</Button>
|
|
<Button>Confirm</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<div class="max-w-5xl w-full mx-auto">
|
|
Active
|
|
<div>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle class="flex justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<Badge class="">Pending</Badge>
|
|
<p>Name</p>
|
|
</div>
|
|
<div class="text-muted-foreground font-normal flex gap-2">
|
|
Transfer To: <p class="text-white">Company</p>
|
|
</div>
|
|
</CardTitle>
|
|
<CardDescription class="flex gap-2">Approved by: <p class="text-white">Someone, Someone?</p>
|
|
</CardDescription>
|
|
<CardDescription class="flex gap-2">Rank on transfer: <p class="text-white">Rank</p>
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<!-- <CardContent>
|
|
Card Content
|
|
</CardContent> -->
|
|
<CardFooter class="flex justify-between">
|
|
<p class="text-muted-foreground">Request Date:</p>
|
|
<div class="flex gap-4">
|
|
<Button variant="success">Approve</Button>
|
|
<Button variant="destructive">Deny</Button>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
<div>
|
|
Inactive
|
|
</div>
|
|
</div>
|
|
</template> |