permissions refactoring
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { Form, Head } from '@inertiajs/vue3';
|
||||
import { Shield, Users } from 'lucide-vue-next';
|
||||
import { FolderPlus, Shield, Users } from 'lucide-vue-next';
|
||||
import UserManagementController from '@/actions/App/Http/Controllers/Admin/UserManagementController';
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
@@ -16,7 +16,7 @@ import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import { index as adminUsers } from '@/routes/admin/users';
|
||||
import type { AdminUsersPageProps, BreadcrumbItem } from '@/types';
|
||||
|
||||
defineProps<AdminUsersPageProps>();
|
||||
const props = defineProps<AdminUsersPageProps>();
|
||||
|
||||
const breadcrumbs: BreadcrumbItem[] = [
|
||||
{
|
||||
@@ -24,6 +24,9 @@ const breadcrumbs: BreadcrumbItem[] = [
|
||||
href: adminUsers(),
|
||||
},
|
||||
];
|
||||
|
||||
const hasPermission = (actorId: number, permission: string) =>
|
||||
(props.directPermissions[actorId] ?? []).includes(permission);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -34,7 +37,7 @@ const breadcrumbs: BreadcrumbItem[] = [
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<Heading
|
||||
title="User management"
|
||||
description="Manage application-wide admin access for existing users."
|
||||
description="Assign the global permissions that unlock platform-wide administration and project creation."
|
||||
/>
|
||||
|
||||
<Badge variant="outline" class="gap-1.5 px-3 py-1">
|
||||
@@ -54,8 +57,8 @@ const breadcrumbs: BreadcrumbItem[] = [
|
||||
<CardHeader class="border-b">
|
||||
<CardTitle>Users</CardTitle>
|
||||
<CardDescription>
|
||||
Promote trusted users to platform admins or remove admin
|
||||
access when it is no longer needed.
|
||||
Global permissions are assigned directly to users and
|
||||
apply across the entire application.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
@@ -68,16 +71,16 @@ const breadcrumbs: BreadcrumbItem[] = [
|
||||
</div>
|
||||
|
||||
<div v-else class="overflow-x-auto">
|
||||
<table
|
||||
class="divide-border min-w-full divide-y text-sm"
|
||||
>
|
||||
<table class="divide-border min-w-full divide-y text-sm">
|
||||
<thead
|
||||
class="bg-muted/40 text-muted-foreground text-left"
|
||||
>
|
||||
<tr>
|
||||
<th class="px-4 py-3 font-medium">User</th>
|
||||
<th class="px-4 py-3 font-medium">Email</th>
|
||||
<th class="px-4 py-3 font-medium">Role</th>
|
||||
<th class="px-4 py-3 font-medium">
|
||||
Current access
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-3 text-right font-medium"
|
||||
>
|
||||
@@ -89,12 +92,10 @@ const breadcrumbs: BreadcrumbItem[] = [
|
||||
<tr
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
class="bg-background"
|
||||
class="bg-background align-top"
|
||||
>
|
||||
<td class="px-4 py-4">
|
||||
<div
|
||||
class="text-foreground font-medium"
|
||||
>
|
||||
<div class="text-foreground font-medium">
|
||||
{{ user.name }}
|
||||
</div>
|
||||
</td>
|
||||
@@ -102,19 +103,43 @@ const breadcrumbs: BreadcrumbItem[] = [
|
||||
{{ user.email }}
|
||||
</td>
|
||||
<td class="px-4 py-4">
|
||||
<Badge
|
||||
:variant="
|
||||
user.is_admin
|
||||
? 'default'
|
||||
: 'secondary'
|
||||
"
|
||||
class="gap-1.5"
|
||||
>
|
||||
<Shield class="size-3.5" />
|
||||
{{
|
||||
user.is_admin ? 'Admin' : 'User'
|
||||
}}
|
||||
</Badge>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Badge
|
||||
v-if="
|
||||
hasPermission(
|
||||
user.id,
|
||||
'global:admin',
|
||||
)
|
||||
"
|
||||
class="gap-1.5"
|
||||
>
|
||||
<Shield class="size-3.5" />
|
||||
Global admin
|
||||
</Badge>
|
||||
<Badge
|
||||
v-if="
|
||||
hasPermission(
|
||||
user.id,
|
||||
'project:create',
|
||||
)
|
||||
"
|
||||
variant="secondary"
|
||||
class="gap-1.5"
|
||||
>
|
||||
<FolderPlus class="size-3.5" />
|
||||
Project create
|
||||
</Badge>
|
||||
<span
|
||||
v-if="
|
||||
(directPermissions[
|
||||
user.id
|
||||
] ?? []).length === 0
|
||||
"
|
||||
class="text-muted-foreground"
|
||||
>
|
||||
No direct global permissions
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4">
|
||||
<div class="flex justify-end">
|
||||
@@ -124,33 +149,40 @@ const breadcrumbs: BreadcrumbItem[] = [
|
||||
user.id,
|
||||
)
|
||||
"
|
||||
class="flex flex-wrap justify-end gap-3"
|
||||
v-slot="{ processing }"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="is_admin"
|
||||
:value="
|
||||
user.is_admin
|
||||
? '0'
|
||||
: '1'
|
||||
<label
|
||||
v-for="option in permissionOptions"
|
||||
:key="
|
||||
`${user.id}-${option.value}`
|
||||
"
|
||||
/>
|
||||
class="border-border inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="permissions[]"
|
||||
:value="option.value"
|
||||
:checked="
|
||||
hasPermission(
|
||||
user.id,
|
||||
option.value,
|
||||
)
|
||||
"
|
||||
class="border-input text-primary focus:ring-ring size-4 rounded"
|
||||
/>
|
||||
<span>{{ option.label }}</span>
|
||||
</label>
|
||||
|
||||
<div class="w-full sm:hidden" />
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
size="sm"
|
||||
:variant="
|
||||
user.is_admin
|
||||
? 'outline'
|
||||
: 'default'
|
||||
"
|
||||
variant="outline"
|
||||
:disabled="processing"
|
||||
>
|
||||
{{
|
||||
user.is_admin
|
||||
? 'Remove admin'
|
||||
: 'Make admin'
|
||||
}}
|
||||
Save
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user