# Redes Sociais — Views e UX

## 1. CMS — telas

| Arquivo | Função |
|---|---|
| `v6/resources/views/prefecture/contents/rede-social/index.blade.php` | Listagem (DataTable) + reordenação drag-and-drop |
| `v6/resources/views/prefecture/contents/rede-social/create.blade.php` | Formulário de criação |
| `v6/resources/views/prefecture/contents/rede-social/edit.blade.php` | Formulário de edição |
| `v6/resources/views/prefecture/contents/rede-social/form.blade.php` | Campos: status, título, ícone, posição, URL, local, nova guia |

### 1.1 Listagem

```blade
<div class="float-right">
    <a href="/cms/configuracoes/editar/configuracoes">
        <button class="btn btn-sm btn-primary font-weight-bold">
            <i class="fa  fa-sitemap pr-2"></i> Informações da Instituição
        </button>
    </a>
    @if (has_access(['rede-social.create']))
        <a href="cadastrar/rede-social" class="btn btn-success font-weight-bold btn-sm" role="button"><i
                class="fa fa-plus"></i> Cadastrar Rede Social</a>
    @endif
</div>
```

- Tabela `#tabela_redes_sociais`, colunas: ID (5%), Título, Status (centralizado), Ações (20%).
- O `tbody` tem a classe `grabbable` e é inicializado como sortable:

```js
$("table tbody").sortable({
    cursor: 'grabbing',
    stop: function(event, ui) {
        var sortable_data = [];
        $.each($(".item-list"), function() {
            sortable_data.push(this.id);
        });
        $.ajax({
    cache: false,
    data: { _token: token, sortable_data: sortable_data },
    type: 'POST',
    url: "{{ route('ajust.banners') }}"
});
    }
});
```

> **Defeito:** as linhas do DataTable de redes sociais **não** recebem a classe `item-list`
> (ao contrário de banners, acesso rápido e transparência fiscal, que usam
> `createDragglabeButton(data.edit, data.id, 'item-list')`). Logo `sortable_data` é enviado vazio e
> `ContentController@ajustOrder` não reordena nada.

### 1.2 Formulário

Campos (todos em `v6/resources/views/prefecture/contents/rede-social/form.blade.php`):

| Campo | Tipo | Observações |
|---|---|---|
| `status` | checkbox | “Ativar/Desativar”; default `true` |
| `title` | input, máx. 120 | nome da rede |
| `icon` | input + iconpicker | classe CSS do ícone; carrega `assets/plugins/fontawesome-iconpicker/dist/js/fontawesome-iconpicker.js` |
| `order` | number | `max = count($rede) + 1`, `min = 1` |
| `link` | input, máx. 2999 | URL da rede (obrigatória) |
| `position_id` | select | opções vindas de `positions` (Cabeçalho / Rodapé / Ambos) |
| `isBlank` | checkbox | “Abrir em nova guia” |

A view carrega também o Font Awesome 5.15.4 por CDN:

```blade
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
```

Observação: o componente `components/inputs/icon-picker.blade.php` (que lista brands do Font Awesome
por categoria, incluindo a categoria `brand`, com `facebook`, `instagram`, `youtube` e outras) **não** é usado neste
formulário; o módulo usa o plugin jQuery `fontawesome-iconpicker`, que oferece a biblioteca
completa de ícones.

### 1.3 DataTable do CMS

`v6/public/assets/js/custom/config/redes-sociais/datatable.js` (caminho **config**, não `contents`):

```js
let collums = [
    { data: 'titulo', render: function (data) { return data; } },
    { data: 'status_name', render: function (data) { return data; } },
    {
        data: null,
        orderable: false,
        render: function (data) {
            return `<div class='flex justify-center'>`
                + createActiveButton(data.status, data.id, 'item', data.active, data.inactivate)
                + createBTN(data.id, `editar/rede-social/${data.id}`, data.edit, data.delete)
                + `</div>`;
        }
    }
];

runDatatables('redes_sociais', collums);
```

- `runDatatables('redes_sociais', collums)` -> `GET /cms/datatable/redes_sociais`.
- `createActiveButton` gera um botão que faz `POST /cms/set-status` com `{ contents_id: id }`
  (`v6/public/assets/js/custom/utilities/table.js:511-528`).
- `createBTN` navega por URL relativa `editar/rede-social/{id}`.

