From 777595412328cf59a659860910935179507c60d3 Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
Date: Mon, 9 Sep 2019 15:02:17 +0200
Subject: [PATCH] Make admin user list sortable.
---
app/static/css/opaque.css | 40 ++++++++++++++++++++++++++++
app/tables.py | 24 ++++++++++++-----
app/templates/admin/admin.html.j2 | 44 ++++++++++++++++++++++++++++---
3 files changed, 98 insertions(+), 10 deletions(-)
diff --git a/app/static/css/opaque.css b/app/static/css/opaque.css
index dbb05de9..f46e2f60 100644
--- a/app/static/css/opaque.css
+++ b/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;
+}
diff --git a/app/tables.py b/app/tables.py
index 77f9a009..3a596c9a 100644
--- a/app/tables.py
+++ b/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):
diff --git a/app/templates/admin/admin.html.j2 b/app/templates/admin/admin.html.j2
index c5673203..b0320e33 100644
--- a/app/templates/admin/admin.html.j2
+++ b/app/templates/admin/admin.html.j2
@@ -1,8 +1,46 @@
{% 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);
--
GitLab