Fixed roles page console warnings
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user