Einträge der Themenliste anpassen (Sortieren, Gruppieren, Filtern) für bessere Organisation

Sören_Geier · 20. August 2022 um 18:28

TLDR:
Was ist der schnellste Weg, die Zusammensetzung von filteredTopics (Zeile 26) zu ändern? Ich hätte gerne die volle Kontrolle darüber, welche Themen (mit welchen Eigenschaften) gesammelt werden.

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

Hallo Community,

ich benutze die GitHub - discourse/discourse-topic-thumbnails: Display thumbnails in topic lists Theme-Komponente in unserer gehosteten Umgebung und wir wollten einige zusätzliche Änderungen daran vornehmen, um unseren Bedürfnissen gerecht zu werden.

Anstatt alle Themen in einem großen Block von Grid-Elementen vermischt zu haben, möchten wir etwas Ordnung hineinbringen.
Wir streben Folgendes an:
Zuerst möchten wir nach gesehen/ungesehen sortieren, dann nach Kategorie; danach möchten wir sie nach Chronologie gruppieren (und Buckets erstellen, z. B. Heute (alle relevanten Beiträge von heute), Gestern, Letzte Woche.

Unsere Themenliste sollte also mit 3 verschiedenen Grids untereinander so aussehen:

<HEUTE, GESTERN, LETZTE WOCHE> stellt eine Gruppierung dar

ANGEPINNT:
Thema 20, Thema 30, Thema 40

UNGESEHEN:
<HEUTE : [ART: Thema 1, Thema 2], [DESIGN: Thema 4]> <GESTERN: [KONZEPT: Thema 3], [ANDERE_KATEGORIE: Thema 6, Thema 11]> <LETZTE WOCHE: Thema 8, Thema 10>

GESEHEN:
<HEUTE : [ART: Thema 4, Thema 12], [DESIGN: Thema 4]> <GESTERN: [CGI: Thema 13], [ANDERE_KATEGORIE: Thema 16, Thema 21]>, <LETZTE WOCHE: Thema 18, Thema 100>

Meine Hauptfrage wäre, wie ich die Abfrage erstellen/erweitern kann, die das Ergebnis erzeugt, über das dann 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

über filteredList iteriert wird.

Ich habe eine Stelle gefunden, an der dies vielleicht gefüllt wird, aber ich war mir nicht sicher, wie ich es “erweitern” kann. Es scheint ein queryParam-System und einige Routen-Sachen zu geben, die ein Ergebnis beeinflussen können, aber ich habe es nicht verstanden.

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

Kann mir jemand den richtigen Ort zeigen?

Wir verwenden die oben genannte Theme-Komponente, was bedeutet, dass wir in unseren Möglichkeiten eingeschränkt sind.
Es wäre hilfreich für mich, wenn mir jemand zeigen könnte, wie man filteredList zum Beispiel auf nur ungelesene Beiträge beschränkt - von da an könnte ich es selbst weitermachen.

Vielen Dank!

CC @pfaffman

JammyDodger · 20. August 2022 um 19:23

Nur zur Info: Topic List Thumbnails ist eine #customization:theme-Komponente und kein Plugin.

Sören_Geier · 20. August 2022 um 20:44

Ja, danke, das war mir bewusst, aber ich habe die richtigen Begriffe übersehen. Ich passe das an.

Sören_Geier · 23. August 2022 um 06:11

Jammy, ich habe eine TLDR hinzugefügt. Hast du irgendwelche Hinweise zu dieser verkürzten Frage?
Danke

JammyDodger · 23. August 2022 um 07:40

Das liegt leider außerhalb meines Fähigkeitsspektrums.

Haben Sie sich angesehen, wie man Klassen in den Developing Discourse Themes & Theme Components modifiziert? Dort gibt es vielleicht etwas, das helfen kann. Eine Suche könnte auch einige hilfreiche Beispiele liefern, wenn Sie Ihre Schlüsselwörter erweitern?

Joe:

modifyClass()

Sie können diese Methode verwenden, um Methoden in einer Klasse wie einer Komponente oder einem Controller zu erweitern oder zu überschreiben (lesen Sie: Ember Classes ), aber es ist auch eine großartige Möglichkeit, Informationen zu erhalten und Variablen festzulegen.
api.modifyClass('controller:composer', {
  actions: {
    newActionHere() { }
  }
});

Sören_Geier · 23. August 2022 um 09:54

Ja, danke Jammy, ich bin mir dieser Dinge bewusst und habe auch einige private Plugins geschrieben (oder erweitert). Die Sache hier ist jedoch, dass ich nicht verstehe, wo die Liste aggregiert wird und wie die gesamte LOGIK zum ABFRAGEN VON THEMEN funktioniert oder wo sie sich tatsächlich befindet. Wenn ich eines von beiden wüsste, könnte ich weitermachen.

Sören_Geier · 24. August 2022 um 10:12

Ich füge noch ein paar Leute in CC hinzu, da ich diese im Git-Code gesehen habe.

JammyDodger · 24. August 2022 um 10:45

Nur zur Information, aber es ist eigentlich schlechte Meta-Etikette, Teammitglieder auf diese Weise zu markieren. Daher habe ich diese entfernt, um kein Muster zu schaffen, das andere möglicherweise nachahmen.

Es tut mir wirklich leid, dass Ihr Thema nicht mehr Anklang gefunden hat. Ich kenne mich damit nicht aus, daher kann ich leider keine direkte Antwort geben.

Sind Sie mit Ihrer Recherche/Ihren Versuchen weitergekommen?

Sören_Geier · 24. August 2022 um 11:51

Ich dachte, ich wäre schlau, indem ich die richtigen Leute in CC gesetzt habe

Und nein, bin noch nicht weiter gekommen. Ich habe versucht, die Themenliste dreimal anzuzeigen und dann unerwünschte Themen in jeder davon auszublenden, aber dann kam die „Mehr laden“-Funktionalität zum Einsatz und große Teile des DOM wurden neu geschrieben und meine JS-Berechnungen wurden zu schwer und verursachten seltsame Effekte.

Ich habe festgestellt, dass ich es richtig machen muss, indem ich die von Discourse bereitgestellten APIs verwende.

Sören_Geier · 27. August 2022 um 07:34

Ich habe hier einige bedeutende Fortschritte gemacht und hatte unterwegs noch ein paar weitere Fragen:

Gibt es einen API-Endpunkt, den ich verwenden kann, um alle angehefteten Themen zu erhalten? Ähnlich wie /latest.json oder /top.json?
Gibt es einen JS-Befehl (angenommen, ich befinde mich in einem Plugin), den ich verwenden kann, um die Themenliste neu zu rendern, nachdem ich eine Statusänderung an den Elementen der Themenliste vorgenommen habe, damit die Änderung sofort widergespiegelt wird? Ich schätze, ich muss mit einem Observer für topics. arbeiten?

Außerdem habe ich den folgenden Artikel gefunden, der alles enthält, was ich brauche, um die gewünschte Themenliste anzupassen.

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

nathank · 6. September 2022 um 10:08

Schön, dass Sie Fortschritte gemacht haben – Sie betreten eindeutig Neuland!

Sören_Geier · 6. September 2022 um 10:15

Angeheftete Themen können durch Abfrage von /search.json?expanded=true&q=in%3Apinned abgerufen werden
Suche ohne tatsächliches Suchwort verwenden.

Dies gibt nur eine Liste von Themen-IDs oder vereinfachte Themen-Datensätze zurück. Sie müssten nachfolgende Ajax-Anfragen an /t/${topic.id}.json stellen, um den vollständigen Datensatz zu einem Thema zu erhalten.

Ich bin immer noch daran interessiert, wie ich eine Neudarstellung einer Themenliste über JS erzwingen kann.

Thema		Antworten	Aufrufe
Filtered Topic Lists Theme component	14	979	22. Dezember 2025
Latest/Hot/Top - what about Best/Popular? Request for automatic selection Support	3	204	7. Juli 2024
Topics list filter feature Feature feedback , topic-filter	41	4761	24. November 2024
Filtering topic lists in Discourse Using Discourse search , reference , topic-filter	19	1287	3. April 2026
Featured Lists Theme component	29	2295	18. Februar 2026

Einträge der Themenliste anpassen (Sortieren, Gruppieren, Filtern) für bessere Organisation

Verwandte Themen