5.3 KiB

Raw Blame History

🚫 Sistema de Bloqueio Temporário da Sidebar

📋 Resumo

Sistema para bloquear botões específicos da sidebar temporariamente, ideal para deploys onde algumas funcionalidades ainda não foram refatoradas ou estão em manutenção.

🎯 Como Usar

1. Configuração Rápida

Edite o arquivo: projects/idt_app/src/app/shared/components/sidebar/sidebar.component.ts

Localize a seção temporaryBlocks (linha ~792):

private temporaryBlocks: { [key: string]: boolean } = {
  'maintenance': true,        // ✅ BLOQUEAR Manutenção
  'reports': true,           // ✅ BLOQUEAR Relatórios  
  'settings': true,          // ✅ BLOQUEAR Configurações
  'finances': false,         // ✅ LIBERAR Finanças
  'routes/shopee': true,     // ✅ BLOQUEAR Shopee (submenu)
  // Adicione mais IDs conforme necessário
};

2. Bloquear um Botão

'nome-do-botao': true,  // ✅ BLOQUEADO

3. Liberar um Botão

'nome-do-botao': false, // ✅ LIBERADO

🔍 IDs Disponíveis

Botões Principais:

'dashboard'     // Dashboard
'vehicles'      // Veículos
'drivers'       // Motoristas  
'maintenance'   // Manutenção
'finances'      // Finanças
'routes'        // Rotas
'reports'       // Relatórios
'settings'      // Configurações

Submenus:

'finances/accountpayable'  // Contas a Pagar
'routes/mercado-live'      // Mercado Live
'routes/shopee'            // Shopee

🎨 Comportamento Visual

✅ Botões Liberados:

Funcionam normalmente
Cor e hover padrão
Clique navega para a página

🚫 Botões Bloqueados:

Aparência acinzentada (opacity: 0.5)
Ícone de cadeado (🔒) no final
Cursor not-allowed
Tooltip com motivo do bloqueio
Clique não navega
Submenus não expandem

💡 Exemplos Práticos

Deploy com Manutenção Bloqueada:

private temporaryBlocks: { [key: string]: boolean } = {
  'maintenance': true,  // 🚫 Em refatoração
  'reports': true,     // 🚫 Aguardando nova API
  'settings': false,   // ✅ Funcionando
};

Deploy com Shopee Desabilitado:

private temporaryBlocks: { [key: string]: boolean } = {
  'routes/shopee': true,     // 🚫 API em manutenção
  'routes/mercado-live': false, // ✅ Funcionando
};

Liberar Tudo (Deploy Final):

private temporaryBlocks: { [key: string]: boolean } = {
  // Todos os valores false ou remover as linhas
};

🔧 Personalização Avançada

Edite o método applyTemporaryBlocks() (linha ~1080):

if (this.temporaryBlocks[item.id]) {
  item.disabled = true;
  item.disabledReason = 'Sua mensagem personalizada aqui';
}

Diferentes Mensagens por Item:

private applyTemporaryBlocks(): void {
  const customMessages: { [key: string]: string } = {
    'maintenance': 'Manutenção em refatoração - aguarde próxima versão',
    'reports': 'Relatórios temporariamente indisponíveis',
    'settings': 'Configurações em manutenção programada'
  };

  this.menuItems = this.menuItems.map(item => {
    if (this.temporaryBlocks[item.id]) {
      item.disabled = true;
      item.disabledReason = customMessages[item.id] || 'Funcionalidade temporariamente indisponível';
    }
    // ... resto do código
  });
}

🚀 Fluxo de Deploy

1. Antes do Deploy:

// Bloquear funcionalidades não finalizadas
private temporaryBlocks: { [key: string]: boolean } = {
  'maintenance': true,
  'reports': true,
  'settings': true,
};

2. Compilar e Testar:

ng build idt_app --configuration production
# Testar no ambiente de staging

3. Deploy em Produção:

# Deploy com botões bloqueados

4. Depois das Correções:

// Liberar funcionalidades corrigidas
private temporaryBlocks: { [key: string]: boolean } = {
  'maintenance': false, // ✅ Corrigido
  'reports': true,     // 🚫 Ainda em trabalho
  'settings': false,   // ✅ Corrigido
};

5. Deploy Final:

// Liberar tudo
private temporaryBlocks: { [key: string]: boolean } = {};

🎯 Benefícios

✅ Para Deploy:

Deploy seguro com funcionalidades incompletas
Usuários não acessam páginas quebradas
Feedback visual claro sobre indisponibilidade

✅ Para Desenvolvimento:

Controle granular por botão/submenu
Configuração simples e rápida
Reversível sem código complexo

✅ Para Usuários:

Interface consistente
Não quebra navegação
Feedback claro sobre status

⚠️ Observações Importantes

Temporário: Este sistema é para bloqueios temporários, não permanentes
Não substitui: Controle de permissões real (roles/permissions)
Deploy: Sempre testar antes de fazer deploy
Documentar: Comentar motivos dos bloqueios no código
Limpar: Remover bloqueios quando funcionalidades estiverem prontas

🔄 Rollback Rápido

Para reverter bloqueios rapidamente:

private temporaryBlocks: { [key: string]: boolean } = {
  // Comentar linha para liberar:
  // 'maintenance': true,  // ← Comentado = liberado
};

Este sistema permite deploy seguro e controlado, evitando que usuários acessem funcionalidades em desenvolvimento. 🚀

5.3 KiB Raw Blame History