From 0a6a6e0bf915ce817ea74a2977ca6f6c1b40a03f Mon Sep 17 00:00:00 2001
From: Peter Pfeufer <info@ppfeufer.de>
Date: Sun, 10 Dec 2023 13:54:31 +0100
Subject: [PATCH] [FIX] Datatable in permission audit templates

---
 .../templates/permissions_tool/audit.html     | 105 ++++++++--------
 .../templates/permissions_tool/audit_row.html |   8 +-
 .../templates/permissions_tool/overview.html  | 112 ++++++++++--------
 3 files changed, 124 insertions(+), 101 deletions(-)

diff --git a/allianceauth/permissions_tool/templates/permissions_tool/audit.html b/allianceauth/permissions_tool/templates/permissions_tool/audit.html
index 9db22d3d..717805b5 100644
--- a/allianceauth/permissions_tool/templates/permissions_tool/audit.html
+++ b/allianceauth/permissions_tool/templates/permissions_tool/audit.html
@@ -1,18 +1,29 @@
 {% extends "allianceauth/base-bs5.html" %}
+
 {% load i18n %}
+
 {% block page_title %}
     {{ permission.permission.codename }} - {% translate "Permissions Audit" %}
 {% endblock page_title %}
+
+{% block header_nav_brand %}
+    {% translate "Permissions Audit" %}
+{% endblock header_nav_brand %}
+
 {% block content %}
     <div>
-        <h1 class="page-header">{% translate "Permissions Audit" %}: {{ permission.permission.codename }}</h1>
+        <h1 class="page-header md-3">
+            {% translate "Permissions Audit" %}: {{ permission.permission.codename }}
+        </h1>
+
         <p>
             <a href="{% url 'permissions_tool:overview' %}" class="btn btn-primary">
                 <i class="fa-solid fa-chevron-left"></i> {% translate "Back" %}
             </a>
         </p>
+
         <div class="table-responsive">
-            <table class="table table-striped" id="tab_permissions_audit">
+            <table class="table table-striped" id="tab_permissions_audit" style="width: 100%;">
                 <thead>
                     <tr>
                         <th scope="col">{% translate "Group" %}</th>
@@ -44,52 +55,52 @@
 {% endblock content %}
 {% block extra_javascript %}
     {% include "bundles/datatables-js-bs5.html" %}
