Adding Unsolved button to top menu using custom HTML


(Chanka Dod) #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


What's the simplest way to add a new navigation menu item?
The future of HTML/CSS customisations
How can I see in the topics list topics where I have participated?
Auto Tags for topics
Hiding unsolved/solved posts
Topic list tabs for user-customizeable saved filters
(David Taylor) #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>

CommonMark testing started here!
Sort by Solved/Unsolved Questions in Category
(Chanka Dod) #3

This is a useful solution I can use. Thanks


(Chanka Dod) #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


(Jonathan Juan) #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?


(Alex Armstrong) #6

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


(David Taylor) #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: