mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
765 lines
22 KiB
HTML
765 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta name="description" content="Role Management">
|
|
<title>{{ $t('nav.roles') }}</title>
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-lg);
|
|
padding: var(--spacing-lg);
|
|
box-sizing: border-box;
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-md);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--text-color);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
background: var(--bg-color-secondary);
|
|
padding: 0 var(--spacing-md);
|
|
border-radius: var(--radius-full);
|
|
border: 1px solid var(--border-color);
|
|
min-width: 320px;
|
|
height: 40px;
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.search-box:focus-within {
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 85%);
|
|
}
|
|
|
|
.search-box input {
|
|
border: none;
|
|
background: transparent;
|
|
outline: none;
|
|
font-size: var(--font-size-md);
|
|
color: var(--text-color);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.table-container {
|
|
flex: 1;
|
|
overflow: auto;
|
|
background: var(--bg-color-secondary);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
text-align: left;
|
|
padding: var(--spacing-md);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
th {
|
|
background-color: var(--bg-color-tertiary);
|
|
font-weight: 600;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
tr:hover td {
|
|
background-color: var(--bg-color-tertiary);
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-active {
|
|
background-color: color-mix(in srgb, var(--color-success), transparent 85%);
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.status-inactive {
|
|
background-color: color-mix(in srgb, var(--text-color-disabled), transparent 85%);
|
|
color: var(--text-color-secondary);
|
|
}
|
|
|
|
/* Tab Styles */
|
|
.tab,
|
|
.tab-active {
|
|
padding: 12px 20px;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all var(--transition-base);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tab {
|
|
color: var(--text-color-secondary);
|
|
}
|
|
|
|
.tab:hover {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.tab-active {
|
|
color: var(--color-primary);
|
|
border-bottom-color: var(--color-primary);
|
|
}
|
|
|
|
/* Permission List */
|
|
.permission-list,
|
|
.user-list,
|
|
.available-permission-list,
|
|
.available-user-list {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.permission-item,
|
|
.user-item,
|
|
.available-permission-item,
|
|
.available-user-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
background: var(--bg-color-tertiary);
|
|
border-radius: var(--radius-md);
|
|
transition: background var(--transition-base);
|
|
}
|
|
|
|
.permission-item:hover,
|
|
.user-item:hover {
|
|
background: var(--border-color);
|
|
}
|
|
|
|
.permission-info,
|
|
.user-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.permission-id,
|
|
.user-name {
|
|
font-weight: 500;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.permission-scope,
|
|
.user-username {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-color-secondary);
|
|
}
|
|
|
|
.permission-level {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.level-badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.level-1 {
|
|
background: color-mix(in srgb, var(--color-info), transparent 85%);
|
|
color: var(--color-info);
|
|
}
|
|
|
|
.level-2 {
|
|
background: color-mix(in srgb, var(--color-success), transparent 85%);
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.level-4 {
|
|
background: color-mix(in srgb, var(--color-warning), transparent 85%);
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.level-6 {
|
|
background: color-mix(in srgb, var(--color-warning), transparent 70%);
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.level-7 {
|
|
background: color-mix(in srgb, var(--color-danger), transparent 85%);
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
/* User Avatar */
|
|
.user-avatar,
|
|
.user-avatar-sm {
|
|
border-radius: var(--radius-full);
|
|
object-fit: cover;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.user-avatar-sm {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
/* Empty State */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px;
|
|
color: var(--text-color-secondary);
|
|
gap: 12px;
|
|
}
|
|
|
|
.empty-state p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Checkbox styling */
|
|
input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
accent-color: var(--color-primary);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<i class="fas fa-user-tag" style="color: var(--color-primary);"></i>
|
|
{{ $t('nav.roles') }}
|
|
</div>
|
|
<div style="display: flex; gap: var(--spacing-md); align-items: center;">
|
|
<div class="search-box">
|
|
<i class="fas fa-search" style="color: var(--text-color-tertiary);"></i>
|
|
<input type="text" v:value="searchQuery" :placeholder="$t('role.search_placeholder')">
|
|
</div>
|
|
<v-btn color="primary" :click="openCreateModal">
|
|
<i class="fas fa-plus"></i>
|
|
{{ $t('common.create') }}
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>{{ $t('role.code') }}</th>
|
|
<th>{{ $t('role.name') }}</th>
|
|
<th>{{ $t('role.description') }}</th>
|
|
<th>System</th>
|
|
<th>Status</th>
|
|
<th>{{ $t('common.actions') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="r in filteredRoles">
|
|
<td>{{ r.id }}</td>
|
|
<td>{{ r.code }}</td>
|
|
<td>{{ r.name }}</td>
|
|
<td>{{ r.description }}</td>
|
|
<td>
|
|
<span class="status-badge" :class="r.is_system ? 'status-active' : 'status-inactive'">
|
|
{{ r.is_system ? 'Yes' : 'No' }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="status-badge" :class="r.status === 1 ? 'status-active' : 'status-inactive'">
|
|
{{ r.status === 1 ? 'Active' : 'Inactive' }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div style="display: flex; gap: 8px;">
|
|
<v-btn icon size="sm" variant="outline" :click="() => openDetailModal(r)" :title="$t('common.detail')">
|
|
<i class="fas fa-eye"></i>
|
|
</v-btn>
|
|
<v-btn icon size="sm" variant="outline" :click="() => openEditModal(r)" :title="$t('common.edit')">
|
|
<i class="fas fa-edit"></i>
|
|
</v-btn>
|
|
<v-btn icon size="sm" color="danger" variant="outline" :click="() => deleteRole(r)"
|
|
:title="$t('common.delete')" :disabled="r.is_system">
|
|
<i class="fas fa-trash"></i>
|
|
</v-btn>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Create/Edit Dialog -->
|
|
<v-dialog v:visible="showModal" :title="isEdit ? $t('role.edit') : $t('role.create')">
|
|
<form @submit.prevent="saveRole" style="display: grid; gap: 16px;">
|
|
<v-input :label="$t('role.code')" required v:value="formData.code" :disabled="isEdit"
|
|
placeholder="e.g. admin"></v-input>
|
|
<v-input :label="$t('role.name')" required v:value="formData.name" placeholder="e.g. Administrator"></v-input>
|
|
<v-input :label="$t('role.description')" v:value="formData.description" placeholder="Description..."></v-input>
|
|
</form>
|
|
<div vslot="footer">
|
|
<v-btn variant="outline" :click="closeModal">{{ $t('common.cancel') }}</v-btn>
|
|
<v-btn color="primary" :click="saveRole">
|
|
{{ isEdit ? $t('common.save') : $t('common.create') }}
|
|
</v-btn>
|
|
</div>
|
|
</v-dialog>
|
|
|
|
<!-- Role Detail Dialog - Permissions & Users -->
|
|
<v-dialog v:visible="showDetailModal" width="800px" :title="$t('role.detail') + ' - ' + (currentRole?.name || '')">
|
|
<div style="display: flex; flex-direction: column; gap: 20px;">
|
|
<!-- Tabs -->
|
|
<div style="display: flex; gap: 8px; border-bottom: 1px solid var(--border-color);">
|
|
<div :class="detailTab === 'permissions' ? 'tab-active' : 'tab'" @click="switchTab('permissions')">
|
|
<i class="fas fa-shield-alt"></i> {{ $t('role.permissions') }}
|
|
</div>
|
|
<div :class="detailTab === 'users' ? 'tab-active' : 'tab'" @click="switchTab('users')">
|
|
<i class="fas fa-users"></i> {{ $t('role.users') }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Permissions Tab -->
|
|
<div v-if="detailTab === 'permissions'" style="display: flex; flex-direction: column; gap: 16px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<span style="color: var(--text-color-secondary); font-size: var(--font-size-sm);">
|
|
{{ $t('role.permissions_desc') }}
|
|
</span>
|
|
<v-btn size="sm" color="primary" @click="showPermForm = true">
|
|
<i class="fas fa-plus"></i> {{ $t('role.add_permission') }}
|
|
</v-btn>
|
|
</div>
|
|
|
|
<!-- Add Permission Inline Form -->
|
|
<div v-if="showPermForm"
|
|
style="display: flex; gap: 8px; align-items: flex-end; padding: 12px; background: var(--bg-color-tertiary); border-radius: var(--radius-md); flex-wrap: wrap;">
|
|
<div style="display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px;">
|
|
<label style="font-size: 12px; color: var(--text-color-secondary);">Scope</label>
|
|
<v-input type="text" v:value="newPerm.scope" placeholder="vb" style="margin: 0;" />
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 4px; flex: 2; min-width: 180px;">
|
|
<label style="font-size: 12px; color: var(--text-color-secondary);">Permission ID</label>
|
|
<v-input type="text" v:value="newPerm.permission_id" placeholder="resource:instance:*" style="margin: 0;" />
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 4px; width: 100px;">
|
|
<label style="font-size: 12px; color: var(--text-color-secondary);">Level</label>
|
|
<v-input v:value="newPerm.level" type='select' :opts="{options: permission_levels}" style="margin: 0;">
|
|
</v-input>
|
|
</div>
|
|
<v-btn size="sm" color="primary" :click="addPermission" :disabled="permAdding">
|
|
{{ permAdding ? '...' : $t('common.save') }}
|
|
</v-btn>
|
|
<v-btn size="sm" variant="outline" @click="showPermForm = false">{{ $t('common.cancel') }}</v-btn>
|
|
</div>
|
|
|
|
<div class="permission-list">
|
|
<div v-for="p in rolePermissions" class="permission-item">
|
|
<div class="permission-info">
|
|
<div class="permission-id">{{ p.permission_id }}</div>
|
|
<div class="permission-scope">{{ p.scope }}</div>
|
|
</div>
|
|
<div class="permission-level">
|
|
<span :class="'level-badge level-' + p.level">{{ formatLevel(p.level) }}</span>
|
|
</div>
|
|
<v-btn icon size="xs" color="danger" variant="ghost" :click="() => removePermission(p)"
|
|
:title="$t('common.remove')">
|
|
<i class="fas fa-times"></i>
|
|
</v-btn>
|
|
</div>
|
|
<div v-if="rolePermissions.length === 0 && !showPermForm" class="empty-state">
|
|
<i class="fas fa-shield-alt" style="font-size: 48px; color: var(--text-color-disabled);"></i>
|
|
<p>{{ $t('role.no_permissions') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Tab -->
|
|
<div v-if="detailTab === 'users'" style="display: flex; flex-direction: column; gap: 16px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div class="search-box" style="min-width: 240px;">
|
|
<i class="fas fa-search" style="color: var(--text-color-tertiary);"></i>
|
|
<input type="text" v:value="userSearchQuery" :placeholder="$t('role.search_users')">
|
|
</div>
|
|
<v-btn size="sm" color="primary" :click="openUserSelector">
|
|
<i class="fas fa-plus"></i> {{ $t('role.add_user') }}
|
|
</v-btn>
|
|
</div>
|
|
<div class="user-list">
|
|
<div v-for="u in filteredRoleUsers" class="user-item">
|
|
<img :src="u.avatar || '/assets/default-avatar.png'" class="user-avatar" alt="">
|
|
<div class="user-info">
|
|
<div class="user-name">{{ u.nickname || u.username }}</div>
|
|
<div class="user-username">@{{ u.username }}</div>
|
|
</div>
|
|
<v-btn v-if="!currentRole?.is_system" icon size="xs" color="danger" variant="ghost"
|
|
:click="() => removeUserFromRole(u)" :title="$t('common.remove')">
|
|
<i class="fas fa-times"></i>
|
|
</v-btn>
|
|
</div>
|
|
<div v-if="filteredRoleUsers.length === 0" class="empty-state">
|
|
<i class="fas fa-users" style="font-size: 48px; color: var(--text-color-disabled);"></i>
|
|
<p>{{ $t('role.no_users') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div vslot="footer">
|
|
<v-btn variant="outline" :click="closeDetailModal">{{ $t('common.close') }}</v-btn>
|
|
</div>
|
|
</v-dialog>
|
|
|
|
<!-- User Selector Dialog -->
|
|
<v-dialog v:visible="showUserSelector" width="600px" :title="$t('role.select_users')">
|
|
<div style="display: flex; flex-direction: column; gap: 16px;">
|
|
<div class="search-box">
|
|
<i class="fas fa-search" style="color: var(--text-color-tertiary);"></i>
|
|
<input type="text" v:value="availableUserSearchQuery" @input="searchAvailableUsers"
|
|
:placeholder="$t('role.search_users_placeholder')">
|
|
</div>
|
|
<div class="available-user-list">
|
|
<div v-for="u in availableUsers" class="available-user-item">
|
|
<input type="checkbox" :checked="isUserSelected(u.id)" @change="toggleUser(u.id)">
|
|
<img :src="u.avatar || '/assets/default-avatar.png'" class="user-avatar-sm" alt="">
|
|
<div class="user-info">
|
|
<div class="user-name">{{ u.nickname || u.username }}</div>
|
|
<div class="user-username">@{{ u.username }}</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="availableUsers.length === 0" class="empty-state">
|
|
<p>{{ $t('role.no_available_users') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div vslot="footer">
|
|
<v-btn variant="outline" :click="closeUserSelector">{{ $t('common.cancel') }}</v-btn>
|
|
<v-btn color="primary" :click="saveRoleUsers">{{ $t('common.save') }}</v-btn>
|
|
</div>
|
|
</v-dialog>
|
|
</body>
|
|
<script setup>
|
|
// Basic data
|
|
roles = [];
|
|
searchQuery = "";
|
|
showModal = false;
|
|
isEdit = false;
|
|
formData = {
|
|
id: null,
|
|
code: "",
|
|
name: "",
|
|
description: ""
|
|
};
|
|
permission_levels = [
|
|
{value: 1, label: $t('permission.level.create') || 'Create'},
|
|
{value: 2, label: $t('permission.level.read') || 'Read'},
|
|
{value: 4, label: $t('permission.level.write') || 'Write'},
|
|
{value: 6, label: $t('permission.level.rw') || 'Read+Write'},
|
|
{value: 7, label: $t('permission.level.admin') || 'Admin'},
|
|
]
|
|
|
|
// Detail modal data
|
|
showDetailModal = false;
|
|
detailTab = "permissions";
|
|
currentRole = null;
|
|
|
|
// Permissions data
|
|
rolePermissions = [];
|
|
showPermForm = false;
|
|
permAdding = false;
|
|
newPerm = {scope: 'vb', permission_id: '', level: 7};
|
|
|
|
// Users data
|
|
roleUsers = [];
|
|
userSearchQuery = "";
|
|
showUserSelector = false;
|
|
availableUserSearchQuery = "";
|
|
availableUsers = [];
|
|
selectedUserIds = [];
|
|
|
|
loadRoles = async () => {
|
|
try {
|
|
const data = await $fetch('/api/roles');
|
|
roles = data.items || [];
|
|
} catch (e) {
|
|
$message.error(e.message);
|
|
}
|
|
};
|
|
|
|
filteredRoles = () => {
|
|
if (!searchQuery) return roles;
|
|
const query = searchQuery.toLowerCase();
|
|
return roles.filter(r =>
|
|
r.name.toLowerCase().includes(query) ||
|
|
r.code.toLowerCase().includes(query) ||
|
|
(r.description && r.description.toLowerCase().includes(query))
|
|
);
|
|
};
|
|
|
|
openCreateModal = () => {
|
|
isEdit = false;
|
|
formData = {id: null, code: "", name: "", description: ""};
|
|
showModal = true;
|
|
};
|
|
|
|
openEditModal = (r) => {
|
|
isEdit = true;
|
|
formData = {...r};
|
|
showModal = true;
|
|
};
|
|
|
|
closeModal = () => {
|
|
showModal = false;
|
|
};
|
|
|
|
saveRole = async () => {
|
|
if (!formData.code || !formData.name) {
|
|
$message.error($t('org.required_fields'));
|
|
return;
|
|
}
|
|
try {
|
|
if (isEdit) {
|
|
const payload = {
|
|
name: formData.name,
|
|
description: formData.description
|
|
};
|
|
await $fetch(`/api/roles/${formData.id}`, {method: 'PATCH', body: payload});
|
|
$message.success($t('org.updated'));
|
|
} else {
|
|
await $fetch('/api/roles', {method: 'POST', body: formData});
|
|
$message.success($t('org.created'));
|
|
}
|
|
closeModal();
|
|
loadRoles();
|
|
} catch (e) {
|
|
$message.error(e.message);
|
|
}
|
|
};
|
|
|
|
deleteRole = async (r) => {
|
|
try {
|
|
await $message.confirm($t('role.delete_confirm'));
|
|
await $fetch(`/api/roles/${r.id}`, {method: 'DELETE'});
|
|
$message.success($t('org.deleted'));
|
|
loadRoles();
|
|
} catch (e) {
|
|
// Cancelled
|
|
}
|
|
};
|
|
|
|
// Detail modal functions
|
|
openDetailModal = (r) => {
|
|
currentRole = r;
|
|
detailTab = "permissions";
|
|
showDetailModal = true;
|
|
loadRolePermissions();
|
|
loadRoleUsers();
|
|
};
|
|
|
|
closeDetailModal = () => {
|
|
showDetailModal = false;
|
|
currentRole = null;
|
|
rolePermissions = [];
|
|
roleUsers = [];
|
|
};
|
|
|
|
switchTab = (tab) => {
|
|
detailTab = tab;
|
|
};
|
|
|
|
// Permission functions
|
|
loadRolePermissions = async () => {
|
|
if (!currentRole) return;
|
|
try {
|
|
rolePermissions = await $fetch(`/api/roles/${currentRole.id}/permissions`) || [];
|
|
} catch (e) {
|
|
$message.error(e.message);
|
|
}
|
|
};
|
|
|
|
addPermission = async () => {
|
|
if (!currentRole || !newPerm.permission_id || !newPerm.scope) {
|
|
$message.error('Scope and Permission ID are required');
|
|
return;
|
|
}
|
|
permAdding = true;
|
|
try {
|
|
await $fetch(`/api/roles/${currentRole.id}/permissions`, {
|
|
method: 'PUT',
|
|
body: {
|
|
permissions: [{
|
|
scope: newPerm.scope,
|
|
permission_id: newPerm.permission_id,
|
|
level: parseInt(newPerm.level)
|
|
}]
|
|
}
|
|
});
|
|
$message.success($t('role.permissions_updated'));
|
|
showPermForm = false;
|
|
newPerm = {scope: 'vb', permission_id: '', level: 7};
|
|
loadRolePermissions();
|
|
} catch (e) {
|
|
$message.error(e.message);
|
|
} finally {
|
|
permAdding = false;
|
|
}
|
|
};
|
|
|
|
removePermission = async (p) => {
|
|
if (!currentRole) return;
|
|
try {
|
|
await $message.confirm($t('role.remove_permission_confirm'));
|
|
await $fetch(`/api/roles/${currentRole.id}/permissions`, {
|
|
method: 'PUT',
|
|
body: { remove: [p.id] }
|
|
});
|
|
$message.success($t('role.permission_removed'));
|
|
loadRolePermissions();
|
|
} catch (e) {
|
|
// Cancelled or error
|
|
}
|
|
};
|
|
|
|
formatLevel = (level) => {
|
|
const item = permission_levels.find(l => l.value === level);
|
|
return item ? item.label : 'Level ' + level;
|
|
};
|
|
|
|
// User functions
|
|
loadRoleUsers = async () => {
|
|
if (!currentRole) return;
|
|
try {
|
|
const data = await $fetch(`/api/roles/${currentRole.id}/users`, { params: { page: 1, page_size: 100 } });
|
|
roleUsers = data.items || [];
|
|
} catch (e) {
|
|
$message.error(e.message);
|
|
}
|
|
};
|
|
|
|
filteredRoleUsers = () => {
|
|
if (!userSearchQuery) return roleUsers;
|
|
const query = userSearchQuery.toLowerCase();
|
|
return roleUsers.filter(u =>
|
|
(u.nickname || u.username).toLowerCase().includes(query) ||
|
|
u.username.toLowerCase().includes(query)
|
|
);
|
|
};
|
|
|
|
openUserSelector = async () => {
|
|
selectedUserIds = roleUsers.map(u => u.id);
|
|
showUserSelector = true;
|
|
await searchAvailableUsers();
|
|
};
|
|
|
|
closeUserSelector = () => {
|
|
showUserSelector = false;
|
|
availableUserSearchQuery = "";
|
|
availableUsers = [];
|
|
selectedUserIds = [];
|
|
};
|
|
|
|
searchAvailableUsers = async () => {
|
|
try {
|
|
const json_ = await $fetch('/api/auth/users', { params: { keyword: availableUserSearchQuery, limit: 50 } });
|
|
availableUsers = json_?.items || [];
|
|
} catch (e) {
|
|
$message.error(e.message);
|
|
}
|
|
};
|
|
|
|
isUserSelected = (id) => {
|
|
return selectedUserIds.includes(id);
|
|
};
|
|
|
|
toggleUser = (id) => {
|
|
const idx = selectedUserIds.indexOf(id);
|
|
if (idx > -1) {
|
|
selectedUserIds.splice(idx, 1);
|
|
} else {
|
|
selectedUserIds.push(id);
|
|
}
|
|
// Trigger reactivity
|
|
selectedUserIds = [...selectedUserIds];
|
|
};
|
|
|
|
saveRoleUsers = async () => {
|
|
if (!currentRole) return;
|
|
try {
|
|
await $fetch(`/api/roles/${currentRole.id}/users`, {
|
|
method: 'PUT',
|
|
body: {user_ids: selectedUserIds}
|
|
});
|
|
$message.success($t('role.users_updated'));
|
|
closeUserSelector();
|
|
loadRoleUsers();
|
|
} catch (e) {
|
|
$message.error(e.message);
|
|
}
|
|
};
|
|
|
|
removeUserFromRole = async (u) => {
|
|
if (!currentRole || currentRole.is_system) return;
|
|
try {
|
|
await $message.confirm($t('role.remove_user_confirm'));
|
|
const newIds = roleUsers.filter(ru => ru.id !== u.id).map(ru => ru.id);
|
|
await $fetch(`/api/roles/${currentRole.id}/users`, {
|
|
method: 'PUT',
|
|
body: {user_ids: newIds}
|
|
});
|
|
$message.success($t('role.user_removed'));
|
|
loadRoleUsers();
|
|
} catch (e) {
|
|
// Cancelled or error
|
|
}
|
|
};
|
|
</script>
|
|
<script>
|
|
$data.loadRoles();
|
|
</script>
|
|
|
|
</html>
|