Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

melissa/templates: layout 2-col + preview antes de duplicar

Browse Source 
Refatora MelissaDocumentosTemplates seguindo padrao do
MelissaAgendaConfig (2-col com sidebar). Dois ajustes pedidos:

1. Layout 2-col (mdt-cols grid 360px + 1fr):
   - COL 1 (sidebar): "Templates do sistema" — lista vertical
     compacta com nome/tipo/descricao. Click abre preview.
   - COL 2 (main): "Seus documentos" + subtitulo + grid de cards
     dos templates do tenant.
   - Empty states distintos por coluna.
   - Mobile (<900px): empilha 1-col.

2. Preview antes de duplicar:
   - View 'preview' nova (alem de list/create/edit).
   - Click num template do sistema -> view='preview' (substitui
     "Seus documentos" no main, sidebar permanece pra navegar).
   - Header da main muda: nome do template + tipo/desc + 2 botoes
     (Voltar / Duplicar).
   - Iframe sandbox=allow-same-origin renderiza HTML completo
     (cabecalho+corpo+rodape com CSS basico A4-like).
   - Footer com lista de variaveis {{...}} do template (5 +N).
   - Item ativo na sidebar destaca borda primary + opacity 1 no
     icone de visualizar.
   - Pos-duplicar: volta pra view='list' pra mostrar o novo
     template no main.

