Fix layout bug and improve UI for permission tool, add filterDropDown JS

allianceauth/permissions_tool/templates/permissions_tool/audit.html

@@ -8,38 +8,34 @@
 {% block content %}
     <div>
         <h1 class="page-header">{% trans "Permissions Audit" %}: {{ permission.permission.codename }}</h1>
-        <a href="{% url 'permissions_tool:overview' %}" class="btn btn-default">
-            <i class="glyphicon glyphicon-chevron-left"></i> {% trans "Back" %}
-        </a>
+        <p>
+            <a href="{% url 'permissions_tool:overview' %}" class="btn btn-default">
+                <i class="glyphicon glyphicon-chevron-left"></i> {% trans "Back" %}
+            </a>
+        </p>
         <div class="table-responsive">
-            <table class="table table-striped">
+            <table class="table table-striped" id="tab_permissions_audit">
                 <thead>
                     <tr>
-                        <th class="col-md-3">
-                            {% trans "Group" %}
-                        </th>
-                        <th class="col-md-3">
-                            {% trans "User" %}
-                        </th>
+                        <th>{% trans "Group" %}</th>
+                        <th></th>
+                        <th>{% trans "User / Character" %}</th>
+                        <th>{% trans "Organization" %}</th>
                     </tr>
                 </thead>
                 <tbody>
-                {% for user in permission.users %}
-                    <tr>
-                        {% include 'permissions_tool/audit_row.html' with group="Permission Granted Directly (No Group)" %}
-                    </tr>
+                {% for user in permission.users %}                    
+                    {% include 'permissions_tool/audit_row.html' with type="User" name="Permission granted directlty" %}
                 {% endfor %}
                 {% for group in permission.groups %}
                     {% for user in group.user_set.all %}
-                        {% include 'permissions_tool/audit_row.html' %}
+                        {% include 'permissions_tool/audit_row.html' with type="Group" name=group%}
                     {% endfor %}
                 {% endfor %}
                 {% for state in permission.states %}
                     {% for profile in state.userprofile_set.all %}
                         {% with profile.user as user %}
-                            <tr>
-                                {% include 'permissions_tool/audit_state_row.html' %}
-                            </tr>
+                            {% include 'permissions_tool/audit_row.html' with type="State" name=state%}                            
                         {% endwith %}
                     {% endfor %}
                 {% endfor %}
@@ -49,3 +45,48 @@
     </div>
 {% endblock content %}
 
+{% block extra_javascript %}
+    {% include 'bundles/datatables-js.html' %}
+    <script type="text/javascript" src="{% static 'js/filterDropDown/filterDropDown.min.js' %}"></script>
+{% endblock %}
+
+{% block extra_css %}
+    {% include 'bundles/datatables-css.html' %}
+{% endblock %}
+
+{% block extra_script %}
+    $(document).ready(function() {
+        var groupColumn = 0;
+        var table = $('#tab_permissions_audit').DataTable({
+            columnDefs: [
+                { "visible": false, "targets": groupColumn }
+            ],
+            order: [[ groupColumn, 'asc' ], [ 2, 'asc' ] ],
+            filterDropDown:
+            {
+                columns: [                                       
+                    {
+                        idx: 0,
+                        title: 'Source'
+                    }
+                ],
+                bootstrap: true
+            },
+            drawCallback: function ( settings ) {
+                var api = this.api();
+                var rows = api.rows( {page:'current'} ).nodes();
+                var last=null;
+    
+                api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
+                    if ( last !== group ) {
+                        $(rows).eq( i ).before(
+                            '<tr class="tr-group"><td colspan="3">' + group + '</td></tr>'
+                        );
+    
+                        last = group;
+                    }
+                } );
+            }
+        } );
+    } );
+{% endblock %}

allianceauth/permissions_tool/templates/permissions_tool/audit_row.html

@@ -1,10 +1,25 @@
+{% load evelinks %}
+
 <tr>
-    <td>
-        {% if forloop.first %}
-            <b>{{ group }}</b>
-        {% endif %}
+    <td>        
+        {{ type }}: {{ name }}
+    </td>
+    <td class="text-right">
+        <img src="{{ user.profile.main_character|character_portrait_url:32 }}" class="img-circle">
     </td>
     <td>
