# Secretarias — Views e UX

> Views do CMS: `v6/resources/views/prefecture/contents/secretarias/**` (AdminLTE 1.22 / Bootstrap 3).
> Views do portal: `v6/resources/views/portal/components/secretarias/**` (Bootstrap 4).
> Componentes reutilizados: `v6/resources/views/components/inputs/**`, `v6/resources/views/prefecture/components/**`.

---

## 1. Inventário de views

### 1.1 CMS — Secretarias (conteúdo)

| Arquivo | Função |
|---|---|
| `v6/resources/views/prefecture/contents/secretarias/index.blade.php` | Listagem (tabela `tabela_secretarias`, corpo preenchido por AJAX); botão "Cadastrar Secretaria" (`has_access(['secretarias.create'])`); botão de exclusão em lote (`secretarias.edit`) |
| `v6/resources/views/prefecture/contents/secretarias/create.blade.php` | Formulário de cadastro (`Form::open(['route' => ['conteudo.index'], 'files' => true])`); abas "Secretarias"/"Galeria"; botão muda de rótulo para "Salvar e ir para galeria" |
| `v6/resources/views/prefecture/contents/secretarias/edit.blade.php` | Formulário de edição (`Form::model($content, ['route' => ['conteudo.update', $content->id], 'method' => 'PUT'])`); carrega galeria (`chargeGallery`, `setupGallery`); hash da URL abre a aba correspondente |
| `v6/resources/views/prefecture/contents/secretarias/form.blade.php` | Campos: **Título** (max 120), **Sigla** (`acronym`), **Link Permanente** (`/a-instituicao/secretarias/{slug}`), texto Summernote, **Vídeo YouTube** (`link`, max 200 no HTML), **Destaque** (com `types_sizes`), checkbox **Ativar Galeria** |

Trecho do "Link Permanente" (exibe a URL final e um link "Acessar"):

```blade
<div class="mr-2">{{ url('a-instituicao/secretarias') }}/</div>
```

```blade
<div class="mr-2">
    <a href="{{ url('a-instituicao/secretarias/'.$content->slug) }}" target="_blank">
        Acessar <i class="fa fa-external-link fa-1x"></i>
    </a>
</div>
```

### 1.2 CMS — Departamentos

| Arquivo | Função |
|---|---|
| `v6/resources/views/prefecture/contents/secretarias/categoria/index.blade.php` | Grade `tabela_secretarias_categorias` (colunas: ID, Categoria, Secretaria, Ações) |
| `v6/resources/views/prefecture/contents/secretarias/categoria/create.blade.php` | Formulário (serve para create **e** edit; rota `secretarias-categorias.store` / `.update`) |
| `v6/resources/views/prefecture/contents/secretarias/categoria/form.blade.php` | Campo `name` ("Nome do departamento") + `select` `secretarias_id` |

### 1.3 CMS — Páginas de secretaria

| Arquivo | Função |
|---|---|
| `v6/resources/views/prefecture/contents/secretarias/paginas/index.blade.php` | Grade `tabela_secretarias_paginas` (colunas: ID, Titulo, Categoria, Secretaria, Ações) |
| `v6/resources/views/prefecture/contents/secretarias/paginas/create.blade.php` | Formulário (create/edit) |
| `v6/resources/views/prefecture/contents/secretarias/paginas/form.blade.php` | `title`, `select categoria_id` ("Departamento"), **Imagem Principal** (`components.inputs.image`), `text` (Summernote), bloco de **arquivos** (`components.inputs.archive`) com descrição por arquivo |

### 1.4 CMS — Menu das secretarias

| Arquivo | Função |
|---|---|
| `v6/resources/views/prefecture/contents/secretarias/menu/index.blade.php` | Tela única com 3 caixas: (1) **Departamento** (input `#name` + botão "Adiciona departamento"), (2) **Página do departamento** (`select #categoria_id`, `#title`, `#text`, imagem via `#img-page`, botão "Adiciona Arquivo", botão "Adiciona página"), (3) **Menu de {titulo}** (`ul.list-paginas`) montada por AJAX |

### 1.5 Portal

| Arquivo | Função |
|---|---|
| `v6/resources/views/portal/components/secretarias/show.blade.php` | Página da secretaria: menu lateral em acordeão, agenda de eventos, botões de compartilhamento (AddToAny), destaque, texto, galeria, vídeo e bloco "Notícias de {título}" |
| `v6/resources/views/portal/components/secretarias/paginas/index.blade.php` | Página institucional: menu lateral + título + imagem de destaque + texto + card "Arquivos para Download" |
| `v6/resources/views/portal/components/secretarias/noticias.blade.php` | Componente "Últimas notícias" **paginado** (`{{$news_secretary->links()}}`) — usado pelas telas genéricas "A Instituição" de `modelo1..modelo6` |
| `v6/resources/views/portal/components/secretarias/video-youtube.blade.php` | Helper de vídeo (variante) |

