# Telefones Úteis — Views e UX

## 1. CMS — telas

| Arquivo | Função |
|---|---|
| `v6/resources/views/prefecture/contents/telefones-uteis/index.blade.php` | Listagem (DataTable) com cabeçalho, botão de cadastro e exclusão em lote |
| `v6/resources/views/prefecture/contents/telefones-uteis/create.blade.php` | Formulário de criação (inclui `form.blade.php`) |
| `v6/resources/views/prefecture/contents/telefones-uteis/edit.blade.php` | Formulário de edição (inclui `form.blade.php`) |
| `v6/resources/views/prefecture/contents/telefones-uteis/form.blade.php` | Campos `title` e `text` (telefone) + `category_contents_id` oculto |

### 1.1 Listagem (`index.blade.php`)

Estrutura relevante:

```blade
<div class="box-header with-border">
    <h3 class="box-title align-middle">Telefones Úteis</h3>
    <div class="float-right">
        @if (has_access(['telefones-uteis.create']))
            <a href="cadastrar/telefones-uteis" class="btn btn-success font-weight-bold btn-sm"
                role="button"><i class="fa fa-plus"></i> Cadastrar Telefone</a>
        @endif
    </div>
    @if (has_access(['telefones-uteis.delete']))
        <div class="float-right pr-3">
            @component('prefecture.components.deleteByLoteSubmitButton', ['route' => 'ajax.generic.content.deleteAll'])
            @endcomponent
        </div>
    @endif
</div>
```

- Tabela `#tabela_telefones_uteis`, colunas: checkbox de lote (se `telefones-uteis.delete`), `ID`, `Título` (65% de largura), `Ações`.
- O corpo (`tbody`) é preenchido pelo DataTable; não há renderização server-side.
- Scripts carregados: `v6/public/assets/js/custom/utilities/deleteAll.js` e `v6/public/assets/js/custom/contents/telefones-uteis/datatable.js`.

### 1.2 Formulário (`form.blade.php`)

```blade
<input type="hidden" name="category_contents_id" value="{{ $categoryContent->id }}">
@include('components.inputs.input', [
    'size' => 6,
    'id' => 'title',
    'titulo' => 'Título',
    'maxlen' => '120',
    'placeholder' => 'Título',
    'mandatory' => true,
    'data' => isset($content) ? $content->title : old('title'),
])

@include('components.inputs.input', [
    'size' => 6,
    'id' => 'text',
    'titulo' => 'Telefone',
    'icon' => 'fa fa-phone',
    'mask' => 'advanced-phone',
    'placeholder' => '(99) 99999-9999',
    'mandatory' => true,
    'data' => isset($content) ? $content->text : old('text'),
])
```

Pontos de UX:

- O campo `text` recebe a classe CSS `advanced-phone`, que aplica a máscara no cliente.
- O ícone `fa fa-phone` é apenas decorativo (input-group addon), gerado por `v6/resources/views/components/inputs/input.blade.php:28-33`.
- `maxlen` do título é 120, coerente com a regra `max:120` do servidor.
- Não há campo de status, de ordem, de arquivo ou de descrição: o cadastro é mínimo.
- A criação e a edição usam `Form::open`/`Form::model` (LaravelCollective) com `files => true` (o `files` é desnecessário neste formulário).

### 1.3 JavaScript do DataTable

`v6/public/assets/js/custom/contents/telefones-uteis/datatable.js`:

