FEATURE: Add 'all subcategories' option in category-selector (#11099)

app/assets/javascripts/discourse/app/helpers/category-link.js

@@ -54,8 +54,11 @@ export function categoryBadgeHTML(category, opts) {
   const depth = (opts.depth || 1) + 1;
   if (opts.recursive && depth <= siteSettings.max_category_nesting) {
     const parentCategory = Category.findById(category.parent_category_id);
+    const lastSubcategory = !opts.depth;
     opts.depth = depth;
-    return categoryBadgeHTML(parentCategory, opts) + _renderer(category, opts);
+    const parentBadges = categoryBadgeHTML(parentCategory, opts);
+    opts.lastSubcategory = lastSubcategory;
+    return parentBadges + _renderer(category, opts);
   }
 
   return _renderer(category, opts);
@@ -183,5 +186,11 @@ function defaultCategoryLinkRenderer(category, opts) {
   if (opts.topicCount && categoryStyle === "box") {
     afterBadgeWrapper += buildTopicCount(opts.topicCount);
   }
+  if (opts.plusSubcategories && opts.lastSubcategory) {
+    afterBadgeWrapper += `<span class="plus-subcategories">${I18n.t(
+      "category_row.plus_subcategories",
+      { count: opts.plusSubcategories }
+    )}</span>`;
+  }
   return `<${tagName} class="badge-wrapper ${extraClasses}" ${href}>${html}</${tagName}>${afterBadgeWrapper}`;
 }

app/assets/javascripts/select-kit/addon/components/category-selector.js

@@ -1,4 +1,6 @@
-import { get, computed } from "@ember/object";
+import I18n from "I18n";
+import { categoryBadgeHTML } from "discourse/helpers/category-link";
+import EmberObject, { get, computed } from "@ember/object";
 import { mapBy } from "@ember/object/computed";
 import { makeArray } from "discourse-common/lib/helpers";
 import MultiSelectComponent from "select-kit/components/multi-select";
@@ -52,6 +54,57 @@ export default MultiSelectComponent.extend({
     return "category-row";
   },
 
+  search(filter) {
+    const result = this._super(filter);
+    if (result.length === 1) {
+      const subcategoryIds = new Set([result[0].id]);
+      for (let i = 0; i < this.siteSettings.max_category_nesting; ++i) {
+        subcategoryIds.forEach((categoryId) => {
+          this.content.forEach((category) => {
+            if (category.parent_category_id === categoryId) {
+              subcategoryIds.add(category.id);
+            }
+          });
+        });
+      }
+
+      if (subcategoryIds.size > 1) {
+        result.push(
+          EmberObject.create({
+            multicategory: [...subcategoryIds],
+            category: result[0],
+            title: I18n.t("category_row.plus_subcategories_title", {
+              name: result[0].name,
+              count: subcategoryIds.size - 1,
+            }),
+            label: categoryBadgeHTML(result[0], {
+              link: false,
+              recursive: true,
+              plusSubcategories: subcategoryIds.size - 1,
+            }).htmlSafe(),
+          })
+        );
+      }
+    }
+
+    return result;
+  },
+
+  select(value, item) {
+    if (item.multicategory) {
+      const items = item.multicategory.map((id) =>
+        Category.findById(parseInt(id, 10))
+      );
+
+      const newValues = makeArray(this.value).concat(items.map((i) => i.id));
+      const newContent = makeArray(this.selectedContent).concat(items);
+
+      this.selectKit.change(newValues, newContent);
+    } else {
+      this._super(value, item);
+    }
+  },
+
   actions: {
     onChange(values) {
       this.attrs.onChange(

app/assets/stylesheets/common/select-kit/category-selector.scss

@@ -16,6 +16,10 @@
       .topic-count {
         margin-left: 0.25em;
       }
+
+      .plus-subcategories {
+        font-size: $font-down-2;
+      }
     }
   }
 }