Add multi-role permission system with a Role Management admin page
Users can now hold multiple roles, each with its own editable set of create/edit/delete-style permissions across assets, shots, tasks, task assignment, review approve/retake, submissions, uploads, and notes (including internal vs. client note visibility). The 4 existing roles (coordinator/director/artist/developer) are migrated into the new system as system roles, seeded to reproduce today's actual behavior exactly; admins can create custom roles (e.g. "Reviewer", "Outsourcing") via the new Role Management page and assign multiple roles to a user via a new "Manage Roles" action on the Team page. Backend: - New Role/Permission models and role_permissions/user_roles tables, plus a one-off, idempotent seed/backfill migration script. - New require_permission()/user_has_permission() dependency, wired into the actual mutation endpoints across shots/assets/tasks/reviews, always preserving existing ownership- and self-service-based access (e.g. artists editing their own task status, own notes, own uploads, own submissions) as an unconditional fallback alongside the new permission checks - nothing that worked before now requires a role. - New endpoints: PUT/DELETE on task submissions (wires up soft-deletion columns that existed on the model but were never exposed), plus full role CRUD and per-user role assignment. - Along the way: fixed newly-created users not being linked to their matching system role (silently leaving them with zero permissions), and unified an inconsistency between the single vs. bulk task status endpoints that allowed different roles to bulk-update status. Frontend: - Role Management page with a grouped, human-readable permission editor (icons, plain-language action labels, per-resource select-all, live selected count) replacing an earlier dense matrix prototype. - hasPermission() added to the existing usePermission() composable without touching its current isAdmin/isCoordinatorOrAdmin consumers. - Note composer gets an Internal/Client toggle; submissions gain inline edit/delete actions gated the same ownership-or-permission way as notes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<Dialog :open="open" @update:open="$emit('update:open', $event)">
|
||||
<DialogContent class="sm:max-w-2xl max-h-[85vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ role ? 'Edit Role' : 'Create Role' }}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{{ role?.is_system
|
||||
? 'System role permissions are editable, but the name and description cannot be changed.'
|
||||
: 'Define a role and the permissions it grants.' }}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="flex-1 min-h-0 flex flex-col gap-4">
|
||||
<div class="grid grid-cols-2 gap-4 flex-shrink-0">
|
||||
<div class="space-y-2">
|
||||
<Label for="role_name">Name</Label>
|
||||
<Input
|
||||
id="role_name"
|
||||
v-model="formData.name"
|
||||
placeholder="e.g. Reviewer"
|
||||
required
|
||||
:disabled="role?.is_system"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="role_description">Description</Label>
|
||||
<Input
|
||||
id="role_description"
|
||||
v-model="formData.description"
|
||||
placeholder="What this role is for"
|
||||
:disabled="role?.is_system"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-h-0 flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between flex-shrink-0">
|
||||
<Label>Permissions</Label>
|
||||
<span class="text-xs text-muted-foreground">{{ selectedPermissionIds.size }} of {{ permissions.length }} selected</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-h-0 overflow-y-auto rounded-md border p-3 space-y-4">
|
||||
<div v-for="group in permissionGroups" :key="group.title" class="space-y-2">
|
||||
<h4 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{{ group.title }}</h4>
|
||||
<div class="space-y-2">
|
||||
<div v-for="resource in group.resources" :key="resource" class="rounded-md border bg-muted/30 p-2.5">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2 text-sm font-medium capitalize">
|
||||
<component :is="resourceIcon(resource)" class="h-4 w-4 text-muted-foreground" />
|
||||
{{ resource }}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-muted-foreground hover:text-foreground hover:underline"
|
||||
@click="toggleAllForResource(resource)"
|
||||
>
|
||||
{{ allSelectedForResource(resource) ? 'Clear' : 'Select all' }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1.5">
|
||||
<label
|
||||
v-for="perm in permissionsForResource(resource)"
|
||||
:key="perm.id"
|
||||
class="flex items-center gap-1.5 text-sm cursor-pointer"
|
||||
:title="perm.description || undefined"
|
||||
>
|
||||
<Checkbox
|
||||
:model-value="selectedPermissionIds.has(perm.id)"
|
||||
@update:model-value="(val) => togglePermission(perm.id, !!val)"
|
||||
/>
|
||||
{{ actionLabel(perm.action) }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="formError" class="text-sm text-destructive flex-shrink-0">{{ formError }}</p>
|
||||
|
||||
<DialogFooter class="flex-shrink-0">
|
||||
<Button type="button" variant="outline" @click="$emit('update:open', false)">Cancel</Button>
|
||||
<Button type="submit" :disabled="saving">{{ saving ? 'Saving...' : 'Save' }}</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import {
|
||||
Package, Camera, ListTodo, UserCheck, CheckCircle2, UploadCloud, Paperclip, MessageSquare, Shield
|
||||
} from 'lucide-vue-next'
|
||||
import {
|
||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import type { Role, Permission } from '@/services/role'
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
role: Role | null
|
||||
permissions: Permission[]
|
||||
saving?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<{
|
||||
'update:open': [value: boolean]
|
||||
saved: [data: { name?: string; description?: string; permission_ids: number[] }]
|
||||
}>()
|
||||
|
||||
const formData = ref({ name: '', description: '' })
|
||||
const selectedPermissionIds = ref<Set<number>>(new Set())
|
||||
const formError = ref('')
|
||||
|
||||
// Resources grouped into scannable sections, in a fixed, deliberate order
|
||||
// (not alphabetical) so related concepts sit together.
|
||||
const RESOURCE_GROUPS: { title: string; resources: string[] }[] = [
|
||||
{ title: 'Production', resources: ['asset', 'shot', 'task'] },
|
||||
{ title: 'Task workflow', resources: ['assignment', 'submission', 'upload'] },
|
||||
{ title: 'Review', resources: ['review'] },
|
||||
{ title: 'Notes', resources: ['note'] },
|
||||
]
|
||||
|
||||
const RESOURCE_ICONS: Record<string, any> = {
|
||||
asset: Package,
|
||||
shot: Camera,
|
||||
task: ListTodo,
|
||||
assignment: UserCheck,
|
||||
submission: UploadCloud,
|
||||
upload: Paperclip,
|
||||
review: CheckCircle2,
|
||||
note: MessageSquare,
|
||||
}
|
||||
|
||||
const ACTION_LABELS: Record<string, string> = {
|
||||
create: 'Create',
|
||||
edit: 'Edit',
|
||||
delete: 'Delete',
|
||||
publish: 'Approve',
|
||||
retake: 'Request Retake',
|
||||
view_internal: 'View Internal',
|
||||
view_client: 'View Client',
|
||||
change_status: 'Change Status',
|
||||
}
|
||||
|
||||
function resourceIcon(resource: string) {
|
||||
return RESOURCE_ICONS[resource] ?? Shield
|
||||
}
|
||||
|
||||
function actionLabel(action: string): string {
|
||||
return ACTION_LABELS[action] ?? action
|
||||
}
|
||||
|
||||
// Only show groups/resources that actually have permissions in the catalog,
|
||||
// and fall back to a catch-all group for any future resource not yet
|
||||
// assigned to a section above (so nothing silently disappears from the UI).
|
||||
const permissionGroups = computed(() => {
|
||||
const knownResources = new Set(RESOURCE_GROUPS.flatMap(g => g.resources))
|
||||
const groups = RESOURCE_GROUPS
|
||||
.map(g => ({ title: g.title, resources: g.resources.filter(r => permissionsForResource(r).length > 0) }))
|
||||
.filter(g => g.resources.length > 0)
|
||||
|
||||
const otherResources = [...new Set(props.permissions.map(p => p.resource))].filter(r => !knownResources.has(r))
|
||||
if (otherResources.length > 0) {
|
||||
groups.push({ title: 'Other', resources: otherResources })
|
||||
}
|
||||
return groups
|
||||
})
|
||||
|
||||
function permissionsForResource(resource: string): Permission[] {
|
||||
return props.permissions.filter(p => p.resource === resource)
|
||||
}
|
||||
|
||||
function allSelectedForResource(resource: string): boolean {
|
||||
const perms = permissionsForResource(resource)
|
||||
return perms.length > 0 && perms.every(p => selectedPermissionIds.value.has(p.id))
|
||||
}
|
||||
|
||||
function toggleAllForResource(resource: string) {
|
||||
const perms = permissionsForResource(resource)
|
||||
const shouldSelect = !allSelectedForResource(resource)
|
||||
for (const perm of perms) {
|
||||
if (shouldSelect) selectedPermissionIds.value.add(perm.id)
|
||||
else selectedPermissionIds.value.delete(perm.id)
|
||||
}
|
||||
}
|
||||
|
||||
function togglePermission(id: number, checked: boolean) {
|
||||
if (checked) selectedPermissionIds.value.add(id)
|
||||
else selectedPermissionIds.value.delete(id)
|
||||
}
|
||||
|
||||
watch(() => props.open, (isOpen) => {
|
||||
if (!isOpen) return
|
||||
formError.value = ''
|
||||
formData.value = {
|
||||
name: props.role?.name ?? '',
|
||||
description: props.role?.description ?? ''
|
||||
}
|
||||
selectedPermissionIds.value = new Set(props.role?.permissions.map(p => p.id) ?? [])
|
||||
})
|
||||
|
||||
function handleSubmit() {
|
||||
formError.value = ''
|
||||
if (!props.role && !formData.value.name.trim()) {
|
||||
formError.value = 'Name is required'
|
||||
return
|
||||
}
|
||||
|
||||
const payload = props.role?.is_system
|
||||
? { permission_ids: [...selectedPermissionIds.value] }
|
||||
: {
|
||||
name: formData.value.name,
|
||||
description: formData.value.description || undefined,
|
||||
permission_ids: [...selectedPermissionIds.value]
|
||||
}
|
||||
emit('saved', payload)
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user