Customize topic list entries (sorting, grouping, filtering) for better organization

Sören_Geier · August 20, 2022, 6:28pm

TLDR:
Whats the fastest way to change how filteredTopics (Line 26) is comprised. I would like to have full control of which topics (with what properties) are collected.

github.com

discourse/discourse/blob/dc5dc783094eff098d6c51a8c1d64a0fe9dbc98b/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs#L26


      
          
          
<PluginOutlet @name="before-topic-list-body" @args={{hash
              topics=this.topics
              selected=this.selected
              bulkSelectEnabled=this.bulkSelectEnabled
              lastVisitedTopic=this.lastVisitedTopic
              discoveryList=this.discoveryList
              hideCategory=this.hideCategory}} />
          
          
<tbody class="topic-list-body">
            {{#each this.filteredTopics as |topic index|}}
              <TopicListItem @topic={{topic}} @bulkSelectEnabled={{this.bulkSelectEnabled}} @showTopicPostBadges={{this.showTopicPostBadges}} @hideCategory={{this.hideCategory}} @showPosters={{this.showPosters}} @showLikes={{this.showLikes}} @showOpLikes={{this.showOpLikes}} @expandGloballyPinned={{this.expandGloballyPinned}} @expandAllPinned={{this.expandAllPinned}} @lastVisitedTopic={{this.lastVisitedTopic}} @selected={{this.selected}} @lastChecked={{this.lastChecked}} @tagsForUser={{this.tagsForUser}} @focusLastVisitedTopic={{this.focusLastVisitedTopic}} @index={{index}} />
              {{raw "list/visited-line" lastVisitedTopic=this.lastVisitedTopic topic=topic}}
              <PluginOutlet @name="after-topic-list-item" @args={{hash topic=topic index=index}} @connectorTagName="tr" />
            {{/each}}
          </tbody>
          
          
<PluginOutlet @name="after-topic-list-body" @args={{hash
              topics=this.topics
              selected=this.selected
              bulkSelectEnabled=this.bulkSelectEnabled

Hi community,

I have been using the GitHub - discourse/discourse-topic-thumbnails: Display thumbnails in topic lists theme component on our hosted environment and we wanted to make additional changes to it to cater to our needs.

Instead of having all topics mixed up into one large chunk of grid items, we’d like to bring in some order.
We are aiming for the following:
Initially, we want to sort by seen/unseen, 2nd we want to sort by category; then after that we’d like to group them by chronology (and create buckets e.g. Today (all relevant posts from today), Yesterday, Last week.

So our topics list should look like this with 3 distinct grids below each other:

<TODAY, YESTERDAY, LAST WEEK> represents a grouping

PINNED:
Topic 20, Topic 30, Topic 40

UNSEEN:
<TODAY : [ART: Topic 1, Topic 2], [DESIGN: Topic 4]> <YESTERDAY: [CONCEPT: Topic 3], [OTHER_CATEGORY: Topic 6, Topic 11]> <LAST WEEK: Topic 8, Topic 10>

SEEN:
<TODAY : [ART: Topic 4, Topic 12], [DESIGN: Topic 4]> <YESTERDAY: [CGI: Topic 13], [OTHER_CATEGORY: Topic 16, Topic 21]>, <LAST WEEK: Topic 18, Topic 100>

My main question would be how I can create/extend the query that creates the result set that is then iterated over in

github.com

discourse/discourse/blob/dc5dc783094eff098d6c51a8c1d64a0fe9dbc98b/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs#L26


      
          
          
<PluginOutlet @name="before-topic-list-body" @args={{hash
              topics=this.topics
              selected=this.selected
              bulkSelectEnabled=this.bulkSelectEnabled
              lastVisitedTopic=this.lastVisitedTopic
              discoveryList=this.discoveryList
              hideCategory=this.hideCategory}} />
          
          
<tbody class="topic-list-body">
            {{#each this.filteredTopics as |topic index|}}
              <TopicListItem @topic={{topic}} @bulkSelectEnabled={{this.bulkSelectEnabled}} @showTopicPostBadges={{this.showTopicPostBadges}} @hideCategory={{this.hideCategory}} @showPosters={{this.showPosters}} @showLikes={{this.showLikes}} @showOpLikes={{this.showOpLikes}} @expandGloballyPinned={{this.expandGloballyPinned}} @expandAllPinned={{this.expandAllPinned}} @lastVisitedTopic={{this.lastVisitedTopic}} @selected={{this.selected}} @lastChecked={{this.lastChecked}} @tagsForUser={{this.tagsForUser}} @focusLastVisitedTopic={{this.focusLastVisitedTopic}} @index={{index}} />
              {{raw "list/visited-line" lastVisitedTopic=this.lastVisitedTopic topic=topic}}
              <PluginOutlet @name="after-topic-list-item" @args={{hash topic=topic index=index}} @connectorTagName="tr" />
            {{/each}}
          </tbody>
          
          
<PluginOutlet @name="after-topic-list-body" @args={{hash
              topics=this.topics
              selected=this.selected
              bulkSelectEnabled=this.bulkSelectEnabled

via the filteredList.

I found a place where this is maybe populated but I was not sure how to “extend” it. There seems to be queryParam system and some route stuff that can affect a resultset but I didn’t get it.

github.com

discourse/discourse/blob/dc5dc783094eff098d6c51a8c1d64a0fe9dbc98b/app/assets/javascripts/discourse/app/components/topic-list.js#L18


      
          
          
export default Component.extend(LoadMore, {
            tagName: "table",
            classNames: ["topic-list"],
            classNameBindings: ["bulkSelectEnabled:sticky-header"],
            showTopicPostBadges: true,
            listTitle: "topic.title",
            canDoBulkActions: and("currentUser.staff", "selected.length"),
          
          
  // Overwrite this to perform client side filtering of topics, if desired
            filteredTopics: alias("topics"),
          
          
  _init: on("init", function () {
              this.addObserver("hideCategory", this.rerender);
              this.addObserver("order", this.rerender);
              this.addObserver("ascending", this.rerender);
              this.refreshLastVisited();
            }),
          
          
  @discourseComputed("bulkSelectEnabled")
            toggleInTitle(bulkSelectEnabled) {

Can anyone point me to the right place?

We are using the above mentioned theme component, meaning that we are limited in what we can do.
I’d be helpful for me if someone could show me how to limit the filteredList to only unread-post topics for example - I could take it from there then.

Thank you so much!

CC @pfaffman

JammyDodger · August 20, 2022, 7:23pm

Just an FYI, but Topic List Thumbnails is a #theme-component rather than a plugin.

Sören_Geier · August 20, 2022, 8:44pm

Yeah thanks, I was aware of that but missed the correct terms. Adjusting that.

Sören_Geier · August 23, 2022, 6:11am

Jammy, I added a tldr. Do you have any cues on that shortened question?
Thanks

JammyDodger · August 23, 2022, 7:40am

I’m afraid that is out of my skillset.

Have you checked out how to modify classes in the Developer’s guide to Discourse Themes? There may be something in there that can help. A Search could also bring up some helpful examples if you broaden your keywords?

Developer’s guide to Discourse Themes

modifyClass()

You can use this method to extend or overwrite methods in a class like a component or controller (read: Ember Classes ), but it’s also a great way to get information and set variables.
<script type="text/discourse-plugin" version="0.8">
  api.modifyClass('controller:composer', {
    actions: {
      newActionHere() { }
    }
  });
</script>

Sören_Geier · August 23, 2022, 9:54am

Yeah thanks Jammy, I am aware of those things and have also written some private plugins (or extended them). The thing here is though, that I don’t understand where the list is aggregated and how the whole QUERYING TOPICs logic works or where it actually is. If I knew either of the two things I could move forward.

Sören_Geier · August 24, 2022, 10:12am

I am adding some more folks in CC as I saw those in the Git code.

JammyDodger · August 24, 2022, 10:45am

Just an FYI, but it’s actually really bad Meta etiquette to tag Team members in such a fashion, so I have removed those so as not to create a pattern that others may attempt to replicate.

I’m really sorry your topic hasn’t gained more traction. This isn’t something I know about so I’m afraid I cannot answer directly.

Have you got any further with your research/attempts?

Sören_Geier · August 24, 2022, 11:51am

I thought I was being smart with ccing the right ppl

And no, haven’t gotten any further. I tried to show the topic list 3 times and then hide unwanted topics in each of them but then the load more functionality kicked in and major potions of the DOM got rewritten and my JS calculations became too heavy and caused weird effects.

I figured I have to do it properly using the APIs provided by Discourse.

Sören_Geier · August 27, 2022, 7:34am

I made some significant progress here and had few more questions along the way:

Is there an API endpoint that I can use to get all pinned topics? Similar to /latest.json or /top.json?
Is there a JS command (assuming I am in a plugin) I can use to force the topic list to re-render, after I made a status change on on the the topic list items, so that the change is immediately reflected? I guess I have to work with an observer on topics.?

Also, I found the following article that has everything I need to customize the topic list that I want.

nathankershaw · September 6, 2022, 10:08am

Glad you made some progress - you are clearly in uncharted territory!

Sören_Geier · September 6, 2022, 10:15am

Pinned topics can be obtained by querying /search.json?expanded=true&q=in%3Apinned
Using search without an actual search keyword.

This only returns a list of topic ids or lets say a simplified topic dataset. You’d have to make follow-up ajax requests to /t/${topic.id}.json to get the full dataset surrounding a topic.

I am still interested how I can force a re-render of a topic list via JS.