setup for rank change page
This commit is contained in:
@@ -2,8 +2,10 @@
|
||||
import ApplicationChat from '@/components/application/ApplicationChat.vue';
|
||||
import ApplicationForm from '@/components/application/ApplicationForm.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { ApplicationData, loadApplication, postApplication, postChatMessage, Status } from '@/api/application';
|
||||
import { ApplicationData, approveApplication, denyApplication, loadApplication, postApplication, postChatMessage, Status } from '@/api/application';
|
||||
import { useRoute } from 'vue-router';
|
||||
import Button from '@/components/ui/button/Button.vue';
|
||||
import { CheckIcon, XIcon } from 'lucide-vue-next';
|
||||
|
||||
const appData = ref<ApplicationData>(null);
|
||||
const appID = ref<number | null>(null);
|
||||
@@ -59,6 +61,14 @@ async function postApp(appData) {
|
||||
// TODO: Handle fail to post
|
||||
}
|
||||
|
||||
async function handleApprove(id) {
|
||||
console.log("hi");
|
||||
await approveApplication(id);
|
||||
}
|
||||
|
||||
async function handleDeny(id) {
|
||||
await denyApplication(id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -90,16 +100,24 @@ async function postApp(appData) {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit"
|
||||
}) }}</p>
|
||||
<div class="mt-2" v-else>
|
||||
<Button variant="success" class="mr-2" :onclick="() => {handleApprove(appID)}">
|
||||
<CheckIcon></CheckIcon>
|
||||
</Button>
|
||||
<Button variant="destructive" :onClick="() => {handleDeny(appID)}">
|
||||
<XIcon></XIcon>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex flex-row justify-between items-center py-2 mb-8">
|
||||
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">Apply to join the 17th Rangers</h3>
|
||||
</div>
|
||||
<ApplicationForm :read-only="readOnly" :data="appData" @submit="(e) => {postApp(e)}" class="mb-7">
|
||||
<ApplicationForm :read-only="readOnly" :data="appData" @submit="(e) => { postApp(e) }" class="mb-7">
|
||||
</ApplicationForm>
|
||||
<div v-if="!newApp">
|
||||
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mb-4">Discussion</h3>
|
||||
<ApplicationChat :messages="chatData" @post="postComment"></ApplicationChat>
|
||||
<ApplicationChat :messages="chatData" @post="postComment"></ApplicationChat>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO: Implement some kinda loading screen -->
|
||||
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
import Button from '@/components/ui/button/Button.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { CheckIcon, XIcon } from 'lucide-vue-next';
|
||||
|
||||
const appList = ref([]);
|
||||
const now = Date.now();
|
||||
@@ -86,8 +87,8 @@ onMounted(async () => {
|
||||
{{ formatAgo(app.submitted_at) }}
|
||||
</TableCell>
|
||||
<TableCell v-if="app.app_status === Status.Pending" class="inline-flex items-end gap-2">
|
||||
<Button variant="success" @click.stop="() => { console.log('hello') }">Accept</Button>
|
||||
<Button variant="destructive" @click.stop="() => { handleDeny(app.id) }">Deny</Button>
|
||||
<Button variant="success" @click.stop="() => { handleApprove(app.id) }"><CheckIcon></CheckIcon></Button>
|
||||
<Button variant="destructive" @click.stop="() => { handleDeny(app.id) }"><XIcon></XIcon></Button>
|
||||
</TableCell>
|
||||
|
||||
<TableCell class="text-right font-semibold" :class="[
|
||||
|
||||
39
ui/src/pages/RankChange.vue
Normal file
39
ui/src/pages/RankChange.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
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" },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full items-center justify-center mt-20">
|
||||
<Combobox>
|
||||
<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" />
|
||||
</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 }}
|
||||
<ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
|
||||
<Check class="h-4 w-4" />
|
||||
</ComboboxItemIndicator>
|
||||
</ComboboxItem>
|
||||
</template>
|
||||
</ComboboxGroup>
|
||||
</ComboboxList>
|
||||
</Combobox>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user