Personalizza le voci dell'elenco degli argomenti (ordinamento, raggruppamento, filtro) per una migliore organizzazione

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

TLDR:
Qual è il modo più veloce per cambiare la composizione di filteredTopics (riga 26)? Vorrei avere il pieno controllo su quali argomenti (con quali proprietà) vengono raccolti.

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

Ciao community,

Ho utilizzato il componente tema GitHub - discourse/discourse-topic-thumbnails: Display thumbnails in topic lists nel nostro ambiente ospitato e volevamo apportare ulteriori modifiche per soddisfare le nostre esigenze.

Invece di avere tutti gli argomenti mescolati in un unico grande blocco di elementi griglia, vorremmo portare un po’ di ordine.
Miriamo a quanto segue:
Inizialmente, vogliamo ordinare per visti/non visti, in secondo luogo vogliamo ordinare per categoria; poi, dopo di ciò, vorremmo raggrupparli per cronologia (e creare blocchi, ad esempio Oggi (tutti i post pertinenti di oggi), Ieri, La settimana scorsa.

Quindi la nostra lista di argomenti dovrebbe apparire così con 3 griglie distinte una sotto l’altra:

<OGGI, IERI, LA SETTIMANA SCORSA> rappresenta un raggruppamento

PINNED:
Argomento 20, Argomento 30, Argomento 40

NON VISTI:
<OGGI : [ART: Argomento 1, Argomento 2], [DESIGN: Argomento 4]> <IERI: [CONCETTO: Argomento 3], [ALTRA_CATEGORIA: Argomento 6, Argomento 11]> <LA SETTIMANA SCORSA: Argomento 8, Argomento 10>

VISTI:
<OGGI : [ART: Argomento 4, Argomento 12], [DESIGN: Argomento 4]> <IERI: [CGI: Argomento 13], [ALTRA_CATEGORIA: Argomento 16, Argomento 21]>, <LA SETTIMANA SCORSA: Argomento 18, Argomento 100>

La mia domanda principale sarebbe come posso creare/estendere la query che crea il set di risultati che viene poi iterato in

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

tramite filteredList.

Ho trovato un posto dove questo viene forse popolato ma non ero sicuro di come “estenderlo”. Sembra esserci un sistema di queryParam e alcune cose di route che possono influenzare un set di risultati ma non l’ho capito.

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

Qualcuno può indicarmi la direzione giusta?

Stiamo utilizzando il componente tema sopra menzionato, il che significa che siamo limitati in ciò che possiamo fare.
Mi sarebbe utile se qualcuno potesse mostrarmi come limitare filteredList solo ai post non letti, per esempio, potrei poi proseguire da lì.

Grazie mille!

CC @pfaffman

JammyDodger · 20 Agosto 2022, 7:23pm

Solo per informazione, ma Topic List Thumbnails è un Theme component piuttosto che un plugin.

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

Sì, grazie, ne ero a conoscenza ma mi sono sfuggiti i termini corretti. Li sto correggendo.

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

Jammy, ho aggiunto un tldr. Hai qualche suggerimento su quella domanda abbreviata?
Grazie

JammyDodger · 23 Agosto 2022, 7:40am

Temo che questo vada oltre le mie competenze.

Hai dato un’occhiata a come modificare le classi nella guida Developing Discourse Themes & Theme Components? Potrebbe esserci qualcosa lì che possa aiutarti. Una ricerca potrebbe anche portare ad alcuni esempi utili se ampli le tue parole chiave?

Joe:

modifyClass()

Puoi usare questo metodo per estendere o sovrascrivere metodi in una classe come un componente o un controller (leggi: Classi Ember ), ma è anche un ottimo modo per ottenere informazioni e impostare variabili.
api.modifyClass('controller:composer', {
  actions: {
    newActionHere() { }
  }
});

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

Sì, grazie Jammy, sono a conoscenza di queste cose e ho anche scritto alcuni plugin privati (o li ho estesi). La cosa qui però è che non capisco dove venga aggregata la lista e come funzioni la logica di QUERYING TOPICS o dove si trovi effettivamente. Se sapessi una delle due cose, potrei andare avanti.

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

Sto aggiungendo altre persone in CC poiché le ho viste nel codice Git.

JammyDodger · 24 Agosto 2022, 10:45am

Solo per tua informazione, ma è davvero una pessima etichetta di Meta taggare i membri del team in questo modo, quindi li ho rimossi per non creare un modello che altri potrebbero tentare di replicare.

Mi dispiace molto che il tuo argomento non abbia ottenuto maggiore risonanza. Non è qualcosa che conosco, quindi temo di non poter rispondere direttamente.

Hai fatto ulteriori progressi con la tua ricerca/i tuoi tentativi?

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

Pensavo di essere furbo mettendo in copia conoscenza le persone giuste

E no, non sono andato avanti. Ho provato a mostrare l’elenco degli argomenti 3 volte e poi a nascondere gli argomenti indesiderati in ciascuno di essi, ma poi è entrata in gioco la funzionalità “carica altro” e gran parte del DOM è stata riscritta e i miei calcoli JS sono diventati troppo pesanti e hanno causato effetti strani.

Ho capito che devo farlo correttamente usando le API fornite da Discourse.

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

Ho fatto progressi significativi qui e ho alcune altre domande lungo il percorso:

Esiste un endpoint API che posso utilizzare per ottenere tutti gli argomenti fissati? Simile a /latest.json o /top.json?
Esiste un comando JS (supponendo che mi trovi in un plugin) che posso utilizzare per forzare il re-rendering dell’elenco degli argomenti, dopo aver apportato una modifica di stato agli elementi dell’elenco degli argomenti, in modo che la modifica venga immediatamente riflessa? Immagino di dover lavorare con un osservatore su topics.?

Inoltre, ho trovato il seguente articolo che contiene tutto ciò di cui ho bisogno per personalizzare l’elenco degli argomenti che desidero.

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

nathank · 6 Settembre 2022, 10:08am

Sono lieto che tu abbia fatto dei progressi: sei chiaramente in un territorio inesplorato!

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

Gli argomenti bloccati possono essere ottenuti interrogando /search.json?expanded=true&q=in%3Apinned
Utilizzo della ricerca senza una parola chiave di ricerca effettiva.

Questo restituisce solo un elenco di ID di argomenti o, diciamo, un set di dati di argomenti semplificato. Dovresti effettuare richieste ajax di follow-up a /t/${topic.id}.json per ottenere il set di dati completo relativo a un argomento.

Sono ancora interessato a come posso forzare un re-render di un elenco di argomenti tramite JS.

Argomento		Risposte	Visualizzazioni
Filtered Topic Lists Theme component	14	941	Dicembre 22, 2025
Latest/Hot/Top - what about Best/Popular? Request for automatic selection Support	3	158	Luglio 7, 2024
Filtering topic lists in Discourse Using Discourse search , reference , topic-filter	21	1204	Aprile 3, 2026
Topics list filter feature Feature feedback , topic-filter	42	4436	Novembre 24, 2024
Featured Lists Theme component	29	2186	Febbraio 18, 2026

Personalizza le voci dell'elenco degli argomenti (ordinamento, raggruppamento, filtro) per una migliore organizzazione

Argomenti correlati