MonScoDocEssai/app/templates/scodoc/role_editor.j2

{# -*- mode: jinja-html -*- #}
{# -*- Edition des rôles/permissions -*- #}
{% extends "base.j2" %}
{% import 'wtf.j2' as wtf %}

{% block styles %}
    {{super()}}
    <link rel="stylesheet" href="{{ scu.STATIC_DIR }}/css/role_editor.css">
{% endblock %}

{% block app_content %}

<h1>Définition des rôles et leurs permissions</h1>

<div class="help">Les rôles sont associés à un ensemble de permissions. Chaque
utilisateur peut avoir un nombre quelconque de rôles <em>dans chaque
département</em>.
Sur cette page vous pouvez modifier les permissions associée à chaque rôle, ou créer de nouveaux rôles.

Les rôles <b>en gras</b> sont les rôles standards de ScoDoc.

</div>

{# <div class="links">
<a class="stdlink" href="{{ url_for('scodoc.users') }}">liste des comptes utilisateurs</a>
</div> #}

<main class="roles-editor">
    <div class="re-row re-row-titres">
        <div class="re-cell role-titre permission-titre"></div>
        {% for role in roles %}
            <div class="re-cell role-titre {{'role-standard' if role.name in SCO_ROLES_DEFAULTS else ''}}">
                <a class="discretelink" href="{{
                url_for('scodoc.role_info', role_name=role.name)
                }}">{{role.name}}</a>
            </div>
        {% endfor %}
    </div>
    {% for permission_name in permissions_names %}
        <div class="re-row re-row-perm">
            <div class="re-cell permission-titre" style="position: relative;">
                <div class="with_scoplement">
                    <div><a class="discretelink" href="{{
                        url_for('scodoc.permission_info', perm_name=permission_name)
                    }}">{{permission_name}}</a></div>
                    <div class="scoplement">
                        {{ Permission.description.get(permission_name) }}
                    </div>
                </div>
            </div>
            {% for role in roles %}
                <div class="re-cell {{'role-standard' if role.name in SCO_ROLES_DEFAULTS else ''}}">
                    <label>
                        <input type="checkbox"
                            name="{{role.id}}-{{Permission.get_by_name(permission_name)}}"
                            data-role="{{role.name}}"
                            data-permission="{{permission_name}}"
                            {{'checked' if role.has_permission(Permission.get_by_name(permission_name)) else ''}}
                        >
                    </label>
                </div>
            {% endfor %}
        </div>
    {% endfor %}
</main>

<div>
➕ <a class="stdlink" href="{{url_for('scodoc.role_create')}}">Créer un nouveau rôle</a>
</div>

<div style="margin-top: 16px;">
🛟 <a class="stdlink" href="{{url_for('auth.reset_standard_roles_permissions')}}">Remettre
    les permissions des rôles standards à leurs valeurs par défaut</a>
    <em>(efface les modifications apportées aux rôles <tt>{{ ', '.join(SCO_ROLES_DEFAULTS.keys()) }}</tt>)</em>
</div>

<script>

async function associe_role_permission(event) {
    // /role/<string:role_name>/add_permission/<string:perm_name>"
    const method = event.target.checked ? "/add_permission/" : "/remove_permission/";
    const url = `${SCO_URL}/../api/role/${event.target.dataset.role}${method}${event.target.dataset.permission}`;
    try {
        const response = await fetch(
        url,
        {
            method: "POST",
        }
        );
        const data = await response.json();
        if (data.role_name != event.target.dataset.role) {
            console.error("Fetch error, received:", data);
            alert("Une erreur est survenue");
            location.reload();
        }
        sco_message(`rôle ${event.target.dataset.role} enregistré`);
    } catch (error) {
        console.error("Fetch error:", error);
        sco_message("Erreur réseau: valeur non enregistrée");
    }
}

document.querySelectorAll("label").forEach(btn => {
    btn.addEventListener("mousedown", (event) => { event.preventDefault() })
});
document.querySelectorAll(".re-cell input").forEach(input => {
    input.addEventListener("input", associe_role_permission)
});

</script>

{% endblock %}