Fixed roles page console warnings
This commit is contained in:
@@ -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 [];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -138,136 +138,118 @@ onMounted(async () => {
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<Dialog v-model:open="showDialog"
|
<div>
|
||||||
v-on:update:open="() => { showDialog = false; addingMember = false; memberToAdd = null; }">
|
<Dialog v-model:open="showDialog"
|
||||||
<DialogContent>
|
v-on:update:open="() => { showDialog = false; addingMember = false; memberToAdd = null; }">
|
||||||
<DialogHeader>
|
<DialogContent>
|
||||||
<DialogTitle class="flex justify-between items-center">{{ activeRole.name }}
|
<DialogHeader>
|
||||||
<Badge class="mr-5">
|
<DialogTitle class="flex justify-between items-center">{{ activeRole.name }}
|
||||||
{{ activeRole.color }}
|
<Badge class="mr-5">
|
||||||
</Badge>
|
{{ activeRole.color }}
|
||||||
</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 }}
|
|
||||||
</Badge>
|
</Badge>
|
||||||
</CardTitle>
|
</DialogTitle>
|
||||||
<CardDescription>{{ value.description }}</CardDescription>
|
<DialogDescription>
|
||||||
</CardHeader>
|
{{ activeRole.description }}
|
||||||
<!-- <CardContent>
|
</DialogDescription>
|
||||||
Card Content
|
</DialogHeader>
|
||||||
</CardContent> -->
|
<div class="mt-5">
|
||||||
<CardFooter>
|
<div class="flex justify-between items-center">
|
||||||
<p class="text-muted-foreground">{{ value.members.length }} members</p>
|
<p>Members with this role</p>
|
||||||
</CardFooter>
|
</div>
|
||||||
</Card>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
Reference in New Issue
Block a user