230 lines
13 KiB
HTML
230 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load custom_filters %}
|
|
{% block title %}
|
|
{% trans "Permission Management" %}
|
|
{% endblock title %}
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<div class="d-sm-flex justify-content-between align-items-center">
|
|
<h3 class="mb-0">
|
|
{% if group %}
|
|
{{ _("Edit Permissions for") }}: <strong>{{ group.name }}</strong>
|
|
{% else %}
|
|
{{ _("Add Permissions") }}
|
|
{% endif %}
|
|
</h3>
|
|
<div class="badge bg-primary rounded-pill">{{ group_permission_ids|length }} {% trans "permissions assigned" %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form method="post" novalidate>
|
|
{% csrf_token %}
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
|
<input type="text"
|
|
class="form-control"
|
|
id="permissionSearch"
|
|
placeholder="{% trans 'Search permissions...' %}">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="alert alert-info py-2 mb-0">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
{% trans "Checked items are currently assigned permissions" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4"
|
|
id="permissionsGrid">
|
|
{% for app_label, models in grouped_permissions.items %}
|
|
<div class="col">
|
|
{# This div opens for each app_label #}
|
|
<div class="card h-100 border-
|
|
{% if app_label in group_permission_apps %}
|
|
primary
|
|
{% else %}
|
|
light
|
|
{% endif %}">
|
|
<div class="card-header bg-
|
|
{% if app_label in group_permission_apps %}
|
|
primary text-white
|
|
{% else %}
|
|
light
|
|
{% endif %}">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-
|
|
{% if app_label in group_permission_apps %}
|
|
check-circle
|
|
{% else %}
|
|
cube
|
|
{% endif %}
|
|
me-2"></i>
|
|
{{ app_label|capfirst }}
|
|
</h5>
|
|
<span class="badge bg-
|
|
{% if app_label in group_permission_apps %}
|
|
light text-primary
|
|
{% else %}
|
|
secondary
|
|
{% endif %}">{{ models|length }} {% trans "categories" %}</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="accordion" id="accordion-{{ app_label|slugify }}">
|
|
{% for model, perms in models.items %}
|
|
<div class="accordion-item border-0 mb-2">
|
|
<h6 class="accordion-header"
|
|
id="heading-{{ app_label|slugify }}-{{ model|slugify }}">
|
|
<button class="accordion-button collapsed bg-white shadow-none py-2"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#collapse-{{ app_label|slugify }}-{{ model|slugify }}"
|
|
aria-expanded="false"
|
|
aria-controls="collapse-{{ app_label|slugify }}-{{ model|slugify }}">
|
|
<i class="fas fa-
|
|
{% if model == 'Custom' %}
|
|
star
|
|
{% else %}
|
|
table
|
|
{% endif %}
|
|
me-2"></i>
|
|
{{ model|capfirst }}
|
|
<span class="badge bg-
|
|
{% if model in group_permission_models %}
|
|
primary
|
|
{% else %}
|
|
secondary
|
|
{% endif %}
|
|
rounded-pill ms-2">
|
|
{# This is where you might need the custom filter 'count_checked' #}
|
|
{{ perms|length }} / {{ perms|count_checked:group_permission_ids }}
|
|
</span>
|
|
</button>
|
|
</h6>
|
|
<div id="collapse-{{ app_label|slugify }}-{{ model|slugify }}"
|
|
class="accordion-collapse collapse"
|
|
aria-labelledby="heading-{{ app_label|slugify }}-{{ model|slugify }}"
|
|
data-bs-parent="#accordion-{{ app_label|slugify }}">
|
|
<div class="accordion-body pt-0 px-0">
|
|
<div class="list-group list-group-flush">
|
|
{% for perm in perms %}
|
|
<label class="list-group-item d-flex gap-2
|
|
{% if perm.id in group_permission_ids %}bg-light-primary{% endif %}">
|
|
<input class="form-check-input flex-shrink-0 mt-0"
|
|
type="checkbox"
|
|
name="permissions"
|
|
value="{{ perm.id }}"
|
|
id="perm_{{ perm.id }}"
|
|
{% if perm.id in group_permission_ids %}checked{% endif %}>
|
|
<span>
|
|
<span class="d-block fw-bold">{{ perm.name|capfirst }}</span>
|
|
<small class="d-block text-muted">{{ perm.codename }}</small>
|
|
{% if model == 'Custom' %}
|
|
<span class="badge bg-info mt-1">
|
|
<i class="fas fa-star me-1"></i>{% trans "Custom" %}
|
|
</span>
|
|
{% elif perm.id in group_permission_ids %}
|
|
<span class="badge bg-success mt-1">
|
|
<i class="fas fa-check me-1"></i>{% trans "Assigned" %}
|
|
</span>
|
|
{% endif %}
|
|
</span>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="row mt-4 mb-4">
|
|
<div class="col">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<span class="badge bg-primary rounded-pill me-2">{{ group_permission_ids|length }} {% trans "selected" %}</span>
|
|
<span class="text-muted">{% trans "Permissions will be updated immediately" %}</span>
|
|
</div>
|
|
<div>
|
|
<button type="submit" class="btn btn-primary me-2">
|
|
<i class="fas fa-save me-1"></i>{% trans "Save Changes" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<style>
|
|
.bg-light-primary {
|
|
background-color: rgba(13, 110, 253, 0.1);
|
|
}
|
|
.list-group-item:hover {
|
|
background-color: rgba(0, 0, 0, 0.03);
|
|
}
|
|
.accordion-button:not(.collapsed) {
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
}
|
|
.accordion-button:focus {
|
|
box-shadow: none;
|
|
border-color: rgba(0,0,0,.125);
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize all accordions
|
|
document.querySelectorAll('.accordion-button').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const target = this.getAttribute('data-bs-target');
|
|
new bootstrap.Collapse(target, {
|
|
toggle: true
|
|
});
|
|
});
|
|
});
|
|
|
|
// Search functionality
|
|
const permissionSearch = document.getElementById('permissionSearch');
|
|
if (permissionSearch) {
|
|
permissionSearch.addEventListener('input', function(e) {
|
|
const searchTerm = e.target.value.toLowerCase();
|
|
let hasVisibleResults = false;
|
|
|
|
document.querySelectorAll('.accordion-body .list-group-item').forEach(item => {
|
|
const text = item.textContent.toLowerCase();
|
|
const isVisible = text.includes(searchTerm);
|
|
item.style.display = isVisible ? '' : 'none';
|
|
if (isVisible) hasVisibleResults = true;
|
|
});
|
|
|
|
// Open accordions with visible results
|
|
document.querySelectorAll('.accordion-collapse').forEach(collapse => {
|
|
const button = document.querySelector(`button[data-bs-target="#${collapse.id}"]`);
|
|
if (button) {
|
|
const hasVisible = collapse.querySelector('.list-group-item[style=""]');
|
|
const bsCollapse = bootstrap.Collapse.getInstance(collapse) ||
|
|
new bootstrap.Collapse(collapse);
|
|
|
|
if (hasVisible) {
|
|
bsCollapse.show();
|
|
} else if (!hasVisibleResults) {
|
|
bsCollapse.hide();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|