did a whole ton of shit with calendars and roles system
This commit is contained in:
273
ui/src/pages/ManageRoles.vue
Normal file
273
ui/src/pages/ManageRoles.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<script setup lang="ts">
|
||||
import Button from '@/components/ui/button/Button.vue';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { onMounted, ref, computed, reactive, watch } from 'vue';
|
||||
import { addMemberToRole, createRole, deleteRole, getRoles, removeMemberFromRole, Role } from '@/api/roles';
|
||||
import Badge from '@/components/ui/badge/Badge.vue';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxAnchor,
|
||||
ComboboxEmpty,
|
||||
ComboboxGroup,
|
||||
ComboboxInput,
|
||||
ComboboxItem,
|
||||
ComboboxItemIndicator,
|
||||
ComboboxList,
|
||||
} from '@/components/ui/combobox'
|
||||
import { Plus, X } from 'lucide-vue-next';
|
||||
import Separator from '@/components/ui/separator/Separator.vue';
|
||||
import Input from '@/components/ui/input/Input.vue';
|
||||
import Label from '@/components/ui/label/Label.vue';
|
||||
import { getMembers, Member } from '@/api/member';
|
||||
|
||||
const roles = ref<Role[]>([])
|
||||
const activeRole = ref<Role | null>(null)
|
||||
const showDialog = ref(false);
|
||||
const showCreateGroupDialog = ref(false);
|
||||
const addingMember = ref(false);
|
||||
const memberToAdd = ref<Member | null>(null);
|
||||
|
||||
const allMembers = ref<Member[]>([])
|
||||
const availableMembers = computed(() => {
|
||||
if (!activeRole.value) return [];
|
||||
return allMembers.value.filter(
|
||||
member => !activeRole.value!.members.some(
|
||||
roleMember => roleMember.member_id === member.member_id
|
||||
)
|
||||
);
|
||||
})
|
||||
|
||||
type RoleDraft = {
|
||||
name: string
|
||||
description: string
|
||||
color: string // whatever you store, e.g. a hex string or a semantic tag
|
||||
}
|
||||
|
||||
const roleDraft = reactive<RoleDraft>({
|
||||
name: "",
|
||||
description: "",
|
||||
color: "", // e.g. "#FF8A00" or "orange"
|
||||
})
|
||||
|
||||
const draftErrors = reactive<{ name?: string; color?: string }>({})
|
||||
const creating = ref(false)
|
||||
|
||||
function resetRoleDraft() {
|
||||
roleDraft.name = ""
|
||||
roleDraft.description = ""
|
||||
roleDraft.color = ""
|
||||
draftErrors.name = undefined
|
||||
draftErrors.color = undefined
|
||||
}
|
||||
|
||||
watch(showCreateGroupDialog, (open) => {
|
||||
if (!open) resetRoleDraft()
|
||||
})
|
||||
|
||||
|
||||
function validateRoleDraft(): boolean {
|
||||
draftErrors.name = !roleDraft.name.trim() ? "Group name is required" : undefined
|
||||
// If color is required or must be hex, validate it here:
|
||||
if (!roleDraft.color.trim()) {
|
||||
draftErrors.color = "Color is required"
|
||||
} else if (!/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(roleDraft.color)) {
|
||||
draftErrors.color = "Use a valid hex color like #FF8A00"
|
||||
} else {
|
||||
draftErrors.color = undefined
|
||||
}
|
||||
|
||||
return !draftErrors.name && !draftErrors.color
|
||||
}
|
||||
|
||||
async function handleCreateGroup() {
|
||||
if (!validateRoleDraft()) return
|
||||
|
||||
try {
|
||||
creating.value = true
|
||||
|
||||
// If your createRole API already accepts a payload:
|
||||
await createRole(roleDraft.name, roleDraft.color, roleDraft.description)
|
||||
|
||||
// Refresh list, close, reset
|
||||
roles.value = await getRoles()
|
||||
showCreateGroupDialog.value = false
|
||||
resetRoleDraft()
|
||||
} catch (err) {
|
||||
console.error("Failed to create role:", err)
|
||||
// optionally surface a toast/error UI here
|
||||
} finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleAddMember() {
|
||||
//guard
|
||||
if (memberToAdd.value == null)
|
||||
return;
|
||||
|
||||
addMemberToRole(memberToAdd.value.member_id, activeRole.value.id);
|
||||
}
|
||||
|
||||
function handleRemoveMember(memberId: number) {
|
||||
removeMemberFromRole(memberId, activeRole.value.id);
|
||||
}
|
||||
|
||||
async function handleDeleteRole() {
|
||||
await deleteRole(activeRole.value.id);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
roles.value = await getRoles();
|
||||
allMembers.value = await getMembers();
|
||||
})
|
||||
</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 }}
|
||||
</Badge>
|
||||
</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>
|
||||
</template>
|
||||
Reference in New Issue
Block a user