From 5f3d78afde677c3f92e90638f54b60e2c395a5c7 Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Tue, 30 Dec 2025 22:29:10 -0500
Subject: [PATCH] Resolved a NaN error in role management

---
 ui/src/components/roles/roleView.vue |  5 +++--
 ui/src/pages/ManageRoles.vue         | 12 ++++++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/roles/roleView.vue b/ui/src/components/roles/roleView.vue
index 9d7437f..5f9196c 100644
--- a/ui/src/components/roles/roleView.vue
+++ b/ui/src/components/roles/roleView.vue
@@ -12,6 +12,7 @@ import InputGroup from '../ui/input-group/InputGroup.vue'
 import InputGroupAddon from '../ui/input-group/InputGroupAddon.vue'
 
 import AddMember from './addMember.vue'
+import Spinner from '../ui/spinner/Spinner.vue'
 
 const route = useRoute()
 
@@ -63,8 +64,8 @@ watch(() => route.params.id, loadRole)
     <AddMember ref="addMemberRef" :all-members="availableMembers" :role="roleData" @submit="loadRole"></AddMember>
     <div class="h-full px-6 py-2">
         <!-- Loading -->
-        <div v-if="loading" class="text-muted-foreground">
-            Loading group…
+        <div v-if="loading" class="h-full flex items-center justify-center text-muted-foreground">
+            <Spinner class="size-8" />
         </div>
 
         <!-- No role selected -->
diff --git a/ui/src/pages/ManageRoles.vue b/ui/src/pages/ManageRoles.vue
index 492610a..7b76b30 100644
--- a/ui/src/pages/ManageRoles.vue
+++ b/ui/src/pages/ManageRoles.vue
@@ -113,7 +113,10 @@ async function handleCreateGroup() {
     }
 }
 
-
+const viewingGroup = computed(() => {
+    return route.path.startsWith('/administration/roles/')
+        && route.params.id !== undefined
+})
 
 onMounted(async () => {
     roles.value = await getRoles();
@@ -146,7 +149,12 @@ onMounted(async () => {
 
             </div>
             <div>
-                <RoleView :all-members="allMembers"></RoleView>
+                <RoleView v-if="viewingGroup" :all-members="allMembers" />
+                <div v-else class="h-full flex items-center justify-center">
+                    <p class="text-muted-foreground text-center">
+                        Select a group to manage
+                    </p>
+                </div>
             </div>
         </div>
     </div>