From ad83c927e65101a22c155ba4e818039a5dae23cd Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Sun, 19 Oct 2025 20:32:28 -0400
Subject: [PATCH] Fixed roles page console warnings

---
 ui/src/api/roles.ts          |   2 +-
 ui/src/pages/ManageRoles.vue | 240 ++++++++++++++++-------------------
 2 files changed, 112 insertions(+), 130 deletions(-)

diff --git a/ui/src/api/roles.ts b/ui/src/api/roles.ts
index ef669d7..c128dbf 100644
--- a/ui/src/api/roles.ts
+++ b/ui/src/api/roles.ts
@@ -15,7 +15,7 @@ export async function getRoles(): Promise<Role[]> {
     if (res.ok) {
         return res.json() as Promise<Role[]>;
     } else {
-        console.error("Something went wrong approving the application")
+        console.error("Something went wrong")
         return [];
     }
 }
diff --git a/ui/src/pages/ManageRoles.vue b/ui/src/pages/ManageRoles.vue
index 323b4e4..fa3a0aa 100644
--- a/ui/src/pages/ManageRoles.vue
+++ b/ui/src/pages/ManageRoles.vue
@@ -138,136 +138,118 @@ onMounted(async () => {
 })
 </script>
 <template>
-    <Dialog v-model:open="showDialog"
-        v-on:update:open="() => { showDialog = false; addingMember = false; memberToAdd = null; }">
-        <DialogContent>
-            <DialogHeader>
-                <DialogTitle class="flex justify-between items-center">{{ activeRole.name }}
-                    <Badge class="mr-5">
-                        {{ activeRole.color }}
-                    </Badge>
-                </DialogTitle>
-                <DialogDescription>
-                    {{ activeRole.description }}
-                </DialogDescription>
-            </DialogHeader>
-            <div class="mt-5">
-                <div class="flex justify-between items-center">
-                    <p>Members with this role</p>
-                </div>
-                <Separator class="my-2"></Separator>
-                <ul class="flex flex-col gap-2">
-                    <li v-for="member in activeRole.members" class="flex justify-between items-center">
-                        <p>{{ member.member_name }}</p>
-                        <X class="text-muted-foreground" @click="handleRemoveMember(member.member_id)"></X>
-                    </li>
-                    <div v-if="!addingMember" @click="addingMember = true"
-                        class="flex gap-2 text-muted-foreground hover:text-primary hover:cursor-pointer">
-                        <Plus :size="20"></Plus>Add Member
-                    </div>
-                    <div v-else class="flex gap-2">
-                        <Combobox v-model="memberToAdd" by="value">
-                            <ComboboxAnchor>
-                                <div class="relative w-full max-w-sm items-center">
-                                    <ComboboxInput class="pl-9" :display-value="(member: Member) => member?.member_name"
-                                        placeholder="Search Members" />
-                                    <span class="absolute start-0 inset-y-0 flex items-center justify-center px-3">
-                                        <Search class="size-4 text-muted-foreground" />
-                                    </span>
-                                </div>
-                            </ComboboxAnchor>
-                            <ComboboxList>
-                                <ComboboxEmpty>
-                                    No Members.
-                                </ComboboxEmpty>
-                                <ComboboxGroup>
-                                    <ComboboxItem v-for="member in availableMembers" :key="member.member_id"
-                                        :value="member">
-                                        {{ member.member_name }}
-                                        <ComboboxItemIndicator>
-                                            <Check class="ml-auto size-4" />
-                                        </ComboboxItemIndicator>
-                                    </ComboboxItem>
-                                </ComboboxGroup>
-                            </ComboboxList>
-                        </Combobox>
-                        <Button variant="secondary" @click="addingMember = false">Cancel</Button>
-                        <Button @click="handleAddMember">Save</Button>
-                    </div>
-                </ul>
-            </div>
-            <DialogFooter>
-                <!-- <Button variant="secondary" @click="showDialog = false">Cancel</Button> -->
-                <Button @click="handleDeleteRole">Delete Group</Button>
-            </DialogFooter>
-        </DialogContent>
-    </Dialog>
-
-    <Dialog v-model:open="showCreateGroupDialog" v-on:update:open="() => { showCreateGroupDialog = false; }">
-        <DialogContent>
-            <DialogHeader>
-                <DialogTitle class="flex justify-between items-center">Create Group</DialogTitle>
-                <DialogDescription>Create a new group of members</DialogDescription>
-            </DialogHeader>
-
-            <form class="mt-5 space-y-5" @submit.prevent="handleCreateGroup">
-                <div>
-                    <Label class="mb-2 block" for="group-name">Group Name</Label>
-                    <Input id="group-name" v-model="roleDraft.name" :aria-invalid="!!draftErrors.name" />
-                    <p v-if="draftErrors.name" class="text-destructive text-sm mt-1">{{ draftErrors.name }}</p>
-                </div>
-
-                <div>
-                    <Label class="mb-2 block" for="group-desc">Description</Label>
-                    <Input id="group-desc" v-model="roleDraft.description" />
-                </div>
-
-                <div>
-                    <Label class="mb-2 block" for="group-color">Color</Label>
-                    <!-- If you like a native color picker: -->
-                    <Input id="group-color" type="color" v-model="roleDraft.color" />
-                    <!-- Or stick to hex text input: -->
-                    <!-- <Input id="group-color" placeholder="#FF8A00" v-model="roleDraft.color"
-                        :aria-invalid="!!draftErrors.color" />
-                    <p v-if="draftErrors.color" class="text-destructive text-sm mt-1">{{ draftErrors.color }}</p> -->
-                </div>
-
-                <DialogFooter>
-                    <Button type="button" variant="secondary" @click="showCreateGroupDialog = false"
-                        :disabled="creating">
-                        Cancel
-                    </Button>
-                    <Button type="submit" :disabled="creating">
-                        {{ creating ? "Saving..." : "Save" }}
-                    </Button>
-                </DialogFooter>
-            </form>
-        </DialogContent>
-    </Dialog>
-
-    <div class="max-w-5xl mx-auto">
-        <div class="flex items-center justify-between my-4">
-            <p>Groups</p>
-            <Button @click="showCreateGroupDialog = true">+ Add New Group</Button>
-        </div>
-        <div class="grid grid-cols-3 gap-5">
-            <Card v-for="value in roles" :key="value.id" @click="activeRole = value; showDialog = true"
-                class="cursor-pointer">
-                <CardHeader>
-                    <CardTitle class="flex justify-between items-center">{{ value.name }}
-                        <Badge>
-                            {{ value.color }}
+    <div>
+        <Dialog v-model:open="showDialog"
+            v-on:update:open="() => { showDialog = false; addingMember = false; memberToAdd = null; }">
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle class="flex justify-between items-center">{{ activeRole.name }}
+                        <Badge class="mr-5">
+                            {{ activeRole.color }}
                         </Badge>
