536 lines
23 KiB
HTML
536 lines
23 KiB
HTML
{% extends "common/base.html" %}
|
|
|
|
{% block title %}Support Articles - DocuPulse{% endblock %}
|
|
|
|
{% block head %}
|
|
<meta name="csrf-token" content="{{ csrf_token }}">
|
|
{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
|
|
<style>
|
|
.article-card {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.article-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
}
|
|
.category-badge {
|
|
font-size: 0.75rem;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
.status-badge {
|
|
font-size: 0.75rem;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
.note-editor {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.375rem;
|
|
}
|
|
.note-editor.note-frame {
|
|
border-color: var(--border-color);
|
|
}
|
|
.note-editor .note-editing-area {
|
|
background-color: var(--white);
|
|
}
|
|
.note-editor .note-toolbar {
|
|
background-color: var(--bg-color);
|
|
border-bottom: 1px solid var(--border-color);
|
|
border-radius: 0.375rem 0.375rem 0 0;
|
|
}
|
|
.note-editor .note-btn {
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--white);
|
|
color: var(--text-dark);
|
|
}
|
|
.note-editor .note-btn:hover {
|
|
background-color: var(--primary-color);
|
|
color: var(--white);
|
|
border-color: var(--primary-color);
|
|
}
|
|
.note-editor .note-btn.active {
|
|
background-color: var(--primary-color);
|
|
color: var(--white);
|
|
border-color: var(--primary-color);
|
|
}
|
|
.note-editor .note-editing-area .note-editable {
|
|
color: var(--text-dark);
|
|
font-family: inherit;
|
|
line-height: 1.6;
|
|
padding: 15px;
|
|
}
|
|
.note-editor .note-status-output {
|
|
background-color: var(--bg-color);
|
|
border-top: 1px solid var(--border-color);
|
|
color: var(--text-muted);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1 class="h3 mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-life-ring me-2"></i>Support Articles
|
|
</h1>
|
|
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createArticleModal">
|
|
<i class="fas fa-plus me-2"></i>Create New Article
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Articles List -->
|
|
<div class="row" id="articlesList">
|
|
<!-- Articles will be loaded here via AJAX -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Article Modal -->
|
|
<div class="modal fade" id="createArticleModal" tabindex="-1" aria-labelledby="createArticleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="createArticleModalLabel">Create New Help Article</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form id="createArticleForm">
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="mb-3">
|
|
<label for="articleTitle" class="form-label">Title</label>
|
|
<input type="text" class="form-control" id="articleTitle" name="title" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label for="articleCategory" class="form-label">Category</label>
|
|
<select class="form-select" id="articleCategory" name="category" required>
|
|
<option value="">Select Category</option>
|
|
<option value="getting-started">Getting Started</option>
|
|
<option value="user-management">User Management</option>
|
|
<option value="file-management">File Management</option>
|
|
<option value="communication">Communication</option>
|
|
<option value="security">Security & Privacy</option>
|
|
<option value="administration">Administration</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="articleBody" class="form-label">Content</label>
|
|
<textarea class="form-control" id="articleBody" name="body" rows="15" required></textarea>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="orderIndex" class="form-label">Order Index</label>
|
|
<input type="number" class="form-control" id="orderIndex" name="order_index" value="0" min="0">
|
|
<div class="form-text">Lower numbers appear first in the category</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="isPublished" name="is_published" checked>
|
|
<label class="form-check-label" for="isPublished">
|
|
Publish immediately
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Create Article</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Article Modal -->
|
|
<div class="modal fade" id="editArticleModal" tabindex="-1" aria-labelledby="editArticleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="editArticleModalLabel">Edit Help Article</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form id="editArticleForm">
|
|
<input type="hidden" id="editArticleId" name="id">
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="mb-3">
|
|
<label for="editArticleTitle" class="form-label">Title</label>
|
|
<input type="text" class="form-control" id="editArticleTitle" name="title" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label for="editArticleCategory" class="form-label">Category</label>
|
|
<select class="form-select" id="editArticleCategory" name="category" required>
|
|
<option value="">Select Category</option>
|
|
<option value="getting-started">Getting Started</option>
|
|
<option value="user-management">User Management</option>
|
|
<option value="file-management">File Management</option>
|
|
<option value="communication">Communication</option>
|
|
<option value="security">Security & Privacy</option>
|
|
<option value="administration">Administration</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="editArticleBody" class="form-label">Content</label>
|
|
<textarea class="form-control" id="editArticleBody" name="body" rows="15" required></textarea>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="editOrderIndex" class="form-label">Order Index</label>
|
|
<input type="number" class="form-control" id="editOrderIndex" name="order_index" value="0" min="0">
|
|
<div class="form-text">Lower numbers appear first in the category</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="editIsPublished" name="is_published">
|
|
<label class="form-check-label" for="editIsPublished">
|
|
Published
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Update Article</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<div class="modal fade" id="deleteArticleModal" tabindex="-1" aria-labelledby="deleteArticleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deleteArticleModalLabel">Delete Article</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Are you sure you want to delete this article? This action cannot be undone.</p>
|
|
<p class="text-muted" id="deleteArticleTitle"></p>
|
|
<input type="hidden" id="deleteArticleId" value="">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-danger" id="confirmDelete">Delete Article</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Summernote for rich text editing
|
|
$('#articleBody, #editArticleBody').summernote({
|
|
height: 400,
|
|
toolbar: [
|
|
['style', ['style']],
|
|
['font', ['bold', 'underline', 'italic', 'strikethrough', 'clear']],
|
|
['fontname', ['fontname']],
|
|
['fontsize', ['fontsize']],
|
|
['color', ['color']],
|
|
['para', ['ul', 'ol', 'paragraph']],
|
|
['height', ['height']],
|
|
['table', ['table']],
|
|
['insert', ['link', 'picture', 'video', 'hr']],
|
|
['view', ['fullscreen', 'codeview', 'help']],
|
|
['undo', ['undo', 'redo']]
|
|
],
|
|
styleTags: [
|
|
'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
|
|
],
|
|
fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
|
|
fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '24', '36'],
|
|
callbacks: {
|
|
onInit: function() {
|
|
// Ensure proper styling when modal opens
|
|
$('.note-editor').css('border-color', 'var(--border-color)');
|
|
$('.note-editing-area').css('background-color', 'var(--white)');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Load articles on page load
|
|
loadArticles();
|
|
|
|
// Handle create article form submission
|
|
document.getElementById('createArticleForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
createArticle();
|
|
});
|
|
|
|
// Handle edit article form submission
|
|
document.getElementById('editArticleForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
updateArticle();
|
|
});
|
|
|
|
// Handle delete confirmation
|
|
document.getElementById('confirmDelete').addEventListener('click', function() {
|
|
deleteArticle();
|
|
});
|
|
});
|
|
|
|
function loadArticles() {
|
|
fetch('/api/admin/help-articles')
|
|
.then(response => {
|
|
const contentType = response.headers.get('content-type');
|
|
if (!contentType || !contentType.includes('application/json')) {
|
|
return response.text().then(text => {
|
|
throw new Error(`Server returned non-JSON response: ${text.substring(0, 200)}...`);
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
const articlesList = document.getElementById('articlesList');
|
|
articlesList.innerHTML = '';
|
|
|
|
if (data.articles.length === 0) {
|
|
articlesList.innerHTML = `
|
|
<div class="col-12">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body text-center py-5">
|
|
<i class="fas fa-file-alt text-muted" style="font-size: 3rem; opacity: 0.5;"></i>
|
|
<h4 class="text-muted mt-3">No Articles Yet</h4>
|
|
<p class="text-muted">Create your first help article to get started.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const categoryNames = {
|
|
'getting-started': 'Getting Started',
|
|
'user-management': 'User Management',
|
|
'file-management': 'File Management',
|
|
'communication': 'Communication',
|
|
'security': 'Security & Privacy',
|
|
'administration': 'Administration'
|
|
};
|
|
|
|
data.articles.forEach(article => {
|
|
const card = document.createElement('div');
|
|
card.className = 'col-lg-6 col-xl-4 mb-4';
|
|
card.innerHTML = `
|
|
<div class="card article-card border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-start mb-2">
|
|
<span class="badge category-badge" style="background-color: var(--primary-color);">
|
|
${categoryNames[article.category]}
|
|
</span>
|
|
<span class="badge status-badge ${article.is_published ? 'bg-success' : 'bg-warning'}">
|
|
${article.is_published ? 'Published' : 'Draft'}
|
|
</span>
|
|
</div>
|
|
<h5 class="card-title mb-2">${article.title}</h5>
|
|
<p class="card-text text-muted small mb-3">
|
|
${article.body.substring(0, 100)}${article.body.length > 100 ? '...' : ''}
|
|
</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<small class="text-muted">
|
|
Order: ${article.order_index} | Created: ${new Date(article.created_at).toLocaleDateString()}
|
|
</small>
|
|
<div class="btn-group btn-group-sm">
|
|
<button class="btn btn-outline-primary" onclick="editArticle(${article.id})">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="btn btn-outline-danger" onclick="confirmDelete(${article.id}, '${article.title}')">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
articlesList.appendChild(card);
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading articles:', error);
|
|
showAlert('Error loading articles: ' + error.message, 'danger');
|
|
});
|
|
}
|
|
|
|
function createArticle() {
|
|
const form = document.getElementById('createArticleForm');
|
|
const formData = new FormData(form);
|
|
formData.set('body', $('#articleBody').summernote('code'));
|
|
formData.set('is_published', document.getElementById('isPublished').checked);
|
|
|
|
fetch('/api/admin/help-articles', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => {
|
|
// Check if response is JSON
|
|
const contentType = response.headers.get('content-type');
|
|
if (!contentType || !contentType.includes('application/json')) {
|
|
// If not JSON, get the text and throw an error
|
|
return response.text().then(text => {
|
|
throw new Error(`Server returned non-JSON response: ${text.substring(0, 200)}...`);
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.success) {
|
|
const modal = bootstrap.Modal.getInstance(document.getElementById('createArticleModal'));
|
|
modal.hide();
|
|
form.reset();
|
|
$('#articleBody').summernote('code', '');
|
|
loadArticles();
|
|
showAlert('Article created successfully!', 'success');
|
|
} else {
|
|
throw new Error(data.error || 'Unknown error');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error creating article:', error);
|
|
showAlert('Error creating article: ' + error.message, 'danger');
|
|
});
|
|
}
|
|
|
|
function editArticle(articleId) {
|
|
fetch(`/api/admin/help-articles/${articleId}`)
|
|
.then(response => {
|
|
const contentType = response.headers.get('content-type');
|
|
if (!contentType || !contentType.includes('application/json')) {
|
|
return response.text().then(text => {
|
|
throw new Error(`Server returned non-JSON response: ${text.substring(0, 200)}...`);
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
document.getElementById('editArticleId').value = data.article.id;
|
|
document.getElementById('editArticleTitle').value = data.article.title;
|
|
document.getElementById('editArticleCategory').value = data.article.category;
|
|
$('#editArticleBody').summernote('code', data.article.body);
|
|
document.getElementById('editOrderIndex').value = data.article.order_index;
|
|
document.getElementById('editIsPublished').checked = data.article.is_published;
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('editArticleModal'));
|
|
modal.show();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading article:', error);
|
|
showAlert('Error loading article: ' + error.message, 'danger');
|
|
});
|
|
}
|
|
|
|
function updateArticle() {
|
|
const form = document.getElementById('editArticleForm');
|
|
const formData = new FormData(form);
|
|
formData.set('body', $('#editArticleBody').summernote('code'));
|
|
formData.set('is_published', document.getElementById('editIsPublished').checked);
|
|
|
|
fetch(`/api/admin/help-articles/${document.getElementById('editArticleId').value}`, {
|
|
method: 'PUT',
|
|
body: formData
|
|
})
|
|
.then(response => {
|
|
const contentType = response.headers.get('content-type');
|
|
if (!contentType || !contentType.includes('application/json')) {
|
|
return response.text().then(text => {
|
|
throw new Error(`Server returned non-JSON response: ${text.substring(0, 200)}...`);
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.success) {
|
|
const modal = bootstrap.Modal.getInstance(document.getElementById('editArticleModal'));
|
|
modal.hide();
|
|
loadArticles();
|
|
showAlert('Article updated successfully!', 'success');
|
|
} else {
|
|
throw new Error(data.error || 'Unknown error');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error updating article:', error);
|
|
showAlert('Error updating article: ' + error.message, 'danger');
|
|
});
|
|
}
|
|
|
|
function confirmDelete(articleId, title) {
|
|
document.getElementById('deleteArticleId').value = articleId;
|
|
document.getElementById('deleteArticleTitle').textContent = title;
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('deleteArticleModal'));
|
|
modal.show();
|
|
}
|
|
|
|
function deleteArticle() {
|
|
const articleId = document.getElementById('deleteArticleId').value;
|
|
|
|
fetch(`/api/admin/help-articles/${articleId}`, {
|
|
method: 'DELETE'
|
|
})
|
|
.then(response => {
|
|
const contentType = response.headers.get('content-type');
|
|
if (!contentType || !contentType.includes('application/json')) {
|
|
return response.text().then(text => {
|
|
throw new Error(`Server returned non-JSON response: ${text.substring(0, 200)}...`);
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.success) {
|
|
const modal = bootstrap.Modal.getInstance(document.getElementById('deleteArticleModal'));
|
|
modal.hide();
|
|
loadArticles();
|
|
showAlert('Article deleted successfully!', 'success');
|
|
} else {
|
|
throw new Error(data.error || 'Unknown error');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error deleting article:', error);
|
|
showAlert('Error deleting article: ' + error.message, 'danger');
|
|
});
|
|
}
|
|
|
|
function showAlert(message, type) {
|
|
const alertHtml = `
|
|
<div class="alert alert-${type} alert-dismissible fade show" role="alert">
|
|
<i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'} me-2"></i>
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
`;
|
|
const container = document.querySelector('.container-fluid');
|
|
container.insertAdjacentHTML('afterbegin', alertHtml);
|
|
}
|
|
</script>
|
|
{% endblock %} |