```js
let collums = [
    {
        data: 'titulo',
        render: function (data) {
            return `<div class='vertical-middle p-10-0' >${data}</div>`;
        }
    },
    {
        data: null,
        orderable: false,
        render: function (data) {
            return `<div class='flex justify-center'>`
                + createBTN(data.id, `editar/telefones-uteis/${data.id}`, data.edit, data.delete)
                + `</div>`;
        }
    }
];

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

| Parâmetro | Valor | Efeito |
|---|---|---|
| `url` | `telefones_uteis` | monta `GET /cms/datatable/telefones_uteis` (`v6/public/assets/js/custom/utilities/table.js:183`) |
| `ordenavel` | `true` | habilita ordenação |
| `type_order` | `ASC` | ordenação inicial |
| `deleteAll` | `true` | insere a coluna de seleção múltipla (`createDeleteAllButton`) |
| coluna `value` | injetada por `runDatatables` | exibe o `row_number()` da view SQL como “ID” |

O botão de ação chama `createBTN(data.id, 'editar/telefones-uteis/{id}', data.edit, data.delete)`, ou
seja, navega por URL **relativa** a partir de `/cms/conteudos/telefones-uteis`, resolvendo para
`/cms/conteudos/editar/telefones-uteis/{id}`.

O helper `runDatatables` também registra botões de exportação para **Excel** e **PDF**
(`v6/public/assets/js/custom/utilities/table.js:29-48`), com o título
`Prefeitura de <cidade> - <data>`.

## 2. Portal — telas

| Arquivo | Layout |
|---|---|
| `v6/resources/views/portal/layouts/default/pages/contents/telefones-uteis/index.blade.php` | `default` |
| `v6/resources/views/portal/layouts/modelo1/informacoes-instituicao/telefones-uteis/index.blade.php` | `modelo1` |
| `v6/resources/views/portal/layouts/modelo2/informacoes-instituicao/telefones-uteis/index.blade.php` | `modelo2` |
| `v6/resources/views/portal/layouts/modelo3/informacoes-instituicao/telefones-uteis/index.blade.php` | `modelo3` |
| `v6/resources/views/portal/layouts/modelo4/informacoes-instituicao/telefones-uteis/index.blade.php` | `modelo4` |
| `v6/resources/views/portal/layouts/modelo5/informacoes-instituicao/telefones-uteis/index.blade.php` | `modelo5` |
| `v6/resources/views/portal/layouts/modelo6/informacoes-instituicao/telefones-uteis/index.blade.php` | `modelo6` |
| `v6/resources/views/portal/layouts/newsbit/informacoes-instituicao/telefones-uteis/index.blade.php` | `newsbit` |

> Atenção: a pasta `default` usa o caminho `pages/contents/telefones-uteis`, enquanto os demais
> layouts usam `informacoes-instituicao/telefones-uteis`. Como o controller monta o caminho com
> `'informacoes-instituicao.telefones-uteis.index'`, **o layout `default` não possui a view nesse
> caminho** e a rota quebra com exceção de view não encontrada quando `configurations.key = 'layout'` está
> como `default`. A pasta `pages/contents/telefones-uteis` do layout default é código órfão.

### 2.1 Estrutura da página (exemplo `modelo5`)

```blade
<ul class="list-unstyled text-secondary" id="ulItens" >
    @foreach($contents as $content)
        <li>
            <h5>{{$content->title}}</h5>
            <p>
                {{$content->text}}
            </p>
            <hr>
        </li>
    @endforeach
</ul>
```

- O cabeçalho é um card com ícone `fas fa-phone fa-4x` e o título “Telefones / Úteis”.
- Cada registro é um `<li>` com título (`h5`), número (`p`) e separador (`hr`).
- O breadcrumb é resolvido por `Breadcrumbs::view('portal.layouts.modelo5.layout.breadcrumb', 'telefones-uteis')`; no layout `default` é `Breadcrumbs::render('category-content', $category)` — variável `$category` que **não é enviada** pelo controller (Undefined variable).

### 2.2 Busca no cliente

```js
$(function(){
    $("#txtBusca").keyup(function(){
        var texto = $(this).val().toUpperCase();

        $("#ulItens li").css("display", "block");
        $("#ulItens li").each(function(){
            if($(this).text().toUpperCase().indexOf(texto) < 0)
                $(this).css("display", "none");
        });
    });
});
```

- Filtra os itens já renderizados; não há requisição ao servidor.
- A busca é **case-insensitive** nos layouts `modelo1..6`/`newsbit` (usa `toUpperCase`), mas **case-sensitive** no layout `default` (usa `indexOf` sem normalizar) — divergência real de comportamento entre layouts.
- Não há índice/âncora por letra nem paginação.

## 3. O que o usuário vê

**Cidadão:** página com card de cabeçalho, campo de busca e a lista de telefones (título + número). Não há destaque, ordenação, ícones por órgão, link clicável (`tel:`) ou download.

**Operador:** tabela com ID sequencial (da view SQL, não o `contents.id` real exibido no cabeçalho como “ID”), título e ações; formulários com apenas dois campos.

## 4. Exportações

- CMS: Excel e PDF via DataTables buttons (`yajra/laravel-datatables` + `datatables-buttons`), titulados `Prefeitura de <cidade> - <data>`.
- Portal: nenhuma exportação.

## 5. Assets envolvidos

| Arquivo | Papel |
|---|---|
| `v6/public/assets/js/custom/contents/telefones-uteis/datatable.js` | colunas e inicialização do DataTable do CMS |
| `v6/public/assets/js/custom/utilities/table.js` | `runDatatables`, `createBTN`, `createDeleteAllButton` |
| `v6/public/assets/js/custom/utilities/deleteAll.js` | submissão da exclusão em lote |
| `v6/public/assets/js/custom/utilities/functions.js` | `myFetch`, `create_element` (usados por outros módulos) |