Enhance RBAC user management UI and fix permission checks
- Add role management to "By User" tab - Show all users with roles and/or direct permissions - Add ability to assign/revoke roles from users - Display role chips as clickable and removable - Add "Assign Role" button for each user - Fix account_id validation error in permission granting - Extract account_id string from Quasar q-select object - Apply fix to grantPermission, bulkGrantPermissions, and addRolePermission - Fix role-based permission checking for expense submission - Update get_user_permissions_with_inheritance() to include role permissions - Ensures users with role-based permissions can submit expenses - Improve Vue reactivity for role details dialog - Use spread operator to create fresh arrays - Add $nextTick() before showing dialog 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
52c6c3f8f1
commit
f2df2f543b
4 changed files with 1207 additions and 17 deletions
17
crud.py
17
crud.py
|
|
@ -1188,6 +1188,7 @@ async def get_user_permissions_with_inheritance(
|
|||
) -> list[tuple["AccountPermission", Optional[str]]]:
|
||||
"""
|
||||
Get all permissions for a user on an account, including inherited permissions from parent accounts.
|
||||
Includes both direct permissions AND role-based permissions.
|
||||
Returns list of tuples: (permission, parent_account_name or None)
|
||||
|
||||
Example:
|
||||
|
|
@ -1196,13 +1197,23 @@ async def get_user_permissions_with_inheritance(
|
|||
"""
|
||||
from .models import AccountPermission, PermissionType
|
||||
|
||||
# Get all user's permissions of this type
|
||||
user_permissions = await get_user_permissions(user_id, permission_type)
|
||||
# Get direct user permissions of this type
|
||||
direct_permissions = await get_user_permissions(user_id, permission_type)
|
||||
|
||||
# Get role-based permissions of this type
|
||||
role_permissions_list = await get_user_permissions_from_roles(user_id)
|
||||
role_perms = []
|
||||
for role, perms in role_permissions_list:
|
||||
# Filter for the specific permission type
|
||||
role_perms.extend([p for p in perms if p.permission_type == permission_type])
|
||||
|
||||
# Combine direct and role-based permissions
|
||||
all_permissions = list(direct_permissions) + role_perms
|
||||
|
||||
# Find which permissions apply to this account (direct or inherited)
|
||||
applicable_permissions = []
|
||||
|
||||
for perm in user_permissions:
|
||||
for perm in all_permissions:
|
||||
# Get the account for this permission
|
||||
account = await get_account(perm.account_id)
|
||||
if not account:
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ const mapJournalEntry = obj => {
|
|||
}
|
||||
|
||||
window.app = Vue.createApp({
|
||||
el: '#vue',
|
||||
mixins: [windowMixin],
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
window.app = Vue.createApp({
|
||||
el: '#vue',
|
||||
mixins: [windowMixin],
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -59,7 +58,42 @@ window.app = Vue.createApp({
|
|||
label: 'Manage',
|
||||
description: 'Full account management'
|
||||
}
|
||||
]
|
||||
],
|
||||
// RBAC-related data
|
||||
roles: [],
|
||||
selectedRole: null,
|
||||
roleToDelete: null,
|
||||
editingRole: false,
|
||||
showCreateRoleDialog: false,
|
||||
showViewRoleDialog: false,
|
||||
showDeleteRoleDialog: false,
|
||||
showAssignRoleDialog: false,
|
||||
showRevokeUserRoleDialog: false,
|
||||
savingRole: false,
|
||||
deletingRole: false,
|
||||
assigningRole: false,
|
||||
revokingUserRole: false,
|
||||
userRoleToRevoke: null,
|
||||
roleForm: {
|
||||
name: '',
|
||||
description: '',
|
||||
is_default: false
|
||||
},
|
||||
assignRoleForm: {
|
||||
user_id: '',
|
||||
role_id: '',
|
||||
expires_at: '',
|
||||
notes: ''
|
||||
},
|
||||
roleUsersForView: [],
|
||||
rolePermissionsForView: [],
|
||||
userRoles: new Map(), // Map of user_id -> array of roles
|
||||
showAddRolePermissionDialog: false,
|
||||
rolePermissionForm: {
|
||||
account_id: '',
|
||||
permission_type: '',
|
||||
notes: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -109,6 +143,23 @@ window.app = Vue.createApp({
|
|||
return grouped
|
||||
},
|
||||
|
||||
// Get all unique user IDs from both direct permissions and role assignments
|
||||
allUserIds() {
|
||||
const userIds = new Set()
|
||||
|
||||
// Add users with direct permissions
|
||||
for (const userId of this.permissionsByUser.keys()) {
|
||||
userIds.add(userId)
|
||||
}
|
||||
|
||||
// Add users with role assignments
|
||||
for (const userId of this.userRoles.keys()) {
|
||||
userIds.add(userId)
|
||||
}
|
||||
|
||||
return Array.from(userIds).sort()
|
||||
},
|
||||
|
||||
permissionsByAccount() {
|
||||
const grouped = new Map()
|
||||
for (const perm of this.permissions) {
|
||||
|
|
@ -118,6 +169,25 @@ window.app = Vue.createApp({
|
|||
grouped.get(perm.account_id).push(perm)
|
||||
}
|
||||
return grouped
|
||||
},
|
||||
|
||||
roleOptions() {
|
||||
return this.roles.map(role => ({
|
||||
value: role.id,
|
||||
label: role.name,
|
||||
description: role.description,
|
||||
is_default: role.is_default
|
||||
}))
|
||||
},
|
||||
|
||||
accountOptions() {
|
||||
return this.accounts.map(account => ({
|
||||
value: account.id,
|
||||
label: account.name,
|
||||
name: account.name,
|
||||
description: account.account_type,
|
||||
is_virtual: account.is_virtual
|
||||
}))
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -227,9 +297,14 @@ window.app = Vue.createApp({
|
|||
|
||||
this.granting = true
|
||||
try {
|
||||
// Extract account_id - handle both string and object cases
|
||||
const accountId = typeof this.grantForm.account_id === 'object'
|
||||
? (this.grantForm.account_id.value || this.grantForm.account_id.id)
|
||||
: this.grantForm.account_id
|
||||
|
||||
const payload = {
|
||||
user_id: this.grantForm.user_id,
|
||||
account_id: this.grantForm.account_id,
|
||||
account_id: accountId,
|
||||
permission_type: this.grantForm.permission_type
|
||||
}
|
||||
|
||||
|
|
@ -332,9 +407,14 @@ window.app = Vue.createApp({
|
|||
this.bulkGrantResults = null
|
||||
|
||||
try {
|
||||
// Extract account_id - handle both string and object cases
|
||||
const accountId = typeof this.bulkGrantForm.account_id === 'object'
|
||||
? (this.bulkGrantForm.account_id.value || this.bulkGrantForm.account_id.id)
|
||||
: this.bulkGrantForm.account_id
|
||||
|
||||
const payload = {
|
||||
user_ids: this.bulkGrantForm.user_ids,
|
||||
account_id: this.bulkGrantForm.account_id,
|
||||
account_id: accountId,
|
||||
permission_type: this.bulkGrantForm.permission_type
|
||||
}
|
||||
|
||||
|
|
@ -563,6 +643,460 @@ window.app = Vue.createApp({
|
|||
user_id: '',
|
||||
notes: ''
|
||||
}
|
||||
},
|
||||
|
||||
// ===== RBAC ROLE MANAGEMENT METHODS =====
|
||||
|
||||
async loadRoles() {
|
||||
if (!this.isSuperUser) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await LNbits.api.request(
|
||||
'GET',
|
||||
'/castle/api/v1/admin/roles',
|
||||
this.g.user.wallets[0].adminkey
|
||||
)
|
||||
this.roles = response.data || []
|
||||
} catch (error) {
|
||||
console.error('Failed to load roles:', error)
|
||||
this.$q.notify({
|
||||
type: 'negative',
|
||||
message: 'Failed to load roles',
|
||||
caption: error.message || 'Unknown error',
|
||||
timeout: 5000
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
async viewRole(role) {
|
||||
this.selectedRole = role
|
||||
this.roleUsersForView = []
|
||||
this.rolePermissionsForView = []
|
||||
|
||||
try {
|
||||
const response = await LNbits.api.request(
|
||||
'GET',
|
||||
`/castle/api/v1/admin/roles/${role.id}`,
|
||||
this.g.user.wallets[0].adminkey
|
||||
)
|
||||
|
||||
// Create fresh arrays to ensure Vue reactivity works properly
|
||||
this.rolePermissionsForView = [...(response.data.permissions || [])]
|
||||
this.roleUsersForView = [...(response.data.users || [])]
|
||||
|
||||
// Wait for Vue to update the DOM before showing dialog
|
||||
await this.$nextTick()
|
||||
this.showViewRoleDialog = true
|
||||
} catch (error) {
|
||||
console.error('Failed to load role details:', error)
|
||||
this.$q.notify({
|
||||
type: 'negative',
|
||||
message: 'Failed to load role details',
|
||||
caption: error.message || 'Unknown error',
|
||||
timeout: 5000
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
editRole(role) {
|
||||
this.editingRole = true
|
||||
this.selectedRole = role
|
||||
this.roleForm = {
|
||||
name: role.name,
|
||||
description: role.description || '',
|
||||
is_default: role.is_default || false
|
||||
}
|
||||
this.showCreateRoleDialog = true
|
||||
},
|
||||
|
||||
async saveRole() {
|
||||
if (!this.roleForm.name) {
|
||||
this.$q.notify({
|
||||
type: 'warning',
|
||||
message: 'Please enter a role name',
|
||||
timeout: 3000
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.savingRole = true
|
||||
try {
|
||||
const payload = {
|
||||
name: this.roleForm.name,
|
||||
description: this.roleForm.description || null,
|
||||
is_default: this.roleForm.is_default || false
|
||||
}
|
||||
|
||||
if (this.editingRole) {
|
||||
// Update existing role
|
||||
await LNbits.api.request(
|
||||
'PUT',
|
||||
`/castle/api/v1/admin/roles/${this.selectedRole.id}`,
|
||||
this.g.user.wallets[0].adminkey,
|
||||
payload
|
||||
)
|
||||
|
||||
this.$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Role updated successfully',
|
||||
timeout: 3000
|
||||
})
|
||||
} else {
|
||||
// Create new role
|
||||
await LNbits.api.request(
|
||||
'POST',
|
||||
'/castle/api/v1/admin/roles',
|
||||
this.g.user.wallets[0].adminkey,
|
||||
payload
|
||||
)
|
||||
|
||||
this.$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Role created successfully',
|
||||
timeout: 3000
|
||||
})
|
||||
}
|
||||
|
||||
this.closeRoleDialog()
|
||||
await this.loadRoles()
|
||||
} catch (error) {
|
||||
console.error('Failed to save role:', error)
|
||||
this.$q.notify({
|
||||
type: 'negative',
|
||||
message: `Failed to ${this.editingRole ? 'update' : 'create'} role`,
|
||||
caption: error.message || 'Unknown error',
|
||||
timeout: 5000
|
||||
})
|
||||
} finally {
|
||||
this.savingRole = false
|
||||
}
|
||||
},
|
||||
|
||||
confirmDeleteRole(role) {
|
||||
this.roleToDelete = role
|
||||
this.showDeleteRoleDialog = true
|
||||
},
|
||||
|
||||
async deleteRole() {
|
||||
if (!this.roleToDelete) return
|
||||
|
||||
this.deletingRole = true
|
||||
try {
|
||||
await LNbits.api.request(
|
||||
'DELETE',
|
||||
`/castle/api/v1/admin/roles/${this.roleToDelete.id}`,
|
||||
this.g.user.wallets[0].adminkey
|
||||
)
|
||||
|
||||
this.$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Role deleted successfully',
|
||||
timeout: 3000
|
||||
})
|
||||
|
||||
this.closeDeleteRoleDialog()
|
||||
await this.loadRoles()
|
||||
} catch (error) {
|
||||
console.error('Failed to delete role:', error)
|
||||
this.$q.notify({
|
||||
type: 'negative',
|
||||
message: 'Failed to delete role',
|
||||
caption: error.message || 'Unknown error',
|
||||
timeout: 5000
|
||||
})
|
||||
} finally {
|
||||
this.deletingRole = false
|
||||
}
|
||||
},
|
||||
|
||||
closeRoleDialog() {
|
||||
this.showCreateRoleDialog = false
|
||||
this.editingRole = false
|
||||
this.selectedRole = null
|
||||
this.resetRoleForm()
|
||||
},
|
||||
|
||||
closeViewRoleDialog() {
|
||||
this.showViewRoleDialog = false
|
||||
this.selectedRole = null
|
||||
this.roleUsersForView = []
|
||||
this.rolePermissionsForView = []
|
||||
},
|
||||
|
||||
closeDeleteRoleDialog() {
|
||||
this.showDeleteRoleDialog = false
|
||||
this.roleToDelete = null
|
||||
},
|
||||
|
||||
closeAssignRoleDialog() {
|
||||
this.showAssignRoleDialog = false
|
||||
this.resetAssignRoleForm()
|
||||
},
|
||||
|
||||
async assignRole() {
|
||||
if (!this.assignRoleForm.user_id || !this.assignRoleForm.role_id) {
|
||||
this.$q.notify({
|
||||
type: 'warning',
|
||||
message: 'Please select both a user and a role',
|
||||
timeout: 3000
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.assigningRole = true
|
||||
try {
|
||||
const payload = {
|
||||
user_id: this.assignRoleForm.user_id,
|
||||
role_id: this.assignRoleForm.role_id
|
||||
}
|
||||
|
||||
if (this.assignRoleForm.notes) {
|
||||
payload.notes = this.assignRoleForm.notes
|
||||
}
|
||||
|
||||
if (this.assignRoleForm.expires_at) {
|
||||
payload.expires_at = new Date(this.assignRoleForm.expires_at).toISOString()
|
||||
}
|
||||
|
||||
await LNbits.api.request(
|
||||
'POST',
|
||||
'/castle/api/v1/admin/user-roles',
|
||||
this.g.user.wallets[0].adminkey,
|
||||
payload
|
||||
)
|
||||
|
||||
this.$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Role assigned successfully',
|
||||
timeout: 3000
|
||||
})
|
||||
|
||||
this.closeAssignRoleDialog()
|
||||
await this.loadRoles()
|
||||
} catch (error) {
|
||||
console.error('Failed to assign role:', error)
|
||||
this.$q.notify({
|
||||
type: 'negative',
|
||||
message: 'Failed to assign role',
|
||||
caption: error.message || 'Unknown error',
|
||||
timeout: 5000
|
||||
})
|
||||
} finally {
|
||||
this.assigningRole = false
|
||||
}
|
||||
},
|
||||
|
||||
resetRoleForm() {
|
||||
this.roleForm = {
|
||||
name: '',
|
||||
description: '',
|
||||
is_default: false
|
||||
}
|
||||
},
|
||||
|
||||
resetAssignRoleForm() {
|
||||
this.assignRoleForm = {
|
||||
user_id: '',
|
||||
role_id: '',
|
||||
expires_at: '',
|
||||
notes: ''
|
||||
}
|
||||
},
|
||||
|
||||
// Get roles for a specific user
|
||||
getUserRoles(userId) {
|
||||
const userRoleAssignments = this.userRoles.get(userId) || []
|
||||
// Map role assignments to role objects
|
||||
return userRoleAssignments
|
||||
.map(ur => this.roles.find(r => r.id === ur.role_id))
|
||||
.filter(r => r) // Filter out null/undefined
|
||||
},
|
||||
|
||||
// Load all user role assignments
|
||||
async loadUserRoles() {
|
||||
if (!this.isSuperUser) return
|
||||
try {
|
||||
const response = await LNbits.api.request(
|
||||
'GET',
|
||||
'/castle/api/v1/admin/users/roles',
|
||||
this.g.user.wallets[0].adminkey
|
||||
)
|
||||
|
||||
// Group by user_id
|
||||
this.userRoles.clear()
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
response.data.forEach(userRole => {
|
||||
if (!this.userRoles.has(userRole.user_id)) {
|
||||
this.userRoles.set(userRole.user_id, [])
|
||||
}
|
||||
this.userRoles.get(userRole.user_id).push(userRole)
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load user roles:', error)
|
||||
this.$q.notify({
|
||||
type: 'negative',
|
||||
message: 'Failed to load user role assignments',
|
||||
caption: error.message || 'Unknown error',
|
||||
timeout: 5000
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// Get user role assignments (returns UserRole objects, not Role objects)
|
||||
getUserRoleAssignments(userId) {
|
||||
return this.userRoles.get(userId) || []
|
||||
},
|
||||
|
||||
// Get role name by ID
|
||||
getRoleName(roleId) {
|
||||
const role = this.roles.find(r => r.id === roleId)
|
||||
return role ? role.name : 'Unknown Role'
|
||||
},
|
||||
|
||||
// View role by ID
|
||||
viewRoleById(roleId) {
|
||||
const role = this.roles.find(r => r.id === roleId)
|
||||
if (role) {
|
||||
this.viewRole(role)
|
||||
}
|
||||
},
|
||||
|
||||
// Show assign role dialog with user pre-selected
|
||||
showAssignRoleForUser(userId) {
|
||||
this.assignRoleForm.user_id = userId
|
||||
this.showAssignRoleDialog = true
|
||||
},
|
||||
|
||||
// Show confirmation dialog for revoking user role
|
||||
confirmRevokeUserRole(userRole) {
|
||||
this.userRoleToRevoke = userRole
|
||||
this.showRevokeUserRoleDialog = true
|
||||
},
|
||||
|
||||
// Revoke user role
|
||||
async revokeUserRole() {
|
||||
if (!this.userRoleToRevoke) return
|
||||
|
||||
this.revokingUserRole = true
|
||||
try {
|
||||
await LNbits.api.request(
|
||||
'DELETE',
|
||||
`/castle/api/v1/admin/user-roles/${this.userRoleToRevoke.id}`,
|
||||
this.g.user.wallets[0].adminkey
|
||||
)
|
||||
|
||||
this.$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Role revoked successfully',
|
||||
timeout: 3000
|
||||
})
|
||||
|
||||
// Reload data
|
||||
await this.loadUserRoles()
|
||||
await this.loadRoles()
|
||||
|
||||
// Close dialog
|
||||
this.showRevokeUserRoleDialog = false
|
||||
this.userRoleToRevoke = null
|
||||
} catch (error) {
|
||||
console.error('Failed to revoke role:', error)
|
||||
this.$q.notify({
|
||||
type: 'negative',
|
||||
message: 'Failed to revoke role',
|
||||
caption: error.message || 'Unknown error',
|
||||
timeout: 5000
|
||||
})
|
||||
} finally {
|
||||
this.revokingUserRole = false
|
||||
}
|
||||
},
|
||||
|
||||
// Add permission to role
|
||||
async addRolePermission() {
|
||||
if (!this.selectedRole || !this.rolePermissionForm.account_id || !this.rolePermissionForm.permission_type) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
// Extract account_id - handle both string and object cases
|
||||
const accountId = typeof this.rolePermissionForm.account_id === 'object'
|
||||
? (this.rolePermissionForm.account_id.value || this.rolePermissionForm.account_id.id)
|
||||
: this.rolePermissionForm.account_id
|
||||
|
||||
const payload = {
|
||||
role_id: this.selectedRole.id,
|
||||
account_id: accountId,
|
||||
permission_type: this.rolePermissionForm.permission_type,
|
||||
notes: this.rolePermissionForm.notes || null
|
||||
}
|
||||
await LNbits.api.request(
|
||||
'POST',
|
||||
`/castle/api/v1/admin/roles/${this.selectedRole.id}/permissions`,
|
||||
this.g.user.wallets[0].adminkey,
|
||||
payload
|
||||
)
|
||||
this.closeAddRolePermissionDialog()
|
||||
// Reload role permissions
|
||||
await this.viewRole(this.selectedRole)
|
||||
this.$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Permission added to role successfully',
|
||||
timeout: 3000
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Failed to add permission to role:', error)
|
||||
this.$q.notify({
|
||||
type: 'negative',
|
||||
message: 'Failed to add permission to role',
|
||||
caption: error.message || 'Unknown error',
|
||||
timeout: 5000
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// Delete role permission
|
||||
async deleteRolePermission(permissionId) {
|
||||
this.$q.dialog({
|
||||
title: 'Confirm',
|
||||
message: 'Are you sure you want to remove this permission from the role?',
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(async () => {
|
||||
try {
|
||||
await LNbits.api.request(
|
||||
'DELETE',
|
||||
`/castle/api/v1/admin/roles/${this.selectedRole.id}/permissions/${permissionId}`,
|
||||
this.g.user.wallets[0].adminkey
|
||||
)
|
||||
// Reload role permissions
|
||||
await this.viewRole(this.selectedRole)
|
||||
this.$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Permission removed from role',
|
||||
timeout: 3000
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Failed to delete role permission:', error)
|
||||
this.$q.notify({
|
||||
type: 'negative',
|
||||
message: 'Failed to remove permission',
|
||||
caption: error.message || 'Unknown error',
|
||||
timeout: 5000
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// Close add role permission dialog
|
||||
closeAddRolePermissionDialog() {
|
||||
this.showAddRolePermissionDialog = false
|
||||
this.rolePermissionForm = {
|
||||
account_id: '',
|
||||
permission_type: '',
|
||||
notes: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -576,7 +1110,9 @@ window.app = Vue.createApp({
|
|||
await Promise.all([
|
||||
this.loadPermissions(),
|
||||
this.loadUsers(),
|
||||
this.loadEquityEligibleUsers()
|
||||
this.loadEquityEligibleUsers(),
|
||||
this.loadRoles(),
|
||||
this.loadUserRoles()
|
||||
])
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@
|
|||
<q-tabs v-model="activeTab" class="text-primary" dense>
|
||||
<q-tab name="by-user" icon="people" label="By User"></q-tab>
|
||||
<q-tab name="by-account" icon="account_balance" label="By Account"></q-tab>
|
||||
<q-tab name="roles" icon="badge" label="Roles"></q-tab>
|
||||
<q-tab name="equity" icon="account_balance_wallet" label="Equity Eligibility"></q-tab>
|
||||
</q-tabs>
|
||||
|
||||
|
|
@ -77,20 +78,69 @@
|
|||
<q-spinner color="primary" size="3em"></q-spinner>
|
||||
</div>
|
||||
|
||||
<div v-else-if="permissionsByUser.size === 0" class="text-center q-pa-md">
|
||||
<div v-else-if="permissionsByUser.size === 0 && userRoles.size === 0" class="text-center q-pa-md">
|
||||
<q-icon name="info" size="3em" color="grey-5"></q-icon>
|
||||
<p class="text-grey-6">No permissions granted yet</p>
|
||||
<p class="text-grey-6">No permissions or roles assigned yet</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="q-gutter-md">
|
||||
<q-card v-for="[userId, userPerms] in permissionsByUser" :key="userId" flat bordered>
|
||||
<q-card v-for="userId in allUserIds" :key="userId" flat bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6 q-mb-sm">
|
||||
<div class="row items-center q-mb-sm">
|
||||
<div class="col">
|
||||
<div class="text-h6">
|
||||
<q-icon name="person" class="q-mr-sm"></q-icon>
|
||||
User: {% raw %}{{ userId }}{% endraw %}
|
||||
</div>
|
||||
<q-list separator>
|
||||
<q-item v-for="perm in userPerms" :key="perm.id">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="add"
|
||||
color="primary"
|
||||
size="sm"
|
||||
@click="showAssignRoleForUser(userId)"
|
||||
:disable="!isSuperUser"
|
||||
>
|
||||
<q-tooltip>Assign role to user</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Roles Section -->
|
||||
<div v-if="getUserRoles(userId).length > 0 || getUserRoleAssignments(userId).length > 0" class="q-mb-md">
|
||||
<div class="text-subtitle2 text-grey-7 q-mb-xs">
|
||||
<q-icon name="badge" size="xs" class="q-mr-xs"></q-icon>
|
||||
Assigned Roles
|
||||
</div>
|
||||
<div class="q-gutter-xs">
|
||||
<q-chip
|
||||
v-for="userRole in getUserRoleAssignments(userId)"
|
||||
:key="userRole.id"
|
||||
color="indigo-6"
|
||||
text-color="white"
|
||||
icon="badge"
|
||||
size="sm"
|
||||
removable
|
||||
@remove="confirmRevokeUserRole(userRole)"
|
||||
clickable
|
||||
@click="viewRoleById(userRole.role_id)"
|
||||
>
|
||||
{% raw %}{{ getRoleName(userRole.role_id) }}{% endraw %}
|
||||
<q-tooltip>Click to view role details | Click X to revoke</q-tooltip>
|
||||
</q-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Direct Permissions Section -->
|
||||
<div class="text-subtitle2 text-grey-7 q-mb-xs">
|
||||
<q-icon name="key" size="xs" class="q-mr-xs"></q-icon>
|
||||
Direct Permissions
|
||||
</div>
|
||||
<q-list v-if="(permissionsByUser.get(userId) || []).length > 0" separator>
|
||||
<q-item v-for="perm in (permissionsByUser.get(userId) || [])" :key="perm.id">
|
||||
<q-item-section avatar>
|
||||
<q-avatar :color="getPermissionColor(perm.permission_type)" text-color="white" size="sm">
|
||||
<q-icon :name="getPermissionIcon(perm.permission_type)"></q-icon>
|
||||
|
|
@ -102,6 +152,9 @@
|
|||
<q-chip size="sm" :color="getPermissionColor(perm.permission_type)" text-color="white">
|
||||
{% raw %}{{ getPermissionLabel(perm.permission_type) }}{% endraw %}
|
||||
</q-chip>
|
||||
<q-chip size="sm" color="grey-6" text-color="white" class="q-ml-xs">
|
||||
Direct
|
||||
</q-chip>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
|
|
@ -127,6 +180,9 @@
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<div v-else class="text-grey-6 text-center q-pa-sm">
|
||||
No direct permissions (permissions inherited from roles)
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
@ -193,6 +249,95 @@
|
|||
</div>
|
||||
</q-tab-panel>
|
||||
|
||||
<!-- Roles View -->
|
||||
<q-tab-panel name="roles">
|
||||
<div v-if="loading" class="row justify-center q-pa-md">
|
||||
<q-spinner color="primary" size="3em"></q-spinner>
|
||||
</div>
|
||||
|
||||
<div class="row q-mb-md">
|
||||
<div class="col">
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="add"
|
||||
label="Create Role"
|
||||
@click="showCreateRoleDialog = true"
|
||||
:disable="!isSuperUser"
|
||||
>
|
||||
<q-tooltip v-if="!isSuperUser">Admin access required</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="roles.length === 0" class="text-center q-pa-md">
|
||||
<q-icon name="info" size="3em" color="grey-5"></q-icon>
|
||||
<p class="text-grey-6">No roles configured yet</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="q-gutter-md">
|
||||
<q-card v-for="role in roles" :key="role.id" flat bordered>
|
||||
<q-card-section>
|
||||
<div class="row items-center">
|
||||
<div class="col">
|
||||
<div class="text-h6">
|
||||
<q-icon name="badge" class="q-mr-sm" color="blue"></q-icon>
|
||||
{% raw %}{{ role.name }}{% endraw %}
|
||||
<q-chip v-if="role.is_default" size="sm" color="amber" text-color="white" icon="star" class="q-ml-sm">
|
||||
DEFAULT
|
||||
</q-chip>
|
||||
</div>
|
||||
<div class="text-caption text-grey-7 q-mt-sm" v-if="role.description">
|
||||
{% raw %}{{ role.description }}{% endraw %}
|
||||
</div>
|
||||
<div class="row q-mt-sm q-gutter-sm">
|
||||
<q-chip size="sm" color="blue-grey" text-color="white" icon="people">
|
||||
{% raw %}{{ role.user_count }}{% endraw %} user(s)
|
||||
</q-chip>
|
||||
<q-chip size="sm" color="blue-grey" text-color="white" icon="security">
|
||||
{% raw %}{{ role.permission_count }}{% endraw %} permission(s)
|
||||
</q-chip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn-group>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="visibility"
|
||||
color="primary"
|
||||
@click="viewRole(role)"
|
||||
>
|
||||
<q-tooltip>View Details</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="edit"
|
||||
color="primary"
|
||||
@click="editRole(role)"
|
||||
>
|
||||
<q-tooltip>Edit Role</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="delete"
|
||||
color="negative"
|
||||
@click="confirmDeleteRole(role)"
|
||||
>
|
||||
<q-tooltip>Delete Role</q-tooltip>
|
||||
</q-btn>
|
||||
</q-btn-group>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
|
||||
<!-- Equity Eligibility View -->
|
||||
<q-tab-panel name="equity">
|
||||
<div v-if="loading" class="row justify-center q-pa-md">
|
||||
|
|
@ -763,4 +908,503 @@
|
|||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!-- Create/Edit Role Dialog -->
|
||||
<q-dialog v-model="showCreateRoleDialog" position="top">
|
||||
<q-card class="q-pa-lg" style="min-width: 500px">
|
||||
<q-card-section>
|
||||
<div class="text-h6">{% raw %}{{ editingRole ? 'Edit Role' : 'Create Role' }}{% endraw %}</div>
|
||||
<div class="text-caption text-grey-7">
|
||||
Define a role with a name and description. Permissions will be added separately.
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-gutter-md">
|
||||
<!-- Role Name -->
|
||||
<q-input
|
||||
v-model="roleForm.name"
|
||||
label="Role Name *"
|
||||
hint="e.g., Employee, Contractor, Manager"
|
||||
outlined
|
||||
dense
|
||||
:rules="[val => !!val || 'Role name is required']"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="badge"></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<!-- Description -->
|
||||
<q-input
|
||||
v-model="roleForm.description"
|
||||
label="Description"
|
||||
hint="Brief description of this role's purpose"
|
||||
type="textarea"
|
||||
outlined
|
||||
dense
|
||||
rows="3"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="description"></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<!-- Is Default -->
|
||||
<q-checkbox
|
||||
v-model="roleForm.is_default"
|
||||
label="Set as default role (auto-assigned to new users)"
|
||||
color="amber"
|
||||
>
|
||||
<q-tooltip>Only one role can be the default. Setting this will remove default status from other roles.</q-tooltip>
|
||||
</q-checkbox>
|
||||
|
||||
<!-- Role Permissions Section (shown when editing) -->
|
||||
<div v-if="editingRole && selectedRole" class="q-mt-md">
|
||||
<q-separator></q-separator>
|
||||
<div class="text-subtitle2 q-mt-md q-mb-sm">
|
||||
<q-icon name="key" class="q-mr-xs"></q-icon>
|
||||
Role Permissions
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="sm"
|
||||
icon="add"
|
||||
color="primary"
|
||||
class="q-ml-sm"
|
||||
@click="showAddRolePermissionDialog = true"
|
||||
>
|
||||
<q-tooltip>Add permission to role</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div v-if="rolePermissionsForView.length === 0" class="text-caption text-grey-6 text-center q-pa-md">
|
||||
No permissions assigned to this role yet
|
||||
</div>
|
||||
|
||||
<q-list v-else separator dense>
|
||||
<q-item v-for="perm in rolePermissionsForView" :key="perm.id">
|
||||
<q-item-section avatar>
|
||||
<q-avatar :color="getPermissionColor(perm.permission_type)" text-color="white" size="sm">
|
||||
<q-icon :name="getPermissionIcon(perm.permission_type)"></q-icon>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{% raw %}{{ getAccountName(perm.account_id) }}{% endraw %}</q-item-label>
|
||||
<q-item-label caption>
|
||||
<q-chip size="sm" :color="getPermissionColor(perm.permission_type)" text-color="white">
|
||||
{% raw %}{{ getPermissionLabel(perm.permission_type) }}{% endraw %}
|
||||
</q-chip>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="delete"
|
||||
color="negative"
|
||||
size="sm"
|
||||
@click="deleteRolePermission(perm.id)"
|
||||
>
|
||||
<q-tooltip>Remove permission</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="Cancel" color="grey" @click="closeRoleDialog"></q-btn>
|
||||
<q-btn
|
||||
unelevated
|
||||
:label="editingRole ? 'Update' : 'Create'"
|
||||
color="primary"
|
||||
@click="saveRole"
|
||||
:loading="savingRole"
|
||||
:disable="!roleForm.name"
|
||||
></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!-- Add Permission to Role Dialog -->
|
||||
<q-dialog v-model="showAddRolePermissionDialog" position="top">
|
||||
<q-card class="q-pa-lg" style="min-width: 500px">
|
||||
<q-card-section>
|
||||
<div class="text-h6">Add Permission to Role</div>
|
||||
<div class="text-caption text-grey-7">
|
||||
Grant this role access to an account
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-gutter-md">
|
||||
<!-- Account Selection -->
|
||||
<q-select
|
||||
v-model="rolePermissionForm.account_id"
|
||||
:options="accountOptions"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
emit-value
|
||||
map-options
|
||||
label="Account *"
|
||||
outlined
|
||||
dense
|
||||
:rules="[val => !!val || 'Account is required']"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="account_balance"></q-icon>
|
||||
</template>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section>
|
||||
<q-item-label>{% raw %}{{ scope.opt.label }}{% endraw %}</q-item-label>
|
||||
<q-item-label v-if="scope.opt.is_virtual" caption class="text-blue-7">
|
||||
🌐 Virtual parent (grants access to all {% raw %}{{ scope.opt.name }}{% endraw %}:* accounts)
|
||||
</q-item-label>
|
||||
<q-item-label v-else caption>{% raw %}{{ scope.opt.description }}{% endraw %}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section v-if="scope.opt.is_virtual" side>
|
||||
<q-chip size="sm" color="blue" text-color="white">Virtual</q-chip>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<!-- Permission Type -->
|
||||
<q-select
|
||||
v-model="rolePermissionForm.permission_type"
|
||||
:options="permissionTypeOptions"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
emit-value
|
||||
map-options
|
||||
label="Permission Type *"
|
||||
outlined
|
||||
dense
|
||||
:rules="[val => !!val || 'Permission type is required']"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="key"></q-icon>
|
||||
</template>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section>
|
||||
<q-item-label>{% raw %}{{ scope.opt.label }}{% endraw %}</q-item-label>
|
||||
<q-item-label caption>{% raw %}{{ scope.opt.description }}{% endraw %}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<!-- Notes -->
|
||||
<q-input
|
||||
v-model="rolePermissionForm.notes"
|
||||
label="Notes (optional)"
|
||||
type="textarea"
|
||||
outlined
|
||||
dense
|
||||
rows="2"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="note"></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="Cancel" color="grey" @click="closeAddRolePermissionDialog"></q-btn>
|
||||
<q-btn
|
||||
unelevated
|
||||
label="Add Permission"
|
||||
color="primary"
|
||||
@click="addRolePermission"
|
||||
:disable="!rolePermissionForm.account_id || !rolePermissionForm.permission_type"
|
||||
></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!-- View Role Dialog -->
|
||||
<q-dialog v-model="showViewRoleDialog" position="top">
|
||||
<q-card class="q-pa-lg" style="min-width: 600px; max-width: 800px">
|
||||
<q-card-section v-if="selectedRole">
|
||||
<div class="text-h6">
|
||||
<q-icon name="badge" color="blue" class="q-mr-sm"></q-icon>
|
||||
{% raw %}{{ selectedRole.name }}{% endraw %}
|
||||
<q-chip v-if="selectedRole.is_default" size="sm" color="amber" text-color="white" icon="star" class="q-ml-sm">
|
||||
DEFAULT
|
||||
</q-chip>
|
||||
</div>
|
||||
<div class="text-caption text-grey-7 q-mt-sm" v-if="selectedRole.description">
|
||||
{% raw %}{{ selectedRole.description }}{% endraw %}
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator></q-separator>
|
||||
|
||||
<q-card-section v-if="selectedRole">
|
||||
<div class="text-subtitle2 q-mb-md">
|
||||
<q-icon name="security" class="q-mr-sm"></q-icon>
|
||||
Role Permissions ({% raw %}{{ rolePermissionsForView.length }}{% endraw %})
|
||||
</div>
|
||||
|
||||
<div v-if="rolePermissionsForView.length === 0" class="text-center text-grey q-pa-md">
|
||||
No permissions assigned to this role yet
|
||||
</div>
|
||||
|
||||
<q-list v-else separator>
|
||||
<q-item v-for="perm in rolePermissionsForView" :key="perm.id">
|
||||
<q-item-section avatar>
|
||||
<q-avatar :color="getPermissionColor(perm.permission_type)" text-color="white" size="sm">
|
||||
<q-icon :name="getPermissionIcon(perm.permission_type)"></q-icon>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{% raw %}{{ getAccountName(perm.account_id) }}{% endraw %}</q-item-label>
|
||||
<q-item-label caption>
|
||||
<q-chip size="sm" :color="getPermissionColor(perm.permission_type)" text-color="white">
|
||||
{% raw %}{{ getPermissionLabel(perm.permission_type) }}{% endraw %}
|
||||
</q-chip>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
||||
<q-separator class="q-mt-md q-mb-md"></q-separator>
|
||||
|
||||
<div class="text-subtitle2 q-mb-md">
|
||||
<q-icon name="people" class="q-mr-sm"></q-icon>
|
||||
Users with this role ({% raw %}{{ roleUsersForView.length }}{% endraw %})
|
||||
</div>
|
||||
|
||||
<div v-if="roleUsersForView.length === 0" class="text-center text-grey q-pa-md">
|
||||
No users assigned to this role yet
|
||||
</div>
|
||||
|
||||
<q-list v-else separator>
|
||||
<q-item v-for="user in roleUsersForView" :key="user.id">
|
||||
<q-item-section>
|
||||
<q-item-label>{% raw %}{{ user.user_id }}{% endraw %}</q-item-label>
|
||||
<q-item-label caption>
|
||||
Granted: {% raw %}{{ formatDate(user.granted_at) }}{% endraw %}
|
||||
<span v-if="user.expires_at"> | Expires: {% raw %}{{ formatDate(user.expires_at) }}{% endraw %}</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="Close" color="primary" v-close-popup></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!-- Delete Role Confirmation Dialog -->
|
||||
<q-dialog v-model="showDeleteRoleDialog" persistent>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Delete Role?</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section v-if="roleToDelete">
|
||||
<p>Are you sure you want to delete this role?</p>
|
||||
<p class="text-caption text-orange-9">
|
||||
<q-icon name="warning" class="q-mr-sm"></q-icon>
|
||||
<strong>Warning:</strong> This will remove all permissions associated with this role
|
||||
and revoke role assignments from all users. This action cannot be undone.
|
||||
</p>
|
||||
<q-list dense bordered class="rounded-borders q-mt-md">
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>Role</q-item-label>
|
||||
<q-item-label>{% raw %}{{ roleToDelete.name }}{% endraw %}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>Affected Users</q-item-label>
|
||||
<q-item-label>{% raw %}{{ roleToDelete.user_count }}{% endraw %}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>Permissions</q-item-label>
|
||||
<q-item-label>{% raw %}{{ roleToDelete.permission_count }}{% endraw %}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="Cancel" color="grey" v-close-popup></q-btn>
|
||||
<q-btn
|
||||
unelevated
|
||||
label="Delete Role"
|
||||
color="negative"
|
||||
@click="deleteRole"
|
||||
:loading="deletingRole"
|
||||
></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!-- Revoke User Role Confirmation Dialog -->
|
||||
<q-dialog v-model="showRevokeUserRoleDialog" persistent>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Revoke Role from User?</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section v-if="userRoleToRevoke">
|
||||
<p>Are you sure you want to revoke this role from the user? They will immediately lose all permissions associated with this role.</p>
|
||||
<q-list dense bordered class="rounded-borders q-mt-md">
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>User</q-item-label>
|
||||
<q-item-label>{% raw %}{{ userRoleToRevoke.user_id }}{% endraw %}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>Role</q-item-label>
|
||||
<q-item-label>{% raw %}{{ getRoleName(userRoleToRevoke.role_id) }}{% endraw %}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="userRoleToRevoke.notes">
|
||||
<q-item-section>
|
||||
<q-item-label caption>Notes</q-item-label>
|
||||
<q-item-label>{% raw %}{{ userRoleToRevoke.notes }}{% endraw %}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="Cancel" color="grey" v-close-popup></q-btn>
|
||||
<q-btn
|
||||
unelevated
|
||||
label="Revoke Role"
|
||||
color="negative"
|
||||
@click="revokeUserRole"
|
||||
:loading="revokingUserRole"
|
||||
></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!-- Assign Role Dialog -->
|
||||
<q-dialog v-model="showAssignRoleDialog" position="top">
|
||||
<q-card class="q-pa-lg" style="min-width: 500px">
|
||||
<q-card-section>
|
||||
<div class="text-h6">Assign User to Role</div>
|
||||
<div class="text-caption text-grey-7">
|
||||
Assign a user to a role to grant them all permissions associated with that role.
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-gutter-md">
|
||||
<!-- User Selection -->
|
||||
<q-select
|
||||
v-model="assignRoleForm.user_id"
|
||||
label="User *"
|
||||
hint="Search and select a user"
|
||||
:options="userOptions"
|
||||
option-value="id"
|
||||
option-label="label"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
@filter="filterUsers"
|
||||
outlined
|
||||
dense
|
||||
:rules="[val => !!val || 'User is required']"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="person"></q-icon>
|
||||
</template>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
No users found
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<!-- Role Selection -->
|
||||
<q-select
|
||||
v-model="assignRoleForm.role_id"
|
||||
label="Role *"
|
||||
hint="Select a role to assign"
|
||||
:options="roleOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
:rules="[val => !!val || 'Role is required']"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="badge"></q-icon>
|
||||
</template>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section>
|
||||
<q-item-label>{% raw %}{{ scope.opt.name }}{% endraw %}</q-item-label>
|
||||
<q-item-label caption>{% raw %}{{ scope.opt.description }}{% endraw %}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section v-if="scope.opt.is_default" side>
|
||||
<q-chip size="sm" color="amber" text-color="white" icon="star">Default</q-chip>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<!-- Expiration Date -->
|
||||
<q-input
|
||||
v-model="assignRoleForm.expires_at"
|
||||
label="Expiration Date (Optional)"
|
||||
hint="Leave empty for permanent assignment"
|
||||
type="datetime-local"
|
||||
outlined
|
||||
dense
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event"></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<!-- Notes -->
|
||||
<q-input
|
||||
v-model="assignRoleForm.notes"
|
||||
label="Notes (Optional)"
|
||||
hint="Optional notes for admin reference"
|
||||
type="textarea"
|
||||
outlined
|
||||
dense
|
||||
rows="3"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="note"></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="Cancel" color="grey" v-close-popup></q-btn>
|
||||
<q-btn
|
||||
unelevated
|
||||
label="Assign Role"
|
||||
color="primary"
|
||||
@click="assignRole"
|
||||
:loading="assigningRole"
|
||||
:disable="!assignRoleForm.user_id || !assignRoleForm.role_id"
|
||||
></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue