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:

2

Encontrei este artigo, que parece muito semelhante, para a plataforma Zendesk, mas acredito que é esse o tipo de funcionalidade que estamos procurando!

3 
<div id="after-header">Conteúdo</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
}

Também parece funcionar se você substituir
api.onPageChange(() => {
por
$( document ).ready(function() {
e, assim, o script não será carregado em cada página, mas nunca tenho certeza de onde preciso usar api.onPageChange(() => {.

4

Se você instalar este componente, todos os grupos do usuário atual serão adicionados como classes no corpo da página, facilitando alterações futuras apenas com CSS.

5

haha, isso ia ser a próxima coisa que eu tentaria descobrir

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?