Passo 3 · Fundamentos · Fundamentos · Como usar ENPT
Organizer Loop Engineering · Curso Visual

Como usar

Triagem de tarefas, filtros, status de agentes e trabalho bloqueado.

Leia a versão simples ou abra a camada técnica em qualquer seção.
1

A grande ideia


O dashboard é organizado em torno de views, não de pastas. Uma tarefa existe uma vez e é mostrada em toda view que combinar com seu status ou data de vencimento.

Clique em qualquer tarefa para abrir o painel de detalhes. Lá você pode alterar status, área, projeto, data de vencimento, tags e notas. Suas edições são salvas no navegador e sobrevivem ao refresh.

Pense assim… um cliente de email onde cada mensagem tem uma única caixa de entrada, mas você também pode ver views de marcadas, enviadas, agendadas e arquivadas. A mensagem não se move; a lente muda.

Por baixo dos panos

As views são filtros computados sobre o mesmo array state.tasks. Hoje e Em breve também consideram due_date, então uma tarefa com vencimento futuro aparece no bucket certo mesmo se seu status explícito ainda for inbox. As edições são mescladas com os dados importados e persistidas em localStorage sob a chave organizerEdits.

2

Em uma imagem


Entrada Hoje Em breve Algum dia Concluídas Bloqueadas
Seis views de tarefas; uma tarefa pode aparecer em múltiplas views se status ou data combinarem.
3

No código


O painel de detalhes é agora um <dialog> nativo. Ele prende o foco, fecha com Escape e devolve o foco à linha da tabela ao fechar.

dashboard/index.html
const detailPane = document.getElementById("detail-pane");
detailPane.showModal();
detailPane.addEventListener("click", e => {
  const rect = detailPane.getBoundingClientRect();
  if (e.clientX < rect.left || e.clientX > rect.right) closeDetail();
});

Acesse você mesmo

open ~/Documents/Projects/appfy/organizer-loop-engineering/dashboard/index.html
4

Experimente


Com o servidor rodando, abra o dashboard e tente três coisas:

  1. Clique em uma view na barra lateral e observe o badge de contagem atualizar.
  2. Clique em uma linha da tabela para abrir o painel de detalhes e altere seu status.
  3. Olhe os pills de agentes no cabeçalho para ver quais agentes estão rodando.
O card vermelho de bloqueio do Gmail não é um bug; é um sinal. Ele mostra o comando exato de reautenticação. Execute-o e o próximo ticket da fila será desbloqueado.