Fixed roles page console warnings

This commit is contained in:
2025-10-19 20:32:28 -04:00
parent 5d7ebd2136
commit ad83c927e6
2 changed files with 112 additions and 130 deletions

View File

@@ -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 [];
}
}

View File

@@ -138,6 +138,7 @@ onMounted(async () => {
})
</script>
<template>
<div>
<Dialog v-model:open="showDialog"
v-on:update:open="() => { showDialog = false; addingMember = false; memberToAdd = null; }">
<DialogContent>
@@ -169,11 +170,9 @@ onMounted(async () => {
<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"
<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>
@@ -184,9 +183,6 @@ onMounted(async () => {
<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>
@@ -197,41 +193,30 @@ onMounted(async () => {
</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">
@@ -244,7 +229,6 @@ onMounted(async () => {
</form>
</DialogContent>
</Dialog>
<div class="max-w-5xl mx-auto">
<div class="flex items-center justify-between my-4">
<p>Groups</p>
@@ -261,13 +245,11 @@ onMounted(async () => {
</CardTitle>
<CardDescription>{{ value.description }}</CardDescription>
</CardHeader>
<!-- <CardContent>
Card Content
</CardContent> -->
<CardFooter>
<p class="text-muted-foreground">{{ value.members.length }} members</p>
</CardFooter>
</Card>
</div>
</div>
</div>
</template>