-                    </CardTitle>
-                    <CardDescription>{{ value.description }}</CardDescription>
-                </CardHeader>
-                <!-- <CardContent>
-                    Card Content
-                </CardContent> -->
-                <CardFooter>
-                    <p class="text-muted-foreground">{{ value.members.length }} members</p>
-                </CardFooter>
-            </Card>
+                    </DialogTitle>
+                    <DialogDescription>
+                        {{ activeRole.description }}
+                    </DialogDescription>
+                </DialogHeader>
+                <div class="mt-5">
+                    <div class="flex justify-between items-center">
+                        <p>Members with this role</p>
+                    </div>
+                    <Separator class="my-2"></Separator>
+                    <ul class="flex flex-col gap-2">
+                        <li v-for="member in activeRole.members" class="flex justify-between items-center">
+                            <p>{{ member.member_name }}</p>
+                            <X class="text-muted-foreground" @click="handleRemoveMember(member.member_id)"></X>
+                        </li>
+                        <div v-if="!addingMember" @click="addingMember = true"
+                            class="flex gap-2 text-muted-foreground hover:text-primary hover:cursor-pointer">
+                            <Plus :size="20"></Plus>Add Member
+                        </div>
+                        <div v-else class="flex gap-2">
+                            <Combobox v-model="memberToAdd" by="value">
+                                <ComboboxAnchor>
+                                    <div class="relative w-full max-w-sm items-center">
+                                        <ComboboxInput class="pl-9"
+                                            :display-value="(member: Member) => member?.member_name"
+                                            placeholder="Search Members" />
+                                    </div>
+                                </ComboboxAnchor>
+                                <ComboboxList>
+                                    <ComboboxEmpty>
+                                        No Members.
+                                    </ComboboxEmpty>
+                                    <ComboboxGroup>
+                                        <ComboboxItem v-for="member in availableMembers" :key="member.member_id"
+                                            :value="member">
+                                            {{ member.member_name }}
+                                        </ComboboxItem>
+                                    </ComboboxGroup>
+                                </ComboboxList>
+                            </Combobox>
+                            <Button variant="secondary" @click="addingMember = false">Cancel</Button>
+                            <Button @click="handleAddMember">Save</Button>
+                        </div>
+                    </ul>
+                </div>
+                <DialogFooter>
+                    <Button @click="handleDeleteRole">Delete Group</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+        <Dialog v-model:open="showCreateGroupDialog" v-on:update:open="() => { showCreateGroupDialog = false; }">
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle class="flex justify-between items-center">Create Group</DialogTitle>
+                    <DialogDescription>Create a new group of members</DialogDescription>
+                </DialogHeader>
+                <form class="mt-5 space-y-5" @submit.prevent="handleCreateGroup">
+                    <div>
+                        <Label class="mb-2 block" for="group-name">Group Name</Label>
+                        <Input id="group-name" v-model="roleDraft.name" :aria-invalid="!!draftErrors.name" />
+                        <p v-if="draftErrors.name" class="text-destructive text-sm mt-1">{{ draftErrors.name }}</p>
+                    </div>
+                    <div>
+                        <Label class="mb-2 block" for="group-desc">Description</Label>
+                        <Input id="group-desc" v-model="roleDraft.description" />
+                    </div>
+                    <div>
+                        <Label class="mb-2 block" for="group-color">Color</Label>
+                        <Input id="group-color" type="color" v-model="roleDraft.color" />
+                    </div>
+                    <DialogFooter>
+                        <Button type="button" variant="secondary" @click="showCreateGroupDialog = false"
+                            :disabled="creating">
+                            Cancel
+                        </Button>
+                        <Button type="submit" :disabled="creating">
+                            {{ creating ? "Saving..." : "Save" }}
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+        <div class="max-w-5xl mx-auto">
+            <div class="flex items-center justify-between my-4">
+                <p>Groups</p>
+                <Button @click="showCreateGroupDialog = true">+ Add New Group</Button>
+            </div>
+            <div class="grid grid-cols-3 gap-5">
+                <Card v-for="value in roles" :key="value.id" @click="activeRole = value; showDialog = true"
+                    class="cursor-pointer">
+                    <CardHeader>
+                        <CardTitle class="flex justify-between items-center">{{ value.name }}
+                            <Badge>
+                                {{ value.color }}
+                            </Badge>
+                        </CardTitle>
+                        <CardDescription>{{ value.description }}</CardDescription>
+                    </CardHeader>
+                    <CardFooter>
+                        <p class="text-muted-foreground">{{ value.members.length }} members</p>
+                    </CardFooter>
+                </Card>
+            </div>
         </div>
     </div>
 </template>
\ No newline at end of file