## 2. Layouts do portal

| Item | Valor |
|---|---|
| Layout ativo | `configurations.key = 'layout'` → `modelo1` no banco atual |
| Resolução | `GetInformationsPrefectureTrait::getTemplateActived()` (`v6/app/Http/Traits/GetInformationsPrefectureTrait.php:92-102`) — aborta 404 se `portal.layouts.<layout>.home.index` não existir |
| View da secretaria | **Única**, não varia por modelo: `portal/components/secretarias/show.blade.php` |
| Herança | `@extends("portal.layouts.$model.layout.layout")` — o layout do modelo ativo (`modelo1..modelo6`) |
| Menu do portal | `MenuServiceProvider` injeta `$menuHeader` (`menu_items` de `menus_id = 1`) nos layouts; `modelo1..modelo5` usam `layout/nav.blade.php`, `modelo6` usa `layout/header/nav.blade.php` |

## 3. Resposta factual: como o menu do portal muda por layout e por módulo

O menu de uma secretaria **não é** o menu do site (o `nav.blade.php` do layout). Ele é
um **menu inline**, desenhado dentro da própria view da secretaria.

### 3.1 Por que existe `pub-nav.blade.php` em alguns módulos e não em Secretarias

O componente `pub-nav.blade.php` (navegação lateral por *subcategoria*) existe **apenas**
por área:

| Área | Modelos com `pub-nav` |
|---|---|
| Publicações | `default/pages/elements`, `modelo3`, `modelo4`, `modelo5`, `modelo6` |
| Atas e Pontos | `modelo1`..`modelo6` |
| Comitê de Investimentos | `modelo1`..`modelo6` |
| Requerimentos | `modelo3`, `modelo4` |

**Não existe `pub-nav` para**: `a-instituicao`, `a-cidade`, `secretarias` e `legislacao`.
Consequentemente, os módulos sem `pub-nav` usam menus próprios:

| Módulo | Menu |
|---|---|
| Legislação | `v6/resources/views/portal/components/categories-contents/legislacoes/nav.blade.php` + `recursive-list.blade.php` (ver `../legislacao/`) |
| Secretarias | **Inline** em `v6/resources/views/portal/components/secretarias/show.blade.php` e `v6/resources/views/portal/components/secretarias/paginas/index.blade.php` |
| A Instituição / Órgãos | `v6/resources/views/portal/layouts/modelo1/layout/sidebar/orgaosNews.blade.php` (replicado em `modelo2`..`modelo6`) |
| A Cidade | `v6/resources/views/portal/layouts/modelo1/layout/sidebar/layout.blade.php` (replicado em `modelo2`..`modelo6`) |

### 3.2 Estrutura do menu inline de Secretarias

```blade
@if (isset($menus) && isset($menus[0]))
    <div class="col-md-4 col-sm-12 btn-group-vertical mb-4 nav-pub align-top d-table pr-3">
        <div class="card @if (count($menus) > 14) scrollbar @endif mb-3 mt-1">
            <ul class="list-group list-group list-unstyled categories scrollbar-sm">
                @foreach ($menus->sortBy('order') as $item)
                    <div class="dropdown dropdown-active div_dropdown list-group-flush">
                        <p class="list-group-item pointer dropdown_p ..." data-bs-toggle="collapse" data-bs-target="#{{ $item->id }}">
                            {{ $item->name }}
                        </p>
                        <div class="collapse" id="{{ $item->id }}">
                            @foreach ($item->contentsCategory as $item2)
                                <a href="{{ route('secretarias-pages.index', ['slug' => $contentNew->slug, 'id' => $item2->id]) }}" class="list-group-item list-group-item-action">
                                    <li class="text-md-left text-dark">{{ $item2->title }}</li>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </ul>
        </div>
        <div>
            @if (count($eventsList) > 0)
                <p class="h4 text-uppercase txt-color-2 font-or"> Agenda de eventos </p>
                <i class="border-title d-block bg-color-1 mb-4"></i>
            @endif
        </div>
    </div>
@endif
```

Características:

- Ordenação por `order` **em memória** (`$menus->sortBy('order')`) — o `order` vem do banco,
  mas o `sortBy` é do Laravel (coleção), não do SQL.
- Cada departamento é um acordeão Bootstrap (`data-bs-toggle="collapse"`), identificado
  pelo `id` da linha de `categorias_secretarias`.
