Personalize as entradas da lista de tópicos (ordenação, agrupamento, filtragem) para uma melhor organização

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

Resumo:
Qual é a maneira mais rápida de alterar a forma como filteredTopics (Linha 26) é composto? Gostaria de ter controle total sobre quais tópicos (com quais propriedades) são coletados.

github.com/discourse/discourse

app/assets/javascripts/discourse/app/templates/components/topic-list.hbs

dc5dc7830


      
          
          <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

Olá comunidade,

Tenho usado o componente de tema GitHub - discourse/discourse-topic-thumbnails: Display thumbnails in topic lists em nosso ambiente hospedado e queríamos fazer alterações adicionais nele para atender às nossas necessidades.

Em vez de ter todos os tópicos misturados em um grande bloco de itens de grade, gostaríamos de trazer alguma ordem.
Estamos visando o seguinte:
Inicialmente, queremos ordenar por vistos/não vistos, em segundo lugar queremos ordenar por categoria; depois disso, gostaríamos de agrupá-los por cronologia (e criar “buckets”, por exemplo, Hoje (todas as postagens relevantes de hoje), Ontem, Semana passada.

Portanto, nossa lista de tópicos deve parecer assim, com 3 grades distintas uma abaixo da outra:

<HOJE, ONTEM, SEMANA PASSADA> representa um agrupamento

FIXADOS:
Tópico 20, Tópico 30, Tópico 40

NÃO VISTOS:
<HOJE: [ARTE: Tópico 1, Tópico 2], [DESIGN: Tópico 4]> <ONTEM: [CONCEITO: Tópico 3], [OUTRA_CATEGORIA: Tópico 6, Tópico 11]> <SEMANA PASSADA: Tópico 8, Tópico 10>

VISTOS:
<HOJE: [ARTE: Tópico 4, Tópico 12], [DESIGN: Tópico 4]> <ONTEM: [CGI: Tópico 13], [OUTRA_CATEGORIA: Tópico 16, Tópico 21]>, <SEMANA PASSADA: Tópico 18, Tópico 100>

Minha principal pergunta seria como posso criar/estender a consulta que gera o conjunto de resultados que é então iterado em

github.com/discourse/discourse

app/assets/javascripts/discourse/app/templates/components/topic-list.hbs

dc5dc7830


      
          
          <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

através do filteredList.

Encontrei um local onde isso talvez seja populado, mas não tinha certeza de como “estendê-lo”. Parece haver um sistema de queryParam e algumas coisas de rota que podem afetar um conjunto de resultados, mas não entendi.

github.com/discourse/discourse

app/assets/javascripts/discourse/app/components/topic-list.js

dc5dc7830


      
          
          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) {

Alguém pode me indicar o lugar certo?

Estamos usando o componente de tema mencionado acima, o que significa que somos limitados no que podemos fazer.
Seria útil para mim se alguém pudesse me mostrar como limitar o filteredList apenas a tópicos de posts não lidos, por exemplo - eu poderia seguir a partir daí.

Muito obrigado!

CC @pfaffman

JammyDodger · Agosto 20, 2022, 7:23pm

Apenas para sua informação, mas Topic List Thumbnails é um Theme component e não um plugin.

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

Sim, obrigado, eu estava ciente disso, mas perdi os termos corretos. Ajustando isso.

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

Jammy, adicionei um tldr. Você tem alguma dica sobre essa pergunta resumida?
Obrigado

JammyDodger · Agosto 23, 2022, 7:40am

Receio que isso esteja fora das minhas habilidades.

Você já deu uma olhada em como modificar classes no Developing Discourse Themes & Theme Components? Pode haver algo lá que possa ajudar. Uma busca também pode trazer alguns exemplos úteis se você ampliar suas palavras-chave?

Joe:

modifyClass()

Você pode usar este método para estender ou sobrescrever métodos em uma classe como um componente ou controlador (leia: Classes Ember ), mas também é uma ótima maneira de obter informações e definir variáveis.
<script type="text/discourse-plugin" version="0.8">
  api.modifyClass('controller:composer', {
    actions: {
      newActionHere() { }
    }
  });
</script>

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

Sim, obrigado Jammy, estou ciente dessas coisas e também escrevi alguns plugins privados (ou os estendi). A questão aqui é que não entendo onde a lista é agregada e como toda a lógica de CONSULTA DE TÓPICOS funciona ou onde ela realmente está. Se eu soubesse uma das duas coisas, poderia avançar.

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

Estou adicionando mais algumas pessoas em cópia, pois as vi no código Git.

JammyDodger · Agosto 24, 2022, 10:45am

Apenas para sua informação, mas na verdade é uma péssima etiqueta da Meta marcar membros da equipe dessa forma, então eu removi essas marcações para não criar um padrão que outros possam tentar replicar.

Sinto muito que seu tópico não tenha ganhado mais tração. Não é algo que eu saiba, então receio não poder responder diretamente.

Você obteve algum progresso em sua pesquisa/tentativas?

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

Eu pensei que estava sendo esperto ao colocar as pessoas certas em cópia

E não, não cheguei a lugar nenhum. Tentei mostrar a lista de tópicos 3 vezes e depois ocultar os tópicos indesejados em cada um deles, mas então a funcionalidade de carregar mais entrou em ação e grandes partes do DOM foram reescritas e meus cálculos de JS ficaram muito pesados e causaram efeitos estranhos.

Percebi que tenho que fazer isso corretamente usando as APIs fornecidas pelo Discourse.

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

Fiz um progresso significativo aqui e tive mais algumas perguntas ao longo do caminho:

Existe um endpoint de API que posso usar para obter todos os tópicos fixados? Semelhante a /latest.json ou /top.json?
Existe um comando JS (assumindo que estou em um plugin) que posso usar para forçar a re-renderização da lista de tópicos, depois de fazer uma alteração de status em um dos itens da lista de tópicos, para que a alteração seja refletida imediatamente? Acho que tenho que trabalhar com um observador em topics.?

Além disso, encontrei o seguinte artigo que tem tudo o que preciso para personalizar a lista de tópicos que desejo.

https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949

nathank · Setembro 6, 2022, 10:08am

Fico feliz que você tenha feito algum progresso - você está claramente em território desconhecido!

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

Tópicos fixados podem ser obtidos consultando /search.json?expanded=true&q=in%3Apinned
Usando a pesquisa sem uma palavra-chave de pesquisa real.

Isso retorna apenas uma lista de IDs de tópicos ou, digamos, um conjunto de dados de tópicos simplificado. Você teria que fazer requisições ajax de acompanhamento para /t/${topic.id}.json para obter o conjunto de dados completo em torno de um tópico.

Ainda estou interessado em como posso forçar uma nova renderização de uma lista de tópicos via JS.

Tópico		Respostas	Visualizações
Filtered Topic Lists Theme component	14	869	22 de Dezembro de 2025
Latest/Hot/Top - what about Best/Popular? Request for automatic selection Support	3	87	7 de Julho de 2024
Topics list filter feature Feature feedback , topic-filter	42	4225	24 de Novembro de 2024
Filtering topic lists in Discourse Using Discourse reference , topic-filter , search	21	981	3 de Abril de 2026
Featured Lists Theme component	29	2034	18 de Fevereiro de 2026

Personalize as entradas da lista de tópicos (ordenação, agrupamento, filtragem) para uma melhor organização

Tópicos relacionados