feat(roles): add admin store roles page, permission i18n, and menu integration
Some checks failed
Some checks failed
- Add admin store roles page with merchant→store cascading for superadmin and store-only selection for platform admin - Add permission catalog API with translated labels/descriptions (en/fr/de/lb) - Add permission translations to all 15 module locale files (60 files total) - Add info icon tooltips for permission descriptions in role editor - Add store roles menu item and admin menu item in module definition - Fix store-selector.js URL construction bug when apiEndpoint has query params - Add admin store roles API (CRUD + platform scoping) - Add integration tests for admin store roles and permission catalog Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
271
app/modules/tenancy/templates/tenancy/admin/store-roles.html
Normal file
271
app/modules/tenancy/templates/tenancy/admin/store-roles.html
Normal file
@@ -0,0 +1,271 @@
|
||||
{# app/templates/admin/store-roles.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
{% from 'shared/macros/headers.html' import page_header %}
|
||||
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||
{% from 'shared/macros/modals.html' import modal_simple %}
|
||||
|
||||
{% block title %}Store Roles{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
|
||||
<style>
|
||||
.ts-wrapper { width: 100%; }
|
||||
.ts-control {
|
||||
background-color: rgb(249 250 251) !important;
|
||||
border-color: rgb(209 213 219) !important;
|
||||
border-radius: 0.5rem !important;
|
||||
padding: 0.5rem 0.75rem !important;
|
||||
}
|
||||
.dark .ts-control {
|
||||
background-color: rgb(55 65 81) !important;
|
||||
border-color: rgb(75 85 99) !important;
|
||||
color: rgb(229 231 235) !important;
|
||||
}
|
||||
.ts-dropdown {
|
||||
border-radius: 0.5rem !important;
|
||||
border-color: rgb(209 213 219) !important;
|
||||
}
|
||||
.dark .ts-dropdown {
|
||||
background-color: rgb(55 65 81) !important;
|
||||
border-color: rgb(75 85 99) !important;
|
||||
}
|
||||
.dark .ts-dropdown .option {
|
||||
color: rgb(229 231 235) !important;
|
||||
}
|
||||
.dark .ts-dropdown .option.active {
|
||||
background-color: rgb(75 85 99) !important;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block alpine_data %}adminStoreRoles(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ page_header('Store Roles', subtitle='Manage roles and permissions for any store') }}
|
||||
|
||||
<!-- Selection Panel -->
|
||||
<div class="px-4 py-6 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
{% if is_super_admin %}
|
||||
<!-- Super Admin: Merchant → Store cascading -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Merchant
|
||||
</label>
|
||||
<select x-ref="merchantSelect" placeholder="Search merchant by name..."></select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Store
|
||||
</label>
|
||||
<div x-show="!selectedMerchant" class="px-3 py-2 text-sm text-gray-400 dark:text-gray-500 border rounded-lg dark:border-gray-600 bg-gray-50 dark:bg-gray-700">
|
||||
Select a merchant first
|
||||
</div>
|
||||
<div x-show="selectedMerchant" x-cloak>
|
||||
<select x-ref="storeSelect" placeholder="Select store..."></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- Platform Admin: Store only (scoped to their platforms) -->
|
||||
<div class="max-w-md">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Store
|
||||
</label>
|
||||
<select x-ref="storeSelect" placeholder="Search store by name or code..."></select>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Selected Store Info -->
|
||||
<div x-show="selectedStore" x-cloak class="mb-6">
|
||||
<div class="px-4 py-3 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span x-html="$icon('shield-check', 'w-6 h-6 text-purple-600')"></span>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-purple-700 dark:text-purple-300">Managing Roles For</p>
|
||||
<p class="text-lg font-semibold text-purple-900 dark:text-purple-100" x-text="selectedStore?.name"></p>
|
||||
{% if is_super_admin %}
|
||||
<p class="text-xs text-purple-600 dark:text-purple-400" x-text="selectedMerchant ? 'Merchant: ' + selectedMerchant.name : ''"></p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
@click="openCreateModal()"
|
||||
class="flex items-center px-3 py-1.5 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
|
||||
>
|
||||
<span x-html="$icon('plus', 'w-4 h-4 mr-1')"></span>
|
||||
Create Role
|
||||
</button>
|
||||
<button
|
||||
@click="clearSelection()"
|
||||
class="flex items-center gap-1 px-3 py-1.5 text-sm text-purple-700 dark:text-purple-300 bg-purple-100 dark:bg-purple-800 rounded-md hover:bg-purple-200 dark:hover:bg-purple-700 transition-colors"
|
||||
>
|
||||
<span x-html="$icon('x-mark', 'w-4 h-4')"></span>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div x-show="rolesLoading" class="text-center py-12">
|
||||
<div class="inline-block animate-spin w-8 h-8 border-4 border-purple-500 border-t-transparent rounded-full"></div>
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-400">Loading roles...</p>
|
||||
</div>
|
||||
|
||||
<!-- Roles List -->
|
||||
<div x-show="selectedStore && !rolesLoading" class="space-y-6">
|
||||
<template x-for="role in roles" :key="role.id">
|
||||
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="role.name"></h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<span x-text="(role.permissions || []).length"></span> permissions
|
||||
<template x-if="isPresetRole(role.name)">
|
||||
<span class="ml-2 px-2 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 rounded-full dark:bg-blue-900 dark:text-blue-200">Preset</span>
|
||||
</template>
|
||||
<template x-if="!isPresetRole(role.name)">
|
||||
<span class="ml-2 px-2 py-0.5 text-xs font-medium bg-green-100 text-green-800 rounded-full dark:bg-green-900 dark:text-green-200">Custom</span>
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
@click="openEditModal(role)"
|
||||
class="px-3 py-1.5 text-sm font-medium text-purple-600 bg-purple-50 rounded-lg hover:bg-purple-100 dark:text-purple-400 dark:bg-purple-900/20 dark:hover:bg-purple-900/40"
|
||||
>
|
||||
<span x-html="$icon('pencil', 'w-4 h-4 inline mr-1')"></span>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
x-show="!isPresetRole(role.name)"
|
||||
@click="confirmDelete(role)"
|
||||
class="px-3 py-1.5 text-sm font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100 dark:text-red-400 dark:bg-red-900/20 dark:hover:bg-red-900/40"
|
||||
>
|
||||
<span x-html="$icon('trash', 'w-4 h-4 inline mr-1')"></span>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Permission tags -->
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<template x-for="perm in (role.permissions || [])" :key="perm">
|
||||
<span class="px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-600 rounded dark:bg-gray-700 dark:text-gray-300" x-text="perm"></span>
|
||||
</template>
|
||||
<template x-if="!role.permissions || role.permissions.length === 0">
|
||||
<span class="text-sm text-gray-400 dark:text-gray-500">No permissions assigned</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="roles.length === 0 && !rolesLoading">
|
||||
<div class="text-center py-12 text-gray-500 dark:text-gray-400">
|
||||
<span x-html="$icon('shield', 'w-12 h-12 mx-auto mb-4 opacity-50')"></span>
|
||||
<p>No roles found for this store.</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- No Store Selected -->
|
||||
<div x-show="!selectedStore && !rolesLoading" class="text-center py-12">
|
||||
<span x-html="$icon('shield-check', 'inline w-12 h-12 text-gray-400 mb-4')"></span>
|
||||
{% if is_super_admin %}
|
||||
<p class="text-gray-600 dark:text-gray-400">Select a merchant and store above to manage roles</p>
|
||||
{% else %}
|
||||
<p class="text-gray-600 dark:text-gray-400">Select a store above to manage its roles</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Create/Edit Role Modal -->
|
||||
{% call modal_simple('roleModal', 'editingRole ? "Edit Role" : "Create Role"', 'showRoleModal') %}
|
||||
<div class="space-y-4">
|
||||
<!-- Role Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Role Name</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="roleForm.name"
|
||||
placeholder="e.g. Content Editor"
|
||||
class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 focus:ring-purple-500 focus:border-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Permission Matrix -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Permissions</label>
|
||||
<div class="max-h-96 overflow-y-auto border rounded-lg dark:border-gray-600">
|
||||
<template x-for="category in permissionCategories" :key="category.id">
|
||||
<div class="border-b last:border-b-0 dark:border-gray-600">
|
||||
<div class="px-4 py-2 bg-gray-50 dark:bg-gray-700/50 flex items-center justify-between">
|
||||
<span class="text-sm font-semibold text-gray-700 dark:text-gray-300 capitalize" x-text="category.label"></span>
|
||||
<button
|
||||
@click="toggleCategory(category)"
|
||||
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400"
|
||||
x-text="isCategoryFullySelected(category) ? 'Deselect All' : 'Select All'"
|
||||
></button>
|
||||
</div>
|
||||
<div class="px-4 py-2 grid grid-cols-1 sm:grid-cols-2 gap-1">
|
||||
<template x-for="perm in category.permissions" :key="perm.id">
|
||||
<label class="flex items-start gap-2 py-1.5 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="perm.id"
|
||||
:checked="roleForm.permissions.includes(perm.id)"
|
||||
@change="togglePermission(perm.id)"
|
||||
class="w-4 h-4 mt-0.5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<span class="flex items-center gap-1">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300" x-text="perm.label"></span>
|
||||
<span
|
||||
x-show="perm.description"
|
||||
:title="perm.description"
|
||||
x-html="$icon('information-circle', 'w-3.5 h-3.5 text-gray-400 dark:text-gray-500 cursor-help')"
|
||||
></span>
|
||||
</span>
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500 font-mono" x-text="perm.id"></span>
|
||||
</div>
|
||||
<template x-if="perm.is_owner_only">
|
||||
<span class="ml-auto px-1.5 py-0.5 text-xs bg-amber-100 text-amber-700 rounded dark:bg-amber-900/30 dark:text-amber-400">Owner</span>
|
||||
</template>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end gap-3 pt-2">
|
||||
<button
|
||||
@click="showRoleModal = false"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600"
|
||||
>Cancel</button>
|
||||
<button
|
||||
@click="saveRole()"
|
||||
:disabled="saving || !roleForm.name.trim()"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
||||
>
|
||||
<span x-show="saving" class="inline-block animate-spin mr-1">↻</span>
|
||||
<span x-text="editingRole ? 'Update Role' : 'Create Role'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
|
||||
<script>
|
||||
window._adminStoreRolesConfig = { isSuperAdmin: {{ is_super_admin | tojson }} };
|
||||
</script>
|
||||
<script defer src="{{ url_for('tenancy_static', path='admin/js/store-roles.js') }}"></script>
|
||||
{% endblock %}
|
||||
@@ -101,10 +101,10 @@
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Permissions</label>
|
||||
<div class="max-h-96 overflow-y-auto border rounded-lg dark:border-gray-600">
|
||||
<template x-for="(perms, category) in permissionsByCategory" :key="category">
|
||||
<template x-for="category in permissionCategories" :key="category.id">
|
||||
<div class="border-b last:border-b-0 dark:border-gray-600">
|
||||
<div class="px-4 py-2 bg-gray-50 dark:bg-gray-700/50 flex items-center justify-between">
|
||||
<span class="text-sm font-semibold text-gray-700 dark:text-gray-300 capitalize" x-text="category"></span>
|
||||
<span class="text-sm font-semibold text-gray-700 dark:text-gray-300 capitalize" x-text="category.label"></span>
|
||||
<button
|
||||
@click="toggleCategory(category)"
|
||||
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400"
|
||||
@@ -112,16 +112,29 @@
|
||||
></button>
|
||||
</div>
|
||||
<div class="px-4 py-2 grid grid-cols-1 sm:grid-cols-2 gap-1">
|
||||
<template x-for="perm in perms" :key="perm.id">
|
||||
<label class="flex items-center gap-2 py-1 cursor-pointer">
|
||||
<template x-for="perm in category.permissions" :key="perm.id">
|
||||
<label class="flex items-start gap-2 py-1.5 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="perm.id"
|
||||
:checked="roleForm.permissions.includes(perm.id)"
|
||||
@change="togglePermission(perm.id)"
|
||||
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||
class="w-4 h-4 mt-0.5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||
/>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400" x-text="perm.id"></span>
|
||||
<div class="flex flex-col">
|
||||
<span class="flex items-center gap-1">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300" x-text="perm.label"></span>
|
||||
<span
|
||||
x-show="perm.description"
|
||||
:title="perm.description"
|
||||
x-html="$icon('information-circle', 'w-3.5 h-3.5 text-gray-400 dark:text-gray-500 cursor-help')"
|
||||
></span>
|
||||
</span>
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500 font-mono" x-text="perm.id"></span>
|
||||
</div>
|
||||
<template x-if="perm.is_owner_only">
|
||||
<span class="ml-auto px-1.5 py-0.5 text-xs bg-amber-100 text-amber-700 rounded dark:bg-amber-900/30 dark:text-amber-400">Owner</span>
|
||||
</template>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user