- A navegação da **página institucional** marca o item ativo com
  `selected-item bg-color-3 txt-color-dinamic-3` (em `paginas/index.blade.php`).
- Um script inline (idêntico nas duas views) impede cliques múltiplos durante a animação
  de 700 ms do acordeão.
- Quando `count($menus) > 14`, a coluna ganha a classe `scrollbar` (rolagem interna).
- **Se não houver departamentos** (`$menus` vazio), o menu **não é renderizado** e a
  coluna de conteúdo ocupa a largura toda (`col-12`); a agenda de eventos é exibida
  em outra coluna (`count($menus) == 0 && count($eventsList) > 0`).

### 3.3 Menu do CMS (lateral)

Montado por `MenuServiceProvider::boot()` a partir de `menu_orders` (não de `resources`).
A entrada aparece **somente** se:

```php
if (has_access("$menu->slug.index") && isset($menu->modulo->status) && $menu->modulo->status) {
```

`menu_orders` tem 1 linha para o módulo: `id = 13`, `slug = 'secretarias'`, `modulo_id = 18`.
Como `modulos.status` de `secretarias` é **false**, a entrada **não aparece** no menu
lateral do CMS — embora todas as rotas existam e funcionem.

## 4. JavaScript / Ajax

| Arquivo | Endpoints | Comportamento |
|---|---|---|
| `v6/public/assets/js/custom/contents/secretarias/datatables.js` | `GET /cms/datatable/secretarias` | Colunas: `titulo` e ações. Ações: "Acessar secretaria" → `/a-instituicao/secretarias/{slug}` (nova aba); galeria → `editar/secretarias/{id}#galeria`; "Menus das secretarias" → `/cms/conteudo/secretarias/menus/{id}`; editar/excluir |
| `v6/public/assets/js/custom/contents/secretarias/categorias/datatable.js` | `GET /cms/datatable/secretarias_categorias` | Colunas `name`, `nome_secretaria`; botão editar/excluir em `/cms/conteudo/secretarias/secretarias-categorias/{id}` |
| `v6/public/assets/js/custom/contents/secretarias/paginas/datatable.js` | `GET /cms/datatable/secretarias_paginas` | Colunas `title`, `categoria`, `nome_secretaria`; botão editar/excluir |
| `v6/public/assets/js/custom/contents/secretarias/menu/index.js` | `POST /cms/conteudo/secretarias/secretarias-categorias`, `POST /cms/conteudo/secretarias/secretarias-paginas`, `GET /cms/get_categorias/secretarias/{id}` | Cria departamento e página; recarrega a lista do menu; monta a árvore categorias → páginas |
| `v6/public/assets/js/custom/contents/secretarias/menu/sortable.js` | `POST /cms/order_categorias/secretarias` | `Sortable.create(ul, {handle: '.category-secretary', onEnd: ...})` — envia `ids[]` com a nova ordem |
| `v6/public/assets/js/custom/contents/secretarias/paginas/index.js` | `DELETE /cms/secretarias_paginas/arquivo/{id}` | Exclusão da imagem de destaque e dos anexos, com feedback visual (`toastr`) |
| `v6/public/assets/js/custom/utilities/table.js` | — | `runDatatables()`: DataTable **client-side** (o servidor já devolveu tudo), colunas `value` (ID) + as do módulo, ordenação, exportação e busca |
| `v6/public/assets/js/custom/utilities/deleteAll.js` | `POST /cms/secretarias/secretarias-categorias` / `.../secretarias-paginas` | Exclusão em lote (`toDelete[]`) |

Envio da página pelo `menu/index.js`:

```js
const data = new FormData();
data.append('title', title.value);
data.append('categoria_id', categoria_id.value);
data.append('text', text.value);
data.append('archive_highlight', archive_highlight ? archive_highlight : null);

    if (archives) {
        archives.map((value, index) => {
            let descricao = value.parentElement.parentElement.querySelector('#description');
            data.append(`archive[${index}][description]`, descricao.value ? descricao.value : false );
            data.append(`archive[${index}][0]`, value.files.item(0) );
            value.parentElement.parentElement.remove();
        })
    }

    let xhr = myXHR('/cms/conteudo/secretarias/secretarias-paginas', 'POST', data);
```

## 5. Exportações

Não há geração no servidor. O botão **Excel** e o botão **PDF** são plugins do
DataTables (cliente), configurados em `runDatatables()`:

```js
const defaultButtons = [
    {
        extend: 'excel',
        text: '<i class="fa fa-file-excel-o"></i> Excel',
        className: 'btn btn-success btn-sm',
        exportOptions: { columns: ':visible:not(.column-actions)', stripHtml: true },
        title: tituloExportacao
    },
    {
        extend: 'pdf',
        text: '<i class="fa fa-file-pdf-o"></i> PDF',
        className: 'btn btn-danger btn-sm',
        exportOptions: { columns: ':visible:not(.column-actions)', stripHtml: true },
        orientation: 'landscape',
        pageSize: 'A4',
        title: tituloExportacao,
```

O array `defaultButtons` segue com o `customize: function(doc)` do PDF (larguras de
coluna por quantidade, alinhamento e tamanho de fonte conforme o número de colunas) e
com os demais botões de exportação.

O título do arquivo é `` `Prefeitura de ${cidadePrefeitura} - ${data}` ``.
Como a exportação é client-side, **todas** as linhas já foram carregadas da view SQL
pelo PHP (ver `05-REGRAS-E-PORTABILIDADE.md`).

## 6. O que o usuário final vê (portal)

**Página da secretaria** (`/a-instituicao/secretarias/{slug}`), de cima para baixo:

1. Breadcrumb: Home › A Instituição › Secretarias › {título}
   (`v6/routes/breadcrumbs.php:207-212`).
2. Coluna esquerda (`col-md-4`): menu de departamentos + card "Agenda de eventos"
   (até 5 eventos, com destaque e data).
3. Coluna direita (`col-md-8`): título em caixa alta, barra de cor, botões de
   compartilhamento (WhatsApp, Facebook, copiar link, e-mail, imprimir), imagem de
   destaque (tamanho "Personalizado" respeita `width`/`height` do archive), texto HTML,
   galeria (se `galery = 1`), vídeo do YouTube.
4. Bloco "Notícias de {título}": até **12** notícias, ordenadas por `created_at`
   descendente, com destaque, data de publicação, título e nome da categoria.
   Se `getStatusDisplayNews()['displayNews'] != 0`, exibe a imagem
   `getImageNewsDisabled()` em vez da lista.

**Página institucional** (`/a-instituicao/secretarias/paginas/{slug}/{id}`):

1. Breadcrumb da secretaria.
2. Menu lateral (mesmo componente) com o item ativo destacado.
3. Título, imagem de destaque (`url('storage/' . $content->highlight->path)`), texto HTML.
4. Card "Arquivos para Download" — cada arquivo com ícone, nome/descrição e link
   para `url('storage/' . $archive->path')` (só exibe se `file_exist(...)`).

## 7. O que o operador vê (CMS)

| Tela | Elementos |
|---|---|
| Lista de Secretarias | Cabeçalho "Lista de Secretarias", botão "Cadastrar Secretaria", botão de exclusão em lote, tabela com colunas ID/Título/Ações |
| Formulário | Abas, campo Título com asterisco, campo Sigla, "Link Permanente" com pré-visualização da URL e link "Acessar", editor Summernote, campo de vídeo com dica de uso, bloco de destaque (com seletor de tamanho), checkbox de galeria |
| Lista de Departamentos | Botão "Cadastrar Departamentos", botão de exclusão em lote, tabela ID/Categoria/Secretaria/Ações |
| Lista de Páginas | Botão "Cadastrar Páginas das Secretarias", botão de exclusão em lote, tabela ID/Titulo/Categoria/Secretaria/Ações |
| Menu da secretaria | 3 caixas; a caixa "Menu de {titulo}" mostra a árvore e permite arrastar para reordenar |

## 8. Acessibilidade e responsividade (porta)

- Menu lateral: `col-md-4 col-sm-12` (empilha no mobile).
- Coluna de conteúdo: `col-md-8` ou `col-12` conforme a existência do menu.
- Lista de notícias: `col-md-6` por item.
- Telas do CMS usam `table-responsive` (AdminLTE/Bootstrap 3).

## 9. Pontos de UI a corrigir na v7

| Item | Situação atual |
|---|---|
| Selo "ID" da grade | Mostra o `row_number()` da view, não o `contents.id` — confuso para o operador |
| Link "Acessar" do formulário | Aponta para `/a-instituicao/secretarias/{slug}` — **correto** (não depende do nome duplicado) |
| Coluna "Sigla" | Salva em `contents.acronym`, mas **não é exibida** em nenhuma listagem (nem no portal) — dado capturado e nunca usado |
| Galeria da secretaria | Requer `contents.galery = 1`; o botão "Ir para galeria" só aparece na edição |
| Estado vazio das sub-tabelas | `categorias_secretarias` e `paginas_secretarias` estão vazias → o menu lateral do portal nunca aparece para nenhuma secretaria |