-    {% include "bundles/filterdropdown-js.html" %}
+{#    {% include "bundles/filterdropdown-js.html" %}#}
+
+    <script>
+        $(document).ready(function () {
+            const groupColumn = 0;
+
+            $('#tab_permissions_audit').DataTable({
+                columnDefs: [{
+                    "visible": false,
+                    "targets": groupColumn
+                }],
+                order: [
+                    [groupColumn, 'asc'],
+                    [2, 'asc']
+                ],
+                filterDropDown: {
+                    columns: [{
+                        idx: 0,
+                        title: 'Source'
+                    }],
+                    bootstrap: true
+                },
+                "stateSave": true,
+                "stateDuration": 0,
+                drawCallback: function (settings) {
+                    const api = this.api();
+                    const rows = api.rows({
+                        page: 'current'
+                    }).nodes();
+                    let last = null;
+
+                    api.column(groupColumn, {
+                        page: 'current'
+                    }).data().each(function (group, i) {
+                        if (last !== group) {
+                            $(rows).eq(i).before(`<tr class="h4 table-secondary"><td colspan="3">${group}</td></tr>`;
+
+                            last = group;
+                        }
+                    });
+                }
+            });
+        });
+    </script>
 {% endblock extra_javascript %}
+
 {% block extra_css %}
     {% include "bundles/datatables-css-bs5.html" %}
 {% endblock extra_css %}
-{% block extra_script %}
-    $(document).ready(function () {
-        let groupColumn = 0;
-
-        $('#tab_permissions_audit').DataTable({
-            columnDefs: [{
-                "visible": false,
-                "targets": groupColumn
-            }],
-            order: [
-                [groupColumn, 'asc'],
-                [2, 'asc']
-            ],
-            filterDropDown: {
-                columns: [{
-                    idx: 0,
-                    title: 'Source'
-                }],
-                bootstrap: true
-            },
-            "stateSave": true,
-            "stateDuration": 0,
-            drawCallback: function (settings) {
-                let api = this.api();
-                let rows = api.rows({
-                    page: 'current'
-                }).nodes();
-                let last = null;
-
-                api.column(groupColumn, {
-                    page: 'current'
-                }).data().each(function (group, i) {
-                    if (last !== group) {
-                        $(rows).eq(i).before(
-                            '<tr class="h4 table-secondary"><td colspan="3">' + group + '</td></tr>'
-                        );
-
-                        last = group;
-                    }
-                });
-            }
-        });
-    });
-{% endblock extra_script %}
diff --git a/allianceauth/permissions_tool/templates/permissions_tool/audit_row.html b/allianceauth/permissions_tool/templates/permissions_tool/audit_row.html
index f2993490..de3e4ff5 100644
--- a/allianceauth/permissions_tool/templates/permissions_tool/audit_row.html
+++ b/allianceauth/permissions_tool/templates/permissions_tool/audit_row.html
@@ -1,10 +1,14 @@
 {% load evelinks %}
 {% load i18n %}
+
 <tr>
     <td>{{ type }}: {{ name }}</td>
     <td class="text-end">
-        <img src="{{ user.profile.main_character|character_portrait_url:32 }}" class="img-circle" alt="{{ user.profile.main_character.character_name }}"></td>
-    <td><strong>{{ user }}<br></strong>{{ user.profile.main_character.character_name }}</td>
+        <img src="{{ user.profile.main_character|character_portrait_url:32 }}" class="img-circle" alt="{{ user.profile.main_character.character_name }}">
+    </td>
+    <td>
+        <strong>{{ user }}<br></strong>{{ user.profile.main_character.character_name }}
+    </td>
     <td class="text-start">
         {% if user.profile.main_character %}
             <a href="{{ user.profile.main_character|dotlan_corporation_url }}" target="_blank">{{ user.profile.main_character.corporation_name }}</a>
diff --git a/allianceauth/permissions_tool/templates/permissions_tool/overview.html b/allianceauth/permissions_tool/templates/permissions_tool/overview.html
index 75f7183e..4287e176 100644
--- a/allianceauth/permissions_tool/templates/permissions_tool/overview.html
+++ b/allianceauth/permissions_tool/templates/permissions_tool/overview.html
@@ -1,11 +1,17 @@
 {% extends "allianceauth/base-bs5.html" %}
+
 {% load i18n %}
+
 {% block page_title %}
     {% translate "Permissions Overview" %}
 {% endblock page_title %}
+
+{% block header_nav_brand %}
+    {% translate "Permissions Audit" %}
+{% endblock header_nav_brand %}
+
 {% block content %}
-    <div class="col-sm-12">
-        <h1 class="page-header">{% translate "Permissions Overview" %}</h1>
+    <div>
         <p>
             {% if request.GET.all != 'yes' %}
                 {% translate "Showing only applied permissions" %}
@@ -15,6 +21,7 @@
                 <a href="{% url 'permissions_tool:overview' %}?all=no" class="btn btn-primary">{% translate "Show Applied" %}</a>
             {% endif %}
         </p>
+
         <div class="table-responsive">
             <table class="table table-striped" id="tab_permissions_overview">
                 <thead>
@@ -28,6 +35,7 @@
                         <th scope="col">{% translate "States" %}</th>
                     </tr>
                 </thead>
+
                 <tbody>
                     {% for perm in permissions %}
                         <tr>
@@ -49,59 +57,59 @@
         </div>
     </div>
 {% endblock content %}
+
 {% block extra_javascript %}
     {% include "bundles/datatables-js-bs5.html" %}
-    {% include "bundles/filterdropdown-js.html" %}
+{#    {% include "bundles/filterdropdown-js.html" %}#}
+
+    <script>
+        $(document).ready(() => {
+            const groupColumn = 0;
+
+            $('#tab_permissions_overview').DataTable({
+                columnDefs: [{
+                    "visible": false,
+                    "targets": groupColumn
+                }],
+                order: [
+                    [groupColumn, 'asc'],
+                    [1, 'asc'],
+                    [2, 'asc']
+                ],
+                filterDropDown: {
+                    columns: [{
+                        idx: 0
+                    },
+                        {
+                            idx: 1
+                        }
+                    ],
+                    bootstrap: true,
+                },
+                "stateSave": true,
+                "stateDuration": 0,
+                drawCallback: (settings) => {
+                    const api = this.api();
+                    const rows = api.rows({
+                        page: 'current'
+                    }).nodes();
+                    let last = null;
+
+                    api.column(groupColumn, {
+                        page: 'current'
+                    }).data().each((group, i) => {
+                        if (last !== group) {
+                            $(rows).eq(i).before(`<tr class="h4 table-secondary"><td colspan="6">${group}</td></tr>`);
+
+                            last = group;
+                        }
+                    });
+                }
+            });
+        });
+    </script>
 {% endblock extra_javascript %}
+
 {% block extra_css %}
     {% include "bundles/datatables-css-bs5.html" %}
 {% endblock extra_css %}
-{% block extra_script %}
-    $(document).ready(function () {
-    let groupColumn = 0;
-    $('#tab_permissions_overview').DataTable({
-    columnDefs: [{
-    "visible": false,
-    "targets": groupColumn
-    }],
-    order: [
-    [groupColumn, 'asc'],
-    [1, 'asc'],
-    [2, 'asc']
-    ],
-    filterDropDown: {
-    columns: [{
-    idx: 0
-    },
-    {
-    idx: 1
-    }
-    ],
-    bootstrap: true,
-    },
-    "stateSave": true,
-    "stateDuration": 0,
-    drawCallback: function (settings) {
-    let api = this.api();
-    let rows = api.rows({
-    page: 'current'
-    }).nodes();
-    let last = null;
-    api.column(groupColumn, {
-    page: 'current'
-    }).data().each(function (group, i) {
-    if (last !== group) {
-    $(rows).eq(i).before(
-    '
-    <tr class="h4 table-secondary">
-        <td colspan="6">' + group + '</td>
-    </tr>
-    '
-    );
-    last = group;
-    }
-    });
-    }
-    });
-    });
-{% endblock extra_script %}