157 lines
4.8 KiB
Markdown
157 lines
4.8 KiB
Markdown
# Debug: Catálogo de Perfis - Subitens Não Aparecem
|
|
|
|
## Problema
|
|
Os 10 subitens do "Catálogo de Perfis" não aparecem mesmo após clicar para expandir.
|
|
|
|
## Análise do Console
|
|
O console mostrava:
|
|
- "Removed expanded class" - indicando que ao clicar, a classe estava sendo removida
|
|
- O elemento tinha `class="sidebar-subcategory expanded"` no HTML
|
|
- Quando clicado, a função `toggleCategory` via que já tinha `expanded` e a removia
|
|
|
|
## Mudanças Aplicadas
|
|
|
|
### 1. HTML (index.html)
|
|
**Removida a classe `expanded` dos elementos no HTML:**
|
|
- `<div class="sidebar-category expanded">` → `<div class="sidebar-category">`
|
|
- `<div class="sidebar-subcategory expanded">` → `<div class="sidebar-subcategory">`
|
|
|
|
Agora o JavaScript adiciona a classe durante a inicialização.
|
|
|
|
### 2. CSS (style.css)
|
|
**Melhorado o CSS para garantir visibilidade:**
|
|
```css
|
|
.sidebar-subcategory-content {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard);
|
|
padding-left: var(--space-12);
|
|
opacity: 0;
|
|
visibility: hidden; /* NOVO */
|
|
}
|
|
|
|
.sidebar-subcategory.expanded .sidebar-subcategory-content {
|
|
max-height: 5000px !important;
|
|
padding-top: var(--space-4);
|
|
padding-bottom: var(--space-4);
|
|
opacity: 1 !important;
|
|
visibility: visible !important; /* NOVO */
|
|
}
|
|
```
|
|
|
|
### 3. JavaScript (app.js)
|
|
|
|
#### A. Ordem de Execução Corrigida
|
|
**ANTES:**
|
|
```javascript
|
|
applyAdminConfig();
|
|
filterToolsByMode(); // ← Esconde itens ANTES de expandir
|
|
// ... expandir categorias
|
|
```
|
|
|
|
**DEPOIS:**
|
|
```javascript
|
|
// Expandir categorias PRIMEIRO
|
|
const firstCategory = document.querySelector('.sidebar-category');
|
|
// ... código de expansão
|
|
|
|
// Aplicar filtros DEPOIS
|
|
applyAdminConfig();
|
|
filterToolsByMode();
|
|
```
|
|
|
|
#### B. Expansão Automática Melhorada
|
|
```javascript
|
|
// Initialize sidebar categories FIRST
|
|
const firstCategory = document.querySelector('.sidebar-category');
|
|
if (firstCategory) {
|
|
firstCategory.classList.add('expanded');
|
|
|
|
// Expand all subcategories within the first category
|
|
const subcategories = firstCategory.querySelectorAll('.sidebar-subcategory');
|
|
|
|
subcategories.forEach((subcat, index) => {
|
|
subcat.classList.add('expanded');
|
|
|
|
const content = subcat.querySelector('.sidebar-subcategory-content');
|
|
if (content) {
|
|
// Force display
|
|
content.style.maxHeight = '5000px';
|
|
content.style.opacity = '1';
|
|
content.style.visibility = 'visible';
|
|
|
|
// Count items
|
|
const items = content.querySelectorAll('.sidebar-item');
|
|
console.log(` └─ ${items.length} itens encontrados`);
|
|
}
|
|
});
|
|
}
|
|
```
|
|
|
|
#### C. Debug Melhorado
|
|
Adicionado logging detalhado em `filterToolsByMode()`:
|
|
```javascript
|
|
function filterToolsByMode() {
|
|
const allItems = document.querySelectorAll('.sidebar-item');
|
|
console.log(`🔍 filterToolsByMode: ${allItems.length} itens encontrados`);
|
|
console.log(` Expert Mode: ${appState.expertMode}`);
|
|
|
|
let hiddenCount = 0;
|
|
let visibleCount = 0;
|
|
|
|
// ... código de filtragem com contadores
|
|
|
|
console.log(` ✅ Visíveis: ${visibleCount}, ❌ Escondidos: ${hiddenCount}`);
|
|
}
|
|
```
|
|
|
|
#### D. Configuração toolsVisibility
|
|
Todos os itens do catálogo configurados como `true`:
|
|
```javascript
|
|
// Catálogo de Perfis
|
|
'cantoneiras': true,
|
|
'barras-redondas': true,
|
|
'tubos-circulares': true,
|
|
'perfis-i': true,
|
|
'perfis-w': true,
|
|
'tubos-rhs': true,
|
|
'chapas': true,
|
|
'perfis-hp': true,
|
|
'barras-roscadas': true,
|
|
'barras-chatas': true,
|
|
```
|
|
|
|
## Como Testar
|
|
|
|
1. Abra o `index.html` no navegador
|
|
2. Abra o Console do navegador (F12)
|
|
3. Verifique os logs:
|
|
- "✅ Primeira categoria expandida: 🏗️ AÇOS ESTRUTURAIS"
|
|
- "📂 Subcategorias encontradas: 2"
|
|
- "✅ Subcategoria 1 expandida: 🤖 Assistente Inteligente"
|
|
- " └─ 5 itens encontrados em "🤖 Assistente Inteligente""
|
|
- "✅ Subcategoria 2 expandida: 📐 Catálogo de Perfis"
|
|
- " └─ 10 itens encontrados em "📐 Catálogo de Perfis""
|
|
- "🔍 Aplicando filtro de ferramentas..."
|
|
- "🔍 filterToolsByMode: X itens encontrados"
|
|
- " ✅ Visíveis: Y, ❌ Escondidos: Z"
|
|
|
|
4. Verifique visualmente que os 10 itens aparecem:
|
|
- 📐 Cantoneiras
|
|
- ⭕ Barras Redondas
|
|
- 🔘 Tubos Circulares
|
|
- 🏛️ Perfis I (IPE)
|
|
- 🏗️ Perfis W
|
|
- ▭ Tubos RHS
|
|
- 📄 Chapas
|
|
- 🏛️ Perfis HP
|
|
- 🔩 Barras Roscadas
|
|
- ▬ Barras Chatas
|
|
|
|
## Próximos Passos
|
|
|
|
Se ainda não funcionar, verificar:
|
|
1. Se há CSS conflitante de outros arquivos
|
|
2. Se há JavaScript de outros arquivos sobrescrevendo
|
|
3. Se o navegador está cacheando arquivos antigos (Ctrl+Shift+R para hard refresh)
|