Make admin user list sortable.

app/static/css/opaque.css

@@ -33,3 +33,43 @@ main {
   }
 }
 /* ### End sidenav-fixed offset ### */
+
+/* CSS for clickable th elements in tables. Needed for sortable table data with
+list js. On click on th header elements will be sorted accordingly. Also a caret
+indicator will show up how the column is sorted right now.; */
+.sort {
+  cursor: pointer;
+}
+.sort:after {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  content:"";
+  position: relative;
+  top:-10px;
+  right:-5px;
+}
+.sort.asc:after {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid #000000;
+  content:"";
+  position: relative;
+  top:13px;
+  right:-5px;
+}
+.sort.desc:after {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #000000;
+  content:"";
+  position: relative;
+  top:-10px;
+  right:-5px;
+}

app/tables.py

@@ -6,14 +6,24 @@ class AdminUserTable(Table):
     Declares the table describing colum by column.
     """
     classes = ['highlight', 'responsive-table']
-    username = Col('Username', column_html_attrs={'class': 'username'})
-    email = Col('Email', column_html_attrs={'class': 'email'})
-    role_id = Col('Role', column_html_attrs={'class': 'role'})
-    confirmed = Col('Confrimed Status', column_html_attrs={'class': 'confirmed'})
-    id = Col('User Id', column_html_attrs={'class': 'id'})
+    username = Col('Username', column_html_attrs={'class': 'username'},
+                   th_html_attrs={'class': 'sort',
+                                  'data-sort': 'username'})
+    email = Col('Email', column_html_attrs={'class': 'email'},
+                th_html_attrs={'class': 'sort',
+                               'data-sort': 'email'})
+    role_id = Col('Role', column_html_attrs={'class': 'role'},
+                  th_html_attrs={'class': 'sort',
+                                 'data-sort': 'role'})
+    confirmed = Col('Confrimed Status', column_html_attrs={'class': 'confirmed'},
+                    th_html_attrs={'class': 'sort',
+                                   'data-sort': 'confirmed'})
+    id = Col('User Id', column_html_attrs={'class': 'id'},
+             th_html_attrs={'class': 'sort',
+                            'data-sort': 'id'})
     url = LinkCol('Profile', 'admin.admin_user_page',
-                    url_kwargs=dict(user_id='id'),
-                    anchor_attrs={'class': 'waves-effect waves-light btn-small'})
+                  url_kwargs=dict(user_id='id'),
+                  anchor_attrs={'class': 'waves-effect waves-light btn-small'})
 
 
 class AdminUserItem(object):

app/templates/admin/admin.html.j2

 {% extends "base.html.j2" %}
 
 {% block page_content %}
+<style media="screen">
+.sort {
+  cursor: pointer;
+}
+.sort:after {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  content:"";
+  position: relative;
+  top:-10px;
+  right:-5px;
+}
+.sort.asc:after {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid #000000;
+  content:"";
+  position: relative;
+  top:13px;
+  right:-5px;
+}
+.sort.desc:after {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #000000;
+  content:"";
+  position: relative;
+  top:-10px;
+  right:-5px;
+}
+</style>
 <div class="col s12">
-  <div class="card large">
+  <div class="card">
     <div class="card-content">
       <span class="card-title">User list</span>
       <div id="users">
@@ -19,8 +57,8 @@
 </div>
 <script type="text/javascript">
 var options = {
-  valueNames: ['username', 'email', 'role', 'confirmed'],
-  page: 3,
+  valueNames: ['username', 'email', 'role', 'confirmed', 'id'],
+  page: 10,
   pagination: true
 };
 var userList = new List('users', options);