overhauled client member management system

ui/src/components/Navigation/Navbar.vue

@@ -179,7 +179,9 @@ function blurAfter() {
             <div>
                 <DropdownMenu v-if="userStore.isLoggedIn">
                     <DropdownMenuTrigger class="cursor-pointer">
-                        <p>{{ userStore.user.name }}</p>
+                        <Button variant="ghost" class="px-4">
+                            {{ userStore.displayName }}
+                        </Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
                         <DropdownMenuItem @click="$router.push('/profile')">My Profile</DropdownMenuItem>

ui/src/components/loa/loaForm.vue

@@ -105,7 +105,11 @@ onMounted(async () => {
         console.error(error);
     }
 
-    members.value = await getMembers();
+    if (props.adminMode) {
+        members.value = await getMembers();
+    } else {
+        members.value.push(props.member);
+    }
     loaTypes.value = await getLoaTypes();
     resetForm({ values: { member_id: currentMember.value?.member_id } });
 });
@@ -153,7 +157,7 @@ const maxEndDate = computed(() => {
                                         <ComboboxInput placeholder="Search members..." class="w-full pl-3"
                                             :display-value="(id) => {
                                                 const m = members.find(mem => mem.member_id === id)
-                                                return m ? m.member_name : ''
+                                                return m ?  m.displayName || m.member_name : ''
                                             }" />
                                     </ComboboxAnchor>
                                     <ComboboxList class="*:w-64">
@@ -162,7 +166,7 @@ const maxEndDate = computed(() => {
                                             <template v-for="member in members" :key="member.member_id">
                                                 <ComboboxItem :value="member.member_id"
                                                     class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5 w-full">
-                                                    {{ member.member_name }}
+                                                    {{ member.displayName || member.member_name }}
                                                     <ComboboxItemIndicator
                                                         class="absolute left-2 inline-flex items-center">
                                                         <Check class="h-4 w-4" />

ui/src/composables/useAuth.ts

@@ -6,11 +6,11 @@ export function useAuth() {
     const userStore = useUserStore();
 
     // Account status control
-    const accountStatus = computed(() => userStore.state);
+    const accountStatus = computed(() => userStore.user?.state);
 
     // RBAC
     const roles = computed<string[]>(() => {
-        return userStore.user?.roleData?.map((r: Role) => r.name) ?? [];
+        return userStore.user?.roles?.map((r: Role) => r.name) ?? [];
     });
 
     function isDev() {

ui/src/pages/SubmitLOA.vue

@@ -1,20 +1,11 @@
 <script setup lang="ts">
 import LoaForm from '@/components/loa/loaForm.vue';
 import { useUserStore } from '@/stores/user';
-import { Member } from '@/api/member';
+import { Member } from '@shared/types/member';
 import LoaList from '@/components/loa/loaList.vue';
 import { ref } from 'vue';
 
 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,
-};
 
 const mode = ref<'submit' | 'view'>('submit')
 </script>
@@ -32,7 +23,7 @@ const mode = ref<'submit' | 'view'>('submit')
                 </div>
             </div>
         </div>
-        <LoaForm v-if="mode === 'submit'" :member="memberFull"></LoaForm>
+        <LoaForm v-if="mode === 'submit'" :member="userStore.user.member"></LoaForm>
         <LoaList v-if="mode === 'view'" :admin-mode="false"></LoaList>
     </div>
 </template>

ui/src/stores/user.ts

@@ -1,15 +1,18 @@
 import { ref, computed, watch } from 'vue'
 import { defineStore } from 'pinia'
 import { useRoute, useRouter } from 'vue-router'
+import { myData } from '@shared/types/member'
+
 
 const POLL_INTERVAL = 10_000
 
 export const useUserStore = defineStore('user', () => {
-    const user = ref(null)
-    const roles = computed(() => new Set(user.value?.roleData?.map(r => r.name) ?? []));
+    const user = ref<myData>(null)
+    const roles = computed(() => new Set(user.value?.roles?.map(r => r.name) ?? []));
     const loaded = ref(false);
     const state = computed<string | undefined>(() => user.value?.state || undefined);
     const isLoggedIn = computed(() => user.value !== null)
+    const displayName = computed(() => user.value?.member.displayName || user.value?.member.member_name)
 
     async function loadUser() {
         //@ts-ignore
@@ -19,7 +22,6 @@ export const useUserStore = defineStore('user', () => {
 
         if (res.ok) {
             const data = await res.json();
-            console.log(data);
             user.value = data;
         }
 
@@ -87,5 +89,5 @@ export const useUserStore = defineStore('user', () => {
         }
     })
 
-    return { user, isLoggedIn, roles, loadUser, loaded, hasAnyRole, hasRole, state }
+    return { user, displayName, isLoggedIn, roles, loadUser, loaded, hasAnyRole, hasRole, state }
 })