FEATURE: Sorting per column on topic list

app/controllers/knowledge_explorer/knowledge_explorer_controller.rb

@@ -9,6 +9,8 @@ module KnowledgeExplorer
         tags: params[:tags],
         category: params[:category],
         search_term: params[:search],
+        ascending: params[:ascending],
+        order: params[:order],
         page: params[:page]
       }
 

assets/javascripts/discourse/components/knowledge-explorer-topic-list.js.es6

@@ -1,3 +1,25 @@
+import discourseComputed from "discourse-common/utils/decorators";
+
 export default Ember.Component.extend({
-  classNames: "knowledge-explorer-topic-list"
+  classNames: "knowledge-explorer-topic-list",
+  @discourseComputed("order")
+  sortTitle(order) {
+    return order === "title";
+  },
+
+  @discourseComputed("order")
+  sortActivity(order) {
+    return order === "activity";
+  },
+
+  actions: {
+    sortListActivity() {
+      this.sortBy("activity");
+      return false;
+    },
+    sortListTitle() {
+      this.sortBy("title");
+      return false;
+    }
+  }
 });

assets/javascripts/discourse/controllers/knowledge-explorer.js.es6

@@ -18,8 +18,10 @@ function mergeCategories(results) {
 export default Ember.Controller.extend({
   application: Ember.inject.controller(),
   queryParams: {
+    ascending: "ascending",
     filterCategories: "category",
     filterTags: "tags",
+    orderColumn: "order",
     searchTerm: "search",
     selectedTopic: "topic"
   },
@@ -36,6 +38,8 @@ export default Ember.Controller.extend({
   selectedTopic: null,
   topic: null,
   expandedFilters: false,
+  ascending: null,
+  orderColumn: null,
 
   @on("init")
   _setupFilters() {
@@ -149,6 +153,21 @@ export default Ember.Controller.extend({
       this.send("refreshModel");
     },
 
+    sortBy(column) {
+      const order = this.orderColumn;
+      const ascending = this.ascending;
+      if (column === "title") {
+        this.set("orderColumn", "title");
+      } else if (column === "activity") {
+        this.set("orderColumn", "activity");
+      }
+
+      if (!ascending && order) this.set("ascending", true);
+      else this.set("ascending", "");
+
+      this.send("refreshModel");
+    },
+
     loadMore() {
       if (this.canLoadMore) {
         this.set("isLoadingMore", true);
@@ -172,7 +191,9 @@ export default Ember.Controller.extend({
       const params = this.getProperties(
         "filterCategories",
         "filterTags",
-        "searchTerm"
+        "searchTerm",
+        "ascending",
+        "orderColumn"
       );
 
       KnowledgeExplorer.list(params).then(result => {

assets/javascripts/discourse/models/knowledge-explorer.js.es6

@@ -11,6 +11,8 @@ export default {
       filters.push(`category=${params.filterCategories}`);
     if (params.filterTags) filters.push(`tags=${params.filterTags}`);
     if (params.searchTerm) filters.push(`search=${params.searchTerm}`);
+    if (params.ascending) filters.push("ascending=true");
+    if (params.orderColumn) filters.push(`order=${params.orderColumn}`);
     if (params.page) filters.push(`page=${params.page}`);
 
     let promise = ajax(`/knowledge-explorer.json?${filters.join("&")}`);

assets/javascripts/discourse/templates/components/knowledge-explorer-topic-list.hbs

@@ -1,8 +1,26 @@
 {{#load-more selector=".topic-list tr" action=loadMore}}
   <table class="topic-list">
     <thead>
-      <th>Topic</th>
-      <th>Activity</th>
+      <th {{action "sortListTitle"}}>
+        Topic
+        {{#if sortTitle}}
+          {{#if ascending}}
+            {{d-icon 'angle-up'}}
+          {{else}}
+            {{d-icon 'angle-down'}}
+          {{/if}}
+        {{/if}}
+      </th>
+      <th {{action "sortListActivity"}}>
+        Activity
+        {{#if sortActivity}}
+          {{#if ascending}}
+            {{d-icon 'angle-up'}}
+          {{else}}
+            {{d-icon 'angle-down'}}
+          {{/if}}
+        {{/if}}
+      </th>
     </thead>
     <tbody>
       {{#each topics as |topic|}}

assets/javascripts/discourse/templates/knowledge-explorer.hbs

@@ -62,6 +62,9 @@
             {{#unless emptySearchResults}}
               {{knowledge-explorer-topic-list
                 topics=topics
+                ascending=ascending
+                order=orderColumn
+                sortBy=(action "sortBy")
                 selectTopic=(action "setSelectedTopic")
                 loadMore=(action "loadMore")
                 loading=isLoadingMore

assets/stylesheets/common/knowledge-explorer.scss

@@ -115,6 +115,18 @@
   .knowledge-explorer-topic-list {
     flex-basis: 100%;
 
+    th {
+      min-width: 5em;
+
+      &:hover {
+        background-color: $primary-low;
+      }
+
+      .d-icon {
+        vertical-align: middle;
+      }
+    }
+
     .badge-wrapper .badge-category .category-name {
       // extra protection for ultra-long category names
       max-width: 30vw;

lib/knowledge_explorer/query.rb

@@ -49,6 +49,20 @@ module KnowledgeExplorer
         results = results.where('lower(title) LIKE ?', "%#{@filters[:search_term].downcase}%")
       end
 
+      if @filters[:order] == "title"
+        if @filters[:ascending].present?
+          results = results.reorder('title')
+        else
+          results = results.reorder('title DESC')
+        end
+      elsif @filters[:order] == "activity"
+        if @filters[:ascending].present?
+          results = results.reorder('last_posted_at')
+        else
+          results = results.reorder('last_posted_at DESC')
+        end
+      end
+
       tags = tag_count(results)
       categories = categories_count(results)
 
@@ -120,6 +134,7 @@ module KnowledgeExplorer
       filters.push("tags=#{@filters[:tags]}") if @filters[:tags].present?
       filters.push("category=#{@filters[:category]}") if @filters[:category].present?
       filters.push("search=#{@filters[:search_term]}") if @filters[:search_term].present?
+      filters.push("sort=#{@filters[:sort]}") if @filters[:sort].present?
 
       if @filters[:page].present?
         filters.push("page=#{@filters[:page].to_i + 1}")