## 2. Portal — onde as redes são renderizadas

Nenhum layout usa uma partial única: são **8 arquivos** com a mesma lógica copiada.

| Arquivo | Onde aparece | Filtro de posição |
|---|---|---|
| `v6/resources/views/portal/layouts/modelo1/layout/nav.blade.php` | cabeçalho | `position_id != 2` |
| `v6/resources/views/portal/layouts/modelo1/layout/footer-contact.blade.php` | rodapé | `position_id != 1` |
| `v6/resources/views/portal/layouts/modelo2/layout/header.blade.php` | cabeçalho | `position_id != 2` |
| `v6/resources/views/portal/layouts/modelo2/layout/footer-contact.blade.php` | rodapé | `position_id != 1` |
| `v6/resources/views/portal/layouts/modelo3/layout/footer-contact.blade.php` | rodapé | `position_id != 1` |
| `v6/resources/views/portal/layouts/modelo4/layout/header.blade.php` | cabeçalho | `position_id != 2` |
| `v6/resources/views/portal/layouts/modelo4/layout/footer-contact.blade.php` | rodapé | `position_id != 1` |
| `v6/resources/views/portal/layouts/modelo5/layout/header/acessibilidade/menu.blade.php` | cabeçalho | `position_id != 2` |
| `v6/resources/views/portal/layouts/modelo5/layout/footer/social.blade.php` | rodapé (bloco configurável) | `position_id != 1` |
| `v6/resources/views/portal/layouts/modelo6/layout/header/accessibility.blade.php` | cabeçalho | `position_id != 2` |
| `v6/resources/views/portal/layouts/modelo6/layout/footer/footer-social.blade.php` | rodapé | `position_id != 1` |
| `v6/resources/views/portal/layouts/default/footer-contact.blade.php` | rodapé (layout default) | consulta própria |

Além disso:

- `v6/resources/views/components/footer.blade.php` (footer genérico) usa a coleção
  `$socialNetworkFooter` vinda do view composer.
- `v6/app/Providers/FooterServiceProvider.php:84-97` registra o composer:

```php
$redes = Content::with('linksUnique')
    ->whereHas('categoryContents', function ($query) {
        $query->where('slug', 'rede-social');
    })->where('status', true)->get();

view()->composer([
    'portal.layouts.modelo1.layout.*', 'portal.layouts.modelo2.layout.*',
    'portal.layouts.modelo3.layout.*', 'portal.layouts.modelo4.layout.*',
    'portal.layouts.modelo5.layout.*', 'components.footer'
], function ($view) use ($redes) {
    $view->with('socialNetworkFooter', $redes);
});
```

- O rodapé do `modelo5` é montado dinamicamente: `v6/resources/views/portal/layouts/modelo5/layout/footer/footer.blade.php`
  lê a tabela `layouts` (`section = 'footer'`) e inclui cada partial configurado. É assim que
  `modelo5/layout/footer/social.blade.php` entra no rodapé.
- O `modelo6` **não** está no composer do `FooterServiceProvider`: ele faz a query direto na
  partial `footer-social.blade.php`.

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

**Operador:** tabela com ID sequencial, título, status textual (“Ativado”/“Desativado”) e botões de
status/editar/excluir; formulário com 7 campos; o ícone é escolhido por um popup de ícones.

**Cidadão:** ícones das redes ativas no cabeçalho e/ou no rodapé. No rodapé do `modelo5` e do
`components/footer.blade.php` aparece também o nome da rede ao lado do ícone; no cabeçalho, apenas
o ícone (o nome fica em `span.d-none`, escondido).

## 4. Exportações

O `runDatatables` registra botões de **Excel** e **PDF** para todas as tabelas do CMS, inclusive a
de redes sociais (`v6/public/assets/js/custom/utilities/table.js:29-48`).

## 5. Assets

| Arquivo | Papel |
|---|---|
| `v6/public/assets/js/custom/config/redes-sociais/datatable.js` | colunas do DataTable do CMS |
| `v6/public/assets/js/custom/utilities/table.js` | `runDatatables`, `createBTN`, `createActiveButton` |
| `v6/public/assets/plugins/fontawesome-iconpicker/dist/js/fontawesome-iconpicker.js` | popup de seleção de ícone |
| Font Awesome 5.15.4 (CDN, declarado no formulário) | renderização das classes de ícone |