finalized LOA systems

ui/src/pages/ManageLOA.vue

@@ -1,12 +1,42 @@
 <script setup lang="ts">
 import LoaForm from '@/components/loa/loaForm.vue';
 import LoaList from '@/components/loa/loaList.vue';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import Button from '@/components/ui/button/Button.vue';
+import { ref } from 'vue';
 
+const showLOADialog = ref(false);
 </script>
 
 <template>
+    <Dialog v-model:open="showLOADialog" v-on:update:open="showLOADialog = false">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Post LOA</DialogTitle>
+                <DialogDescription>
+                    Post an LOA on behalf of a member.
+                </DialogDescription>
+            </DialogHeader>
+            <LoaForm :admin-mode="true" class="my-5 w-full"></LoaForm>
+            <!-- <DialogFooter>
+                <Button variant="secondary" @click="showLOADialog = false">Cancel</Button>
+                <Button>Apply</Button>
+            </DialogFooter> -->
+        </DialogContent>
+    </Dialog>
+
     <div class="max-w-5xl mx-auto pt-10">
-        <!-- <LoaForm class="m-10"></LoaForm> -->
+        <div class="flex justify-end mb-4">
+            <Button @click="showLOADialog = true">Post LOA</Button>
+        </div>
         <h1>LOA Log</h1>
         <LoaList></LoaList>
     </div>

ui/src/pages/SubmitLOA.vue

@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import LoaForm from '@/components/loa/loaForm.vue';
+import { useUserStore } from '@/stores/user';
+import { Member } from '@/api/member';
+
+const userStore = useUserStore();
+const user = userStore.user;
+const memberFull: Member = {
+    member_id: user.id,
+    member_name: user.name,
+    rank: null,
+    rank_date: null,
+    status: null,
+    status_date: null,
+};
+</script>
+
 <template>
-    <LoaForm class="m-10"></LoaForm>
+    <LoaForm class="m-10" :member="memberFull"></LoaForm>
 </template>

ui/src/pages/memberList.vue

@@ -23,6 +23,7 @@ import {
     DialogTitle,
     DialogTrigger,
 } from "@/components/ui/dialog"
+import Badge from "@/components/ui/badge/Badge.vue";
 import { computed, ref } from "vue";
 import { Member, getMembers } from "@/api/member";
 import { useRouter } from 'vue-router';
@@ -48,23 +49,9 @@ const searchedMembers = computed(() => {
     return members.value.filter(member => member.member_name.toLowerCase().includes(searchVal.value.toLowerCase()));
 });
 
-// page state systems
-const showLOADialog = ref(false);
-const LOAuserId = ref<number | null>(null);
 </script>
 
 <template>
-    <Dialog v-model:open="showLOADialog" v-on:update:open="showLOADialog = false">
-        <DialogContent>
-            <DialogHeader>
-                <DialogTitle>LOA Menu</DialogTitle>
-                <DialogDescription>
-                    Something something flavor text.
-                </DialogDescription>
-            </DialogHeader>
-            <LoaForm :adminMode="true"></LoaForm>
-        </DialogContent>
-    </Dialog>
 
     <!-- table menu -->
     <div class="w-4xl mx-auto">
@@ -89,9 +76,8 @@ const LOAuserId = ref<number | null>(null);
                     </TableCell>
                     <TableCell>{{ member.rank }}</TableCell>
                     <TableCell>{{ member.status }}</TableCell>
-                    <TableCell>{{ member.status }}</TableCell>
-                    <TableCell>{{ member.status }}</TableCell>
-                    <TableCell @click.stop="console.log('hi')" class="text-right">
+                    <TableCell><Badge v-if="member.on_loa">On LOA</Badge></TableCell>
+                    <TableCell @click.stop="" class="text-right">
                         <DropdownMenu>
                             <DropdownMenuTrigger class="cursor-pointer">
                                 <Ellipsis></Ellipsis>
@@ -99,7 +85,6 @@ const LOAuserId = ref<number | null>(null);
                             <DropdownMenuContent>
                                 <DropdownMenuItem>Change Rank</DropdownMenuItem>
                                 <DropdownMenuItem>Transfer</DropdownMenuItem>
-                                <DropdownMenuItem @click="showLOADialog = true">LOA</DropdownMenuItem>
                                 <DropdownMenuItem :variant="'destructive'">Retire</DropdownMenuItem>
                             </DropdownMenuContent>
                         </DropdownMenu>