improved recruiter controls for applications

ui/src/App.vue

@@ -16,9 +16,10 @@ import ManageApplications from './pages/ManageApplications.vue';
       <Button variant="link">Link</Button>
     </div>
     <Separator></Separator>
-    <Application></Application>
+    <!-- <Application></Application> -->
     <!-- <ManageApplications></ManageApplications> -->
      <!-- <AutoForm class="max-w-3xl mx-auto my-20"></AutoForm> -->
+      <RouterView></RouterView>
   </div>
 </template>
 

ui/src/api/application.ts

@@ -86,11 +86,12 @@ export async function postApplication(val: any) {
   let out = {
     "App": val,
   }
-  await fetch(`http://${addr}/application`, {
+  const res = await fetch(`http://${addr}/application`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(out),
   })
+  return res;
 }
 
 export async function postChatMessage(message: any, post_id: number) {

ui/src/pages/Application.vue

@@ -46,6 +46,15 @@ async function postComment(comment) {
     chatData.value.push(await postChatMessage(comment, appID.value));
 }
 
+async function postApp(appData) {
+    const res = await postApplication(appData);
+    if (res.ok) {
+        readOnly.value = true;
+        newApp.value = false;
+    }
+    // TODO: Handle fail to post
+}
+
 </script>
 
 <template>
@@ -82,12 +91,13 @@ async function postComment(comment) {
         <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) => { postApplication(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>
         </div>
     </div>
-    <div v-else>HELLOOO</div>
+    <!-- TODO: Implement some kinda loading screen -->
+    <div v-else>Loading</div>
 </template>

ui/src/pages/ManageApplications.vue

@@ -11,6 +11,7 @@ import {
 } from '@/components/ui/table'
 import Button from '@/components/ui/button/Button.vue';
 import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 const appList = ref([]);
 const now = Date.now();
@@ -57,6 +58,9 @@ async function handleDeny(id) {
     appList.value = await getAllApplications();
 }
 
+function openApplication(id) {
+    useRouter().push('/hi')
+}
 
 onMounted(async () => {
     appList.value = await getAllApplications();
@@ -69,25 +73,28 @@ onMounted(async () => {
             <TableRow>
                 <TableHead class="w-[100px]">User</TableHead>
                 <TableHead>Date Submitted</TableHead>
+                <TableHead class="text-right"></TableHead>
                 <TableHead class="text-right">Status</TableHead>
             </TableRow>
         </TableHeader>
         <TableBody>
-            <TableRow v-for="app in appList" :key="app.id">
+            <TableRow v-for="app in appList" :key="app.id" class="cursor-pointer"
+                :onClick="() => { openApplication(app.id) }">
                 <TableCell class="font-medium">{{ app.member_name }}</TableCell>
                 <TableCell :title="formatExact(app.submitted_at)">
                     {{ formatAgo(app.submitted_at) }}
                 </TableCell>
-                <TableCell v-if="app.app_status != 'Pending'" class="text-right" :class="[
-                    'font-semibold',
+                <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>
+                </TableCell>
+
+                <TableCell class="text-right font-semibold" :class="[
+                    ,
                     app.app_status === Status.Pending && 'text-yellow-500',
-                    app.app_status === Status.Accepted && 'text-success',
+                    app.app_status === Status.Accepted && 'text-green-500',
                     app.app_status === Status.Denied && 'text-destructive'
                 ]">{{ app.app_status }}</TableCell>
-                <TableCell v-else class="inline-flex items-end gap-2">
-                    <Button variant="success" :onClick="() => { handleApprove(app.id) }">Approve</Button>
-                    <Button variant="destructive" :onClick="() => { handleDeny(app.id) }">Deny</Button>
-                </TableCell>
             </TableRow>
         </TableBody>
     </Table>