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
|
|
@ -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">
|
||||
<q-icon name="person" class="q-mr-sm"></q-icon>
|
||||
User: {% raw %}{{ userId }}{% endraw %}
|
||||
<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>
|
||||
</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>
|
||||
<q-list separator>
|
||||
<q-item v-for="perm in userPerms" :key="perm.id">
|
||||
|
||||
<!-- 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