agenciapsilmno/src/features/documents/components/DocumentTemplateEditor.vue

<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Arquivo: src/features/documents/components/DocumentTemplateEditor.vue
| Editor de template: edicao HTML, insercao de variaveis, preview ao vivo.
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, watch, computed } from 'vue'
import { useDocumentTemplates } from '../composables/useDocumentTemplates'
import JoditEmailEditor from '@/components/ui/JoditEmailEditor.vue'

const props = defineProps({
    modelValue: { type: Object, default: () => ({}) },
    mode: { type: String, default: 'create' } // create | edit
})

const emit = defineEmits(['update:modelValue', 'save', 'cancel'])

const { TIPOS_TEMPLATE, TEMPLATE_VARIABLES, variablesGrouped, previewHtml } = useDocumentTemplates()

const activeTab = ref('editor')  // editor | preview

// ── Form reativo synced com modelValue ──────────────────────

const form = ref({ ...defaultForm(), ...props.modelValue })

function defaultForm() {
    return {
        nome_template: '',
        tipo: 'outro',
        descricao: '',
        corpo_html: '',
        cabecalho_html: '',
        rodape_html: '',
        variaveis: [],
        logo_url: ''
    }
}

watch(() => props.modelValue, (val) => {
    form.value = { ...defaultForm(), ...val }
}, { deep: true })

watch(form, (val) => {
    emit('update:modelValue', { ...val })
}, { deep: true })

// ── Preview ─────────────────────────────────────────────────

const renderedPreview = computed(() => previewHtml(form.value.corpo_html))
const renderedCabecalho = computed(() => previewHtml(form.value.cabecalho_html || ''))
const renderedRodape = computed(() => previewHtml(form.value.rodape_html || ''))

// ── Inserir variavel no corpo ───────────────────────────────

const cursorField = ref('corpo_html') // qual campo esta ativo
const editorCabecalho = ref(null)
const editorCorpo = ref(null)
const editorRodape = ref(null)

function insertVariable(varKey) {
    const tag = `{{${varKey}}}`
    const editorMap = {
        cabecalho_html: editorCabecalho,
        corpo_html: editorCorpo,
        rodape_html: editorRodape
    }
    const editorRef = editorMap[cursorField.value]
    if (editorRef?.value?.insertHTML) {
        editorRef.value.insertHTML(tag)
    } else {
        form.value[cursorField.value] = (form.value[cursorField.value] || '') + tag
    }

    // Adiciona a variavel na lista se nao estiver
    if (!form.value.variaveis.includes(varKey)) {
        form.value.variaveis = [...form.value.variaveis, varKey]
    }
}

// ── Save ────────────────────────────────────────────────────

function onSave() {
    emit('save', { ...form.value })
}
</script>

