FEATURE: Sort queries by names, last_run_at by clicking table headers

assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6

@@ -119,6 +119,13 @@ export default Ember.Controller.extend({
       this.save().then(() => this.send('run'));
     },
 
+    sortByProperty(property) {
+      if (this.sortBy == `${property}:desc`){
+        this.set('sortBy', [`${property}:asc`]);}
+      else {
+        this.set('sortBy', [`${property}:desc`]);
+    }},
+
     create() {
       const name = this.get("newQueryName").trim();
       this.set('loading', true);

assets/javascripts/discourse/templates/admin/plugins-explorer.hbs

@@ -147,9 +147,18 @@
       {{#if sortedQueries.length}}
         <table class="recent-queries">
           <thead class="heading-container">
-            <th class="col heading name">{{i18n 'explorer.query_name'}}</th>
-            <th class="col heading user">{{i18n 'explorer.query_user'}}</th>
-            <th class="col heading time">{{i18n 'explorer.query_time'}}</th>
+            <th {{action "sortByProperty" "name"}} class="col heading name">
+              <i class="fa fa-sort"></i>
+              {{i18n 'explorer.query_name'}}
+            </th>
+            <th {{action "sortByProperty" "username"}} class="col heading user">
+              <i class="fa fa-sort"></i>
+              {{i18n 'explorer.query_user'}}
+            </th>
+            <th {{action "sortByProperty" "last_run_at"}} class="col heading time">
+              <i class="fa fa-sort"></i>
+              {{i18n 'explorer.query_time'}}
+            </th>
           </thead>
           <tr></tr>
           {{#each sortedQueries as |query|}}

assets/stylesheets/explorer.scss

@@ -260,6 +260,9 @@
   .query-desc {
     color: $primary-high;
   }
+  th:hover{
+    cursor: pointer;
+  }
 }
 
 .explorer-pad-bottom {