UX: Expand category filters even when already filtered (#112)

assets/javascripts/discourse/controllers/docs-index.js

@@ -288,17 +288,10 @@ export default Controller.extend({
 
   @action
   updateSelectedCategories(category) {
-    let filter = this.filterCategories;
+    const filterCategories =
-    if (filter && filter.includes(category.id)) {
+      category.id === this.filterCategories ? null : category.id;
-      filter = filter.replace(category.id, "").replace(/^\|+|\|+$/g, "");
-    } else if (filter) {
-      filter = `${filter}|${category.id}`;
-    } else {
-      filter = category.id;
-    }
-
     this.setProperties({
-      filterCategories: filter,
+      filterCategories,
       selectedTopic: null,
     });
 

assets/javascripts/discourse/templates/components/docs-category.hbs

@@ -1,11 +1,5 @@
 <a href {{action this.selectCategory}} class="docs-item docs-category {{if category.active "selected"}}">
-  {{#unless category.active}}
+  {{d-icon (if category.active "times-circle" "far-circle")}}
-    {{d-icon "plus"}}
-  {{/unless}}
-
-  {{#if category.active}}
-    {{d-icon "times-circle"}}
-  {{/if}}
 
   <span class="docs-item-id category-id">{{categoryName}}</span>
   <span class="docs-item-count category-count">{{category.count}}</span>

assets/stylesheets/common/docs.scss

@@ -98,6 +98,9 @@
           margin-right: 0.25em;
         }
       }
+      &.selected .d-icon {
+        color: var(--primary);
+      }
       &:hover {
         background: var(--highlight-medium);
       }

lib/docs/query.rb

@@ -25,12 +25,6 @@ module Docs
       results = results.references(:categories)
       results = results.where('topics.category_id IN (?)', Query.categories).or(results.where('tags.name IN (?)', Query.tags))
 
-      # filter results by selected category
-      if @filters[:category].present?
-        category_ids = @filters[:category].split('|')
-        results = results.where('topics.category_id IN (?)', category_ids) if category_ids.all? { |id| id =~ /\A\d+\z/ }
-      end
-
       # filter results by selected tags
       if @filters[:tags].present?
         tag_filters = @filters[:tags].split('|')
@@ -98,9 +92,17 @@ module Docs
       SQL
       tags = count_query.group('t2.name').reorder('').count
       tags = create_tags_object(tags)
+
       categories = results.where('topics.category_id IS NOT NULL').group('topics.category_id').reorder('').count
       categories = create_categories_object(categories)
 
+      # filter results by selected category
+      # needs to be after building categories filter list
+      if @filters[:category].present?
+        category_ids = @filters[:category].split('|')
+        results = results.where('topics.category_id IN (?)', category_ids) if category_ids.all? { |id| id =~ /\A\d+\z/ }
+      end
+
       results_length = results.size
 
       if @filters[:page]

plugin.rb

@@ -16,6 +16,7 @@ register_svg_icon 'sort-alpha-down'
 register_svg_icon 'sort-alpha-up'
 register_svg_icon 'sort-numeric-up'
 register_svg_icon 'sort-numeric-down'
+register_svg_icon 'far-circle'
 
 load File.expand_path('lib/docs/engine.rb', __dir__)
 load File.expand_path('lib/docs/query.rb', __dir__)

spec/requests/docs_controller_spec.rb

@@ -118,7 +118,9 @@ describe Docs::DocsController do
         categories = json['categories']
         topics = json['topics']['topic_list']['topics']
 
-        expect(categories.size).to eq(1)
+        expect(categories.size).to eq(2)
+        expect(categories[0]).to eq({ "active" => true, "count" => 1, "id" => category2.id })
+        expect(categories[1]).to eq({ "active" => false, "count" => 2, "id" => category.id })
         expect(topics.size).to eq(1)
       end