Personalizar entradas de la lista de temas (ordenar, agrupar, filtrar) para una mejor organización

Sören_Geier · 20 Agosto, 2022 18:28

Resumen:
¿Cuál es la forma más rápida de cambiar la forma en que se compone filteredTopics (Línea 26)? Me gustaría tener control total sobre qué temas (con qué propiedades) se recopilan.

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

Hola comunidad,

He estado utilizando el componente de tema GitHub - discourse/discourse-topic-thumbnails: Display thumbnails in topic lists en nuestro entorno alojado y queríamos hacerle cambios adicionales para adaptarlo a nuestras necesidades.

En lugar de tener todos los temas mezclados en un gran bloque de elementos de cuadrícula, nos gustaría introducir algo de orden.
Nuestro objetivo es el siguiente:
Inicialmente, queremos ordenar por visto/no visto, luego queremos ordenar por categoría; después de eso, nos gustaría agruparlos por cronología (y crear cubos, por ejemplo, Hoy (todas las publicaciones relevantes de hoy), Ayer, La semana pasada.

Por lo tanto, nuestra lista de temas debería verse así con 3 cuadrículas distintas una debajo de la otra:

<HOY, AYER, LA SEMANA PASADA> representa una agrupación

FIJADOS:
Tema 20, Tema 30, Tema 40

NO VISTOS:
<HOY: [ARTE: Tema 1, Tema 2], [DISEÑO: Tema 4]> <AYER: [CONCEPTO: Tema 3], [OTRA_CATEGORÍA: Tema 6, Tema 11]> <LA SEMANA PASADA: Tema 8, Tema 10>

VISTOS:
<HOY: [ARTE: Tema 4, Tema 12], [DISEÑO: Tema 4]> <AYER: [CGI: Tema 13], [OTRA_CATEGORÍA: Tema 16, Tema 21]>, <LA SEMANA PASADA: Tema 18, Tema 100>

Mi pregunta principal sería cómo puedo crear/extender la consulta que crea el conjunto de resultados que luego se itera en

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

a través de filteredList.

Encontré un lugar donde esto tal vez se popula, pero no estaba seguro de cómo “extenderlo”. Parece haber un sistema de queryParam y algunas cosas de route que pueden afectar un conjunto de resultados, pero no lo entendí.

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

¿Alguien puede señalarme el lugar correcto?

Estamos utilizando el componente de tema mencionado anteriormente, lo que significa que estamos limitados en lo que podemos hacer.
Me sería útil si alguien pudiera mostrarme cómo limitar filteredList solo a temas con publicaciones no leídas, por ejemplo, a partir de ahí podría continuar.

¡Muchas gracias!

CC @pfaffman

JammyDodger · 20 Agosto, 2022 19:23

Solo como información, pero Topic List Thumbnails es un Theme component en lugar de un plugin.

Sören_Geier · 20 Agosto, 2022 20:44

Sí, gracias, era consciente de eso pero me perdí los términos correctos. Ajustando eso.

Sören_Geier · 23 Agosto, 2022 06:11

Jammy, agregué un tldr. ¿Tienes alguna pista sobre esa pregunta acortada?
Gracias

JammyDodger · 23 Agosto, 2022 07:40

Me temo que eso está fuera de mis habilidades.

¿Has consultado cómo modificar clases en la guía para desarrolladores de temas de Discourse? Puede que haya algo ahí que pueda ayudarte. ¿Una búsqueda también podría arrojar algunos ejemplos útiles si amplías tus palabras clave?

Joe:

modifyClass()

Puedes usar este método para extender o sobrescribir métodos en una clase como un componente o controlador (leer: Clases de Ember ), pero también es una excelente manera de obtener información y establecer variables.
api.modifyClass('controller:composer', {
  actions: {
    newActionHere() { }
  }
});

Sören_Geier · 23 Agosto, 2022 09:54

Sí, gracias Jammy, soy consciente de esas cosas y también he escrito algunos plugins privados (o los he ampliado). Sin embargo, aquí lo que no entiendo es dónde se agregan las listas y cómo funciona toda la lógica de CONSULTAR TEMAS o dónde está realmente. Si supiera alguna de las dos cosas, podría avanzar.

Sören_Geier · 24 Agosto, 2022 10:12

Añado a más personas en copia ya que vi a esas en el código Git.

JammyDodger · 24 Agosto, 2022 10:45

Solo para que sepas, en realidad es muy mala etiqueta en Meta etiquetar a los miembros del equipo de esa manera, así que los he eliminado para no crear un patrón que otros puedan intentar replicar.

Lamento mucho que tu tema no haya ganado más tracción. No es algo que sepa, así que me temo que no puedo responder directamente.

¿Has avanzado algo más en tu investigación/intentos?

Sören_Geier · 24 Agosto, 2022 11:51

Pensé que estaba siendo inteligente al poner en copia a las personas adecuadas

Y no, no he avanzado más. Intenté mostrar la lista de temas 3 veces y luego ocultar los temas no deseados en cada uno de ellos, pero luego entró en juego la funcionalidad de “cargar más” y se reescribieron grandes porciones del DOM, y mis cálculos de JS se volvieron demasiado pesados y causaron efectos extraños.

Me di cuenta de que tengo que hacerlo correctamente usando las APIs proporcionadas por Discourse.

Sören_Geier · 27 Agosto, 2022 07:34

He hecho un progreso significativo aquí y tengo algunas preguntas más:\n\n* ¿Hay un punto final de API que pueda usar para obtener todos los temas fijados? ¿Similar a /latest.json o /top.json?\n* ¿Hay un comando de JS (asumiendo que estoy en un plugin) que pueda usar para forzar la lista de temas a renderizarse de nuevo, después de haber realizado un cambio de estado en los elementos de la lista de temas, para que el cambio se refleje inmediatamente? Supongo que tengo que trabajar con un observador en topics.?\n\nAdemás, encontré el siguiente artículo que tiene todo lo que necesito para personalizar la lista de temas que quiero.\n\nhttps://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949

nathank · 6 Septiembre, 2022 10:08

¡Me alegra que hayas progresado! ¡Claramente estás en territorio inexplorado!

Sören_Geier · 6 Septiembre, 2022 10:15

Los temas fijados se pueden obtener consultando /search.json?expanded=true&q=in%3Apinned
Usando la búsqueda sin una palabra clave de búsqueda real.

Esto solo devuelve una lista de identificadores de temas o, digamos, un conjunto de datos de temas simplificado. Tendrías que hacer solicitudes ajax de seguimiento a /t/${topic.id}.json para obtener el conjunto de datos completo que rodea a un tema.

Todavía me interesa cómo puedo forzar una nueva representación de una lista de temas a través de JS.

Tema		Respuestas	Vistas
Filtered Topic Lists Theme component	14	953	22 Diciembre 2025
Latest/Hot/Top - what about Best/Popular? Request for automatic selection Support	3	172	7 Julio 2024
Topics list filter feature Feature feedback , topic-filter	41	4497	24 Noviembre 2024
Filtering topic lists in Discourse Using Discourse search , reference , topic-filter	19	1227	3 Abril 2026
Featured Lists Theme component	29	2228	18 Febrero 2026

Personalizar entradas de la lista de temas (ordenar, agrupar, filtrar) para una mejor organización

Temas relacionados