<template>
    <div class="flex flex-col gap-3 xl:gap-4">
        <!-- ══ Card: Identificação ══════════════════════════════ -->
        <div class="rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] overflow-hidden">
            <div class="flex items-center gap-2 px-4 py-3 border-b border-[var(--surface-border,#e2e8f0)]">
                <i class="pi pi-tag text-[var(--text-color-secondary)] opacity-60" />
                <span class="font-semibold text-sm">Identificação</span>
            </div>
            <div class="p-4 flex flex-col gap-3">
                <div class="grid grid-cols-1 sm:grid-cols-[1fr_220px] gap-3">
                    <div class="flex flex-col gap-1">
                        <label class="text-xs font-semibold text-[var(--text-color-secondary)]">Nome do template</label>
                        <InputText v-model="form.nome_template" placeholder="Ex: Declaração de comparecimento" class="w-full" />
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="text-xs font-semibold text-[var(--text-color-secondary)]">Tipo</label>
                        <Select v-model="form.tipo" :options="TIPOS_TEMPLATE" optionLabel="label" optionValue="value" class="w-full" />
                    </div>
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-xs font-semibold text-[var(--text-color-secondary)]">Descrição</label>
                    <InputText v-model="form.descricao" placeholder="Breve descrição do template" class="w-full" />
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-xs font-semibold text-[var(--text-color-secondary)]">URL do logo (opcional)</label>
                    <InputText v-model="form.logo_url" placeholder="https://..." class="w-full" />
                </div>
            </div>
        </div>

        <!-- ══ Card: Conteúdo ═══════════════════════════════════ -->
        <div class="rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] overflow-hidden">
            <div class="flex items-center justify-between gap-2 px-4 py-3 border-b border-[var(--surface-border,#e2e8f0)]">
                <div class="flex items-center gap-2 min-w-0">
                    <i class="pi pi-file-edit text-[var(--text-color-secondary)] opacity-60" />
                    <span class="font-semibold text-sm">Conteúdo do documento</span>
                </div>
                <!-- Tabs: Editor / Preview -->
                <div class="flex items-center gap-1">
                    <Button
                        :label="'Editor'"
                        icon="pi pi-pencil"
                        :severity="activeTab === 'editor' ? undefined : 'secondary'"
                        :outlined="activeTab !== 'editor'"
                        size="small"
                        class="rounded-full"
                        @click="activeTab = 'editor'"
                    />
                    <Button
                        :label="'Preview'"
                        icon="pi pi-eye"
                        :severity="activeTab === 'preview' ? undefined : 'secondary'"
                        :outlined="activeTab !== 'preview'"
                        size="small"
                        class="rounded-full"
                        @click="activeTab = 'preview'"
                    />
                </div>
            </div>

            <!-- Editor -->
            <div v-show="activeTab === 'editor'" class="p-4 flex flex-col lg:flex-row gap-4">
                <!-- Campos HTML -->
                <div class="flex-1 min-w-0 flex flex-col gap-3">
                    <div class="flex flex-col gap-1" @focusin="cursorField = 'cabecalho_html'">
                        <label class="text-xs font-semibold text-[var(--text-color-secondary)]">Cabeçalho</label>
                        <JoditEmailEditor ref="editorCabecalho" v-model="form.cabecalho_html" :minHeight="120" layoutButtons :logoUrl="form.logo_url" />
                    </div>

                    <div class="flex flex-col gap-1" @focusin="cursorField = 'corpo_html'">
                        <label class="text-xs font-semibold text-[var(--text-color-secondary)]">Corpo do documento</label>
                        <JoditEmailEditor ref="editorCorpo" v-model="form.corpo_html" :minHeight="350" />
                    </div>

                    <div class="flex flex-col gap-1" @focusin="cursorField = 'rodape_html'">
                        <label class="text-xs font-semibold text-[var(--text-color-secondary)]">Rodapé</label>
                        <JoditEmailEditor ref="editorRodape" v-model="form.rodape_html" :minHeight="120" layoutButtons :logoUrl="form.logo_url" />
                    </div>
                </div>

                <!-- Painel de variáveis -->
                <div class="w-full lg:w-[240px] shrink-0">
                    <div class="lg:sticky lg:top-3 rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-ground,#f8fafc)]/50 overflow-hidden">
                        <div class="flex items-center gap-2 px-3 py-2 border-b border-[var(--surface-border,#e2e8f0)]">
                            <i class="pi pi-code text-[var(--text-color-secondary)] opacity-60 text-xs" />
                            <span class="font-semibold text-xs">Variáveis</span>
                        </div>
                        <div class="px-3 pt-2 text-[0.68rem] text-[var(--text-color-secondary)] opacity-75 italic">Clique para inserir no campo ativo</div>
                        <div class="flex flex-col gap-3 p-3 max-h-[500px] overflow-y-auto">
                            <div v-for="(vars, grupo) in variablesGrouped" :key="grupo">
                                <div class="text-[0.62rem] font-semibold uppercase tracking-wider text-[var(--text-color-secondary)] mb-1">{{ grupo }}</div>
                                <div class="flex flex-col gap-0.5">
                                    <button
                                        v-for="v in vars"
                                        :key="v.key"
                                        class="text-left text-xs px-2 py-1 rounded-md bg-transparent border-none hover:bg-[var(--primary-color,#6366f1)]/10 hover:text-[var(--primary-color,#6366f1)] transition-colors truncate cursor-pointer"
                                        :title="v.key"
                                        @click="insertVariable(v.key)"
                                    >
                                        <span class="font-mono text-[0.62rem] opacity-60">&lbrace;&lbrace;</span>
                                        {{ v.label }}
                                        <span class="font-mono text-[0.62rem] opacity-60">&rbrace;&rbrace;</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Preview -->
            <div v-show="activeTab === 'preview'" class="p-4">
                <div class="rounded-md border border-[var(--surface-border,#e2e8f0)] bg-white overflow-hidden">
                    <div class="p-6 text-black" style="font-family: 'Segoe UI', Arial, sans-serif; font-size: 12pt; line-height: 1.6;">
                        <div v-if="form.cabecalho_html" class="text-center mb-4 pb-3 border-b border-gray-300" v-html="renderedCabecalho" />
                        <div class="min-h-[300px]" v-html="renderedPreview" />
                        <div v-if="form.rodape_html" class="mt-8 pt-3 border-t border-gray-300 text-center text-[10pt] text-gray-500" v-html="renderedRodape" />
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>