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

allianceauth/authentication/templates/public/login.html

@@ -2,9 +2,7 @@
 {% load static %}
 {% block page_title %}Login{% endblock %}
 {% block middle_box_content %}    
-    <p style="text-align:center">
     <a href="{% url 'auth_sso_login' %}{% if request.GET.next %}?next={{request.GET.next}}{%endif%}">
-            <img class="img-responsive" src="{% static 'img/sso/EVE_SSO_Login_Buttons_Large_Black.png' %}" border=0>
+        <img class="img-responsive center-block" src="{% static 'img/sso/EVE_SSO_Login_Buttons_Large_Black.png' %}" border=0>
     </a>
-    </p>
 {% endblock %}

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>
+        <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>
+                    {% 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 %}
+        {{ 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>
+        <p>
         {% 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>
         {% 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>
         {% 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>
@@ -82,6 +80,7 @@
 
 {% block extra_javascript %}
     {% include 'bundles/datatables-js.html' %}    
+    <script type="text/javascript" src="{% static 'js/filterDropDown/filterDropDown.min.js' %}"></script>
 {% endblock %}
 
 {% block extra_css %}
@@ -90,8 +89,39 @@
 
 {% block extra_script %}
     $(document).ready(function() {
-        $('#tab_permissions_overview').DataTable({
-            order: [ [ 0, "asc" ], [ 1, "asc" ], [ 2, "asc" ] ]            
+        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 %}

allianceauth/static/css/auth-base.css

@@ -43,6 +43,12 @@ ul.list-group.list-group-horizontal > li.list-group-item {
     justify-content: center;
 }
 
+/* group headers within a table */
+.tr-group {
+    font-weight: bold;
+    background-color: #e6e6e6 !important;
+}
+
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
     

allianceauth/static/js/filterDropDown/filterDropDown.min.js

@@ -0,0 +1 @@
+!function(t){function e(t){var e={columns:[],columnsIdxList:[],bootstrap:!1,autoSize:!0,label:"Filter "};if("bootstrap"in t&&"boolean"==typeof t.bootstrap&&(e.bootstrap=t.bootstrap),"autoSize"in t&&"boolean"==typeof t.autoSize&&(e.autoSize=t.autoSize),"label"in t&&"string"==typeof t.label&&(e.label=t.label),"columns"in t)for(var i=0;i<t.columns.length;i++){var n=t.columns[i];if("idx"in n&&"number"==typeof n.idx){var o=n.idx;e.columns[o]={title:null,maxWidth:null,autoSize:!0},e.columnsIdxList.push(o),"title"in n&&"string"==typeof n.title&&(e.columns[o].title=n.title),"maxWidth"in n&&"string"==typeof n.maxWidth&&(e.columns[o].maxWidth=n.maxWidth),"autoSize"in n&&"boolean"==typeof n.autoSize&&(e.columns[o].autoSize=n.autoSize)}}return e}t(document).on("preInit.dt",function(i,n){if("dt"===i.namespace){var o=new t.fn.dataTable.Api(n),a=o.table().node().id,l=o.init();if("filterDropDown"in l){var r=e(l.filterDropDown);if(0!=r.columns.length){var u=o.table().container(),s=a+"_filterWrapper",c=s+" "+(r.bootstrap?"form-inline":"");t(u).prepend('<div id="'+s+'" class="'+c+'">'+r.label+"</div>"),o.columns(r.columnsIdxList).every(function(){var e=this.index(),i=null!==r.columns[e].title?r.columns[e].title:t(this.header()).html();""==i&&(i="column "+(e+1));var n="form-control "+a+"_filterSelect",o=a+"_filterSelect"+e;t("#"+s).append('<select id="'+o+'" class="'+n+'"></select>');var l=t("#"+o).empty().append('<option value="">('+i+")</option>");r.autoSize&&r.columns[e].autoSize&&screen.width>768&&l.css("max-width",l.outerWidth()),null!==r.columns[e].maxWidth&&l.css("max-width",r.columns[e].maxWidth)})}}}}),t(document).on("init.dt",function(i,n){if("dt"===i.namespace){var o=new t.fn.dataTable.Api(n),a=o.table().node().id,l=o.init();if("filterDropDown"in l){var r=e(l.filterDropDown);o.table().container();o.columns(r.columnsIdxList).every(function(){var e=this,i=e.index(),n=t("#"+(a+"_filterSelect"+i));n.on("change",function(){var i=t.fn.dataTable.util.escapeRegex(t(this).val());e.search(i?"^"+i+"$":"",!0,!1).draw()}),e.data().unique().sort().each(function(t,e){""!=t&&n.append('<option value="'+t+'">'+t+"</option>")})})}}})}(jQuery);

allianceauth/static/js/filterDropDown/filterDropDown.min.js:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://github.com/ErikKalkoken/filterDropDown/blob/master/js/filterDropDown.min.js
+HostUrl=https://raw.githubusercontent.com/ErikKalkoken/filterDropDown/master/js/filterDropDown.min.js