# Frontend JavaScript — Diário Oficial

## Estrutura de Arquivos

```
public/assets/js/custom/
├── contents/diario-oficial/
│   ├── index.js                      # Toggle status (CMS listagem)
│   ├── datatable.js                  # Configuração DataTables
│   ├── config.js                     # Configurações do diário
│   ├── areas.js                      # Modal de áreas/matérias
│   └── diario_portal.js             # Filtros do portal
├── portal/diario-oficial/
│   └── viewer.js                     # Visualizador PDF
└── utilities/helpers/
    └── preview-diario.js            # Preview helper

public/assets/plugins/summernote/
└── summernote-diario.js             # Plugin Summernote customizado
```

---

## 1. `index.js` — Toggle Status

**Arquivo:** `public/assets/js/custom/contents/diario-oficial/index.js`

```javascript
// Adiciona listener em todos os botões de toggle-status
[...document.querySelectorAll('.toogle-status')].map(value => {
    value.addEventListener('click', async event => {
        event.preventDefault();
        let id = value.id.split('_')[1];
        await myFetch('/cms/diario/status', 'post', { id })
        location.reload();
    })
})
```

- Função: Ativar/Desativar diário via AJAX
- Rota: `POST /cms/diario/status`
- Após sucesso: recarrega a página

---

## 2. `datatable.js` — Configuração DataTables

**Arquivo:** `public/assets/js/custom/contents/diario-oficial/datatable.js`

```javascript
let collums = [
    {
        data: 'autor',
        render: function (data) {
            return `<div>${data}</div>`;
        }
    },
    {
        data: 'data_publicacao',
        render: function (data) {
            return `<div>${data}</div>`;
        }
    },
    {
        data: 'status',
        render: function (data) {
            return `<div class='font-weight-bold text-center'>${data}</div>`;
        }
    },
    {
        data: null,
        orderable: false,
        render: function (data) {
            // Botões: Atualizar, Download, Ativar/Inativar, Editar, Excluir
            return `<div class='flex justify-center'>`
                + createSingleButton(...)
                + createDownloadButton(data.download_link)
                + createActiveButton(...)
                + createSingleButton(...)
                + createButtonDelete(...)
                + `</div>`;
        }
    }
];

runDatatables('diario_oficial', collums, true, 'ASC', null, true);
```

- Fonte: `GET /cms/datatable/diario_oficial` (view PostgreSQL `diario_oficial`)
- 4 colunas visíveis + 1 de ações
- Ordenação ascendente por padrão
- Checkbox de seleção em lote (bulk delete)

---

## 3. `config.js` — Configurações

**Arquivo:** `public/assets/js/custom/contents/diario-oficial/config.js`

Gerencia o formulário de configurações do diário:
- Upload de imagem de cabeçalho
- Preview da imagem
- Remoção de imagem existente

---

## 4. `areas.js` — Modal de Matérias

**Arquivo:** `public/assets/js/custom/contents/diario-oficial/areas.js`

Gerencia o modal de inclusão/edição de matérias no formulário do diário:

- **Adicionar matéria textual**: Abre modal com Summernote para edição HTML
- **Adicionar matéria PDF**: Upload de arquivo, com opção de incorporar no fluxo (`file_in`)
- **Editar matéria**: Carrega dados existentes no modal
- **Excluir matéria**: Confirmação + requisição DELETE
- **Reordenar**: Drag & drop via sortable (atualiza position)
- **Seleção de Área/Subárea**: Dropdowns encadeados

### Funcionalidades:

| Ação | Método HTTP | Rota |
|------|-------------|------|
| Listar matérias do diário | GET | `/cms/area/{id}` (show) |
| Criar matéria (texto) | POST | `/cms/area` |
| Criar matéria (PDF) | POST | `/cms/area` (multipart) |
| Editar matéria | PUT | `/cms/area/{id}` |
| Excluir matéria | DELETE | `/cms/area/{id}` |
| Reordenar | PUT | `/cms/ajax/diario-oficial/{id}/sort` |

---

## 5. `diario_portal.js` — Filtros do Portal

**Arquivo:** `public/assets/js/custom/contents/diario-oficial/diario_portal.js`

Gerencia a listagem pública de diários:

```javascript
// Captura filtros e faz requisição
const filters = {
    data_ini: $('#DataINI').val(),
    data_fim: $('#DataFIM').val(),
    termo: $('#Search_termo').val(),
    edicao: $('#Search_edicao').val()
};

// POST para /diario-oficial/filtro
// Renderiza resultados em #diarioZona
// Gerencia paginação
```

---

## 6. `viewer.js` — Visualizador PDF do Portal

**Arquivo:** `public/assets/js/custom/portal/diario-oficial/viewer.js`

Gerencia a página de visualização do PDF:

- **File Info**: Fetch para `/diario-oficial/viewer/{id}/file-info` → exibe tamanho e páginas
- **Busca**: Input de busca com fetch para `/diario-oficial/viewer/search`
  - Resultados são exibidos em dropdown abaixo do input
  - Ao selecionar: navega para o diário encontrado
- **Navegação**: Botões "Anterior"/"Próxima" entre edições
  - Atualiza URL sem reload
  - Botões desabilitados quando não há edição

### Estrutura de Dados

```javascript
const diarioData = {
    id: ...,
    edicao: '...',
    dataPublicacao: '...',
    previousEdition: { id, edicao, data_publicacao } | null,
    nextEdition: { id, edicao, data_publicacao } | null,
    pdfPath: '...',
    autor: '...',
    email: '...',
    leiValidadora: '...'
};
```

---

## 7. `preview-diario.js` — Preview Helper

**Arquivo:** `public/assets/js/custom/utilities/helpers/preview-diario.js`

Utilitário para preview do PDF no modal do CMS. Carregado no formulário de criação/edição:

```javascript
// Abre modal com iframe apontando para o PDF gerado
// Botão de impressão
// Fechar modal
```

---

## 8. `summernote-diario.js` — Plugin Summernote

**Arquivo:** `public/assets/plugins/summernote/summernote-diario.js`

Plugin customizado do Summernote para o editor de matérias do diário:

- Configurações específicas (toolbar, altura, etc.)
- Upload de imagens via AJAX
- Integração com o processamento de imagens do servidor
- Botões personalizados para o contexto do diário oficial