From 50a8bf1b9d7d53457027b72848a19b568863769b Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Thu, 18 Apr 2013 16:58:03 +0200
Subject: [PATCH] Possibility to sort quotas listing page.

see #154 & #391
---
 .../0025_auto__add_field_quota_mbox.py        | 123 ++++++++++++++++++
 .../admin/migrations/0026_set_quota_mbox.py   | 121 +++++++++++++++++
 modoboa/admin/models.py                       |   8 +-
 modoboa/admin/static/admin/css/admin.css      |   1 -
 modoboa/admin/static/admin/js/admin.js        |  27 ++++
 modoboa/admin/templates/admin/identities.html |   2 +
 modoboa/admin/templates/admin/quotas.html     |  10 +-
 modoboa/admin/views.py                        |  17 ++-
 modoboa/static/css/custom.css                 |   4 +
 modoboa/static/css/jquery.sortable.css        |   7 +
 modoboa/static/js/global.js                   |   2 +-
 modoboa/static/js/jquery.sortable.js          |  81 ++++++++++++
 12 files changed, 390 insertions(+), 13 deletions(-)
 create mode 100644 modoboa/admin/migrations/0025_auto__add_field_quota_mbox.py
 create mode 100644 modoboa/admin/migrations/0026_set_quota_mbox.py
 create mode 100644 modoboa/static/css/jquery.sortable.css
 create mode 100644 modoboa/static/js/jquery.sortable.js

