# e-Vacina — Views e UX

> Uma única tela no CMS. O módulo **não** tem representação no portal
> público (nenhum consumidor de `evacinas` foi identificado).

---

## 1. Layouts e assets

| Item | Caminho | Papel |
|---|---|---|
| Layout do CMS | `v6/resources/views/admin/layouts/app.blade.php` | Container AdminLTE |
| Menu do AdminLTE | `v6/resources/views/vendor/adminlte/page.blade.php:263-270` | Item "e-Vacina" (com guarda de módulo e permissão) |
| Modal de banner | `v6/resources/views/prefecture/contents/components/banner-modal/index.blade.php` | Reaproveitado do módulo de conteúdos |
| JS de banner | `v6/public/assets/js/custom/utilities/helpers/banner-image.js` | Manipulação da imagem |

---

## 2. Tela única

`v6/resources/views/prefecture/configurations/evacina/edit.blade.php`:

```blade
@extends('admin.layouts.app')

@section('content')
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">e-Vacina</h3>
        </div>
        <div class="row">
            @include('prefecture.configurations.evacina.form')
        </div>
        <div class="box-footer">
            <div class="row">
                <div class="col-sm-6 ...">
                    <button class="btn btn-primary btn-flat" id="btn-submit">
                        {{ trans('adminlte::adminlte.register') }}
                    </button>
                </div>
                <div class="col-sm-6 ...">
                    <a class="align-middle" href="{{ URL::previous() }}">Voltar</a>
                </div>
            </div>
        </div>
        </form>
    </div>
@endsection
```

> O `</form>` aparece **depois** do `box-footer` — fora do `<form>` real
> (que está dentro do `form.blade.php`). HTML inválido, mas inofensivo.

### 2.1 O formulário

`v6/resources/views/prefecture/configurations/evacina/form.blade.php`:

| Campo | Componente | Observação |
|---|---|---|
| `status_evacina` | `checkbox` (Bootstrap `form-check-input`) | rotulado "Ativar/Desativar" |
| `title` | `input type="hidden"` | valor fixo `e-Vacina` (herança de outro módulo) |
| `imagem_evacina` | `input type="file"` (escondido) | preview com `class="e-vacina thumb-image"` |
| `populacao` | `input type="number" min="1"` | "Número Populacional" |
| `url` | `input type="text"` | com observação: *"A url deve corresponder a uma tabela do google drive, com acesso liberado."* |

### 2.2 Destino do formulário

```blade
<form action="@if (isset($data)) {{ url('cms/e-vacina/1') }} @else {{ url('cms/e-vacina') }} @endif"
    class="form-list" method="POST" enctype='multipart/form-data'>

    @isset($data) {{ method_field('PUT') }} @endisset
```

> **O id é fixo em `1`** quando há registro. Como o `update` do
> controller ignora o id da URL e atualiza o registro **mais recente**,
> o formulário funciona — por coincidência. Se o registro mais recente
> tiver id diferente de 1, a URL enviada seria `cms/e-vacina/1` e o
> controller ignoraria o id de qualquer forma.

### 2.3 Imagem

- Quando há registro: `<img src="{{ url('storage/'.$data->path_imagem) }}">`.
- Sem registro: a imagem de exemplo
  `storage/img/exemplos/banner-evacina-450x160.png`.
- O input de arquivo é **escondido** (`class="form-control-file hidden"`) e
  acionado pelo botão "Selecionar imagem", que faz `$('#file').click()`.
- A pré-visualização é feita com `FileReader` em JavaScript inline
  (imagem base64 no `src`).
- O botão "Criar Banner Personalizado" abre o modal de banner do
  portal (`prefecture.contents.components.banner-modal.index`) — o
  `banner-image.js` monta o banner no cliente.

### 2.4 Botão de salvar

O botão `#btn-submit` **não** tem `type="submit"` nem `onclick` de
submit explícito. Como está **fora** do `<form>` (o `</form>` está
depois do `box-footer`), o clique **não submete** o formulário.

> Na prática, o botão "Registrar" da tela de e-Vacina **não funciona**
> sem uma ação de submit adicional. Isso é um bug de UI relevante.

---

## 3. JavaScript / Ajax

- **Sem AJAX** no fluxo principal (é um POST de formulário).
- JavaScript **inline** no `form.blade.php`:
  - `selectFile()` -> `$('#file').click()`;
  - pré-visualização com `FileReader`;
  - `#file` aceita apenas `image/*`.
- `assets/js/custom/utilities/helpers/banner-image.js` — usado pelo
  botão "Criar Banner Personalizado".
- **Sem polling**.

---

## 4. Exportações

**Nenhuma.**

---

## 5. O que o operador vê

1. Engrenagem do CMS -> **e-Vacina** (só aparece se o módulo estiver
   **ligado** em `/cms/modulos` **e** o perfil tiver `e-vacina.index`).
2. Uma tela com: checkbox "Ativar/Desativar", imagem do banner com
   botão de troca, campo "População" e campo "URL" com a dica sobre a
   planilha do Google.
3. Botão "Registrar" (com a falha de submit descrita acima) e "Voltar".

## 6. O que o cidadão vê

**Nada.** Não há rota nem view do portal que consuma `evacinas` na v6.

---

## 7. Itens de UX a preservar na v7 (se o módulo for mantido)

- Tela única, sem listagem.
- Pré-visualização da imagem antes do envio.
- A dica explícita sobre o formato da URL do Google Sheets.
- O botão "Criar Banner Personalizado" reaproveitando o gerador de
  banner do portal.
- A semântica "Ativar/Desativar" da checkbox.