Next major version 2 with PHP 8.1, Symfony 6, Tabler UI, 2FA ... (#2902)

templates/permission/actions.html.twig

@@ -1,5 +0,0 @@
-{% macro user_permissions(view) %}
-    {% import "macros/widgets.html.twig" as widgets %}
-    {% set event = actions(app.user, 'user_permissions', view) %}
-    {{ widgets.page_actions(event.actions) }}
-{% endmacro %}

templates/permission/edit_role.html.twig

@@ -1,12 +1,8 @@
-{% extends app.request.xmlHttpRequest ? 'form.html.twig' : 'base.html.twig' %}
+{% extends kimai_context.modalRequest ? 'form.html.twig' : 'base.html.twig' %}
 {% import "macros/widgets.html.twig" as widgets %}
-{% import "permission/actions.html.twig" as actions %}
-
-{% block page_title %}{{ 'user_role.title'|trans }}{% endblock %}
-{% block page_actions %}{{ actions.user_permissions('role') }}{% endblock %}
 
 {% block main %}
-    {{ include(app.request.xmlHttpRequest ? 'default/_form_modal.html.twig' : 'default/_form.html.twig', {
+    {{ include(kimai_context.modalRequest ? 'default/_form_modal.html.twig' : 'default/_form.html.twig', {
         'title': (role.id ? 'action.edit'|trans : 'create'|trans) ~ ': ' ~ 'user_role.title'|trans,
         'form': form,
         'back': path('admin_user_permissions')

templates/permission/permissions.html.twig

@@ -1,33 +1,36 @@
 {% extends 'base.html.twig' %}
 {% import "macros/datatables.html.twig" as tables %}
 {% import "macros/widgets.html.twig" as widgets %}
-{% import "macros/toolbar.html.twig" as toolbar %}
-{% import "permission/actions.html.twig" as actions %}
-
-{% set columns = {
-    'label.name': 'alwaysVisible',
-} %}
-{% set canEditPermissions = is_granted('role_permissions') %}
-{% for role in roles %}
-    {% set options = {'class': 'alwaysVisible text-center'} %}
-    {% if canEditPermissions and role.name not in system_roles|keys %}
-        {% set widget %}
-        &nbsp;<a href="{{ path('admin_user_role_delete', {'id': role.id, 'csrfToken': token}) }}" class="confirmation-link" data-question="confirm.delete">{{ widgets.icon('trash') }}</a>
-        {% endset %}
-        {% set options = options|merge({'html_after': widget}) %}
-    {% endif %}
-    {% set columns = columns|merge({
-        (role.name|trans): options,
-    }) %}
-{% endfor %}
-
-{% set tableName = 'user_admin_permissions' %}
-
-{% block page_title %}{{ 'profile.roles'|trans }}{% endblock %}
-{% block page_actions %}{{ actions.user_permissions('index') }}{% endblock %}
 
 {% block main %}
-    {{ tables.datatable_header(tableName, columns, null, {'translationPrefix': ''}) }}
+
+    {% set roles = roles|reverse %}
+    {% set columns = {
+        'name': 'alwaysVisible',
+    } %}
+    {% set canEditPermissions = is_granted('role_permissions') %}
+    {% for role in roles %}
+        {% set class = 'alwaysVisible text-center' %}
+        {% if role.name == 'ROLE_SUPER_ADMIN' %}
+            {% set class = class ~ ' bg-orange-lt' %}
+        {% elseif role.name == 'ROLE_USER' %}
+            {% set class = class ~ ' bg-green-lt' %}
+        {% endif %}
+        {% set options = {'class': class} %}
+        {% if canEditPermissions and (role.name not in system_roles) %}
+            {% set widget %}
+                &nbsp;<a href="{{ path('admin_user_role_delete', {'id': role.id, 'csrfToken': token}) }}" class="confirmation-link" data-question="confirm.delete">{{ icon('trash') }}</a>
+            {% endset %}
+            {% set options = options|merge({'html_after': widget}) %}
+        {% endif %}
+        {% set columns = columns|merge({
+            (role.name): options,
+        }) %}
+    {% endfor %}
+
+    {% set tableName = 'user_admin_permissions' %}
+
+    {{ tables.datatable_header(tableName, columns, null, {'reload': 'kimai.userRoleUpdate'}) }}
     
     {% set colspan = 1 + (roles|length) %}
 
@@ -41,7 +44,7 @@
                     <td>{{ permission }}</td>
                     {% for role in roles %}
                         {% set value = manager.permission(role.name, permission) %}
-                        <td class="text-center">
+                        <td class="{{ tables.data_table_column_class(tableName, columns, role.name) }}">
                             {# see RolePermissionManager for this special case #}
                             {% if role.name == 'ROLE_SUPER_ADMIN' and permission in always_apply_superadmin %}
                                 {% if value %}
@@ -61,55 +64,70 @@
 
     {{ tables.data_table_footer() }}
 
+    <div style="display: none" id="permission-token" data-value="{{ token }}"></div>
+
 {% endblock %}
 
 {% block javascripts %}
     {{ parent() }}
     <script type="text/javascript">
-        let PERM_TOKEN = '{{ token }}';
-        document.addEventListener('kimai.initialized', function() {
-            jQuery('a.togglePerm').on('click', function(event) {
-                event.stopPropagation();
-                event.preventDefault();
+        function getPermissionToken() {
+            return document.getElementById('permission-token').dataset['value'];
+        }
+        function setPermissionToken(token) {
+            document.getElementById('permission-token').dataset['value'] = token;
+        }
 
-                let target = event.target;
-                if (!target.matches('a')) {
-                    target = target.parentNode;
-                }
+        document.addEventListener('kimai.initialized', (event) => {
+            const FETCHER = event.detail.kimai.getPlugin('fetch');
+            for (const element of document.querySelectorAll('a.togglePerm')) {
+                element.addEventListener('click', (event) => {
+                    event.stopPropagation();
+                    event.preventDefault();
 
-                let linkElement = jQuery(target);
-                linkElement.html('<i class="fas fa-spinner fa-pulse"></i>');
-
-                let isActive = linkElement.hasClass('permOn');
-                let url = linkElement.data('href').replace(/__VALUE__/, isActive ? '0' : '1').replace(/__TOKEN__/, PERM_TOKEN);
-
-                jQuery.ajax({
-                    url: url,
-                    headers: {'Content-Type':'application/json'},
-                    method: 'POST',
-                    data: [], {# data doesn't matter, everything is in the URL #}
-                    dataType: 'json',
-                    success: function(result) {
-                        kimai.getPlugin('alert').success('action.update.success');
-                        linkElement.toggleClass('permOn').toggleClass('permOff');
-                        toggleLabel(linkElement, !isActive);
-                        PERM_TOKEN = result.token;
-                    },
-                    error: function(xhr, err) {
-                        kimai.getPlugin('alert').error('action.update.error');
-                        toggleLabel(linkElement, isActive);
+                    let target = event.target;
+                    if (!target.matches('a')) {
+                        target = target.parentNode;
                     }
+
+                    let linkElement = target;
+                    linkElement.innerHTML = '{{ icon('spinner') }}';
+
+                    const isActive = linkElement.classList.contains('permOn');
+                    let url = linkElement.dataset['href'].replace(/__VALUE__/, isActive ? '0' : '1').replace(/__TOKEN__/, getPermissionToken());
+
+                    /** @type {KimaiFetch} FETCHER */
+                    const headers = new Headers();
+                    headers.append('Content-Type', 'application/json');
+
+                    const options = {method: 'POST', headers: headers};
+
+                    FETCHER.fetch(url, options)
+                        .then(response => {
+                            response.json().then(json => {
+                                kimai.getPlugin('alert').success('action.update.success');
+                                linkElement.classList.toggle('permOn');
+                                linkElement.classList.toggle('permOff');
+                                toggleLabel(linkElement, !isActive);
+                                setPermissionToken(json.token);
+                            });
+                        })
+                        .catch(error => {
+                            kimai.getPlugin('alert').error('action.update.error');
+                            toggleLabel(linkElement, isActive);
+                        })
+                    ;
                 });
-            });
+            }
 
             KimaiReloadPageWidget.create('kimai.userRoleUpdate');
         });
 
         function toggleLabel(element, showTrue) {
             if (showTrue) {
-                element.html('{{ widgets.label_boolean(true)|e('js') }}');
+                element.innerHTML = '{{ widgets.label_boolean(true)|trim|e('js') }}';
             } else {
-                element.html('{{ widgets.label_boolean(false)|e('js') }}');
+                element.innerHTML = '{{ widgets.label_boolean(false)|trim|e('js') }}';
             }
         }
     </script>