Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como montar corretamente um mosaico de usuários?

por André Albson Santos Xavier
| 143.8k xp | 4 posts
Desenvolvedor Web Front-End

Estou com o seguinte problema:

Tenho vários grupos de Reunião com diferentes usuários. De acordo com a quantidade de usuários, o javascript monta uma caixa com as informações do grupo e um mosaico com as informações do usuário (abre o popover para cada ícone de usuário com id, nome, idade, etc.);

O problema é que quando o grupo possui mais de um usuário, não consigo acrescentar dinamicamente o ícone com as informações do próprio dentro do mesmo grupo...

Abaixo está o meu código e uma imagem representando o meu problema.

html+= '<div id="infoUser'+item.id_usuario+'" class="hide infoUser">'
                    + '<div class="pull-left">'
                    +   '<i class="fa fa-user fa-5x foto-info-usuario-semfoto"></i>'
                    + '</div>'
                    + '<div class="pull-right">'
                    +   '<div>'
                    +       '<i id="close'+item.id_usuario+'" class="fa fa-times fa-lg pull-right closePopover"></i>'
                    +   '</div>'
                    +   '<div class="informacoes-user-texto">'
                    +       '<label class="nomeUser">'+item.nome_usuario+'</label>'
                    +   '<div class="fone-user">'
                    +       '<i class="fa fa-phone" aria-hidden="true"></i> '+item.fone_com+''
                    +   '</div>'
                    +   '<div class="email-user">'
                    +       '<i class="fa fa-envelope" aria-hidden="true"></i> '+item.login+''
                    +   '</div>'
                    +   '<div class="lista-tags wrap">'
                    +       '<div class="tags">'
                    +           '<div class="ribbon-top"></div>'
                    +           '<div class="ribbon-bottom"></div>'
                    +           '<label class="tags-user">'+item.funcao+'</label>'
                    +       '</div>'
                    +   '</div>'
                    + '</div>'
                    + '</div>'
                    + '</div>';


                html += '<div class="mosaico-user wrap">'
                        +   '<div class="liderGrupo"></div>';
                var iconePadrao = '<a class="linkUsuario"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>';
                var demoParticipantes = ['<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser'+item.id_usuario+'" data-toggle="popover"><i class="fa fa-user fa-3x usuarioSemFoto" aria-hidden="true"></i></a>'];

                var conteudo = "";
                var i;

// Adiciona icone sem usuario quando o mosaico tiver um numero de participantes menor que 15

while(demoParticipantes.length < 15) {
                    demoParticipantes.push(iconePadrao);
                }

                for (i = 0; i < 15; i++) {
                conteudo = demoParticipantes[i];
                html += conteudo;

                } 
            });
                html+= '</div>'
                        +   '<div id="hover" class="caixa-footer">'
                        +       '<a id="detalheGrupo" class="detalheGrupo act">'
                        +           '<i data-toggle="tooltip" data-visualizar="listagem" data-delay="1000" data-placement="top" title="Ver Detalhes" class="fa fa-eye fa-lg pull-right" aria-hidden="true"></i>'
                        +       '</a>'
                        +       '<span class="qtd-participantes" style="margin-right: 70px;">'+value.qtdeParticipantes+'<span class"texto" id="nParticipantes"> ' +participante+ '</span></span>'
                        +   '</div>'
                        + '</div>';
            }

Alguém pode me ajudar com esse problema? Aqui está uma imagem representando o problema: https://i.stack.imgur.com/XG2d6.png

1 resposta
solução!
por Estudante
| 719.4k xp | 745 posts

Olá, André! Tudo bem? =)

O legal do seu código é que você escolheu ótimos nomes para as variáveis, então fica mais simples de entender. =)

Pelo que pude ver:

  • iconePadrao representa cada um dos slots de usuários, ou seja, os ícones em branco, correto?
  • demoParticipantes é a sua lista de usuários, ou seja, o array que contém os 15 slots, certo?

Se as informações acima estiverem corretas, tome cuidado com o código do while e do for:

while(demoParticipantes.length < 15) {
     demoParticipantes.push(iconePadrao);
}
for (i = 0; i < 15; i++) {
    conteudo = demoParticipantes[i];
    html += conteudo;
}

Na parte do while, o que você está fazendo é populando o restando do array, ou seja, você havia iniciado demoParticipantes com apenas um usuário e preencheu o restante com espaços...

O que você está fazendo dentro do laço for é concatenando seu HTML com o conteúdo de cada posição da lista.

O que você queria fazer, se entendi corretamente, é acrescentar usuários ao grupo... Então, dentro do seu for, você deveria percorrer seu array, verificar se um usuário já existe. Confirmada a não existência de um usuário em determinada posição, você quer alterar o valor dela, ao invés de concatenar o HTML... Fez sentido?

Como não conheço todo seu código, vou dar um exemplo do que acredito que possa resolver seu problema:

for (var i = 0; i < demoParticipantes.length; i++) {
    if (!demoParticipantes.existeUsuario(i)) {
        demoParticipantes[i].inserirUsuario(usuario);
    }
}

No código acima, percorro a lista verificando se a posição está livre. Estando livre, apenas insiro um usuário lá... Sacou? =)

Espero ter ajudado!

Abraço, Fábio

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software