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) { if (res.ok) {
return res.json() as Promise<Role[]>; return res.json() as Promise<Role[]>;
} else { } else {
console.error("Something went wrong approving the application") console.error("Something went wrong")
return []; return [];
} }
} }

View File

@@ -138,6 +138,7 @@ onMounted(async () => {
}) })
</script> </script>
<template> <template>
<div>
<Dialog v-model:open="showDialog" <Dialog v-model:open="showDialog"
v-on:update:open="() => { showDialog = false; addingMember = false; memberToAdd = null; }"> v-on:update:open="() => { showDialog = false; addingMember = false; memberToAdd = null; }">
<DialogContent> <DialogContent>
@@ -169,11 +170,9 @@ onMounted(async () => {
<Combobox v-model="memberToAdd" by="value"> <Combobox v-model="memberToAdd" by="value">
<ComboboxAnchor> <ComboboxAnchor>
<div class="relative w-full max-w-sm items-center"> <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" /> 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> </div>
</ComboboxAnchor> </ComboboxAnchor>
<ComboboxList> <ComboboxList>
@@ -184,9 +183,6 @@ onMounted(async () => {
<ComboboxItem v-for="member in availableMembers" :key="member.member_id" <ComboboxItem v-for="member in availableMembers" :key="member.member_id"
:value="member"> :value="member">
{{ member.member_name }} {{ member.member_name }}
<ComboboxItemIndicator>
<Check class="ml-auto size-4" />
</ComboboxItemIndicator>
</ComboboxItem> </ComboboxItem>
</ComboboxGroup> </ComboboxGroup>
</ComboboxList> </ComboboxList>
@@ -197,41 +193,30 @@ onMounted(async () => {
</ul> </ul>
</div> </div>
<DialogFooter> <DialogFooter>
<!-- <Button variant="secondary" @click="showDialog = false">Cancel</Button> -->
<Button @click="handleDeleteRole">Delete Group</Button> <Button @click="handleDeleteRole">Delete Group</Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
<Dialog v-model:open="showCreateGroupDialog" v-on:update:open="() => { showCreateGroupDialog = false; }"> <Dialog v-model:open="showCreateGroupDialog" v-on:update:open="() => { showCreateGroupDialog = false; }">
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle class="flex justify-between items-center">Create Group</DialogTitle> <DialogTitle class="flex justify-between items-center">Create Group</DialogTitle>
<DialogDescription>Create a new group of members</DialogDescription> <DialogDescription>Create a new group of members</DialogDescription>
</DialogHeader> </DialogHeader>
<form class="mt-5 space-y-5" @submit.prevent="handleCreateGroup"> <form class="mt-5 space-y-5" @submit.prevent="handleCreateGroup">
<div> <div>
<Label class="mb-2 block" for="group-name">Group Name</Label> <Label class="mb-2 block" for="group-name">Group Name</Label>
<Input id="group-name" v-model="roleDraft.name" :aria-invalid="!!draftErrors.name" /> <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> <p v-if="draftErrors.name" class="text-destructive text-sm mt-1">{{ draftErrors.name }}</p>
</div> </div>
<div> <div>
<Label class="mb-2 block" for="group-desc">Description</Label> <Label class="mb-2 block" for="group-desc">Description</Label>
<Input id="group-desc" v-model="roleDraft.description" /> <Input id="group-desc" v-model="roleDraft.description" />
</div> </div>
<div> <div>
<Label class="mb-2 block" for="group-color">Color</Label> <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" /> <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> </div>
<DialogFooter> <DialogFooter>
<Button type="button" variant="secondary" @click="showCreateGroupDialog = false" <Button type="button" variant="secondary" @click="showCreateGroupDialog = false"
:disabled="creating"> :disabled="creating">
@@ -244,7 +229,6 @@ onMounted(async () => {
</form> </form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
<div class="max-w-5xl mx-auto"> <div class="max-w-5xl mx-auto">
<div class="flex items-center justify-between my-4"> <div class="flex items-center justify-between my-4">
<p>Groups</p> <p>Groups</p>
@@ -261,13 +245,11 @@ onMounted(async () => {
</CardTitle> </CardTitle>
<CardDescription>{{ value.description }}</CardDescription> <CardDescription>{{ value.description }}</CardDescription>
</CardHeader> </CardHeader>
<!-- <CardContent>
Card Content
</CardContent> -->
<CardFooter> <CardFooter>
<p class="text-muted-foreground">{{ value.members.length }} members</p> <p class="text-muted-foreground">{{ value.members.length }} members</p>
</CardFooter> </CardFooter>
</Card> </Card>
</div> </div>
</div> </div>
</div>
</template> </template>