nngo/IT_Ticket_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance Article editor 2

Browse Source
This commit is contained in:
nngo
2026-03-25 16:19:11 -04:00
parent 3ba7eae390
commit bee7146073
4 changed files with 360 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/admin/kb_edit.html
+274 -197
View File
@@ -40,7 +40,9 @@
{% if article %}Edit: {{ article.title[:50] }}{% else %}Create New Article{% endif %}
</div>
<div class="card-body">
<form method="POST" enctype="multipart/form-data" id="kb-form">
<form method="POST" enctype="multipart/form-data" id="kb-form"
data-article-id="{{ article.id if article else '' }}"
data-atts-url="{{ url_for('admin.kb_get_attachments', article_id=article.id) if article else '' }}">
<div class="mb-3">
<label class="form-label">Title *</label>
<input type="text" class="form-control" name="title" required
@@ -50,7 +52,7 @@
</div>
<div class="mb-3">
<label class="form-label">Content *</label>
<textarea name="body" id="kb-body" required>{{ article.body if article else '' }}</textarea>
<textarea name="body" id="kb-body">{{ article.body if article else '' }}</textarea>
</div>
<div class="mb-3">
<label class="form-label">
@@ -79,32 +81,14 @@
</div>
</div>
{% if article %}
{% set existing = article.attachments.all() %}
{% if existing %}
<div class="mb-3">
<label class="form-label">Existing Attachments</label>
<div style="display:flex;flex-direction:column;gap:6px;">
{% for att in existing %}
<div class="att-item">
<i class="bi bi-{% if att.mime_type and 'image' in att.mime_type %}image{% elif att.mime_type and 'pdf' in att.mime_type %}file-earmark-pdf{% else %}file-earmark{% endif %} att-icon"></i>
<span class="att-name">
<a href="{{ url_for('admin.kb_serve_file', stored_name=att.stored_name) }}"
target="_blank" style="color:var(--accent);">{{ att.filename }}</a>
</span>
<span class="att-size">{{ (att.file_size / 1024)|int }} KB</span>
<form method="POST"
action="{{ url_for('admin.kb_delete_attachment', article_id=article.id, att_id=att.id) }}"
onsubmit="return confirm('Delete {{ att.filename }}?');" style="margin:0;">
<button type="submit" class="btn btn-sm"
style="background:none;border:none;color:var(--danger);padding:2px 6px;" title="Delete">
<i class="bi bi-trash"></i>
</button>
</form>
</div>
{% endfor %}
</div>
<!-- Existing attachments — rendered dynamically by JS so they update
after save/delete without a full page reload -->
<div class="mb-3" id="existing-atts-wrap">
<label class="form-label">Existing Attachments</label>
<div id="existing-atts-list" style="display:flex;flex-direction:column;gap:6px;">
<!-- Populated by renderExistingAtts() on page load and after each save/delete -->
</div>
{% endif %}
</div>
{% endif %}
<div class="mb-4">
<label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
@@ -199,6 +183,7 @@
{% block scripts %}
<script>
// ── TinyMCE 6 ─────────────────────────────────────────────────────────────────
tinymce.init({
selector: '#kb-body',
height: 520,
@@ -229,7 +214,7 @@ tinymce.init({
{ title: 'Bold', format: 'bold' },
{ title: 'Italic', format: 'italic' },
{ title: 'Underline', format: 'underline' },
{ title: 'Code', inline: 'code' },
{ title: 'Code', inline: 'code' },
]},
{ title: 'Callout', items: [
{ title: 'Info box', block: 'div', classes: 'callout-info', wrapper: true },
@@ -257,219 +242,311 @@ tinymce.init({
.callout-tip { background:#ecfdf5; border:1px solid #a7f3d0; border-radius:8px; padding:14px 16px; margin:1em 0; }
hr { border:none; border-top:1px solid #e2e8f0; margin:2em 0; }
`,
images_upload_url: '/admin/kb/upload-image',
images_upload_handler: async (blobInfo, progress) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/admin/kb/upload-image');
xhr.upload.onprogress = (e) => { if (e.lengthComputable) progress(e.loaded / e.total * 100); };
xhr.onload = () => {
if (xhr.status !== 200) { reject({ message: `Upload failed (HTTP ${xhr.status})`, remove: true }); return; }
try {
const json = JSON.parse(xhr.responseText);
if (json.location) resolve(json.location);
else reject({ message: json.error || 'Upload failed', remove: true });
} catch { reject({ message: 'Invalid server response', remove: true }); }
};
xhr.onerror = () => reject({ message: 'Network error during upload', remove: true });
const fd = new FormData();
fd.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(fd);
});
},
images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
const fd = new FormData();
fd.append('file', blobInfo.blob(), blobInfo.filename());
fetch('/admin/kb/upload-image', { method: 'POST', credentials: 'same-origin', body: fd })
.then(r => { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
.then(j => { if (j.location) resolve(j.location); else reject({ message: j.error || 'Upload failed', remove: true }); })
.catch(err => reject({ message: String(err), remove: true }));
}),
paste_data_images: true,
// Prevent TinyMCE from converting absolute image URLs to relative paths.
// Without this, '/admin/kb/files/abc.png' gets stored as a relative path
// like '../../kb/files/abc.png' which breaks on any other page.
convert_urls: false,
relative_urls: false,
remove_script_host: false,
image_advtab: true,
image_caption: true,
table_default_attributes: { border: '0' },
table_default_styles: { 'border-collapse': 'collapse', width: '100%' },
table_responsive_width: true,
link_default_target: '_blank',
link_assume_external_targets: true,
codesample_languages: [
{ text: 'HTML/XML', value: 'markup' },
{ text: 'JavaScript', value: 'javascript' },
{ text: 'CSS', value: 'css' },
{ text: 'Python', value: 'python' },
{ text: 'Bash/Shell', value: 'bash' },
{ text: 'SQL', value: 'sql' },
{ text: 'PowerShell', value: 'powershell' },
{ text: 'Plain text', value: 'none' },
{ text: 'HTML/XML', value: 'markup' },
{ text: 'JavaScript', value: 'javascript' },
{ text: 'CSS', value: 'css' },
{ text: 'Python', value: 'python' },
{ text: 'Bash/Shell', value: 'bash' },
{ text: 'SQL', value: 'sql' },
{ text: 'PowerShell', value: 'powershell' },
{ text: 'Plain text', value: 'none' },
],
setup: (editor) => { editor.on('change', () => editor.save()); },
setup: editor => {
editor.on('change keyup undo redo', () => editor.save());
},
});
function saveDraft() {
tinymce.triggerSave();
// Temporarily uncheck is_published, submit, then immediately restore so the
// checkbox state is not left unchecked if the user stays on the page.
const cb = document.querySelector('input[name="is_published"]');
const wasChecked = cb ? cb.checked : false;
if (cb) cb.checked = false;
// Use a hidden input to explicitly send is_published=0 so the backend
// receives a definitive falsy value regardless of checkbox behaviour.
let hidden = document.getElementById('_draft_flag');
if (!hidden) {
hidden = document.createElement('input');
hidden.type = 'hidden';
hidden.id = '_draft_flag';
hidden.name = '_save_as_draft';
hidden.value = '1';
document.getElementById('kb-form').appendChild(hidden);
}
document.getElementById('kb-form').submit();
// Restore (runs if submit is cancelled by browser validation)
if (cb) cb.checked = wasChecked;
}
// ── Article state ─────────────────────────────────────────────────────────────
const form = document.getElementById('kb-form');
// article_id is '' for new articles, a number string for existing ones
let articleId = form.dataset.articleId || '';
let attsUrl = form.dataset.attsUrl || '';
// ── File staging ─────────────────────────────────────────────────────────────
// Root cause of the multi-file bug: assigning to input.files via DataTransfer
// is unreliable across browsers (read-only in Firefox/Safari).
// Fix: keep ALL staged files only in the DataTransfer object; on submit build
// a FormData manually and POST via fetch — bypassing input.files entirely.
// ── File staging (pending new uploads) ───────────────────────────────────────
const dropZone = document.getElementById('drop-zone');
const attInput = document.getElementById('att-input');
const fileList = document.getElementById('file-list');
let pendingFiles = [];
const dropZone = document.getElementById('drop-zone');
const attInput = document.getElementById('att-input');
const fileList = document.getElementById('file-list');
let stagedFiles = new DataTransfer();
function renderFileList() {
function renderPendingList() {
fileList.innerHTML = '';
const files = stagedFiles.files;
for (let i = 0; i < files.length; i++) {
const f = files[i];
pendingFiles.forEach((f, i) => {
const div = document.createElement('div');
div.className = 'pending-file';
div.innerHTML = `<i class="bi bi-${getFileIcon(f.name)}" style="color:var(--accent);font-size:16px;flex-shrink:0;"></i>
<span class="pf-name">${escHtml(f.name)}</span>
<span class="pf-size">${formatSize(f.size)}</span>
<button type="button" class="pf-remove" onclick="removeFile(${i})" title="Remove">&times;</button>`;
div.innerHTML =
'<i class="bi bi-' + getFileIcon(f.name) + '" style="color:var(--accent);font-size:16px;flex-shrink:0;"></i>' +
'<span class="pf-name">' + escHtml(f.name) + '</span>' +
'<span class="pf-size">' + formatSize(f.size) + '</span>' +
'<button type="button" class="pf-remove" onclick="removePending(' + i + ')" title="Remove">&times;</button>';
fileList.appendChild(div);
}
});
}
function removeFile(idx) {
const newDt = new DataTransfer();
const files = stagedFiles.files;
for (let i = 0; i < files.length; i++) { if (i !== idx) newDt.items.add(files[i]); }
stagedFiles = newDt;
renderFileList();
}
function removePending(idx) { pendingFiles.splice(idx, 1); renderPendingList(); }
function addFiles(newFiles) {
for (const f of newFiles) {
if (f.size > 16 * 1024 * 1024) { alert(`"${f.name}" exceeds the 16 MB limit and was skipped.`); continue; }
stagedFiles.items.add(f);
}
// Reset the picker so the same file can be picked again if needed
function addFiles(list) {
Array.from(list).forEach(f => {
if (f.size > 16 * 1024 * 1024) { alert('"' + f.name + '" exceeds 16 MB and was skipped.'); return; }
if (!pendingFiles.some(p => p.name === f.name && p.size === f.size)) pendingFiles.push(f);
});
attInput.value = '';
renderFileList();
renderPendingList();
}
attInput.addEventListener('change', () => addFiles(attInput.files));
dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('dragover'); });
dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('dragover'); });
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('dragover'); addFiles(e.dataTransfer.files); });
dropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('dragover'); addFiles(e.dataTransfer.files); });
// ── Form submit via fetch (fixes multi-file upload) ───────────────────────────
document.getElementById('kb-form').addEventListener('submit', async function (e) {
e.preventDefault();
// ── Existing attachments: render + async delete ───────────────────────────────
// Sync TinyMCE content into the hidden textarea before building FormData
tinymce.triggerSave();
function attFileIcon(mimeType) {
if (!mimeType) return 'file-earmark';
if (mimeType.startsWith('image/')) return 'image';
if (mimeType.includes('pdf')) return 'file-earmark-pdf';
if (mimeType.includes('word')) return 'file-earmark-word';
if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'file-earmark-excel';
if (mimeType.includes('zip')) return 'file-earmark-zip';
return 'file-earmark';
}
const form = this;
const saveBtn = document.getElementById('save-btn');
const origTxt = saveBtn.innerHTML;
saveBtn.disabled = true;
saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving…';
function renderExistingAtts(atts) {
const wrap = document.getElementById('existing-atts-wrap');
const list = document.getElementById('existing-atts-list');
if (!wrap || !list) return;
// Build FormData from the form fields
const fd = new FormData(form);
// Append every staged file under the key "attachments"
// This is the reliable path — FormData.append() bypasses input.files entirely
const staged = stagedFiles.files;
for (let i = 0; i < staged.length; i++) {
fd.append('attachments', staged[i], staged[i].name);
if (!atts || atts.length === 0) {
wrap.style.display = 'none';
return;
}
wrap.style.display = 'block';
list.innerHTML = '';
atts.forEach(att => {
const row = document.createElement('div');
row.className = 'att-item';
row.id = 'att-row-' + att.id;
row.innerHTML =
'<i class="bi bi-' + attFileIcon(att.mime_type) + ' att-icon"></i>' +
'<span class="att-name"><a href="' + att.url + '" target="_blank" style="color:var(--accent);">' + escHtml(att.filename) + '</a></span>' +
'<span class="att-size">' + formatSize(att.file_size) + '</span>' +
'<button type="button" class="btn btn-sm" onclick="deleteAtt(' + att.id + ',\'' + att.delete_url + '\',\'' + escHtml(att.filename) + '\')" ' +
'style="background:none;border:none;color:var(--danger);padding:2px 6px;" title="Delete attachment">' +
'<i class="bi bi-trash"></i></button>';
list.appendChild(row);
});
}
function loadExistingAtts() {
if (!attsUrl) return;
fetch(attsUrl, { credentials: 'same-origin' })
.then(r => r.json())
.then(data => renderExistingAtts(data.attachments))
.catch(() => {});
}
function deleteAtt(attId, deleteUrl, filename) {
if (!confirm('Delete "' + filename + '"?')) return;
const row = document.getElementById('att-row-' + attId);
if (row) { row.style.opacity = '0.4'; row.style.pointerEvents = 'none'; }
fetch(deleteUrl, { method: 'POST', credentials: 'same-origin' })
.then(r => r.json())
.then(data => {
if (data.ok) {
if (row) row.remove();
// Hide the section header if no attachments remain
const list = document.getElementById('existing-atts-list');
if (list && list.children.length === 0) {
const wrap = document.getElementById('existing-atts-wrap');
if (wrap) wrap.style.display = 'none';
}
showToast('Attachment deleted.', 'success');
} else {
if (row) { row.style.opacity = ''; row.style.pointerEvents = ''; }
alert('Delete failed. Please try again.');
}
})
.catch(() => {
if (row) { row.style.opacity = ''; row.style.pointerEvents = ''; }
alert('Network error. Please try again.');
});
}
// Load existing attachments on page load (only for edit mode)
if (articleId) loadExistingAtts();
// ── Save handler ──────────────────────────────────────────────────────────────
function doSave(asDraft) {
// Flush TinyMCE content to textarea first
const editor = tinymce.get('kb-body');
if (editor) editor.save();
// Validate
const titleEl = document.querySelector('#kb-form [name="title"]');
const bodyEl = document.getElementById('kb-body');
const categoryEl = document.querySelector('[name="category"]');
const tagsEl = document.querySelector('[name="tags"]');
const publishEl = document.querySelector('[name="is_published"]');
const title = titleEl ? titleEl.value.trim() : '';
const body = bodyEl ? bodyEl.value.trim() : '';
const category = categoryEl ? categoryEl.value : '';
const tags = tagsEl ? tagsEl.value.trim() : '';
if (!title) { alert('Please enter a title.'); if (titleEl) titleEl.focus(); return; }
const emptyBody = !body || body === '<p></p>' || body === '<p><br></p>' || body === '<p><br data-mce-bogus="1"></p>';
if (emptyBody) { alert('Please add some content to the article body.'); return; }
// Build FormData explicitly — avoids hidden-element issues with FormData(form)
const fd = new FormData();
fd.append('title', title);
fd.append('body', body);
fd.append('category', category);
fd.append('tags', tags);
if (!asDraft && publishEl && publishEl.checked) fd.append('is_published', 'on');
if (asDraft) fd.append('_save_as_draft', '1');
pendingFiles.forEach(f => fd.append('attachments', f, f.name));
// UI feedback
const btn = document.getElementById('save-btn');
const origTxt = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>Saving\u2026';
// Show progress bar
const progressWrap = document.getElementById('upload-progress');
const progressBar = document.getElementById('upload-bar');
const progressPct = document.getElementById('upload-pct');
if (staged.length > 0) progressWrap.style.display = 'block';
try {
await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', form.action || window.location.href);
const xhr = new XMLHttpRequest();
xhr.open('POST', window.location.pathname);
xhr.withCredentials = true;
xhr.upload.onprogress = (ev) => {
if (ev.lengthComputable) {
const pct = Math.round(ev.loaded / ev.total * 100);
progressBar.style.width = pct + '%';
progressPct.textContent = pct + '%';
}
};
xhr.upload.onprogress = ev => {
if (ev.lengthComputable && pendingFiles.length > 0) {
progressWrap.style.display = 'block';
const pct = Math.round(ev.loaded / ev.total * 100);
progressBar.style.width = pct + '%';
progressPct.textContent = pct + '%';
}
};
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 400) {
try {
// Backend returns {redirect: "/admin/kb"} for fetch submissions
const json = JSON.parse(xhr.responseText);
if (json.redirect) { resolve(json.redirect); return; }
} catch (_) { /* not JSON — fall through */ }
// Fallback: use the final response URL (after any server-side redirect)
resolve(xhr.responseURL || window.location.href);
} else {
reject(new Error(`Server returned ${xhr.status}`));
}
};
xhr.onerror = () => reject(new Error('Network error'));
xhr.send(fd);
// Store responseURL for redirect after onload
xhr._resolve = resolve;
}).then((redirectUrl) => {
window.location.href = redirectUrl;
});
} catch (err) {
xhr.onload = () => {
btn.disabled = false;
btn.innerHTML = origTxt;
progressWrap.style.display = 'none';
saveBtn.disabled = false;
saveBtn.innerHTML = origTxt;
alert('Upload failed: ' + err.message + '\nPlease try again.');
}
});
progressBar.style.width = '0%';
// saveDraft submits via the same fetch path — just flips the checkbox first
function saveDraft() {
tinymce.triggerSave();
const cb = document.querySelector('input[name="is_published"]');
const wasChecked = cb ? cb.checked : false;
if (cb) cb.checked = false;
let hidden = document.getElementById('_draft_flag');
if (!hidden) {
hidden = document.createElement('input');
hidden.type = 'hidden';
hidden.id = '_draft_flag';
hidden.name = '_save_as_draft';
hidden.value = '1';
document.getElementById('kb-form').appendChild(hidden);
}
// Trigger the fetch-based submit handler
document.getElementById('kb-form').dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
if (cb) cb.checked = wasChecked;
if (xhr.status >= 200 && xhr.status < 400) {
try {
const json = JSON.parse(xhr.responseText);
if (json.error) { alert('Server error: ' + json.error); return; }
// ── Issue 3 fix: stay on the page ─────────────────────────────────
showToast(asDraft ? 'Saved as draft.' : 'Changes saved!', 'success');
// Update article ID + attachments URL if this was a new article
if (json.article_id && !articleId) {
articleId = String(json.article_id);
form.dataset.articleId = articleId;
attsUrl = '/admin/kb/' + articleId + '/attachments';
form.dataset.attsUrl = attsUrl;
// Update browser URL to the edit URL without reloading
history.replaceState(null, '', '/admin/kb/' + articleId + '/edit');
// Update page title and header
const header = document.querySelector('.card-header');
if (header) header.innerHTML = '<i class="bi bi-pencil me-2"></i>Edit Article';
const saveBtn2 = document.getElementById('save-btn');
if (saveBtn2) saveBtn2.innerHTML = '<i class="bi bi-check2 me-2"></i>Save Changes';
}
// Clear pending files and refresh existing list
pendingFiles = [];
renderPendingList();
if (articleId) loadExistingAtts();
} catch (_) {
// Non-JSON response — still treat as success
showToast('Saved!', 'success');
pendingFiles = [];
renderPendingList();
if (articleId) loadExistingAtts();
}
} else {
alert('Save failed (HTTP ' + xhr.status + '). Please try again.');
}
};
xhr.onerror = () => {
btn.disabled = false;
btn.innerHTML = origTxt;
progressWrap.style.display = 'none';
alert('Network error. Please check your connection and try again.');
};
xhr.send(fd);
}
function formatSize(b) { if(b<1024) return b+' B'; if(b<1048576) return (b/1024).toFixed(1)+' KB'; return (b/1048576).toFixed(1)+' MB'; }
function escHtml(s) { return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
// Intercept native form submit
document.getElementById('kb-form').addEventListener('submit', e => { e.preventDefault(); doSave(false); });
document.getElementById('save-btn').onclick = e => { e.preventDefault(); doSave(false); };
function saveDraft() { doSave(true); }
// ── Toast notification ────────────────────────────────────────────────────────
function showToast(message, type) {
const t = document.createElement('div');
const bg = type === 'success' ? 'var(--success-bg)' : 'var(--danger-bg)';
const border = type === 'success' ? 'var(--success)' : 'var(--danger)';
const color = type === 'success' ? 'var(--success)' : 'var(--danger)';
t.style.cssText =
'position:fixed;bottom:90px;right:28px;z-index:9999;' +
'background:' + bg + ';border:1px solid ' + border + ';color:' + color + ';' +
'border-radius:8px;padding:12px 20px;font-size:14px;font-weight:600;' +
'box-shadow:0 4px 16px rgba(0,0,0,.1);animation:slideInRight .2s ease;';
t.textContent = message;
document.body.appendChild(t);
setTimeout(() => {
t.style.animation = 'fadeOut .2s ease forwards';
setTimeout(() => t.remove(), 200);
}, 2500);
}
// ── Helpers ───────────────────────────────────────────────────────────────────
function formatSize(b) { return b<1024?b+' B':b<1048576?(b/1024).toFixed(1)+' KB':(b/1048576).toFixed(1)+' MB'; }
function escHtml(s) { return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
function getFileIcon(n) {
const e = n.split('.').pop().toLowerCase();
return {pdf:'file-earmark-pdf',png:'image',jpg:'image',jpeg:'image',gif:'image',webp:'image',
doc:'file-earmark-word',docx:'file-earmark-word',xls:'file-earmark-excel',xlsx:'file-earmark-excel',
ppt:'file-earmark-ppt',pptx:'file-earmark-ppt',zip:'file-earmark-zip',
csv:'file-earmark-spreadsheet',txt:'file-earmark-text',log:'file-earmark-text'}[e] || 'file-earmark';
doc:'file-earmark-word',docx:'file-earmark-word',xls:'file-earmark-excel',xlsx:'file-earmark-excel',
ppt:'file-earmark-ppt',pptx:'file-earmark-ppt',zip:'file-earmark-zip',
csv:'file-earmark-spreadsheet',txt:'file-earmark-text',log:'file-earmark-text'}[e]||'file-earmark';
}
</script>
<style>
@keyframes slideInRight { from { transform:translateX(60px); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
</style>
{% endblock %}