documents/generate: FloatLabel + map de origem nos inputs
Dois problemas reportados no dialog "Gerar documento":
1. Inputs usavam <label> + <InputText> simples, fora do padrao
FloatLabel adotado no resto do app.
2. Quando o auto-preenchimento vinha vazio o user nao tinha onde
ir cadastrar o dado.
Mudancas:
- TEMPLATE_VARIABLES ganha campo `source` em cada entrada com a
descricao de onde o dado eh cadastrado (ex: "Perfil -> Registro
Profissional"). Map canonico no DocumentTemplates.service.js.
- DocumentGenerateDialog refatorado:
* FloatLabel variant="on" em todos os inputs
* Banner no topo com contagem "X de Y preenchidos" (verde se 100%,
amber se faltam dados)
* Hint (`pi pi-link` + texto source) embaixo de cada campo vazio
apontando onde cadastrar
* Erro de carregamento renderizado dentro do step edit
* Input ganha `invalid` quando vazio (borda destaque)
- useDocumentGenerate.loadVariables:
* console.error em caso de excecao (era engolido em silencio)
* mensagem amigavel quando loadAllVariables retorna tudo vazio
(caso comum quando paciente/perfil/clinica estao incompletos)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -79,11 +79,19 @@ const editableVars = computed(() => {
|
||||
key,
|
||||
label: meta?.label || key,
|
||||
grupo: meta?.grupo || 'Outros',
|
||||
source: meta?.source || '',
|
||||
value: variables.value[key] || ''
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// Estatística pro topo: quantos campos vieram do auto-fill vs vazios
|
||||
const varStats = computed(() => {
|
||||
const total = editableVars.value.length
|
||||
const filled = editableVars.value.filter(v => String(variables.value[v.key] || '').trim() !== '').length
|
||||
return { total, filled, empty: total - filled }
|
||||
})
|
||||
|
||||
const varGroups = computed(() => {
|
||||
const groups = {}
|
||||
for (const v of editableVars.value) {
|
||||
@@ -192,17 +200,54 @@ function close() {
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Editar variaveis -->
|
||||
<div v-else-if="step === 'edit'" class="flex flex-col gap-4">
|
||||
<div v-else-if="step === 'edit'" class="flex flex-col gap-5">
|
||||
<!-- Resumo do preenchimento automático -->
|
||||
<div
|
||||
v-if="varStats.total"
|
||||
class="flex items-center gap-2 text-xs px-3 py-2 rounded-lg"
|
||||
:class="varStats.empty === 0
|
||||
? 'bg-green-500/10 text-green-700 dark:text-green-400'
|
||||
: 'bg-amber-500/10 text-amber-700 dark:text-amber-400'"
|
||||
>
|
||||
<i :class="varStats.empty === 0 ? 'pi pi-check-circle' : 'pi pi-info-circle'" />
|
||||
<span v-if="varStats.empty === 0">
|
||||
Todos os {{ varStats.total }} campos foram preenchidos automaticamente.
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ varStats.filled }} de {{ varStats.total }} preenchidos. Os campos vazios mostram onde cadastrar o dado.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Erro de carregamento de variáveis -->
|
||||
<div
|
||||
v-if="genError"
|
||||
class="flex items-center gap-2 text-xs px-3 py-2 rounded-lg bg-red-500/10 text-red-600"
|
||||
>
|
||||
<i class="pi pi-exclamation-circle" />
|
||||
<span>{{ genError }}</span>
|
||||
</div>
|
||||
|
||||
<div v-for="(vars, grupo) in varGroups" :key="grupo">
|
||||
<div class="text-xs font-semibold uppercase tracking-wider text-[var(--text-color-secondary)] mb-2">{{ grupo }}</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div class="text-xs font-semibold uppercase tracking-wider text-[var(--text-color-secondary)] mb-3">{{ grupo }}</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div v-for="v in vars" :key="v.key" class="flex flex-col gap-1">
|
||||
<label class="text-xs text-[var(--text-color-secondary)]">{{ v.label }}</label>
|
||||
<InputText
|
||||
:modelValue="variables[v.key] || ''"
|
||||
@update:modelValue="onVarChange(v.key, $event)"
|
||||
class="w-full"
|
||||
/>
|
||||
<FloatLabel variant="on">
|
||||
<InputText
|
||||
:id="`docgen-var-${v.key}`"
|
||||
:modelValue="variables[v.key] || ''"
|
||||
@update:modelValue="onVarChange(v.key, $event)"
|
||||
class="w-full"
|
||||
:invalid="!String(variables[v.key] || '').trim()"
|
||||
/>
|
||||
<label :for="`docgen-var-${v.key}`">{{ v.label }}</label>
|
||||
</FloatLabel>
|
||||
<small
|
||||
v-if="!String(variables[v.key] || '').trim() && v.source"
|
||||
class="text-[0.65rem] text-[var(--text-color-secondary)] flex items-center gap-1 ml-1"
|
||||
>
|
||||
<i class="pi pi-link text-[0.55rem]" />
|
||||
{{ v.source }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -47,8 +47,15 @@ export function useDocumentGenerate() {
|
||||
error.value = null;
|
||||
try {
|
||||
variables.value = await loadAllVariables(patientId, agendaEventoId);
|
||||
// Hint útil pra diagnostico: se vier objeto mas todos campos vazios,
|
||||
// sinaliza que perfil/clínica/paciente provavelmente nao tem dados.
|
||||
const filled = Object.values(variables.value).filter(v => String(v ?? '').trim() !== '').length;
|
||||
if (filled === 0) {
|
||||
error.value = 'Nenhum dado foi encontrado pra auto-preencher. Verifique o cadastro do paciente, perfil e clínica.';
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = e?.message || 'Erro ao carregar dados do paciente.';
|
||||
console.error('[useDocumentGenerate.loadVariables] falha:', e);
|
||||
error.value = e?.message || 'Erro ao carregar dados pra preenchimento.';
|
||||
variables.value = {};
|
||||
} finally {
|
||||
loading.value = false;
|
||||
|
||||
Reference in New Issue
Block a user