ReasonsPreview

src/components/reasons/ReasonsPreview.vue

Display Medium 5 usos

Preview em tempo real dos campos de um formulário de motivo de encerramento. Renderiza dinamicamente os campos configurados em uma visualização "Exemplo de Visualização". Suporta 8 tipos de campo (text, int, currency, decimal, select, radio, checkbox, boolean). O container tem borda pontilhada intencional — indica visualmente que é um preview. Atualização automática a cada 1500ms via setInterval.

Em Sidebar Sticky (com observação)

Padrão em formulários de criação/edição de motivos. Posicionado numa coluna lateral sticky — o preview acompanha o scroll. :reason_options.sync sincroniza mudanças de volta ao pai.

Formulário (scroll)

position: sticky; top: 0

Exemplo de Visualização

Observações

Motivo

Categoria

<vs-col vs-lg="4" vs-sm="4" vs-xs="0" style="display: block;">
  <div style="position: sticky; top: 0; padding-top: 15px">
    <reasons-preview
      :use_observation="useObservation"
      :reason_options.sync="reasonOptionsAttributes"
    ></reasons-preview>
  </div>
</vs-col>

Em Sidebar Sticky (sem .sync)

Uso em knowledge — sem .sync modifier em reason_options. Quando o pai não precisa receber mudanças do preview de volta.

Exemplo de Visualização

Descrição

Valor

Tipo

Opção A

Opção B

<vs-col vs-lg="4" vs-sm="4" vs-xs="0" style="display: block;">
  <div style="position: sticky; top: 0; padding-top: 15px">
    <reasons-preview
      :use_observation="useObservation"
      :reason_options="knowledgeOptionsAttributes"
    ></reasons-preview>
  </div>
</vs-col>

Dentro de Popup

Preview dentro de vs-popup. max-height + overflow-y:auto evita que o preview transborde. Botão "Visualizar" na lista abre o popup.

Visualização Métrica Inteligente

Exemplo de Visualização

Motivo Principal

Satisfação

Satisfeito

Insatisfeito

Resolução confirmada

Não

<vs-popup
  :active.sync="previewPopup"
  @close="previewPopup = false"
  title="Visualização Métrica Inteligente"
>
  <div style="position: sticky; top: 0; padding-top: 15px; max-height: 80vh; overflow-y: auto;">
    <reasons-preview
      :use_observation="useObservation"
      :reason_options.sync="reasonOptionsAttributes"
    ></reasons-preview>
  </div>
</vs-popup>

API

<!-- reason_options: array de opções com id, reason_option_kind.tag e reason_option_items_attributes. -->
<!-- use_observation: boolean — exibe vs-textarea 'Observações' acima dos campos. -->
<!-- .sync em reason_options: permite comunicação bidirecional pai ↔ filho. -->
<reasons-preview
  :use_observation="useObservation"
  :reason_options.sync="reasonOptionsAttributes"
></reasons-preview>

Tipos de campo suportados

Tag	Componente	Descrição
`text`	TextField	Input de texto livre
`int`	IntField	Input numérico inteiro (default: `'0'`)
`currency`	CurrencyField	Input monetário (default: `'0'`)
`decimal`	DecimalField	Input decimal (default: `'0'`)
`select`	SelectField	Dropdown de seleção
`radio`	RadioField	Opções radio (default: `'false'`)
`checkbox`	CheckboxField	Caixas de seleção (default: `'false'`)
`boolean`	BooleanField	Toggle true/false (default: `'false'`)

Props

Nome	Tipo	Default	Obrig.	Descrição
`reason_options`	Array	—	Sim	Array de opções de motivo. Cada opção tem: `id`, `reason_option_kind.tag` (tipo do campo), `reason_option_items_attributes` (itens para select/radio/checkbox). Suporta `.sync` para comunicação bidirecional.
`use_observation`	Boolean	`false`	Não	Quando `true`, exibe `vs-textarea` "Observações" acima dos campos dinâmicos.

Dependências

vs-textarea (Vuesax) — campo de observações
views/reason-response-fields/ — Text, Int, Currency, Decimal, Select, Radio, Checkbox, Boolean

Onde é usado

src/views/reasons/New.vue
src/views/reasons/Edit.vue
src/views/knowledge/New.vue
src/views/knowledge/Edit.vue

Detalhe técnico: O componente usa setInterval(resetOptions, 1500) em mounted() para garantir sincronização mesmo sem watch trigger. Limpo em beforeDestroy(). A atualização de respostas usa splice imutável para Vue 2 reatividade: responses[fieldIndex][itemIndex] = {...}.