From b23790e85d0fe7c8ff47bb2b74885902cabd4cb6 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Mon, 28 Nov 2022 15:16:24 -0500
Subject: [PATCH] UX: Expand category filters even when already filtered (#112)

---
 .../discourse/controllers/docs-index.js            | 13 +++----------
 .../templates/components/docs-category.hbs         |  8 +-------
 assets/stylesheets/common/docs.scss                |  3 +++
 lib/docs/query.rb                                  | 14 ++++++++------
 plugin.rb                                          |  1 +
 spec/requests/docs_controller_spec.rb              |  4 +++-
 6 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/assets/javascripts/discourse/controllers/docs-index.js b/assets/javascripts/discourse/controllers/docs-index.js
index 3cb2701..edf89a3 100644
--- a/assets/javascripts/discourse/controllers/docs-index.js
+++ b/assets/javascripts/discourse/controllers/docs-index.js
@@ -288,17 +288,10 @@ export default Controller.extend({
 
   @action
   updateSelectedCategories(category) {
-    let filter = this.filterCategories;
-    if (filter && filter.includes(category.id)) {
-      filter = filter.replace(category.id, "").replace(/^\|+|\|+$/g, "");
-    } else if (filter) {
-      filter = `${filter}|${category.id}`;
-    } else {
-      filter = category.id;
-    }
-
+    const filterCategories =
+      category.id === this.filterCategories ? null : category.id;
     this.setProperties({
-      filterCategories: filter,
+      filterCategories,
       selectedTopic: null,
     });
 
diff --git a/assets/javascripts/discourse/templates/components/docs-category.hbs b/assets/javascripts/discourse/templates/components/docs-category.hbs
index b4c6c3b..a32525f 100644
--- a/assets/javascripts/discourse/templates/components/docs-category.hbs
+++ b/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 "plus"}}
-  {{/unless}}
-
-  {{#if category.active}}
-    {{d-icon "times-circle"}}
-  {{/if}}
+  {{d-icon (if category.active "times-circle" "far-circle")}}
 
   <span class="docs-item-id category-id">{{categoryName}}</span>
   <span class="docs-item-count category-count">{{category.count}}</span>
diff --git a/assets/stylesheets/common/docs.scss b/assets/stylesheets/common/docs.scss
index 5988ab1..57a7eb6 100644
--- a/assets/stylesheets/common/docs.scss
+++ b/assets/stylesheets/common/docs.scss
@@ -98,6 +98,9 @@
           margin-right: 0.25em;
         }
       }
+      &.selected .d-icon {
+        color: var(--primary);
+      }
       &:hover {
         background: var(--highlight-medium);
       }
diff --git a/lib/docs/query.rb b/lib/docs/query.rb
index 41c576f..fc1427f 100644
--- a/lib/docs/query.rb
+++ b/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]
diff --git a/plugin.rb b/plugin.rb
index 46d4fb0..c2cab77 100644
--- a/plugin.rb
+++ b/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__)
diff --git a/spec/requests/docs_controller_spec.rb b/spec/requests/docs_controller_spec.rb
index 6a0715d..3b48e04 100644
--- a/spec/requests/docs_controller_spec.rb
+++ b/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