Capítulo 10: Filtros e condições do painel

Neste capítulo, vamos guiá-lo, passo a passo, pela próxima parte do painel de tarefas. Em caso de dúvidas, fique à vontade para consultar o fórum.

Começamos revisando o capítulo anterior. Vamos juntos!

10.1 Resposta do capítulo anterior

Vamos adicionar links para os diferentes status, facilitando a navegação. Esta é a estrutura dos links por status:

(Suponha que o link seja http://xxxxxxx/admin/hliu6s5tp9xhliu6s5tp9x.)

Solução do desafio
Status
Link
Não iniciado
hliu6s5tp9xhliu6s5tp9x?task_status=Not started
Em andamento
hliu6s5tp9xhliu6s5tp9x?task_status=In progress
Aguardando revisão
hliu6s5tp9xhliu6s5tp9x?task_status=To be review
Concluído
hliu6s5tp9xhliu6s5tp9x?task_status=Completed
Cancelado
hliu6s5tp9xhliu6s5tp9x?task_status=Cancelled
Arquivado
hliu6s5tp9xhliu6s5tp9x?task_status=Archived

10.1.2 Adicionar múltipla seleção para o Responsável

  1. Criar campo personalizado: crie um campo "Responsável", do tipo múltipla seleção, e preencha os apelidos (ou nomes) dos membros para selecioná-los rapidamente ao atribuir tarefas.

  1. Na configuração do relatório: defina "Responsável/Apelido contém Filtro atual/Responsável" como condição. Assim, encontra rapidamente as tarefas associadas ao responsável atual.

Faça alguns testes para garantir o funcionamento.


10.2 Vincular o painel ao usuário

Podemos exibir conteúdos diferentes conforme o usuário:

  1. Defina o valor padrão de "Responsável" como "Usuário atual/Apelido": o sistema mostra automaticamente as tarefas relevantes para o usuário, melhorando a eficiência.

  1. Atualize a página: o painel carrega os dados associados ao usuário logado. (Lembre-se de adicionar a condição de filtro de usuário aos gráficos onde for necessário.)


10.3 Reformular o filtro de tarefas

Talvez você tenha percebido um design indesejado:

Ao saltar diretamente via "Definir faixa de dados" no bloco de tabela, as tarefas ficam pré-restritas ao status correspondente. Quando filtramos outro status, os dados ficam vazios!

E agora? Vamos remover o filtro de dados e adotar outra abordagem.

  1. Remover o filtro de dados: para evitar que o status fique travado, ajustamos os filtros de forma flexível.

  1. Configurar valor padrão no bloco de filtro do tipo formulário.

Lembra do nosso bloco de filtro?

Crie um bloco de filtro do tipo formulário para a tabela de Tarefas. Configure os campos Status e os outros que você precisar, alimentados pelas variáveis vindas da URL. (Lembre-se de conectá-lo ao bloco de tarefas a ser filtrado.)

  • Defina o valor padrão do campo Status como URL search params/task_status.

  1. Testar o novo filtro: agora dá para alternar livremente os status.

  • Opcional: para que cada usuário foque nas próprias tarefas, defina o valor padrão de "Responsável" como "Usuário atual".

10.4 Notícias, comunicados e foco em informações

Vamos adaptar a base de documentos! Mostre o que é necessário no painel.

Em uma gestão de longo prazo, com cada vez mais documentos, surgem várias necessidades:

  • News: foco em novidades, conquistas e marcos do projeto
  • Comunicados/lembretes temporários

10.4.1 Notícias em destaque (News)

  1. Adicionar campo "Notícia em destaque": na tabela de Documentos, adicione o campo do tipo checkbox "Notícia em destaque" para marcar documentos importantes.

  1. Marcar documentos importantes: escolha um documento qualquer e, no formulário de edição, adicione e marque o campo "Notícia em destaque".

  1. Criar bloco do tipo "Lista": no painel, crie um bloco de Lista > selecione a tabela de Documentos.

Arraste para a direita, exiba "Data de criação" e "Título", ajuste a largura dos campos e desative "Mostrar título".

  1. Exibir as notícias em destaque:

Para reforçar a sensação de tempo real, podemos exibir também a data.

Ordene em ordem decrescente pela data de criação para mostrar as notícias mais recentes primeiro.

Pronto, uma área simples de notícias em destaque! A equipe pode acompanhar o avanço do projeto a qualquer momento.

10.4.2 Comunicados

A seguir, uma funcionalidade simples de comunicados públicos — algo que você já viu várias vezes em nosso Demo online. Para esses comunicados temporários, não queremos que apareçam permanentemente nem queremos registrar progresso de projeto. É só um lembrete temporário.

  1. Criar bloco Markdown: escolha uma área qualquer do painel e use sintaxe Markdown para escrever o comunicado.

Para mais detalhes sobre o uso prático do Markdown, consulte nosso Demo oficial, a documentação ou o tutorial "Documentação leve".

Como exemplo simples, vamos demonstrar a potência do bloco Markdown com um comunicado em HTML.

  • Código de exemplo:
<div style="font-family: 'Arial', sans-serif; background-color: #e9f5ff; margin: 10px; padding: 10px; border: 2px solid #007bff; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);">
    <h1 style="color: #007bff; text-align: center; font-size: 2em; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);">Comunicado importante</h1>
    <p style="font-size: 1.2em; line-height: 1.6; color: #333;">Caros colegas:</p>
    <p style="font-size: 1.2em; line-height: 1.6;">Para melhorar nossa eficiência, faremos um treinamento geral em <span style="color: red; font-weight: bold; font-size: 1.5em;">10 de novembro</span>.</p>
    <p style="font-size: 1.2em; line-height: 1.6; font-style: italic;">Obrigado pela colaboração!</p>
    <p style="font-size: 1.2em; line-height: 1.6;">Saudações,</p>
    <p style="font-size: 1.2em; line-height: 1.6;">Equipe de Gestão</p>
</div>

10.5 Resumo

Com essas configurações, criamos um painel personalizado para a equipe gerenciar tarefas com mais eficiência, acompanhar o avanço do projeto e receber comunicados em tempo hábil.

De filtros de status à definição do responsável e exibição de notícias, o objetivo é melhorar a experiência do usuário e a praticidade do sistema.

Nosso painel personalizado está pronto! Teste-o e adapte conforme suas necessidades. Avancemos para o próximo capítulo!


Continue explorando e dê asas à sua criatividade! Se tiver dúvidas, lembre-se de consultar a documentação oficial do NocoBase ou de participar da comunidade do NocoBase.