Mostrar HTML personalizado no cabeçalho para membros de um grupo específico

Dev
1

Olá, família Discourse! Espero que haja uma solução fácil para isso! Acredito que a resposta seja usar algum JavaScript.

Temos 4 botões na seção “após o cabeçalho” das configurações de CSS/HTML do nosso administrador.

image
image1189×397 98 KB

Gostaríamos que alguns botões fossem visíveis apenas para membros de grupos específicos, enquanto os demais botões permanecessem visíveis para todos os usuários.

Por exemplo: digamos que queremos que esses 4 botões principais estejam disponíveis para todos, mas que outro botão seja visível apenas para os membros de um determinado GRUPO.

Não conheço JavaScript, então, se for algo bem simples e alguém puder ajudar fornecendo um trecho de código ou algo assim, seria de grande ajuda :folded_hands:

4 curtidas
2

I found this article which seems very similar, for the Zendesk platform, but I think that’s the type of functionality we’re looking for!

1 curtida
3 
<div id="after-header">Stuff</div>

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        let currentUser = api.getCurrentUser();
        var groups = currentUser.groups;
        const isInGroup1 = groups.some(g => g.name === 'group1');
        const isInGroup2 = groups.some(g => g.name === 'group2');
        const isInGroup3 = groups.some(g => g.name === 'group3');
        if (isInGroup1) { 
            $("#after-header").addClass("group1");
         }
        if (isInGroup2) { 
            $("#after-header").addClass("group2");
         }
        if (isInGroup3) { 
            $("#after-header").addClass("group3");
         }         
    });
</script>

.button-a,
.button-b {
    display: none;
}
#after-header.group1 .button-a {
    display: block
}
#after-header.group2 .button-b {
    display: block
}

It also seems to work if you replace
api.onPageChange(() => {
with
$( document ).ready(function() {
and then the script won’t load on every page, but I never know for sure where I need api.onPageChange(() => { .

5 curtidas
4

If you install this component, all groups of the current user will be added as classes in the page body, making it easy for CSS only further changes.

7 curtidas
5

haha, that was going to be the next thing I tried to figure out

1 curtida
7

Olá,

Eu estava procurando algo semelhante, mas excluindo alguns grupos, então tentei com o ChatGPT, e a resposta foi:

Para criar um tema HTML no Discourse que acione um script excluindo grupos específicos, você precisará usar as opções de personalização de tema do Discourse junto com JavaScript para lidar com exclusões de grupo. O Discourse fornece api.getCurrentUser() para recuperar detalhes do usuário, incluindo seus grupos, o que pode ser útil para acionar condicionalmente seu script.

Aqui está um exemplo de como você pode implementar isso na seção </head> do seu tema ou componente:

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // Recupera os detalhes do usuário atual
        const currentUser = api.getCurrentUser();

        if (currentUser) {
            // Lista de nomes de grupos que você deseja excluir da execução do script
            const excludedGroups = ['group1', 'group2'];

            // Obtém os grupos do usuário
            const userGroups = currentUser.groups.map(group => group.name);

            // Verifica se o usuário pertence a algum grupo excluído
            const isExcluded = excludedGroups.some(group => userGroups.includes(group));

            if (!isExcluded) {
                // Sua lógica de script personalizada aqui
                console.log('Script está sendo executado para este usuário.');
                // Exemplo: acione qualquer lógica personalizada para usuários não excluídos
                // customScriptFunction();
            } else {
                console.log('Usuário está em um grupo excluído, script não executado.');
            }
        }
    });
</script>

Explicação:

  1. api.onPageChange(): Executa o script sempre que a página muda.
  2. api.getCurrentUser(): Busca os detalhes do usuário atualmente logado.
  3. excludedGroups: Liste os grupos que você deseja excluir.
  4. userGroups.includes(group): Verifica se o usuário pertence a algum grupo excluído.
  5. Execução condicional do script: O script só será executado se o usuário não fizer parte de nenhum grupo excluído.

Você pode substituir a customScriptFunction(); por qualquer script que precise executar. Me avise se precisar de mais algum ajuste!

Quer dizer, minha mente explodiu com isso :exploding_head:. Eu ainda não tentei, mas o código do ChatGPT está correto?