-        {{ user }}
+        <strong>{{ user }}<br></strong>
+        {{ user.profile.main_character.character_name }}
+    </td>
+    <td class="text-left">
+        {% if user.profile.main_character %}
+            <a href="{{ user.profile.main_character|dotlan_corporation_url }}" target="_blank">
+                {{ user.profile.main_character.corporation_name }}
+            </a><br>
+            {{ user.profile.main_character.alliance_name|default_if_none:"" }}
+        {% else %}
+            (unknown)
+        {% endif %}
+        
     </td>
 </tr>

allianceauth/permissions_tool/templates/permissions_tool/audit_state_row.html

@@ -1,11 +0,0 @@
-{% load i18n %}
-<tr>
-    <td>
-        {% if forloop.first %}
-            <b>{% trans 'State' %}: {{ state }}</b>
-        {% endif %}
-    </td>
-    <td>
-        {{ user }}
-    </td>
-</tr>

allianceauth/permissions_tool/templates/permissions_tool/overview.html

@@ -8,19 +8,17 @@
 {% block content %}
     <div class="col-sm-12">
         <h1 class="page-header">{% trans "Permissions Overview" %}</h1>
-        {% if request.GET.all != 'yes' %}
-            <span class="pull-right">
-                {% blocktrans %}Showing only applied permissions{% endblocktrans %}
-                <a href="{% url 'permissions_tool:overview' %}?all=yes" class="btn btn-primary">{% trans "Show All" %}</a>
-            </span>
+        <p>
+        {% if request.GET.all != 'yes' %}            
+            {% blocktrans %}Showing only applied permissions{% endblocktrans %}
+            <a href="{% url 'permissions_tool:overview' %}?all=yes" class="btn btn-primary">{% trans "Show All" %}</a>            
         {% else %}
-            <span class="pull-right">
-                {% blocktrans %}Showing all permissions{% endblocktrans %}
-                <a href="{% url 'permissions_tool:overview' %}?all=no" class="btn btn-primary">{% trans "Show Applied" %}</a>
-            </span>
+            {% blocktrans %}Showing all permissions{% endblocktrans %}
+            <a href="{% url 'permissions_tool:overview' %}?all=no" class="btn btn-primary">{% trans "Show Applied" %}</a>
         {% endif %}
+        </p>
         <div class="table-responsive">
-            <table class="table table-striped" id="tab_permissions_overview">
+            <table class="table table-striped" id="tab_permissions_overview" style="width:100%">
                 <thead>
                     <tr>
                         <th>
@@ -81,7 +79,8 @@
 {% endblock content %}
 
 {% block extra_javascript %}
-    {% include 'bundles/datatables-js.html' %}
+    {% include 'bundles/datatables-js.html' %}    
+    <script type="text/javascript" src="{% static 'js/filterDropDown/filterDropDown.min.js' %}"></script>
 {% endblock %}
 
 {% block extra_css %}
@@ -89,9 +88,40 @@
 {% endblock %}
 
 {% block extra_script %}
-    $(document).ready(function(){
-        $('#tab_permissions_overview').DataTable({
-            order: [ [ 0, "asc" ], [ 1, "asc" ], [ 2, "asc" ] ]            
-        });
-    });
+    $(document).ready(function() {
+        var groupColumn = 0;
+        var table = $('#tab_permissions_overview').DataTable({
+            columnDefs: [
+                { "visible": false, "targets": groupColumn }
+            ],
+            order: [[ groupColumn, 'asc' ], [ 1, 'asc' ], [ 2, 'asc' ] ],
+            filterDropDown:
+            {
+                columns: [                                       
+                    {
+                        idx: 0
+                    },
+                    {
+                        idx: 1
+                    }
+                ],
+                bootstrap: true
+            },
+            drawCallback: function ( settings ) {
+                var api = this.api();
+                var rows = api.rows( {page:'current'} ).nodes();
+                var last=null;
+    
+                api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
+                    if ( last !== group ) {
+                        $(rows).eq( i ).before(
+                            '<tr class="tr-group"><td colspan="6">' + group + '</td></tr>'
+                        );
+    
+                        last = group;
+                    }
+                } );
+            }
+        } );
+    } );
 {% endblock %}