diff --git a/modoboa/admin/migrations/0025_auto__add_field_quota_mbox.py b/modoboa/admin/migrations/0025_auto__add_field_quota_mbox.py
new file mode 100644
index 000000000..4242aafca
--- /dev/null
+++ b/modoboa/admin/migrations/0025_auto__add_field_quota_mbox.py
@@ -0,0 +1,123 @@
+# -*- coding: utf-8 -*-
+import datetime
+from south.db import db
+from south.v2 import SchemaMigration
+from django.db import models
+
+
+class Migration(SchemaMigration):
+
+    def forwards(self, orm):
+        # Adding field 'Quota.mbox'
+        db.add_column(u'admin_quota', 'mbox',
+                      self.gf('django.db.models.fields.related.OneToOneField')(related_name='quota_value', unique=True, null=True, to=orm['admin.Mailbox']),
+                      keep_default=False)
+
+
+    def backwards(self, orm):
+        # Deleting field 'Quota.mbox'
+        db.delete_column(u'admin_quota', 'mbox_id')
+
+
+    models = {
+        u'admin.alias': {
+            'Meta': {'ordering': "['domain__name', 'address']", 'unique_together': "(('address', 'domain'),)", 'object_name': 'Alias'},
+            'address': ('django.db.models.fields.CharField', [], {'max_length': '254'}),
+            'dates': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['admin.ObjectDates']"}),
+            'domain': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['admin.Domain']"}),
+            'enabled': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            'extmboxes': ('django.db.models.fields.TextField', [], {'blank': 'True'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'mboxes': ('django.db.models.fields.related.ManyToManyField', [], {'to': u"orm['admin.Mailbox']", 'symmetrical': 'False'})
+        },
+        u'admin.domain': {
+            'Meta': {'ordering': "['name']", 'object_name': 'Domain'},
+            'dates': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['admin.ObjectDates']"}),
+            'enabled': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.CharField', [], {'unique': 'True', 'max_length': '100'}),
+            'quota': ('django.db.models.fields.IntegerField', [], {})
+        },
+        u'admin.domainalias': {
+            'Meta': {'object_name': 'DomainAlias'},
+            'dates': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['admin.ObjectDates']"}),
+            'enabled': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.CharField', [], {'unique': 'True', 'max_length': '100'}),
+            'target': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['admin.Domain']"})
+        },
+        u'admin.extension': {
+            'Meta': {'object_name': 'Extension'},
+            'enabled': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.CharField', [], {'max_length': '150'})
+        },
+        u'admin.mailbox': {
+            'Meta': {'object_name': 'Mailbox'},
+            'address': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            'dates': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['admin.ObjectDates']"}),
+            'domain': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['admin.Domain']"}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'quota': ('django.db.models.fields.IntegerField', [], {}),
+            'user': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['auth.User']"})
+        },
+        u'admin.objectaccess': {
+            'Meta': {'unique_together': "(('user', 'content_type', 'object_id'),)", 'object_name': 'ObjectAccess'},
+            'content_type': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['contenttypes.ContentType']"}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'is_owner': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            'object_id': ('django.db.models.fields.PositiveIntegerField', [], {}),
+            'user': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['auth.User']"})
+        },
+        u'admin.objectdates': {
+            'Meta': {'object_name': 'ObjectDates'},
+            'creation': ('django.db.models.fields.DateTimeField', [], {'auto_now_add': 'True', 'blank': 'True'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'last_modification': ('django.db.models.fields.DateTimeField', [], {'auto_now': 'True', 'blank': 'True'})
+        },
+        u'admin.quota': {
+            'Meta': {'object_name': 'Quota'},
+            'bytes': ('django.db.models.fields.IntegerField', [], {'default': '0'}),
+            'mbox': ('django.db.models.fields.related.OneToOneField', [], {'related_name': "'quota_value'", 'unique': 'True', 'null': 'True', 'to': u"orm['admin.Mailbox']"}),
+            'messages': ('django.db.models.fields.IntegerField', [], {'default': '0'}),
+            'username': ('django.db.models.fields.EmailField', [], {'max_length': '75', 'primary_key': 'True'})
+        },
+        u'auth.group': {
+            'Meta': {'object_name': 'Group'},
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.CharField', [], {'unique': 'True', 'max_length': '80'}),
+            'permissions': ('django.db.models.fields.related.ManyToManyField', [], {'to': u"orm['auth.Permission']", 'symmetrical': 'False', 'blank': 'True'})
+        },
+        u'auth.permission': {
+            'Meta': {'ordering': "(u'content_type__app_label', u'content_type__model', u'codename')", 'unique_together': "((u'content_type', u'codename'),)", 'object_name': 'Permission'},
+            'codename': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            'content_type': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['contenttypes.ContentType']"}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.CharField', [], {'max_length': '50'})
+        },
+        u'auth.user': {
+            'Meta': {'object_name': 'User'},
+            'date_joined': ('django.db.models.fields.DateTimeField', [], {'default': 'datetime.datetime.now'}),
+            'email': ('django.db.models.fields.EmailField', [], {'max_length': '75', 'blank': 'True'}),
+            'first_name': ('django.db.models.fields.CharField', [], {'max_length': '30', 'blank': 'True'}),
+            'groups': ('django.db.models.fields.related.ManyToManyField', [], {'to': u"orm['auth.Group']", 'symmetrical': 'False', 'blank': 'True'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'is_active': ('django.db.models.fields.BooleanField', [], {'default': 'True'}),
+            'is_staff': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            'is_superuser': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            'last_login': ('django.db.models.fields.DateTimeField', [], {'default': 'datetime.datetime.now'}),
+            'last_name': ('django.db.models.fields.CharField', [], {'max_length': '30', 'blank': 'True'}),
+            'password': ('django.db.models.fields.CharField', [], {'max_length': '128'}),
+            'user_permissions': ('django.db.models.fields.related.ManyToManyField', [], {'to': u"orm['auth.Permission']", 'symmetrical': 'False', 'blank': 'True'}),
+            'username': ('django.db.models.fields.CharField', [], {'unique': 'True', 'max_length': '30'})
+        },
+        u'contenttypes.contenttype': {
+            'Meta': {'ordering': "('name',)", 'unique_together': "(('app_label', 'model'),)", 'object_name': 'ContentType', 'db_table': "'django_content_type'"},
+            'app_label': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'model': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            'name': ('django.db.models.fields.CharField', [], {'max_length': '100'})
+        }
+    }
+
+    complete_apps = ['admin']
\ No newline at end of file
diff --git a/modoboa/admin/migrations/0026_set_quota_mbox.py b/modoboa/admin/migrations/0026_set_quota_mbox.py
new file mode 100644
index 000000000..e60b4441a
--- /dev/null
+++ b/modoboa/admin/migrations/0026_set_quota_mbox.py
@@ -0,0 +1,121 @@
+# -*- coding: utf-8 -*-
+import datetime
+from south.db import db
+from south.v2 import DataMigration
+from django.db import models
+
+class Migration(DataMigration):
+
+    def forwards(self, orm):
+        "Write your forwards methods here."
+        for mb in orm["admin.Mailbox"].objects.all():
+            q = orm["admin.Quota"].objects.get(username="%s@%s" % (mb.address, mb.domain.name))
+            q.mbox = mb
+            q.save()
+
+    def backwards(self, orm):
+        "Write your backwards methods here."
+
+    models = {
+        u'admin.alias': {
+            'Meta': {'ordering': "['domain__name', 'address']", 'unique_together': "(('address', 'domain'),)", 'object_name': 'Alias'},
+            'address': ('django.db.models.fields.CharField', [], {'max_length': '254'}),
+            'dates': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['admin.ObjectDates']"}),
+            'domain': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['admin.Domain']"}),
+            'enabled': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            'extmboxes': ('django.db.models.fields.TextField', [], {'blank': 'True'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'mboxes': ('django.db.models.fields.related.ManyToManyField', [], {'to': u"orm['admin.Mailbox']", 'symmetrical': 'False'})
+        },
+        u'admin.domain': {
+            'Meta': {'ordering': "['name']", 'object_name': 'Domain'},
+            'dates': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['admin.ObjectDates']"}),
+            'enabled': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.CharField', [], {'unique': 'True', 'max_length': '100'}),
+            'quota': ('django.db.models.fields.IntegerField', [], {})
+        },
+        u'admin.domainalias': {
+            'Meta': {'object_name': 'DomainAlias'},
+            'dates': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['admin.ObjectDates']"}),
+            'enabled': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.CharField', [], {'unique': 'True', 'max_length': '100'}),
+            'target': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['admin.Domain']"})
+        },
+        u'admin.extension': {
+            'Meta': {'object_name': 'Extension'},
+            'enabled': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.CharField', [], {'max_length': '150'})
+        },
+        u'admin.mailbox': {
+            'Meta': {'object_name': 'Mailbox'},
+            'address': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            'dates': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['admin.ObjectDates']"}),
+            'domain': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['admin.Domain']"}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'quota': ('django.db.models.fields.IntegerField', [], {}),
+            'user': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['auth.User']"})
+        },
+        u'admin.objectaccess': {
+            'Meta': {'unique_together': "(('user', 'content_type', 'object_id'),)", 'object_name': 'ObjectAccess'},
+            'content_type': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['contenttypes.ContentType']"}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'is_owner': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            'object_id': ('django.db.models.fields.PositiveIntegerField', [], {}),
+            'user': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['auth.User']"})
+        },
+        u'admin.objectdates': {
+            'Meta': {'object_name': 'ObjectDates'},
+            'creation': ('django.db.models.fields.DateTimeField', [], {'auto_now_add': 'True', 'blank': 'True'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'last_modification': ('django.db.models.fields.DateTimeField', [], {'auto_now': 'True', 'blank': 'True'})
+        },
+        u'admin.quota': {
+            'Meta': {'object_name': 'Quota'},
+            'bytes': ('django.db.models.fields.IntegerField', [], {'default': '0'}),
+            'mbox': ('django.db.models.fields.related.OneToOneField', [], {'related_name': "'quota_value'", 'unique': 'True', 'null': 'True', 'to': u"orm['admin.Mailbox']"}),
+            'messages': ('django.db.models.fields.IntegerField', [], {'default': '0'}),
+            'username': ('django.db.models.fields.EmailField', [], {'max_length': '75', 'primary_key': 'True'})
+        },
+        u'auth.group': {
+            'Meta': {'object_name': 'Group'},
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.CharField', [], {'unique': 'True', 'max_length': '80'}),
+            'permissions': ('django.db.models.fields.related.ManyToManyField', [], {'to': u"orm['auth.Permission']", 'symmetrical': 'False', 'blank': 'True'})
+        },
+        u'auth.permission': {
+            'Meta': {'ordering': "(u'content_type__app_label', u'content_type__model', u'codename')", 'unique_together': "((u'content_type', u'codename'),)", 'object_name': 'Permission'},
+            'codename': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            'content_type': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['contenttypes.ContentType']"}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.CharField', [], {'max_length': '50'})
+        },
+        u'auth.user': {
+            'Meta': {'object_name': 'User'},
+            'date_joined': ('django.db.models.fields.DateTimeField', [], {'default': 'datetime.datetime.now'}),
+            'email': ('django.db.models.fields.EmailField', [], {'max_length': '75', 'blank': 'True'}),
+            'first_name': ('django.db.models.fields.CharField', [], {'max_length': '30', 'blank': 'True'}),
+            'groups': ('django.db.models.fields.related.ManyToManyField', [], {'to': u"orm['auth.Group']", 'symmetrical': 'False', 'blank': 'True'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'is_active': ('django.db.models.fields.BooleanField', [], {'default': 'True'}),
+            'is_staff': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            'is_superuser': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            'last_login': ('django.db.models.fields.DateTimeField', [], {'default': 'datetime.datetime.now'}),
+            'last_name': ('django.db.models.fields.CharField', [], {'max_length': '30', 'blank': 'True'}),
+            'password': ('django.db.models.fields.CharField', [], {'max_length': '128'}),
+            'user_permissions': ('django.db.models.fields.related.ManyToManyField', [], {'to': u"orm['auth.Permission']", 'symmetrical': 'False', 'blank': 'True'}),
+            'username': ('django.db.models.fields.CharField', [], {'unique': 'True', 'max_length': '30'})
+        },
+        u'contenttypes.contenttype': {
+            'Meta': {'ordering': "('name',)", 'unique_together': "(('app_label', 'model'),)", 'object_name': 'ContentType', 'db_table': "'django_content_type'"},
+            'app_label': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'model': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            'name': ('django.db.models.fields.CharField', [], {'max_length': '100'})
+        }
+    }
+
+    complete_apps = ['admin']
+    symmetrical = True
diff --git a/modoboa/admin/models.py b/modoboa/admin/models.py
index c14357b26..b18c29d6d 100644
--- a/modoboa/admin/models.py
+++ b/modoboa/admin/models.py
@@ -327,11 +327,7 @@ class User(DUser):
         """
         if self.is_superuser:
             return Mailbox.objects.all()
-        mboxes = []
-        domains = self.get_domains()
-        for dom in domains:
-            mboxes += dom.mailbox_set.all()
-        return mboxes
+        return Mailbox.objects.filter(domain__in=self.get_domains())
         
     def get_mbaliases(self):
         """Return the mailbox aliases that belong to this user
@@ -793,6 +789,8 @@ class Quota(models.Model):
     bytes = models.IntegerField(default=0)
     messages = models.IntegerField(default=0)
 
+    mbox = models.OneToOneField(Mailbox, related_name="quota_value", null=True)
+
 
 class Alias(DatesAware):
     address = models.CharField(
diff --git a/modoboa/admin/static/admin/css/admin.css b/modoboa/admin/static/admin/css/admin.css
index 58ece8008..a28919dd9 100644
--- a/modoboa/admin/static/admin/css/admin.css
+++ b/modoboa/admin/static/admin/css/admin.css
@@ -10,7 +10,6 @@ span.title {
     width: 180px;
 }
 
-table th#quotabar,
 table th#actions {
     text-align: right;
 }
diff --git a/modoboa/admin/static/admin/js/admin.js b/modoboa/admin/static/admin/js/admin.js
index 72dfb7383..b22b871d7 100644
--- a/modoboa/admin/static/admin/js/admin.js
+++ b/modoboa/admin/static/admin/js/admin.js
@@ -37,6 +37,10 @@ Admin.prototype = {
 
     list_cb: function(data) {
         $("#listing").html(data.table);
+        $(".sortable").sortable({
+            onSortOrderChange: $.proxy(this.change_sort_order, this)
+        });
+        this.set_sort_order();
         $("#bottom-bar-right").html(data.paginbar);
         $("#pagination_bar").find(".disabled a").click(function(e) {
             e.preventDefault();
@@ -52,6 +56,29 @@ Admin.prototype = {
         $("#searchform").submit($.proxy(this.do_search, this));
     },
 
+    set_sort_order: function() {
+        var sort_order = this.navobj.getparam("sort_order");
+        var sort_dir;
+
+        if (!sort_order) {
+            return;
+        }
+        if (sort_order[0] == '-') {
+            sort_dir = "desc";
+            sort_order = sort_order.substr(1);
+        } else {
+            sort_dir = 'asc';
+        }
+        $("th[data-sort_order=" + sort_order + "]").sortable('select', sort_dir);
+    },
+
+    change_sort_order: function(sort_order, dir) {
+        if (dir == "desc") {
+            sort_order = "-" + sort_order;
+        }
+        this.navobj.setparam("sort_order", sort_order).update();
+    },
+
     do_search: function(e) {
         e.preventDefault();
         var squery = $("#searchquery").attr("value");
diff --git a/modoboa/admin/templates/admin/identities.html b/modoboa/admin/templates/admin/identities.html
index f12e54b28..1ba08cdd9 100644
--- a/modoboa/admin/templates/admin/identities.html
+++ b/modoboa/admin/templates/admin/identities.html
@@ -2,8 +2,10 @@
 {% block pagetitle %}{% trans "Identities" %}{% endblock %}
 {% block html_head %}
 {{ block.super }}
+<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/jquery.sortable.css" />
 <script type="text/javascript" src="{{ STATIC_URL }}js/creation_wizard.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}js/autocompleter.js"></script>
+<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.sortable.js"></script>
 <script type="text/javascript">
 function get_domains_list(container) {
     $.getJSON("{% url 'modoboa.admin.views.domains_list' %}", function(data) {
diff --git a/modoboa/admin/templates/admin/quotas.html b/modoboa/admin/templates/admin/quotas.html
index 26c7d50b2..0c683aa42 100644
--- a/modoboa/admin/templates/admin/quotas.html
+++ b/modoboa/admin/templates/admin/quotas.html
@@ -1,11 +1,11 @@
 {% load i18n libextras %}
-<table class="table">
+<table class="table table-fixed">
   <thead>
     <tr>
-      <th>{% trans "Address" %}</th>
-      <th>{% trans "Value" %}</th>
-      <th>{% trans "Limit" %}</th>
-      <th id="quotabar">{% trans "%" %}</th>
+      <th width="50%" class="sortable" data-sort_order="address">{% trans "Address" %}</th>
+      <th class="sortable" data-sort_order="quota_value__bytes">{% trans "Value" %}</th>
+      <th class="sortable" data-sort_order="quota">{% trans "Limit" %}</th>
+      <th class="sortable" data-sort_order="quota_usage" id="quotabar">{% trans "Usage (%)" %}</th>
     </tr>
   </thead>
   <tbody>
diff --git a/modoboa/admin/views.py b/modoboa/admin/views.py
index a648350d7..99f680e07 100644
--- a/modoboa/admin/views.py
+++ b/modoboa/admin/views.py
@@ -344,7 +344,22 @@ def mboxes_list(request):
 @login_required
 @permission_required("admin.add_mailbox")
 def list_quotas(request, tplname="admin/quotas.html"):
+    sort_order = request.GET.get("sort_order", "address")
     mboxes = request.user.get_mailboxes()
+    if sort_order.startswith("-"):
+        sort_dir = "-"
+        sort_order = sort_order[1:]
+    else:
+        sort_dir = ""
+    if sort_order in ["address", "quota", "quota_value__bytes"]:
+        mboxes = mboxes.order_by("%s%s" % (sort_dir, sort_order))
+    elif sort_order == "quota_usage":
+        mboxes.select_related().extra(
+            select={'quota_usage': 'quota_value.bytes / (quota * 1048576) * 100'},
+            order_by=["%s%s" % (sort_dir, sort_order)]
+        )
+    else:
+        raise AdminError(_("Invalid request"))
     paginator = Paginator(mboxes, int(parameters.get_admin("ITEMS_PER_PAGE")))
     pagenum = int(request.GET.get("page", "1"))
     try:
@@ -356,7 +371,7 @@ def list_quotas(request, tplname="admin/quotas.html"):
         "page": page.number,
         "paginbar": pagination_bar(page),
         "table": _render_to_string(request, tplname, {
-            "mboxes": mboxes
+            "mboxes": page
         })
     })
 
diff --git a/modoboa/static/css/custom.css b/modoboa/static/css/custom.css
index 081782426..e9cf7f9b9 100644
--- a/modoboa/static/css/custom.css
+++ b/modoboa/static/css/custom.css
@@ -97,4 +97,8 @@ body {
 .label a {
     color: #FFFFFF;
     text-decoration: none;
+}
+
+.table-fixed {
+    table-layout: fixed;
 }
\ No newline at end of file
diff --git a/modoboa/static/css/jquery.sortable.css b/modoboa/static/css/jquery.sortable.css
new file mode 100644
index 000000000..1cab49589
--- /dev/null
+++ b/modoboa/static/css/jquery.sortable.css
@@ -0,0 +1,7 @@
+.sort-header {
+    cursor: pointer;
+}
+
+.sort-header i {
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/modoboa/static/js/global.js b/modoboa/static/js/global.js
index 2f0d51e55..3074a6a0f 100644
--- a/modoboa/static/js/global.js
+++ b/modoboa/static/js/global.js
@@ -97,7 +97,7 @@ if (!Object.keys) {
  */
 function simple_ajax_form_post(e, options) {
     e.preventDefault();
-    var $form = (options.formid != undefined) ? $("#" + options.formid) : $("form");
+    var $form = (options.formid !== undefined) ? $("#" + options.formid) : $("form");
     var defaults = {reload_on_success: true, reload_mode: 'full', modal: true};
     var opts = $.extend({}, defaults, options);
     var args = $form.serialize();
diff --git a/modoboa/static/js/jquery.sortable.js b/modoboa/static/js/jquery.sortable.js
new file mode 100644
index 000000000..d864de075
--- /dev/null
+++ b/modoboa/static/js/jquery.sortable.js
@@ -0,0 +1,81 @@
+(function($) {
+     var Sortable = function(element, options) {
+         this.initialize(element, options);
+     };
+
+     Sortable.prototype = {
+         constructor: Sortable,
+
+         initialize: function(element, options) {
+             this.$element = $(element);
+             this.options = $.extend({}, $.fn.sortable.defaults, options);
+             this.$element.addClass('sort-header');
+             this.listen();
+         },
+
+         listen: function() {
+             this.$element.click($.proxy(this.sort, this));
+         },
+
+         change_sort_order: function(e, new_sort_order) {
+             if (new_sort_order != this.$element.attr('data-sort_order')) {
+                 this.$element.removeClass('sort-header-desc sort-header-asc');
+             }
+         },
+
+         sort: function(e) {
+             e.preventDefault();
+             var dir = this.select();
+
+             if (this.options.onSortOrderChange) {
+                 this.options.onSortOrderChange(this.$element.attr('data-sort_order'), dir);
+             }
+         },
+
+         select: function(dir) {
+             $("i.sort-selection").remove();
+             if (dir !== undefined) {
+                 this.$element.removeClass("sort-header-" + ((dir == "asc") ? "desc" : "asc"));
+                 this.$element.addClass("sort-header-" + dir);
+             } else {
+                 if (this.$element.hasClass("sort-header-desc")) {
+                     this.$element
+                         .removeClass("sort-header-desc")
+                         .addClass("sort-header-asc");
+                     dir = "asc";
+                 } else {
+                     this.$element
+                         .removeClass("sort-header-asc")
+                         .addClass("sort-header-desc");
+                     dir = "desc";
+                 }
+             }
+             this.$element.append($("<i/>", {
+                 "class": "sort-selection icon-chevron-" + ((dir == 'asc') ? 'up' : 'down')
+             }));
+             return dir;
+         }
+     };
+
+     $.fn.sortable = function(method) {
+        var args = arguments;
+
+        return this.each(function() {
+            var $this = $(this),
+                data = $this.data('sortable'),
+                options = typeof method === "object" && method;
+
+            if (!data) {
+                $this.data('sortable', new Sortable(this, options));
+                data = $this.data('sortable');
+            }
+            if (typeof method === "string") {
+                data[method].apply(data, Array.prototype.slice.call(args, 1));
+            }
+        });
+     };
+
+     $.fn.sortable.defaults = {
+         onSortOrderChange: null
+     };
+})(jQuery);
\ No newline at end of file