398 lines
15 KiB
JavaScript
398 lines
15 KiB
JavaScript
// Carbone Word Template Manager - Frontend
|
|
// Use same host as the page, just different port
|
|
const CARBONE_API = window.location.protocol + '//' + window.location.hostname + ':8771/api/carbone';
|
|
|
|
// ============================================================
|
|
// NAVIGATION
|
|
// ============================================================
|
|
// Load carbone templates when the templates page is shown
|
|
const carboneNavObserver = new MutationObserver(() => {
|
|
if (document.getElementById('page-templates') && document.getElementById('page-templates').classList.contains('active')) {
|
|
loadCarboneTemplates();
|
|
}
|
|
});
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const templatesPage = document.getElementById('page-templates');
|
|
if (templatesPage) carboneNavObserver.observe(templatesPage, { attributes: true, attributeFilter: ['class'] });
|
|
});
|
|
|
|
// ============================================================
|
|
// DOWNLOAD MASTER TEMPLATE
|
|
// ============================================================
|
|
function downloadMasterTemplate() {
|
|
window.open(CARBONE_API + '/master-template', '_blank');
|
|
}
|
|
|
|
// ============================================================
|
|
// UPLOAD CUSTOM TEMPLATE
|
|
// ============================================================
|
|
const carboneUploadZone = document.getElementById('carbone-upload-zone');
|
|
if (carboneUploadZone) {
|
|
carboneUploadZone.addEventListener('dragover', e => { e.preventDefault(); carboneUploadZone.classList.add('dragover'); });
|
|
carboneUploadZone.addEventListener('dragleave', () => carboneUploadZone.classList.remove('dragover'));
|
|
carboneUploadZone.addEventListener('drop', e => {
|
|
e.preventDefault();
|
|
carboneUploadZone.classList.remove('dragover');
|
|
if (e.dataTransfer.files.length) uploadCarboneTemplate(e.dataTransfer.files[0]);
|
|
});
|
|
}
|
|
|
|
async function uploadCarboneTemplate(file) {
|
|
if (!file) return;
|
|
const name = document.getElementById('carbone-template-name').value || file.name.replace(/\.[^.]+$/, '');
|
|
const status = document.getElementById('carbone-upload-status');
|
|
status.innerHTML = '<div class="loading"><span class="spinner"></span> Uploading template...</div>';
|
|
|
|
const formData = new FormData();
|
|
formData.append('template', file);
|
|
formData.append('name', name);
|
|
|
|
try {
|
|
const resp = await fetch(CARBONE_API + '/templates/upload', { method: 'POST', body: formData });
|
|
const data = await resp.json();
|
|
if (data.success) {
|
|
status.innerHTML = '<div class="toast success" style="position:relative">Template uploaded successfully!</div>';
|
|
toast('Template uploaded: ' + name);
|
|
document.getElementById('carbone-template-name').value = '';
|
|
loadCarboneTemplates();
|
|
} else {
|
|
status.innerHTML = '<div class="toast error" style="position:relative">Upload failed: ' + (data.error || 'Unknown error') + '</div>';
|
|
}
|
|
} catch (e) {
|
|
status.innerHTML = '<div class="toast error" style="position:relative">Upload failed: ' + e.message + '</div>';
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// LIST TEMPLATES
|
|
// ============================================================
|
|
async function loadCarboneTemplates() {
|
|
const list = document.getElementById('carbone-templates-list');
|
|
if (!list) return;
|
|
list.innerHTML = '<div class="loading">Loading...</div>';
|
|
|
|
try {
|
|
const resp = await fetch(CARBONE_API + '/templates');
|
|
const data = await resp.json();
|
|
if (!data.templates || !data.templates.length) {
|
|
list.innerHTML = '<p class="text-muted">No custom templates uploaded yet. Download the master template, customize it in Word, and upload it here.</p>';
|
|
return;
|
|
}
|
|
list.innerHTML = data.templates.map(t => `
|
|
<div class="skill-row">
|
|
<div>
|
|
<strong>${t.name}</strong>
|
|
<div class="text-muted text-sm">Uploaded: ${new Date(t.uploadedAt).toLocaleDateString()} · ${t.originalName}</div>
|
|
</div>
|
|
<div class="flex gap-8">
|
|
<button class="btn btn-sm btn-outline" onclick="renderSampleCV('${t.id}')">Generate Sample CV</button>
|
|
<button class="btn btn-sm btn-danger" onclick="deleteCarboneTemplate('${t.id}')">Delete</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
} catch (e) {
|
|
list.innerHTML = '<p class="text-muted">Error loading templates: ' + e.message + '</p>';
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// RENDER SAMPLE CV
|
|
// ============================================================
|
|
async function renderSampleCV(templateId) {
|
|
toast('Generating sample CV PDF...');
|
|
|
|
// Get first candidate for sample data
|
|
try {
|
|
const candidatesResp = await fetch('/api/candidates?limit=1');
|
|
const candidatesData = await candidatesResp.json();
|
|
let cvData = null;
|
|
|
|
if (candidatesData.candidates && candidatesData.candidates.length > 0) {
|
|
const fullResp = await fetch('/api/candidates/' + candidatesData.candidates[0].id);
|
|
cvData = await fullResp.json();
|
|
}
|
|
|
|
if (!cvData) {
|
|
toast('Upload a CV first to generate a sample', 'error');
|
|
return;
|
|
}
|
|
|
|
const resp = await fetch(CARBONE_API + '/templates/' + templateId + '/render', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ candidateData: cvData })
|
|
});
|
|
|
|
if (!resp.ok) {
|
|
const err = await resp.json();
|
|
throw new Error(err.error || 'Render failed');
|
|
}
|
|
|
|
const blob = await resp.blob();
|
|
const url = URL.createObjectURL(blob);
|
|
window.open(url, '_blank');
|
|
toast('Sample CV generated');
|
|
} catch (e) {
|
|
toast('Render failed: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// DELETE TEMPLATE
|
|
// ============================================================
|
|
async function deleteCarboneTemplate(templateId) {
|
|
if (!confirm('Delete this template?')) return;
|
|
try {
|
|
await fetch(CARBONE_API + '/templates/' + templateId, { method: 'DELETE' });
|
|
toast('Template deleted');
|
|
loadCarboneTemplates();
|
|
} catch (e) {
|
|
toast('Delete failed: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// TAGS HELP - View in app
|
|
// ============================================================
|
|
async function viewTagsHelp() {
|
|
try {
|
|
const resp = await fetch(CARBONE_API + '/help');
|
|
const data = await resp.json();
|
|
|
|
let html = '<div style="max-height:600px;overflow-y:auto">';
|
|
for (const section of data.sections) {
|
|
html += `<h3 style="margin-top:20px;color:var(--accent)">${section.title}</h3>`;
|
|
if (section.note) html += `<p class="text-muted text-sm" style="margin-bottom:8px">${section.note}</p>`;
|
|
html += '<table><thead><tr><th>Tag</th><th>Description</th></tr></thead><tbody>';
|
|
for (const t of section.tags) {
|
|
html += `<tr><td style="font-family:monospace;color:var(--accent);white-space:nowrap">${escapeHtml(t.tag)}</td><td>${escapeHtml(t.desc)}</td></tr>`;
|
|
}
|
|
html += '</tbody></table>';
|
|
}
|
|
html += '</div>';
|
|
html += '<div class="mt-16"><button class="btn btn-outline" onclick="downloadHelpPdf()">Download as .pdf</button></div>';
|
|
|
|
showModal(html, 'Carbone Tags Reference');
|
|
} catch (e) {
|
|
toast('Failed to load help: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// TAGS HELP - Download .pdf
|
|
// ============================================================
|
|
function downloadHelpPdf() {
|
|
window.open(CARBONE_API + '/help-pdf', '_blank');
|
|
}
|
|
|
|
// ============================================================
|
|
// ONLYOFFICE INLINE EDITOR
|
|
// ============================================================
|
|
|
|
const ONLYOFFICE_API = window.location.protocol + '//' + window.location.hostname + ':8771/api/onlyoffice';
|
|
let onlyofficeEditorInstance = null;
|
|
|
|
// Check ONLYOFFICE status when templates page loads
|
|
async function checkOnlyofficeStatus() {
|
|
const badge = document.getElementById('onlyoffice-status');
|
|
const list = document.getElementById('onlyoffice-templates-list');
|
|
if (!badge) return;
|
|
|
|
try {
|
|
const resp = await fetch(ONLYOFFICE_API + '/health');
|
|
const data = await resp.json();
|
|
if (data.onlyoffice === 'healthy') {
|
|
badge.className = 'badge badge-green';
|
|
badge.textContent = 'online';
|
|
} else {
|
|
badge.className = 'badge badge-red';
|
|
badge.textContent = data.onlyoffice === 'offline' ? 'offline' : data.onlyoffice;
|
|
if (list) list.innerHTML = '<p class="text-muted text-sm">ONLYOFFICE server is not running. Start it with: <code>cd /root/workspace/cv-app && docker compose up -d onlyoffice-server</code></p>';
|
|
}
|
|
} catch (e) {
|
|
badge.className = 'badge badge-red';
|
|
badge.textContent = 'error';
|
|
if (list) list.innerHTML = '<p class="text-muted text-sm">Cannot connect to ONLYOFFICE service. Make sure the Carbone+ONLYOFFICE backend is running.</p>';
|
|
}
|
|
}
|
|
|
|
// Load templates list for ONLYOFFICE editing
|
|
async function loadOnlyofficeTemplates() {
|
|
const list = document.getElementById('onlyoffice-templates-list');
|
|
if (!list) return;
|
|
|
|
// Check if ONLYOFFICE is online first
|
|
try {
|
|
const healthResp = await fetch(ONLYOFFICE_API + '/health');
|
|
const health = await healthResp.json();
|
|
if (health.onlyoffice !== 'healthy') {
|
|
list.innerHTML = '<p class="text-muted text-sm">ONLYOFFICE server is ' + health.onlyoffice + '. Start the container to enable inline editing.</p>';
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
list.innerHTML = '<p class="text-muted text-sm">Cannot reach ONLYOFFICE service.</p>';
|
|
return;
|
|
}
|
|
|
|
// Load templates from Carbone registry
|
|
try {
|
|
const resp = await fetch(CARBONE_API + '/templates');
|
|
const data = await resp.json();
|
|
if (!data.templates || !data.templates.length) {
|
|
list.innerHTML = '<p class="text-muted text-sm">No templates uploaded yet. Upload a .docx template first to edit it inline.</p>';
|
|
return;
|
|
}
|
|
list.innerHTML = data.templates.map(t => `
|
|
<div class="skill-row">
|
|
<div>
|
|
<strong>${t.name}</strong>
|
|
<div class="text-muted text-sm">${t.originalName} · Updated: ${t.updatedAt ? new Date(t.updatedAt).toLocaleString() : new Date(t.uploadedAt).toLocaleString()}</div>
|
|
</div>
|
|
<div class="flex gap-8">
|
|
<button class="btn btn-sm" onclick="openOnlyofficeEditor('${t.id}', '${t.name.replace(/'/g, "\\'")}')">Edit Online</button>
|
|
<button class="btn btn-sm btn-outline" onclick="renderSampleCV('${t.id}')">Preview PDF</button>
|
|
<button class="btn btn-sm btn-danger" onclick="deleteCarboneTemplate('${t.id}')">Delete</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
} catch (e) {
|
|
list.innerHTML = '<p class="text-muted text-sm">Error: ' + e.message + '</p>';
|
|
}
|
|
}
|
|
|
|
// Force save the document
|
|
function forceSaveOnlyoffice() {
|
|
if (onlyofficeEditorInstance) {
|
|
toast('Saving... changes will be stored automatically');
|
|
}
|
|
}
|
|
|
|
// Track whether the editor is cleaning up (disable Edit buttons during this)
|
|
let editorCleaningUp = false;
|
|
|
|
// Close the editor — full teardown so the next open is completely fresh
|
|
function closeOnlyofficeEditor() {
|
|
if (onlyofficeEditorInstance) {
|
|
try { onlyofficeEditorInstance.destroyEditor(); } catch (e) {}
|
|
onlyofficeEditorInstance = null;
|
|
}
|
|
closeModal();
|
|
|
|
// Delete the DocsAPI global and remove the script tag so the next
|
|
// openOnlyofficeEditor call loads a completely fresh ONLYOFFICE API.
|
|
delete window.DocsAPI;
|
|
const oldScript = document.querySelector('script[src*="api/documents/api.js"]');
|
|
if (oldScript) oldScript.remove();
|
|
|
|
// Disable all "Edit Online" buttons for 2 seconds while ONLYOFFICE
|
|
// tears down its server-side session, then re-enable them.
|
|
editorCleaningUp = true;
|
|
disableEditButtons('Cleaning up...');
|
|
setTimeout(() => {
|
|
editorCleaningUp = false;
|
|
enableEditButtons();
|
|
loadOnlyofficeTemplates();
|
|
}, 2000);
|
|
}
|
|
|
|
// Disable/enable all "Edit Online" buttons with a status label
|
|
function disableEditButtons(label) {
|
|
document.querySelectorAll('button[onclick^="openOnlyofficeEditor"]').forEach(btn => {
|
|
btn.disabled = true;
|
|
btn.style.opacity = '0.5';
|
|
btn.style.cursor = 'not-allowed';
|
|
btn.dataset.originalText = btn.textContent;
|
|
btn.textContent = label || 'Please wait...';
|
|
});
|
|
}
|
|
function enableEditButtons() {
|
|
document.querySelectorAll('button[onclick^="openOnlyofficeEditor"]').forEach(btn => {
|
|
btn.disabled = false;
|
|
btn.style.opacity = '';
|
|
btn.style.cursor = '';
|
|
if (btn.dataset.originalText) btn.textContent = btn.dataset.originalText;
|
|
});
|
|
}
|
|
|
|
// Open ONLYOFFICE editor in a modal
|
|
async function openOnlyofficeEditor(templateId, templateName) {
|
|
// Don't open if cleanup is in progress
|
|
if (editorCleaningUp) return;
|
|
|
|
if (onlyofficeEditorInstance) {
|
|
try { onlyofficeEditorInstance.destroyEditor(); } catch (e) {}
|
|
onlyofficeEditorInstance = null;
|
|
}
|
|
|
|
try {
|
|
// Fetch JWT-signed config from backend (cache-busted)
|
|
const resp = await fetch(ONLYOFFICE_API + '/' + templateId + '/config?cb=' + Date.now());
|
|
if (!resp.ok) throw new Error((await resp.json()).error || 'Failed to get config');
|
|
const { config, onlyofficeUrl } = await resp.json();
|
|
|
|
// Unique container ID per session
|
|
const containerId = 'oo-editor-' + Date.now();
|
|
const body = `
|
|
<div class="flex-between mb-16">
|
|
<h3>Editing: ${templateName}</h3>
|
|
<div class="flex gap-8">
|
|
<button class="btn btn-sm btn-outline" onclick="forceSaveOnlyoffice()">Save</button>
|
|
<button class="btn btn-sm btn-danger" onclick="closeOnlyofficeEditor()">Close Editor</button>
|
|
</div>
|
|
</div>
|
|
<div id="${containerId}" style="width:100%;height:800px;border:1px solid var(--border);border-radius:8px;overflow:hidden"></div>
|
|
<p class="text-muted text-sm mt-8">Changes are saved automatically. Click "Save" to force-save, or "Close Editor" to return to the template list.</p>
|
|
`;
|
|
showModal(body, '', 'xlarge');
|
|
|
|
// Load ONLYOFFICE API script fresh each time with cache-buster.
|
|
const scriptUrl = onlyofficeUrl + '/web-apps/apps/api/documents/api.js?cb=' + Date.now();
|
|
await new Promise((resolve, reject) => {
|
|
const s = document.createElement('script');
|
|
s.src = scriptUrl;
|
|
s.onload = resolve;
|
|
s.onerror = () => reject(new Error('Failed to load ONLYOFFICE API'));
|
|
document.head.appendChild(s);
|
|
});
|
|
|
|
if (typeof DocsAPI === 'undefined' || !DocsAPI.DocEditor) {
|
|
throw new Error('ONLYOFFICE API not loaded');
|
|
}
|
|
|
|
onlyofficeEditorInstance = new DocsAPI.DocEditor(containerId, {
|
|
...config,
|
|
width: '100%',
|
|
height: '800px',
|
|
events: {
|
|
onSave: function() {
|
|
toast('Document saved');
|
|
loadOnlyofficeTemplates();
|
|
},
|
|
onError: function(event) {
|
|
toast('Editor error: ' + (event.data?.errorDescription || 'unknown'), 'error');
|
|
},
|
|
},
|
|
});
|
|
} catch (e) {
|
|
toast('Failed to open editor: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
// Initialize when templates page is active
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const templatesPage = document.getElementById('page-templates');
|
|
if (!templatesPage) return;
|
|
|
|
if (templatesPage.classList.contains('active')) {
|
|
checkOnlyofficeStatus();
|
|
loadOnlyofficeTemplates();
|
|
}
|
|
|
|
const observer = new MutationObserver(() => {
|
|
if (templatesPage.classList.contains('active')) {
|
|
checkOnlyofficeStatus();
|
|
loadOnlyofficeTemplates();
|
|
}
|
|
});
|
|
observer.observe(templatesPage, { attributes: true, attributeFilter: ['class'] });
|
|
}); |