Add Unsolved button to top menu using custom HTML

Dev
1

Hi Folks
I found discourse solved plugin quite useful in my forum. Then I tried to add an Unsolved button to top menu. Since it was not straight forward I adopted this solution and altered it a bit.

Check out my changed code

<script>
  Discourse.ExternalNavItem = Discourse.NavItem.extend({
    href : function() {
      return this.get('href');
    }.property('href')
  });

  I18n.translations.en.js.filters.unresolved = { title: "Unresolved", help: "Unresolved Topics" };

  Discourse.NavItem.reopenClass({
    buildList : function(category, args) {
      var list = this._super(category, args);
      if(!category) {
        list.push(Discourse.ExternalNavItem.create({href: '/latest?solved=no', name: 'unresolved'}));
      } else {
         list.push(Discourse.ExternalNavItem.create({href: '/c/'+category.slug+'?solved=no', name: 'unresolved'}));
      }
      return list;
    }
  });
</script>

I am a newbie here; I hope this will be useful to ppl like me.

Cheers

6 Likes
2

That works great, if you want to only display the buttons on certain categories then you can do some fairly simple logic to check the category name. I also filter out ā€œclosedā€ topics for my ā€œunsolvedā€ button.

This is what I use:

<script>
  Discourse.ExternalNavItem = Discourse.NavItem.extend({
    href : function() {
      return this.get('href');
    }.property('href'),
  });

  I18n.translations.en.js.filters.Completed = { title: "Completed", help: "Topics that have been marked as solved" };
  I18n.translations.en.js.filters.Outstanding = { title: "Outstanding", help: "Topics that are not yet marked as solved" };

  Discourse.NavItem.reopenClass({
    buildList : function(category, args) {
     var list = this._super(category, args);
     if(!category) {
          //Don't display anything
     }else if(category.slug==='support') {
        list.push(Discourse.NavItem.create({href: '/c/support?solved=yes', name: "Completed"}));
        list.push(Discourse.NavItem.create({href: '/c/support?solved=no&status=open', name: "Outstanding"}));
      }else if(category.slug==='jobs') {
        list.push(Discourse.NavItem.create({href: '/c/jobs?solved=yes', name: "Completed"}));
        list.push(Discourse.NavItem.create({href: '/c/jobs?solved=no&status=open', name: "Outstanding"}));
      }
      return list;
    }
  });
</script>
11 Likes
3

This is a useful solution I can use. Thanks

1 Like
4

I encountered that this is not working if sub categories are added. Try the following block if you add sub categories.

if(!category) {
        list.push(Discourse.ExternalNavItem.create({href: '/latest?solved=no', name: 'unresolved'}));
      } else { 
          if(!category.parentCategory) {
            list.push(Discourse.ExternalNavItem.create({href: '/c/'+category.slug+'?solved=no', name: 'unresolved'}));
        } else {
            list.push(Discourse.ExternalNavItem.create({href: '/c/'+category.parentCategory.slug+'/'+category.slug+'?solved=no', name: 'unresolved'}));
        }
        
      }

Cheers

1 Like
5

Iā€™m having a little issue with combining those two. What should I have if I want both only a certain particular category and subcategory to show Solved/Unsolved?

6

It would be great if someone were to post a generic version (without the specific categories) of this as a theme component.

7

A generic version could be made, but for category-specific stuff it needs a small amount of work to be done on the solved plugin first:

2 Likes
8

Hi, checking on if this became a theme component I just cannot find. I havenā€™t seen anything explicit, but the instructions above look good for adding a top menu button while respecting sub-categories on latests tests-pass. Thanks!

2 Likes