UX result: user le antes de copiar (evita lixo em "Seus documentos"
de copias que nao queria).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-21 16:42:05 -03:00
parent 75e67eae5d
commit 0fafc28581
1 changed files with 441 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaDocumentosTemplates.vue
+441 -48
View File
@@ -9,7 +9,7 @@
* Lógica idêntica à DocumentTemplatesPage (composable
* useDocumentTemplates + DocumentTemplateEditor reusado).
*/
import { ref, onMounted } from 'vue';
import { ref, computed, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
@@ -29,11 +29,15 @@ const {
fetchTemplates, create, update, remove, duplicate
} = useDocumentTemplates();
// ── Views ───────────────────────────────────────────────
// ── Views: list | create | edit | preview ───────────────
const view = ref('list');
const editingTemplate = ref({});
const editingId = ref(null);
// Preview de template global (somente leitura) — abre antes de duplicar
// para o usuário ler o conteúdo. Inclui botão "Duplicar" no header.
const previewTemplate = ref(null);
// ── Acoes ───────────────────────────────────────────────
function openCreate() {
editingId.value = null;
@@ -56,6 +60,56 @@ function openEdit(tpl) {
view.value = 'edit';
}
// Preview de template do sistema — leitura + botão Duplicar.
// Clique na sidebar de templates do sistema cai aqui em vez de
// duplicar direto.
function openPreview(tpl) {
previewTemplate.value = tpl;
view.value = 'preview';
}
// Monta HTML completo do template (cabeçalho + corpo + rodapé) com
// estilos básicos pra preview legível dentro do iframe.
const previewHtml = computed(() => {
const tpl = previewTemplate.value;
if (!tpl) return '';
const cabecalho = tpl.cabecalho_html || '';
const corpo = tpl.corpo_html || '';
const rodape = tpl.rodape_html || '';
return `<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<style>
@page { size: A4; margin: 20mm 15mm 25mm 15mm; }
body {
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 12pt;
line-height: 1.6;
color: #1a1a1a;
background: #ffffff;
padding: 32px;
margin: 0;
}
h2 { font-size: 16pt; margin-bottom: 16px; }
h3 { font-size: 13pt; margin-top: 20px; margin-bottom: 8px; }
p { margin: 8px 0; }
table { border-collapse: collapse; width: 100%; }
td { padding: 4px 8px; }
hr { border: none; border-top: 1px solid #333; }
ul, ol { margin: 8px 0; padding-left: 24px; }
.doc-header { text-align: center; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid #ccc; }
.doc-footer { margin-top: 40px; padding-top: 12px; border-top: 1px solid #ccc; font-size: 10pt; color: #666; text-align: center; }
</style>
</head>
<body>
${cabecalho ? `<div class="doc-header">${cabecalho}</div>` : ''}
<div class="doc-content">${corpo}</div>
${rodape ? `<div class="doc-footer">${rodape}</div>` : ''}
</body>
</html>`;
});
async function onSave(payload) {
try {
if (view.value === 'create') {
@@ -82,7 +136,12 @@ function onDuplicate(tpl) {
accept: async () => {
try {
await duplicate(tpl.id);
toast.add({ severity: 'success', summary: 'Duplicado', detail: `"${tpl.nome_template}" copiado para Meus Templates.`, life: 3000 });
toast.add({ severity: 'success', summary: 'Duplicado', detail: `"${tpl.nome_template}" copiado para Seus documentos.`, life: 3000 });
// Se veio do preview, volta pra list pra mostrar o novo template no main
if (view.value === 'preview') {
view.value = 'list';
previewTemplate.value = null;
}
} catch (e) {
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
}
@@ -152,7 +211,8 @@ onMounted(() => {
<span>
<template v-if="view === 'list'">Templates de documentos</template>
<template v-else-if="view === 'create'">Novo template</template>
<template v-else>Editar template</template>
<template v-else-if="view === 'edit'">Editar template</template>
<template v-else-if="view === 'preview'">Visualizar template</template>
</span>
<span v-if="view === 'list'" class="mdt-page__count">{{ templates.length }}</span>
</div>
@@ -210,8 +270,8 @@ onMounted(() => {
<!-- Body -->
<div class="mdt-body">
<!-- ══ LIST VIEW ══ -->
<template v-if="view === 'list'">
<!-- ══ LIST + PREVIEW VIEWS — sidebar do sistema sempre presente ══ -->
<template v-if="view === 'list' || view === 'preview'">
<!-- Loading -->
<div v-if="loading && !templates.length" class="mdt-loading">
<i class="pi pi-spin pi-spinner" />
@@ -229,53 +289,121 @@ onMounted(() => {
</button>
</div>
<template v-else>
<!-- Templates globais (padrão) -->
<div v-if="globalTemplates.length" class="mdt-section">
<div class="mdt-section__head">
<div class="mdt-section__title">
<!-- ══ Layout 2-col: sidebar (globais) + main (do tenant) ══ -->
<div v-else class="mdt-cols">
<!-- ─── COL 1 — Sidebar: Templates do sistema ─── -->
<aside class="mdt-side">
<header class="mdt-side__head">
<div class="mdt-side__title">
<i class="pi pi-shield" />
<span>Templates padrão do sistema</span>
<span>Templates do sistema</span>
</div>
<span class="mdt-section__count is-info">{{ globalTemplates.length }}</span>
</header>
<p class="mdt-side__subtitle">Modelos padrão da plataforma. Clique pra duplicar e personalizar.</p>
<div v-if="!globalTemplates.length" class="mdt-side__empty">
<i class="pi pi-info-circle" />
<span>Sem templates do sistema disponíveis.</span>
</div>
<div class="mdt-grid">
<button
<ul v-else class="mdt-side__list">
<li
v-for="tpl in globalTemplates"
:key="tpl.id"
class="mdt-card mdt-card--global"
type="button"
@click="onDuplicate(tpl)"
class="mdt-side__item"
:class="{ 'is-active': view === 'preview' && previewTemplate?.id === tpl.id }"
role="button"
tabindex="0"
@click="openPreview(tpl)"
@keydown.enter.prevent="openPreview(tpl)"
>
<div class="mdt-card__head">
<span class="mdt-card__icon mdt-card__icon--info">
<i class="pi pi-file" />
</span>
<div class="mdt-card__main">
<div class="mdt-card__name">{{ tpl.nome_template }}</div>
<div class="mdt-card__tipo">{{ tipoLabel(tpl.tipo) }}</div>
<div v-if="tpl.descricao" class="mdt-card__desc">{{ tpl.descricao }}</div>
<span class="mdt-side__item-icon">
<i class="pi pi-file" />
</span>
<div class="mdt-side__item-main">
<div class="mdt-side__item-name">{{ tpl.nome_template }}</div>
<div class="mdt-side__item-tipo">{{ tipoLabel(tpl.tipo) }}</div>
<div v-if="tpl.descricao" class="mdt-side__item-desc">{{ tpl.descricao }}</div>
</div>
<i class="pi pi-eye mdt-side__item-action" v-tooltip.left="'Visualizar'" />
</li>
</ul>
</aside>
<!-- ─── COL 2 — Main: Seus documentos OU Preview do sistema ─── -->
<main class="mdt-main">
<!-- ── HEADER: muda conforme view ── -->
<header class="mdt-main__head">
<template v-if="view === 'list'">
<div class="mdt-main__title-row">
<div class="mdt-main__title">
<i class="pi pi-user-edit" />
<span>Seus documentos</span>
</div>
<span class="mdt-section__count is-accent">{{ tenantTemplates.length }}</span>
</div>
<p class="mdt-main__subtitle">
Templates personalizados da sua clínica. Crie do zero ou duplique um modelo do sistema.
</p>
</template>
<template v-else-if="view === 'preview' && previewTemplate">
<div class="mdt-main__title-row">
<div class="mdt-main__title">
<i class="pi pi-eye" />
<span>{{ previewTemplate.nome_template }}</span>
</div>
<div class="mdt-preview-actions">
<button class="mdt-act-btn" @click="view = 'list'">
<i class="pi pi-arrow-left" />
<span>Voltar</span>
</button>
<button class="mdt-act-btn mdt-act-btn--primary" @click="onDuplicate(previewTemplate)">
<i class="pi pi-copy" />
<span>Duplicar pra meus templates</span>
</button>
</div>
</div>
<span class="mdt-card__badge mdt-card__badge--info">padrão</span>
<div class="mdt-card__hint">
<i class="pi pi-copy" />
Click pra duplicar e personalizar
</div>
<p class="mdt-main__subtitle">
<strong>{{ tipoLabel(previewTemplate.tipo) }}</strong>
<span v-if="previewTemplate.descricao"> · {{ previewTemplate.descricao }}</span>
</p>
</template>
</header>
<!-- ── PREVIEW VIEW: iframe com o template renderizado ── -->
<div v-if="view === 'preview' && previewTemplate" class="mdt-preview-wrap">
<iframe
:srcdoc="previewHtml"
class="mdt-preview-iframe"
sandbox="allow-same-origin"
title="Pré-visualização do template"
/>
<div v-if="previewTemplate.variaveis?.length" class="mdt-preview-vars">
<i class="pi pi-info-circle" />
<span>
Este template usa {{ previewTemplate.variaveis.length }} variável(eis):
<code>{{ previewTemplate.variaveis.slice(0, 5).map(v => `{{${v}}}`).join(', ') }}</code>
<span v-if="previewTemplate.variaveis.length > 5"> e +{{ previewTemplate.variaveis.length - 5 }}</span>
</span>
</div>
</div>
<!-- ── LIST VIEW: empty ou grid ── -->
<div v-else-if="!tenantTemplates.length" class="mdt-main__empty">
<i class="pi pi-file-edit mdt-main__empty-icon" />
<div class="mdt-main__empty-title">Nenhum template personalizado ainda</div>
<div class="mdt-main__empty-hint">
Clique em "Novo template" no topo da página ou duplique um modelo do sistema na coluna ao lado.
</div>
<button class="mdt-act-btn mdt-act-btn--primary mdt-main__empty-btn" @click="openCreate">
<i class="pi pi-plus" />
<span>Criar primeiro template</span>
</button>
</div>
</div>
<!-- Templates do tenant (meus) -->
<div v-if="tenantTemplates.length" class="mdt-section">
<div class="mdt-section__head">
<div class="mdt-section__title">
<i class="pi pi-user-edit" />
<span>Meus templates</span>
</div>
<span class="mdt-section__count is-accent">{{ tenantTemplates.length }}</span>
</div>
<div class="mdt-grid">
<!-- Grid dos templates do tenant -->
<div v-else class="mdt-grid">
<div
v-for="tpl in tenantTemplates"
:key="tpl.id"
@@ -324,8 +452,8 @@ onMounted(() => {
</div>
</div>
</div>
</div>
</template>
</main>
</div>
</template>
<!-- ══ CREATE / EDIT VIEW ══ -->
@@ -473,19 +601,284 @@ onMounted(() => {
.mdt-subheader__text { flex: 1; min-width: 0; }
.mdt-subheader__text strong { color: var(--m-text); font-weight: 600; }
/* Body */
/* Body (container externo — fica em flex pra acomodar 2-col body OU editor full) */
.mdt-body {
flex: 1;
overflow-y: auto;
padding: 12px;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ─── Layout 2-col: sidebar (sistema) + main (do tenant) ─── */
.mdt-cols {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: minmax(280px, 360px) 1fr;
gap: 12px;
padding: 12px;
overflow: hidden;
}
@media (max-width: 900px) {
.mdt-cols {
grid-template-columns: 1fr;
overflow-y: auto;
}
}
/* ── COL 1: Sidebar (templates do sistema) ── */
.mdt-side {
background: var(--m-bg-soft);
border: 1px solid var(--m-border);
border-radius: 12px;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.mdt-side__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px 8px;
flex-shrink: 0;
}
.mdt-side__title {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.86rem;
font-weight: 700;
color: var(--m-text);
}
.mdt-side__title > i {
font-size: 0.9rem;
color: var(--m-text-muted);
}
.mdt-side__subtitle {
margin: 0 14px 8px;
font-size: 0.74rem;
color: var(--m-text-muted);
line-height: 1.45;
flex-shrink: 0;
}
.mdt-side__empty {
padding: 24px 14px;
text-align: center;
color: var(--m-text-muted);
font-size: 0.78rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.mdt-side__empty > i { font-size: 1.4rem; color: var(--m-text-faint); }
.mdt-side__list {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 4px 8px 12px;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.mdt-body::-webkit-scrollbar { width: 5px; }
.mdt-body::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
.mdt-side__list::-webkit-scrollbar { width: 5px; }
.mdt-side__list::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
.mdt-side__item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 10px;
background: var(--m-bg-medium);
border: 1px solid var(--m-border);
border-radius: 9px;
color: var(--m-text);
cursor: pointer;
transition: background-color 140ms ease, border-color 140ms ease;
}
.mdt-side__item:hover,
.mdt-side__item:focus-visible {
background: var(--m-bg-soft-hover);
border-color: var(--p-primary-color);
outline: none;
}
.mdt-side__item.is-active {
background: color-mix(in srgb, var(--p-primary-color) 12%, var(--m-bg-medium));
border-color: var(--p-primary-color);
}
.mdt-side__item.is-active .mdt-side__item-action {
opacity: 1;
}
.mdt-side__item-icon {
width: 28px;
height: 28px;
display: grid;
place-items: center;
background: color-mix(in srgb, rgb(37, 99, 235) 14%, transparent);
color: rgb(37, 99, 235);
border-radius: 7px;
flex-shrink: 0;
font-size: 0.85rem;
}
.mdt-side__item-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.mdt-side__item-name {
font-size: 0.82rem;
font-weight: 600;
color: var(--m-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mdt-side__item-tipo {
font-size: 0.66rem;
color: var(--m-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mdt-side__item-desc {
font-size: 0.72rem;
color: var(--m-text-muted);
margin-top: 3px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mdt-side__item-action {
flex-shrink: 0;
color: var(--m-text-faint);
font-size: 0.78rem;
opacity: 0;
transition: opacity 140ms ease;
}
.mdt-side__item:hover .mdt-side__item-action {
opacity: 1;
}
/* ── COL 2: Main (Seus documentos) ── */
.mdt-main {
background: var(--m-bg-soft);
border: 1px solid var(--m-border);
border-radius: 12px;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.mdt-main__head {
padding: 12px 14px 8px;
border-bottom: 1px solid var(--m-border);
flex-shrink: 0;
}
.mdt-main__title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.mdt-main__title {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.86rem;
font-weight: 700;
color: var(--m-text);
}
.mdt-main__title > i {
font-size: 0.9rem;
color: var(--p-primary-color);
}
.mdt-main__subtitle {
margin: 6px 0 0;
font-size: 0.74rem;
color: var(--m-text-muted);
line-height: 1.45;
}
.mdt-main__empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 56px 28px;
text-align: center;
color: var(--m-text-muted);
gap: 8px;
}
.mdt-main__empty-icon { font-size: 2.4rem; color: var(--m-text-faint); margin-bottom: 6px; }
.mdt-main__empty-title { font-size: 0.95rem; font-weight: 600; color: var(--m-text); }
.mdt-main__empty-hint { font-size: 0.82rem; max-width: 360px; line-height: 1.5; }
.mdt-main__empty-btn { margin-top: 10px; }
.mdt-main .mdt-grid {
flex: 1;
min-height: 0;
overflow-y: auto;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.mdt-main .mdt-grid::-webkit-scrollbar { width: 5px; }
.mdt-main .mdt-grid::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
/* ── Preview de template do sistema ── */
.mdt-preview-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.mdt-preview-wrap {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
background: #f4f4f4;
}
.mdt-preview-iframe {
flex: 1;
min-height: 0;
width: 100%;
border: none;
background: #ffffff;
}
.mdt-preview-vars {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--m-bg-soft);
border-top: 1px solid var(--m-border);
color: var(--m-text-muted);
font-size: 0.74rem;
flex-shrink: 0;
}
.mdt-preview-vars > i { color: var(--p-primary-color); flex-shrink: 0; }
.mdt-preview-vars code {
font-family: 'JetBrains Mono', 'Consolas', monospace;
background: var(--m-bg-medium);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.7rem;
color: var(--p-primary-color);
}
/* Loading + Empty */
.mdt-loading,