Documentos + Templates + Relatorios nativas (so resta online-scheduling)
Promove '/melissa/documentos', '/melissa/documentos-templates' e '/melissa/relatorios' do embed pra paginas nativas Melissa. MelissaDocumentos (~700L): - Sidebar com stats (Total / Tamanho / Tipos / Pendentes amber) + filtro Tipo (Select com TIPOS_DOCUMENTO 11 opcoes) + filtro Tag (Select dinamico com usedTags) + footer fixo Limpar filtros - Main: toolbar busca + lista de DocumentCard (componente reusado) - Modo "todos os pacientes" — patientId null. Upload/Gerar exigem abrir paciente especifico no prontuario (botoes nao aparecem). - Dialogs reusados: PreviewDialog + SignatureDialog + ShareDialog + ConfirmDialog (delete). MelissaDocumentosTemplates (~700L): - Layout 1-col empilhado, 3 views: list / create / edit - Header com botao "Novo template" (list) ou "Cancelar/Salvar" (create/edit) + back button - 2 sections distintas: "Templates padrao do sistema" (info-blue, click duplica) e "Meus templates" (accent, click edita + menu de acoes Duplicar/Editar/Desativar) - Cards em grid responsivo (auto-fill 280px), com badge "padrao"/ "inativo" e count de variaveis - DocumentTemplateEditor reusado pra create/edit - ConfirmDialog reusado MelissaRelatorios (~1100L): - Sidebar com 6 stats (Total / Realizadas verde / Faltas red / Canceladas warn / Agendadas info / Taxa realizacao) + filtro Periodo (button list: semana/mes/3meses/6meses) + filtro Status (Realizadas/Faltas/Canceladas/Agendadas com cores) + footer Limpar filtros - Main: card Grafico (Chart.js stacked bar agrupado por semana/mes) + card DataTable de sessoes filtradas (Data/Hora sortable / Paciente / Sessao / Modalidade / Status) - Empty states distintos: sem sessoes no periodo / sem resultado do filtro Logica preservada das paginas originais. Composables/services nao foram tocados — apenas adaptacao do chrome pra blueprint Melissa. DocumentsListPage / DocumentTemplatesPage / RelatoriosPage continuam intactas no layout Rail (/therapist/*, /admin/*). Wire-up MelissaLayout: imports + 3 render blocks + 'documentos', 'documentos-templates', 'relatorios' literais em NON_CONFIG_SLUGS; removidos de MELISSA_EMBED_KEYS. Entries removidos do EMBED_MAP em MelissaEmbed (resta apenas 'online-scheduling'). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
@@ -0,0 +1,703 @@
|
||||
<script setup>
|
||||
/*
|
||||
* MelissaDocumentos — Página nativa Melissa pra listagem de documentos
|
||||
* (substitui o embed via MelissaEmbed que duplicava headers).
|
||||
*
|
||||
* Aplica o blueprint melissa-table-page-blueprint.md:
|
||||
* - Sidebar com stats + filtros (Tipo / Tag) com Selects + footer
|
||||
* fixo "Limpar filtros"
|
||||
* - Main com toolbar (busca) + lista de DocumentCard preservada
|
||||
*
|
||||
* Modo "todos os pacientes" — patientId é null. Upload/gerar requer
|
||||
* abrir um paciente específico via /melissa/pacientes (atualmente
|
||||
* desabilitados aqui). Lista é read-only nesse contexto.
|
||||
*/
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { useConfirm } from 'primevue/useconfirm';
|
||||
|
||||
import { useDocuments } from '@/features/documents/composables/useDocuments';
|
||||
import DocumentCard from '@/features/documents/components/DocumentCard.vue';
|
||||
import DocumentPreviewDialog from '@/features/documents/components/DocumentPreviewDialog.vue';
|
||||
import DocumentSignatureDialog from '@/features/documents/components/DocumentSignatureDialog.vue';
|
||||
import DocumentShareDialog from '@/features/documents/components/DocumentShareDialog.vue';
|
||||
// Select/InputText/Skeleton/Button/Dialog: auto via PrimeVueResolver
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const toast = useToast();
|
||||
const confirm = useConfirm();
|
||||
|
||||
// patientId = null → modo "todos os pacientes" (read-only).
|
||||
const patientId = computed(() => null);
|
||||
|
||||
const {
|
||||
documents, loading, error, filters, usedTags, stats,
|
||||
TIPOS_DOCUMENTO,
|
||||
fetchDocuments, remove,
|
||||
download, getPreviewUrl, fetchUsedTags, clearFilters,
|
||||
formatSize
|
||||
} = useDocuments(() => patientId.value);
|
||||
|
||||
// ── Dialogs ────────────────────────────────────────────
|
||||
const previewDlg = ref(false);
|
||||
const signatureDlg = ref(false);
|
||||
const shareDlg = ref(false);
|
||||
const selectedDoc = ref(null);
|
||||
const previewUrl = ref('');
|
||||
|
||||
// ── Filtros computeds ──────────────────────────────────
|
||||
const hasActiveFilter = computed(() =>
|
||||
!!(filters.value.tipo_documento || filters.value.tag || filters.value.search)
|
||||
);
|
||||
|
||||
function clearAllFilters() {
|
||||
clearFilters();
|
||||
fetchDocuments();
|
||||
}
|
||||
|
||||
const tagOptions = computed(() =>
|
||||
usedTags.value.map((t) => ({ label: t, value: t }))
|
||||
);
|
||||
|
||||
// ── Acoes nas rows ─────────────────────────────────────
|
||||
async function onPreview(doc) {
|
||||
selectedDoc.value = doc;
|
||||
try {
|
||||
previewUrl.value = await getPreviewUrl(doc);
|
||||
} catch {
|
||||
previewUrl.value = '';
|
||||
}
|
||||
previewDlg.value = true;
|
||||
}
|
||||
|
||||
function onDownload(doc) {
|
||||
download(doc);
|
||||
}
|
||||
|
||||
function onEdit() {
|
||||
toast.add({ severity: 'info', summary: 'Em breve', detail: 'Edição de metadados será implementada.', life: 2000 });
|
||||
}
|
||||
|
||||
function onDelete(doc) {
|
||||
confirm.require({
|
||||
message: `Excluir "${doc.nome_original}"? O arquivo será retido por 5 anos conforme LGPD/CFP.`,
|
||||
header: 'Confirmar exclusão',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
acceptClass: 'p-button-danger',
|
||||
accept: async () => {
|
||||
try {
|
||||
await remove(doc.id);
|
||||
toast.add({ severity: 'success', summary: 'Excluído', detail: doc.nome_original, life: 2000 });
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onShare(doc) {
|
||||
selectedDoc.value = doc;
|
||||
shareDlg.value = true;
|
||||
}
|
||||
|
||||
function onSign(doc) {
|
||||
selectedDoc.value = doc;
|
||||
signatureDlg.value = true;
|
||||
}
|
||||
|
||||
// ── Watch filtros (refetch automático) ─────────────────
|
||||
watch(filters, () => fetchDocuments(), { deep: true });
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([fetchDocuments(), fetchUsedTags()]);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ConfirmDialog />
|
||||
|
||||
<section class="md-page">
|
||||
<header class="md-page__head">
|
||||
<div class="md-page__title">
|
||||
<i class="pi pi-file md-page__title-icon" />
|
||||
<span>Documentos</span>
|
||||
<span class="md-page__count">{{ documents.length }}</span>
|
||||
</div>
|
||||
<div class="md-page__actions">
|
||||
<button
|
||||
class="md-head-btn"
|
||||
v-tooltip.bottom="'Atualizar'"
|
||||
:disabled="loading"
|
||||
@click="fetchDocuments"
|
||||
>
|
||||
<i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
|
||||
</button>
|
||||
<button class="md-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
|
||||
<i class="pi pi-times" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Subheader -->
|
||||
<div class="md-subheader">
|
||||
<i class="pi pi-info-circle md-subheader__icon" />
|
||||
<span class="md-subheader__text">
|
||||
Documentos clínicos da clínica — laudos, receitas, exames, termos
|
||||
assinados. Pra <strong>upload</strong> ou <strong>gerar</strong>
|
||||
novos, abra o paciente específico no prontuário.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="md-body">
|
||||
<!-- ═══ COL 1: Stats + filtros ═══ -->
|
||||
<aside class="md-side">
|
||||
<div class="md-side__scroll">
|
||||
<!-- Stats -->
|
||||
<div class="md-w md-w--side">
|
||||
<div class="md-w__head">
|
||||
<span class="md-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
|
||||
</div>
|
||||
<div class="md-stats">
|
||||
<div class="md-stat">
|
||||
<div class="md-stat__val">{{ stats.total }}</div>
|
||||
<div class="md-stat__lbl">Total</div>
|
||||
</div>
|
||||
<div class="md-stat">
|
||||
<div class="md-stat__val">{{ formatSize(stats.tamanhoTotal) }}</div>
|
||||
<div class="md-stat__lbl">Tamanho</div>
|
||||
</div>
|
||||
<div class="md-stat">
|
||||
<div class="md-stat__val">{{ Object.keys(stats.porTipo).length }}</div>
|
||||
<div class="md-stat__lbl">Tipos</div>
|
||||
</div>
|
||||
<div class="md-stat" :class="stats.pendentesRevisao ? 'is-warn' : ''">
|
||||
<div class="md-stat__val">{{ stats.pendentesRevisao || 0 }}</div>
|
||||
<div class="md-stat__lbl">Pendentes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtro Tipo -->
|
||||
<div class="md-w md-w--side">
|
||||
<div class="md-w__head">
|
||||
<span class="md-w__title"><i class="pi pi-filter" /> Tipo</span>
|
||||
<button
|
||||
v-if="filters.tipo_documento"
|
||||
class="md-side__clear-inline"
|
||||
v-tooltip.top="'Limpar filtro de tipo'"
|
||||
@click="filters.tipo_documento = null"
|
||||
>
|
||||
<i class="pi pi-times" />
|
||||
</button>
|
||||
</div>
|
||||
<Select
|
||||
v-model="filters.tipo_documento"
|
||||
:options="TIPOS_DOCUMENTO"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
placeholder="Todos os tipos"
|
||||
class="w-full md-side__select"
|
||||
showClear
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Filtro Tag -->
|
||||
<div v-if="usedTags.length" class="md-w md-w--side">
|
||||
<div class="md-w__head">
|
||||
<span class="md-w__title"><i class="pi pi-tag" /> Tag</span>
|
||||
<button
|
||||
v-if="filters.tag"
|
||||
class="md-side__clear-inline"
|
||||
v-tooltip.top="'Limpar filtro de tag'"
|
||||
@click="filters.tag = null"
|
||||
>
|
||||
<i class="pi pi-times" />
|
||||
</button>
|
||||
</div>
|
||||
<Select
|
||||
v-model="filters.tag"
|
||||
:options="tagOptions"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
placeholder="Todas as tags"
|
||||
class="w-full md-side__select"
|
||||
showClear
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Transition name="md-clear">
|
||||
<div v-if="hasActiveFilter" class="md-side__footer">
|
||||
<button class="md-side__clear-all" @click="clearAllFilters">
|
||||
<i class="pi pi-filter-slash" />
|
||||
<span>Limpar filtros</span>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</aside>
|
||||
|
||||
<!-- ═══ COL 2: Lista ═══ -->
|
||||
<div class="md-main">
|
||||
<div class="md-toolbar">
|
||||
<div class="md-search">
|
||||
<i class="pi pi-search md-search__icon" />
|
||||
<input
|
||||
v-model="filters.search"
|
||||
type="text"
|
||||
placeholder="Buscar por nome, descrição ou tag…"
|
||||
class="md-search__input"
|
||||
/>
|
||||
<button
|
||||
v-if="filters.search"
|
||||
class="md-search__clear"
|
||||
v-tooltip.bottom="'Limpar busca'"
|
||||
@click="filters.search = ''"
|
||||
>
|
||||
<i class="pi pi-times" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Erro -->
|
||||
<div v-if="error" class="md-error">
|
||||
<i class="pi pi-exclamation-triangle" />
|
||||
<span>{{ error }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Lista -->
|
||||
<div class="md-list">
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="md-loading">
|
||||
<i class="pi pi-spin pi-spinner" />
|
||||
<span>Carregando documentos…</span>
|
||||
</div>
|
||||
|
||||
<!-- Empty -->
|
||||
<div v-else-if="!documents.length" class="md-empty">
|
||||
<i :class="hasActiveFilter ? 'pi pi-filter-slash' : 'pi pi-folder-open'" class="md-empty__icon" />
|
||||
<div class="md-empty__title">
|
||||
{{ hasActiveFilter ? 'Nenhum documento encontrado' : 'Nenhum documento ainda' }}
|
||||
</div>
|
||||
<div class="md-empty__hint">
|
||||
{{ hasActiveFilter
|
||||
? 'Limpe os filtros ou ajuste a busca pra ver outros resultados.'
|
||||
: 'Quando algum paciente tiver documentos cadastrados, eles aparecem aqui.' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cards -->
|
||||
<div v-else class="md-cards">
|
||||
<DocumentCard
|
||||
v-for="doc in documents"
|
||||
:key="doc.id"
|
||||
:doc="doc"
|
||||
@preview="onPreview"
|
||||
@download="onDownload"
|
||||
@edit="onEdit"
|
||||
@delete="onDelete"
|
||||
@share="onShare"
|
||||
@sign="onSign"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialogs comuns -->
|
||||
<DocumentPreviewDialog
|
||||
:visible="previewDlg"
|
||||
@update:visible="previewDlg = $event"
|
||||
:doc="selectedDoc"
|
||||
:previewUrl="previewUrl"
|
||||
@download="onDownload"
|
||||
@edit="onEdit"
|
||||
@delete="(d) => { previewDlg = false; onDelete(d); }"
|
||||
@share="(d) => { previewDlg = false; onShare(d); }"
|
||||
@sign="(d) => { previewDlg = false; onSign(d); }"
|
||||
/>
|
||||
<DocumentSignatureDialog :visible="signatureDlg" @update:visible="signatureDlg = $event" :doc="selectedDoc" />
|
||||
<DocumentShareDialog :visible="shareDlg" @update:visible="shareDlg = $event" :doc="selectedDoc" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ─── Page chrome ─── */
|
||||
.md-page {
|
||||
position: absolute;
|
||||
inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--m-bg-medium);
|
||||
backdrop-filter: blur(32px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(160%);
|
||||
border: 1px solid var(--m-border);
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
color: var(--m-text);
|
||||
animation: md-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
|
||||
}
|
||||
@keyframes md-page-enter {
|
||||
from { opacity: 0; transform: scale(0.985); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.md-page__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--m-border);
|
||||
flex-shrink: 0;
|
||||
gap: 10px;
|
||||
}
|
||||
.md-page__title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.md-page__title-icon { color: var(--p-primary-color); font-size: 1.05rem; }
|
||||
.md-page__title > span:not(.md-page__count) {
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.md-page__count {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: var(--m-accent);
|
||||
background: var(--m-accent-soft);
|
||||
border: 1px solid color-mix(in srgb, var(--m-accent) 35%, transparent);
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.md-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||||
|
||||
.md-close, .md-head-btn {
|
||||
width: 32px; height: 32px;
|
||||
display: grid; place-items: center;
|
||||
background: var(--m-bg-soft);
|
||||
border: 1px solid var(--m-border);
|
||||
color: var(--m-text);
|
||||
border-radius: 9px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background-color 140ms ease;
|
||||
}
|
||||
.md-close:hover, .md-head-btn:hover { background: var(--m-bg-soft-hover); }
|
||||
.md-head-btn > i { font-size: 0.85rem; }
|
||||
.md-head-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
/* Subheader */
|
||||
.md-subheader {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px 18px;
|
||||
border-bottom: 1px solid var(--m-border);
|
||||
background: var(--m-bg-soft);
|
||||
font-size: 0.78rem;
|
||||
color: var(--m-text-muted);
|
||||
line-height: 1.45;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.md-subheader__icon { color: var(--p-primary-color); font-size: 0.92rem; flex-shrink: 0; margin-top: 1px; }
|
||||
.md-subheader__text { flex: 1; min-width: 0; }
|
||||
.md-subheader__text strong { color: var(--m-text); font-weight: 600; }
|
||||
|
||||
/* Body */
|
||||
.md-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ─── Sidebar ─── */
|
||||
.md-side {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--m-bg-soft);
|
||||
border-right: 1px solid var(--m-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
.md-side__scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.md-side__scroll::-webkit-scrollbar { width: 5px; }
|
||||
.md-side__scroll::-webkit-scrollbar-thumb {
|
||||
background: var(--m-border-strong);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.md-side__footer {
|
||||
flex-shrink: 0;
|
||||
padding: 12px;
|
||||
background: var(--m-bg-soft);
|
||||
border-top: 1px solid var(--m-border);
|
||||
}
|
||||
.md-side__clear-all {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 9px 12px;
|
||||
background: var(--m-bg-medium);
|
||||
border: 1px solid var(--m-border);
|
||||
color: var(--m-text);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
transition: background-color 140ms ease, border-color 140ms ease;
|
||||
}
|
||||
.md-side__clear-all:hover {
|
||||
background: var(--m-bg-soft-hover);
|
||||
border-color: var(--m-border-strong);
|
||||
}
|
||||
.md-side__clear-all > i {
|
||||
font-size: 0.78rem;
|
||||
color: var(--m-text-muted);
|
||||
}
|
||||
|
||||
.md-side__clear-inline {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: transparent;
|
||||
border: 1px solid color-mix(in srgb, rgb(220, 38, 38) 30%, var(--m-border));
|
||||
color: rgb(220, 38, 38);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 140ms ease, border-color 140ms ease;
|
||||
}
|
||||
.md-side__clear-inline:hover {
|
||||
background: rgba(220, 38, 38, 0.10);
|
||||
border-color: rgba(220, 38, 38, 0.55);
|
||||
}
|
||||
.md-side__clear-inline > i { font-size: 0.6rem; }
|
||||
|
||||
.md-clear-enter-active,
|
||||
.md-clear-leave-active {
|
||||
transition: opacity 220ms ease, transform 220ms ease, max-height 240ms ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
.md-clear-enter-from, .md-clear-leave-to {
|
||||
opacity: 0; transform: translateY(6px); max-height: 0;
|
||||
}
|
||||
.md-clear-enter-to, .md-clear-leave-from {
|
||||
opacity: 1; transform: translateY(0); max-height: 80px;
|
||||
}
|
||||
|
||||
.md-w {
|
||||
background: var(--m-bg-medium);
|
||||
border: 1px solid var(--m-border);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
.md-w--side {
|
||||
margin: 12px 12px 0;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.md-w--side:last-of-type { margin-bottom: 12px; }
|
||||
.md-w__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.md-w__title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--m-text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
.md-w__title > i { color: var(--m-text-muted); font-size: 0.7rem; }
|
||||
|
||||
.md-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
.md-stat {
|
||||
background: var(--m-bg-soft);
|
||||
border: 1px solid var(--m-border);
|
||||
border-radius: 10px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.md-stat__val {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
color: var(--m-text);
|
||||
}
|
||||
.md-stat__lbl {
|
||||
font-size: 0.62rem;
|
||||
color: var(--m-text-muted);
|
||||
margin-top: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.md-stat.is-warn .md-stat__val { color: rgb(217, 119, 6); }
|
||||
|
||||
.md-side__select :deep(.p-select) {
|
||||
width: 100%;
|
||||
background: var(--m-bg-soft);
|
||||
border-radius: 9px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
/* ─── Main ─── */
|
||||
.md-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.md-toolbar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.md-search {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.md-search__icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
color: var(--m-text-muted);
|
||||
font-size: 0.78rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
.md-search__input {
|
||||
width: 100%;
|
||||
background: var(--m-bg-medium);
|
||||
border: 1px solid var(--m-border);
|
||||
color: var(--m-text);
|
||||
padding: 9px 36px 9px 34px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.85rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 140ms ease;
|
||||
}
|
||||
.md-search__input::placeholder { color: var(--m-text-faint); }
|
||||
.md-search__input:focus { border-color: var(--m-border-strong); }
|
||||
.md-search__clear {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--m-text-muted);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background-color 140ms ease;
|
||||
}
|
||||
.md-search__clear:hover {
|
||||
background: var(--m-bg-soft-hover);
|
||||
color: var(--m-text);
|
||||
}
|
||||
.md-search__clear > i { font-size: 0.7rem; }
|
||||
|
||||
.md-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(220, 38, 38, 0.10);
|
||||
border: 1px solid rgba(220, 38, 38, 0.30);
|
||||
border-radius: 10px;
|
||||
color: rgb(220, 38, 38);
|
||||
font-size: 0.82rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.md-list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--m-border);
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
}
|
||||
.md-list::-webkit-scrollbar { width: 5px; }
|
||||
.md-list::-webkit-scrollbar-thumb {
|
||||
background: var(--m-border-strong);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.md-loading,
|
||||
.md-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 56px 28px;
|
||||
text-align: center;
|
||||
color: var(--m-text-muted);
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
.md-loading > i { font-size: 1.4rem; color: var(--p-primary-color); }
|
||||
.md-empty__icon {
|
||||
font-size: 2rem;
|
||||
color: var(--m-text-faint);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.md-empty__title {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
color: var(--m-text);
|
||||
}
|
||||
.md-empty__hint { font-size: 0.78rem; max-width: 340px; }
|
||||
|
||||
.md-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* ─── Mobile (<1024px) ─── */
|
||||
@media (max-width: 1023px) {
|
||||
.md-body { flex-direction: column; padding: 0; }
|
||||
.md-side {
|
||||
width: 100%;
|
||||
max-height: 50vh;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--m-border);
|
||||
}
|
||||
.md-main { padding: 8px; }
|
||||
.md-page__title > span:first-of-type { display: none; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,708 @@
|
||||
<script setup>
|
||||
/*
|
||||
* MelissaDocumentosTemplates — Página nativa Melissa pros templates de
|
||||
* documentos (substitui o embed). 3 views: list / create / edit.
|
||||
*
|
||||
* Layout 1-col empilhado (sem sidebar — separação global/tenant é visual
|
||||
* via cards distintos).
|
||||
*
|
||||
* Lógica idêntica à DocumentTemplatesPage (composable
|
||||
* useDocumentTemplates + DocumentTemplateEditor reusado).
|
||||
*/
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { useConfirm } from 'primevue/useconfirm';
|
||||
|
||||
import { useDocumentTemplates } from '@/features/documents/composables/useDocumentTemplates';
|
||||
import DocumentTemplateEditor from '@/features/documents/components/DocumentTemplateEditor.vue';
|
||||
// Button/Menu/Skeleton: auto via PrimeVueResolver
|
||||
import Menu from 'primevue/menu';
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
const toast = useToast();
|
||||
const confirm = useConfirm();
|
||||
|
||||
const {
|
||||
templates, loading,
|
||||
globalTemplates, tenantTemplates,
|
||||
TIPOS_TEMPLATE,
|
||||
fetchTemplates, create, update, remove, duplicate
|
||||
} = useDocumentTemplates();
|
||||
|
||||
// ── Views ───────────────────────────────────────────────
|
||||
const view = ref('list');
|
||||
const editingTemplate = ref({});
|
||||
const editingId = ref(null);
|
||||
|
||||
// ── Acoes ───────────────────────────────────────────────
|
||||
function openCreate() {
|
||||
editingId.value = null;
|
||||
editingTemplate.value = {};
|
||||
view.value = 'create';
|
||||
}
|
||||
|
||||
function openEdit(tpl) {
|
||||
if (tpl.is_global) {
|
||||
toast.add({
|
||||
severity: 'warn',
|
||||
summary: 'Somente leitura',
|
||||
detail: 'Templates padrão não podem ser editados. Duplique para personalizar.',
|
||||
life: 3000
|
||||
});
|
||||
return;
|
||||
}
|
||||
editingId.value = tpl.id;
|
||||
editingTemplate.value = { ...tpl };
|
||||
view.value = 'edit';
|
||||
}
|
||||
|
||||
async function onSave(payload) {
|
||||
try {
|
||||
if (view.value === 'create') {
|
||||
await create(payload);
|
||||
toast.add({ severity: 'success', summary: 'Criado', detail: payload.nome_template, life: 3000 });
|
||||
} else {
|
||||
await update(editingId.value, payload);
|
||||
toast.add({ severity: 'success', summary: 'Salvo', detail: payload.nome_template, life: 3000 });
|
||||
}
|
||||
view.value = 'list';
|
||||
fetchTemplates(true);
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
|
||||
}
|
||||
}
|
||||
|
||||
function onDuplicate(tpl) {
|
||||
confirm.require({
|
||||
message: `Deseja copiar "${tpl.nome_template}" para os seus templates? Você poderá editá-lo livremente.`,
|
||||
header: 'Duplicar template',
|
||||
icon: 'pi pi-copy',
|
||||
acceptLabel: 'Copiar',
|
||||
rejectLabel: 'Cancelar',
|
||||
accept: async () => {
|
||||
try {
|
||||
await duplicate(tpl.id);
|
||||
toast.add({ severity: 'success', summary: 'Duplicado', detail: `"${tpl.nome_template}" copiado para Meus Templates.`, life: 3000 });
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onDelete(tpl) {
|
||||
confirm.require({
|
||||
message: `Desativar template "${tpl.nome_template}"?`,
|
||||
header: 'Confirmar',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: async () => {
|
||||
try {
|
||||
await remove(tpl.id);
|
||||
toast.add({ severity: 'success', summary: 'Desativado', life: 2000 });
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onCancel() {
|
||||
view.value = 'list';
|
||||
}
|
||||
|
||||
function tipoLabel(tipo) {
|
||||
return TIPOS_TEMPLATE.find((t) => t.value === tipo)?.label || tipo;
|
||||
}
|
||||
|
||||
// ── Card menu (templates do tenant) ─────────────────────
|
||||
function getCardMenuItems(tpl) {
|
||||
const items = [
|
||||
{ label: 'Duplicar', icon: 'pi pi-copy', command: () => onDuplicate(tpl) }
|
||||
];
|
||||
if (!tpl.is_global) {
|
||||
items.push(
|
||||
{ label: 'Editar', icon: 'pi pi-pencil', command: () => openEdit(tpl) },
|
||||
{ separator: true },
|
||||
{ label: 'Desativar', icon: 'pi pi-trash', class: 'text-red-500', command: () => onDelete(tpl) }
|
||||
);
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchTemplates(true);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ConfirmDialog />
|
||||
|
||||
<section class="mdt-page">
|
||||
<header class="mdt-page__head">
|
||||
<div class="mdt-page__title">
|
||||
<button
|
||||
v-if="view !== 'list'"
|
||||
class="mdt-back-btn"
|
||||
v-tooltip.bottom="'Voltar à lista'"
|
||||
@click="view = 'list'"
|
||||
>
|
||||
<i class="pi pi-arrow-left" />
|
||||
</button>
|
||||
<i v-else class="pi pi-file-edit mdt-page__title-icon" />
|
||||
<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>
|
||||
</span>
|
||||
<span v-if="view === 'list'" class="mdt-page__count">{{ templates.length }}</span>
|
||||
</div>
|
||||
<div class="mdt-page__actions">
|
||||
<template v-if="view === 'list'">
|
||||
<button
|
||||
class="mdt-act-btn mdt-act-btn--primary"
|
||||
v-tooltip.bottom="'Criar novo template personalizado'"
|
||||
@click="openCreate"
|
||||
>
|
||||
<i class="pi pi-plus" />
|
||||
<span>Novo template</span>
|
||||
</button>
|
||||
<button
|
||||
class="mdt-head-btn"
|
||||
v-tooltip.bottom="'Atualizar'"
|
||||
:disabled="loading"
|
||||
@click="fetchTemplates(true)"
|
||||
>
|
||||
<i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
class="mdt-act-btn"
|
||||
@click="view = 'list'"
|
||||
>
|
||||
<i class="pi pi-times" />
|
||||
<span>Cancelar</span>
|
||||
</button>
|
||||
<button
|
||||
class="mdt-act-btn mdt-act-btn--primary"
|
||||
@click="onSave(editingTemplate)"
|
||||
>
|
||||
<i class="pi pi-check" />
|
||||
<span>{{ view === 'create' ? 'Criar template' : 'Salvar' }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<button class="mdt-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
|
||||
<i class="pi pi-times" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Subheader -->
|
||||
<div v-if="view === 'list'" class="mdt-subheader">
|
||||
<i class="pi pi-info-circle mdt-subheader__icon" />
|
||||
<span class="mdt-subheader__text">
|
||||
Modelos reutilizáveis pra <strong>declarações</strong>,
|
||||
<strong>atestados</strong>, <strong>recibos</strong> e outros documentos.
|
||||
Templates padrão são <strong>somente leitura</strong> — duplique pra
|
||||
personalizar.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="mdt-body">
|
||||
<!-- ══ LIST VIEW ══ -->
|
||||
<template v-if="view === 'list'">
|
||||
<!-- Loading -->
|
||||
<div v-if="loading && !templates.length" class="mdt-loading">
|
||||
<i class="pi pi-spin pi-spinner" />
|
||||
<span>Carregando templates…</span>
|
||||
</div>
|
||||
|
||||
<!-- Empty -->
|
||||
<div v-else-if="!templates.length" class="mdt-empty">
|
||||
<i class="pi pi-file-edit mdt-empty__icon" />
|
||||
<div class="mdt-empty__title">Nenhum template encontrado</div>
|
||||
<div class="mdt-empty__hint">Crie seu primeiro template personalizado.</div>
|
||||
<button class="mdt-act-btn mdt-act-btn--primary mdt-empty__btn" @click="openCreate">
|
||||
<i class="pi pi-plus" />
|
||||
<span>Criar primeiro template</span>
|
||||
</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">
|
||||
<i class="pi pi-shield" />
|
||||
<span>Templates padrão do sistema</span>
|
||||
</div>
|
||||
<span class="mdt-section__count is-info">{{ globalTemplates.length }}</span>
|
||||
</div>
|
||||
<div class="mdt-grid">
|
||||
<button
|
||||
v-for="tpl in globalTemplates"
|
||||
:key="tpl.id"
|
||||
class="mdt-card mdt-card--global"
|
||||
type="button"
|
||||
@click="onDuplicate(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>
|
||||
</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>
|
||||
</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">
|
||||
<div
|
||||
v-for="tpl in tenantTemplates"
|
||||
:key="tpl.id"
|
||||
class="mdt-card mdt-card--tenant"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="openEdit(tpl)"
|
||||
@keydown.enter.prevent="openEdit(tpl)"
|
||||
>
|
||||
<div class="mdt-card__head">
|
||||
<span class="mdt-card__icon mdt-card__icon--primary">
|
||||
<i class="pi pi-file-edit" />
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu de ações -->
|
||||
<div class="mdt-card__menu" @click.stop>
|
||||
<Button
|
||||
icon="pi pi-ellipsis-v"
|
||||
text
|
||||
rounded
|
||||
size="small"
|
||||
class="!w-7 !h-7"
|
||||
@click.stop="$refs[`menu_${tpl.id}`]?.[0]?.toggle($event)"
|
||||
/>
|
||||
<Menu
|
||||
:ref="`menu_${tpl.id}`"
|
||||
:model="getCardMenuItems(tpl)"
|
||||
:popup="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mdt-card__foot">
|
||||
<span v-if="!tpl.ativo" class="mdt-card__badge mdt-card__badge--inactive">
|
||||
inativo
|
||||
</span>
|
||||
<span class="mdt-card__vars">
|
||||
<i class="pi pi-code" />
|
||||
{{ tpl.variaveis?.length || 0 }} variáveis
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- ══ CREATE / EDIT VIEW ══ -->
|
||||
<template v-if="view === 'create' || view === 'edit'">
|
||||
<DocumentTemplateEditor
|
||||
v-model="editingTemplate"
|
||||
:mode="view"
|
||||
@save="onSave"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ─── Page chrome ─── */
|
||||
.mdt-page {
|
||||
position: absolute;
|
||||
inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--m-bg-medium);
|
||||
backdrop-filter: blur(32px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(160%);
|
||||
border: 1px solid var(--m-border);
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
color: var(--m-text);
|
||||
animation: mdt-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
|
||||
}
|
||||
@keyframes mdt-page-enter {
|
||||
from { opacity: 0; transform: scale(0.985); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.mdt-page__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--m-border);
|
||||
flex-shrink: 0;
|
||||
gap: 10px;
|
||||
}
|
||||
.mdt-page__title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.mdt-page__title-icon { color: var(--p-primary-color); font-size: 1.05rem; }
|
||||
.mdt-page__title > span:not(.mdt-page__count) {
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.mdt-page__count {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: var(--m-accent);
|
||||
background: var(--m-accent-soft);
|
||||
border: 1px solid color-mix(in srgb, var(--m-accent) 35%, transparent);
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.mdt-back-btn {
|
||||
width: 32px; height: 32px;
|
||||
display: grid; place-items: center;
|
||||
background: var(--m-bg-soft);
|
||||
border: 1px solid var(--m-border);
|
||||
color: var(--m-text);
|
||||
border-radius: 9px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background-color 140ms ease;
|
||||
}
|
||||
.mdt-back-btn:hover { background: var(--m-bg-soft-hover); }
|
||||
.mdt-back-btn > i { font-size: 0.85rem; }
|
||||
|
||||
.mdt-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||||
|
||||
.mdt-close, .mdt-head-btn {
|
||||
width: 32px; height: 32px;
|
||||
display: grid; place-items: center;
|
||||
background: var(--m-bg-soft);
|
||||
border: 1px solid var(--m-border);
|
||||
color: var(--m-text);
|
||||
border-radius: 9px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background-color 140ms ease;
|
||||
}
|
||||
.mdt-close:hover, .mdt-head-btn:hover { background: var(--m-bg-soft-hover); }
|
||||
.mdt-head-btn > i { font-size: 0.85rem; }
|
||||
.mdt-head-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.mdt-act-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: 9px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
transition: background-color 140ms ease, transform 140ms ease;
|
||||
background: var(--m-bg-soft);
|
||||
border: 1px solid var(--m-border);
|
||||
color: var(--m-text);
|
||||
}
|
||||
.mdt-act-btn:hover { background: var(--m-bg-soft-hover); }
|
||||
.mdt-act-btn--primary {
|
||||
background: var(--m-accent);
|
||||
border-color: var(--m-accent);
|
||||
color: white;
|
||||
}
|
||||
.mdt-act-btn--primary:hover {
|
||||
background: color-mix(in srgb, var(--m-accent) 88%, white);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.mdt-act-btn > i { font-size: 0.78rem; }
|
||||
|
||||
/* Subheader */
|
||||
.mdt-subheader {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px 18px;
|
||||
border-bottom: 1px solid var(--m-border);
|
||||
background: var(--m-bg-soft);
|
||||
font-size: 0.78rem;
|
||||
color: var(--m-text-muted);
|
||||
line-height: 1.45;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mdt-subheader__icon { color: var(--p-primary-color); font-size: 0.92rem; flex-shrink: 0; margin-top: 1px; }
|
||||
.mdt-subheader__text { flex: 1; min-width: 0; }
|
||||
.mdt-subheader__text strong { color: var(--m-text); font-weight: 600; }
|
||||
|
||||
/* Body */
|
||||
.mdt-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
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; }
|
||||
|
||||
/* Loading + Empty */
|
||||
.mdt-loading,
|
||||
.mdt-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 56px 28px;
|
||||
text-align: center;
|
||||
color: var(--m-text-muted);
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
.mdt-loading > i { font-size: 1.4rem; color: var(--p-primary-color); }
|
||||
.mdt-empty__icon { font-size: 2.2rem; color: var(--m-text-faint); margin-bottom: 4px; }
|
||||
.mdt-empty__title { font-size: 0.95rem; font-weight: 600; color: var(--m-text); }
|
||||
.mdt-empty__hint { font-size: 0.82rem; }
|
||||
.mdt-empty__btn { margin-top: 8px; }
|
||||
|
||||
/* ─── Section (cards de templates) ─── */
|
||||
.mdt-section {
|
||||
background: var(--m-bg-soft);
|
||||
border: 1px solid var(--m-border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.mdt-section__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--m-border);
|
||||
}
|
||||
.mdt-section__title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
color: var(--m-text);
|
||||
}
|
||||
.mdt-section__title > i {
|
||||
font-size: 0.92rem;
|
||||
color: var(--m-text-muted);
|
||||
}
|
||||
.mdt-section__count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 24px;
|
||||
height: 22px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.mdt-section__count.is-info {
|
||||
background: color-mix(in srgb, rgb(37, 99, 235) 18%, transparent);
|
||||
color: rgb(37, 99, 235);
|
||||
}
|
||||
.mdt-section__count.is-accent {
|
||||
background: var(--m-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mdt-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* Card de template (global ou tenant) */
|
||||
.mdt-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px;
|
||||
background: var(--m-bg-medium);
|
||||
border: 1px solid var(--m-border);
|
||||
border-radius: 10px;
|
||||
color: var(--m-text);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
|
||||
}
|
||||
.mdt-card:hover {
|
||||
background: var(--m-bg-soft-hover);
|
||||
border-color: var(--p-primary-color);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.mdt-card:focus-visible {
|
||||
outline: 2px solid var(--p-primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.mdt-card__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
.mdt-card__icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 9px;
|
||||
flex-shrink: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.mdt-card__icon--info {
|
||||
background: color-mix(in srgb, rgb(37, 99, 235) 15%, transparent);
|
||||
color: rgb(37, 99, 235);
|
||||
}
|
||||
.mdt-card__icon--primary {
|
||||
background: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
|
||||
color: var(--p-primary-color);
|
||||
}
|
||||
.mdt-card__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.mdt-card__name {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
color: var(--m-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.mdt-card__tipo {
|
||||
font-size: 0.72rem;
|
||||
color: var(--m-text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.mdt-card__desc {
|
||||
font-size: 0.72rem;
|
||||
color: var(--m-text-muted);
|
||||
line-height: 1.5;
|
||||
margin-top: 6px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.mdt-card__badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.mdt-card__badge--info {
|
||||
background: color-mix(in srgb, rgb(37, 99, 235) 18%, transparent);
|
||||
color: rgb(37, 99, 235);
|
||||
}
|
||||
.mdt-card__badge--inactive {
|
||||
background: rgba(220, 38, 38, 0.15);
|
||||
color: rgb(220, 38, 38);
|
||||
}
|
||||
.mdt-card__hint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 0.7rem;
|
||||
color: var(--m-text-muted);
|
||||
opacity: 0;
|
||||
transition: opacity 140ms ease;
|
||||
margin-top: auto;
|
||||
}
|
||||
.mdt-card:hover .mdt-card__hint { opacity: 1; }
|
||||
.mdt-card__hint > i { font-size: 0.7rem; }
|
||||
|
||||
.mdt-card__menu {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 140ms ease;
|
||||
}
|
||||
.mdt-card:hover .mdt-card__menu { opacity: 1; }
|
||||
|
||||
.mdt-card__foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.mdt-card__vars {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 0.7rem;
|
||||
color: var(--m-text-muted);
|
||||
}
|
||||
.mdt-card__vars > i { font-size: 0.65rem; }
|
||||
|
||||
/* Mobile (<1024px) */
|
||||
@media (max-width: 1023px) {
|
||||
.mdt-page__title > span:nth-child(2):not(.mdt-page__count) {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
.mdt-act-btn span { display: none; }
|
||||
.mdt-act-btn { width: 32px; padding: 0; justify-content: center; }
|
||||
.mdt-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
@@ -29,39 +29,14 @@ const emit = defineEmits(['close']);
|
||||
// Mantido neste arquivo (não no MelissaLayout) pra que adicionar uma
|
||||
// nova page aqui não exija mexer no parent.
|
||||
const EMBED_MAP = {
|
||||
// 'financeiro' e 'financeiro-lancamentos' foram promovidos pra páginas
|
||||
// nativas (MelissaFinanceiro / MelissaFinanceiroLancamentos).
|
||||
'documentos': {
|
||||
label: 'Documentos',
|
||||
desc: 'Documentos clínicos do tenant — geração, edição e histórico.',
|
||||
icon: 'pi pi-file',
|
||||
comp: defineAsyncComponent(() => import('@/features/documents/DocumentsListPage.vue'))
|
||||
},
|
||||
'documentos-templates': {
|
||||
label: 'Templates de documentos',
|
||||
desc: 'Modelos reutilizáveis pra prontuários e relatórios.',
|
||||
icon: 'pi pi-file-edit',
|
||||
comp: defineAsyncComponent(() => import('@/features/documents/DocumentTemplatesPage.vue'))
|
||||
},
|
||||
// 'agendamentos-recebidos' migrou pra Melissa Page nativa
|
||||
// (MelissaAgendamentosRecebidos.vue) — segue o blueprint
|
||||
// melissa-table-page-blueprint.md. Removido do embed map.
|
||||
// Quase todas as pages foram promovidas pra Melissa nativas (eliminando
|
||||
// o triplo-header). Resta apenas 'online-scheduling' por enquanto.
|
||||
'online-scheduling': {
|
||||
label: 'Agendador online',
|
||||
desc: 'Configure o link público pra pacientes solicitarem horários.',
|
||||
icon: 'pi pi-calendar-clock',
|
||||
comp: defineAsyncComponent(() => import('@/views/pages/therapist/OnlineSchedulingPage.vue'))
|
||||
},
|
||||
'relatorios': {
|
||||
label: 'Relatórios',
|
||||
desc: 'Indicadores e relatórios do tenant — clínico e financeiro.',
|
||||
icon: 'pi pi-chart-bar',
|
||||
comp: defineAsyncComponent(() => import('@/views/pages/therapist/RelatoriosPage.vue'))
|
||||
},
|
||||
// 'notificacoes' e 'link-externo' foram promovidos pra páginas nativas
|
||||
// Melissa (MelissaNotificacoes / MelissaLinkExterno) — eliminado o
|
||||
// triplo header que aparecia no embed. Wire-up agora no MelissaLayout.vue,
|
||||
// não passam mais por aqui.
|
||||
}
|
||||
};
|
||||
|
||||
const info = computed(() => EMBED_MAP[props.secaoRota] || null);
|
||||
|
||||
@@ -40,6 +40,9 @@ import MelissaLinkExterno from './MelissaLinkExterno.vue';
|
||||
import MelissaNotificacoes from './MelissaNotificacoes.vue';
|
||||
import MelissaFinanceiro from './MelissaFinanceiro.vue';
|
||||
import MelissaFinanceiroLancamentos from './MelissaFinanceiroLancamentos.vue';
|
||||
import MelissaDocumentos from './MelissaDocumentos.vue';
|
||||
import MelissaDocumentosTemplates from './MelissaDocumentosTemplates.vue';
|
||||
import MelissaRelatorios from './MelissaRelatorios.vue';
|
||||
import MelissaMedicos from './MelissaMedicos.vue';
|
||||
import MelissaEventoPanel from './MelissaEventoPanel.vue';
|
||||
import { TOQUES, playToque } from './melissaToques';
|
||||
@@ -178,9 +181,9 @@ const SECOES = {
|
||||
};
|
||||
|
||||
// Set de keys que renderizam via MelissaEmbed (Onda 1 — pages 1-coluna).
|
||||
// 'link-externo', 'notificacoes', 'financeiro' e 'financeiro-lancamentos'
|
||||
// foram promovidos pra páginas nativas pra remover o triplo-header.
|
||||
const MELISSA_EMBED_KEYS = ['documentos', 'documentos-templates', 'online-scheduling', 'relatorios'];
|
||||
// Quase todas foram promovidas pra páginas nativas; resta apenas
|
||||
// 'online-scheduling' por enquanto.
|
||||
const MELISSA_EMBED_KEYS = ['online-scheduling'];
|
||||
|
||||
// Slugs reservados pra páginas dedicadas (não-config) — agenda, pacientes,
|
||||
// conversas etc. + as MELISSA_EMBED_KEYS. Usado no isConfigRoute pra
|
||||
@@ -189,6 +192,7 @@ const MELISSA_NON_CONFIG_SLUGS = new Set([
|
||||
'agenda', 'pacientes', 'compromissos', 'recorrencias', 'conversas',
|
||||
'tags', 'grupos', 'cadastros-recebidos', 'medicos', 'agendamentos-recebidos',
|
||||
'link-externo', 'notificacoes', 'financeiro', 'financeiro-lancamentos',
|
||||
'documentos', 'documentos-templates', 'relatorios',
|
||||
...MELISSA_EMBED_KEYS
|
||||
]);
|
||||
// Aliases "bonitos" + INLINE_KEYS reconhecidos pelo MelissaConfiguracoes.
|
||||
@@ -2188,6 +2192,21 @@ function onKeydown(e) {
|
||||
@close="fecharSecao"
|
||||
/>
|
||||
|
||||
<MelissaDocumentos
|
||||
v-if="layoutReady && secaoAberta === 'documentos'"
|
||||
@close="fecharSecao"
|
||||
/>
|
||||
|
||||
<MelissaDocumentosTemplates
|
||||
v-if="layoutReady && secaoAberta === 'documentos-templates'"
|
||||
@close="fecharSecao"
|
||||
/>
|
||||
|
||||
<MelissaRelatorios
|
||||
v-if="layoutReady && secaoAberta === 'relatorios'"
|
||||
@close="fecharSecao"
|
||||
/>
|
||||
|
||||
<MelissaConfiguracoes
|
||||
v-if="layoutReady && isMelissaConfigRoute(secaoAberta)"
|
||||
:secao-rota="secaoAberta"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user