Masquer les sous-catégories sans masquer leurs sujets dans la liste des sujets ?

Soutien
1

Salut à tous,

Existe-t-il un moyen de « masquer » les sous-catégories dans les listes de sujets et d’afficher à la place les catégories parentes sous le titre du sujet ?

Mon objectif est d’avoir une catégorie racine avec n sous-catégories. Ces sous-catégories ne doivent pas être affichées dans l’interface utilisateur. Elles servent uniquement à restreindre l’accès aux publications en fonction de l’appartenance à un groupe.

Dans la liste des sujets, je souhaiterais afficher la catégorie parente sous le titre du sujet plutôt que la sous-catégorie.

J’ai pensé à utiliser des tags, mais malheureusement, je ne peux pas restreindre l’accès aux sujets de cette manière.

1 « J'aime »
2

Le modèle pour les éléments de la liste des sujets n’affiche que le lien vers la catégorie du sujet, comme ceci :
{{category-link topic.category}}

Vous devrez donc modifier ce modèle pour afficher des liens vers la catégorie parente :

{{#if topic.category.parentCategory}}
  {{category-link topic.category.parentCategory}}
{{else}}
  {{category-link topic.category}}
{{/if}}

Cependant, si vous ne souhaitez que cela se produise pour une catégorie parente spécifique, vous devrez ajouter davantage de logique. Je ne sais pas quelle serait la méthode recommandée pour le faire, peut-être en enregistrant un helper Handlebars ?

Une autre approche consisterait à afficher toujours à la fois les liens de la catégorie et de la catégorie parente, puis à masquer ceux que vous ne souhaitez pas avec du CSS.

2 « J'aime »
3

Je n’ai pas vérifié, mais je pense que tu devrais pouvoir les masquer avec du CSS.

1 « J'aime »
4

Dois-je également modifier le modèle pour cette approche ? Je n’ai pas trouvé un tel paramètre de site dans mon administration.

5

Les catégories parentes ne figurent pas dans le modèle par défaut, donc oui, je suppose que vous devez modifier le modèle. Du moins, je ne connais pas d’approche plus légère pour y parvenir.

Il n’existe aucun paramètre de site pour modifier les modèles ; je vous enverrai le code par message privé pour que vous puissiez l’essayer.

1 « J'aime »
6

En général, évitez de remplacer complètement les modèles, car cela nécessite une maintenance : vous devez effectuer un diff et vérifier les modifications si une mise à jour de Discourse casse votre thème.

Ce que vous pouvez faire, c’est faire un pas en arrière et modifier les données transmises au modèle à la place.

Le composant topic-list-item est un composant Ember, vous pouvez donc utiliser api.modifyClass pour apporter les modifications souhaitées.

Par exemple, voici un extrait de code qui affiche le badge de la catégorie parente dans les sujets des sous-catégories, sous le titre. Si le sujet se trouve dans la catégorie principale, ce code n’aura aucun effet.

<script type="text/discourse-plugin" version="0.8">
  const { on } = require("discourse-common/utils/decorators");

  // identifiants des catégories parentes
  const targetCategoryIds = [9, 15, 50];

  const useParentCategory = function () {
    const parentCategory = this.attrs.topic.category.parentCategory;
    const switchToParent = parentCategory && targetCategoryIds.includes(parentCategory.id)

    if (switchToParent) {
      this.attrs.topic.set("category", parentCategory);
    }
  };

  api.modifyClass("component:topic-list-item", {
    @on("didReceiveAttrs")
    setCategory() {
      useParentCategory.call(this);
    }
  });

  api.modifyClass("component:latest-topic-list-item", {
    @on("didReceiveAttrs")
    setCategory() {
      useParentCategory.call(this);
    }
  });
</script>
4 « J'aime »
7

C’est génial !

Y a-t-il un moyen de le limiter à une ou plusieurs catégories spécifiques ?

8

Deux approches différentes selon ce que vous souhaitez accomplir. Quel est le résultat souhaité ?

  1. Toutes les sous-catégories sous la catégorie parente « foo » doivent avoir ce comportement.
  2. Certaines sous-catégories sous différentes catégories parentes doivent avoir ce comportement.
9

@Johani

C’est bien cela que nous recherchons.

10

J’ai modifié l’extrait ci-dessus pour refléter ce changement. Il vous suffit d’ajouter les identifiants des catégories parentes au tableau targetCategoryIds. Vous pouvez trouver l’identifiant d’une catégorie en visitant sa page et en vérifiant l’URL.

https://meta.discourse.org/c/support/6

Le « 6 » à la fin de l’URL ci-dessus est l’identifiant de la catégorie « support » ici sur Meta.

3 « J'aime »
11

Merci de partager cela @Johani ! Je débute tout juste avec Ember… vous êtes vraiment utiles ! :pray: :relaxed:

2 « J'aime »
12

C’est incroyable ! Merci beaucoup pour ton aide rapide.

2 « J'aime »
13

C’est super de l’entendre !

Two Thumbs Up

Il faut juste un peu de temps pour s’y habituer. Si quelque chose dans la base de code n’est pas clair, n’hésitez pas à créer un sujet dans la catégorie Dev et à me taguer.

2 « J'aime »
14

C’est vraiment génial. Merci pour cela et merci à ceux qui vous consacrent du temps pour le faire.

:+1:

2 « J'aime »
15

@Johani Où dois-je exactement placer cet extrait de code ?
J’ai essayé de le placer dans la section <head> et dans l’en-tête de mon composant de thème où je stocke tout mon CSS. Mais dans ce cas, la liste des sujets est coupée exactement à l’endroit où le premier sujet concerné de la sous-catégorie devrait être listé.

1 « J'aime »
18

Oui, il y avait un problème lié à la façon dont la catégorie était définie, que j’avais manqué localement. J’ai modifié l’extrait ci-dessus, et cela devrait fonctionner maintenant.

L’extrait ci-dessus vous permet de définir les catégories sur lesquelles vous souhaitez que cela fonctionne. Si vous voulez que cela fonctionne sur toutes les catégories, vous utiliseriez quelque chose comme ceci.

<script type="text/discourse-plugin" version="0.8">
  const { on } = require("discourse-common/utils/decorators");

  const useParentCategory = function () {
    const parentCategory = this.attrs.topic.category.parentCategory;

    if (parentCategory) {
     this.attrs.topic.set("category", parentCategory);
    }
  };

  api.modifyClass("component:topic-list-item", {
    @on("didReceiveAttrs")
    setCategory() {
      useParentCategory.call(this);
    }
  });

  api.modifyClass("component:latest-topic-list-item", {
    @on("didReceiveAttrs")
    setCategory() {
      useParentCategory.call(this);
    }
  });
</script>
2 « J'aime »
20

Merci @Johani pour ton aide, j’apprécie vraiment !

1 « J'aime »
21

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.