dashboard: sort template list

circle/dashboard/static/dashboard/template-list.js

@@ -20,6 +20,23 @@ $(function() {
     });
     return false;
   });
+  
+  /* template table sort */
+  var ttable = $(".template-list-table").stupidtable();
+
+  ttable.on("beforetablesort", function(event, data) {
+    // pass
+  });
+
+  ttable.on("aftertablesort", function(event, data) {
+    $(".template-list-table thead th i").remove();
+
+    var icon_html = '<i class="icon-sort-' + (data.direction == "desc" ? "up" : "down") + ' pull-right" style="position: absolute;"></i>';
+    $(".template-list-table thead th").eq(data.column).append(icon_html);
+  });
+
+  // only if js is enabled
+  $(".template-list-table thead th").css("cursor", "pointer");
 });
 
 

circle/dashboard/tables.py

@@ -203,16 +203,29 @@ class TemplateListTable(Table):
     name = LinkColumn(
         'dashboard.views.template-detail',
         args=[A('pk')],
+        attrs={'th': {'data-sort': "string"}}
     )
     num_cores = Column(
         verbose_name=_("Cores"),
+        attrs={'th': {'data-sort': "int"}}
     )
     ram_size = TemplateColumn(
         "{{ record.ram_size }} Mb",
+        attrs={'th': {'data-sort': "string"}}
     )
     lease = TemplateColumn(
         "{{ record.lease.name }}",
         verbose_name=_("Lease"),
+        attrs={'th': {'data-sort': "string"}}
+    )
+    arch = Column(
+        attrs={'th': {'data-sort': "string"}}
+    )
+    system = Column(
+        attrs={'th': {'data-sort': "string"}}
+    )
+    access_method = Column(
+        attrs={'th': {'data-sort': "string"}}
     )
     actions = TemplateColumn(
         verbose_name=_("Actions"),

circle/dashboard/templates/dashboard/template-list.html

@@ -55,5 +55,6 @@
 {% endblock %}
 
 {% block extra_js %}
-<script src="{{ STATIC_URL}}dashboard/template-list.js"></script>
+  <script src="{{ STATIC_URL}}dashboard/template-list.js"></script>
+  <script src="{{ STATIC_URL}}dashboard/js/stupidtable.min.js"></script>
 {% endblock %}