setup for rank change page

This commit is contained in:
2025-09-05 19:27:15 -04:00
parent c1e52ec4c0
commit 7e3c8cbc70
19 changed files with 452 additions and 23 deletions

View File

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

View File

@@ -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="[

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