413 lines
18 KiB
HTML
413 lines
18 KiB
HTML
{% extends "common/base.html" %}
|
|
|
|
{% block title %}Support Articles - DocuPulse{% 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);
|
|
}
|
|
</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>
|
|
</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://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize Summernote for rich text editing
|
|
$('#articleBody, #editArticleBody').summernote({
|
|
height: 300,
|
|
toolbar: [
|
|
['style', ['style']],
|
|
['font', ['bold', 'underline', 'italic', 'clear']],
|
|
['fontname', ['fontname']],
|
|
['color', ['color']],
|
|
['para', ['ul', 'ol', 'paragraph']],
|
|
['height', ['height']],
|
|
['table', ['table']],
|
|
['insert', ['link', 'picture']],
|
|
['view', ['fullscreen', 'codeview', 'help']]
|
|
],
|
|
styleTags: [
|
|
'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
|
|
]
|
|
});
|
|
|
|
// Load articles on page load
|
|
loadArticles();
|
|
|
|
// Handle create article form submission
|
|
$('#createArticleForm').on('submit', function(e) {
|
|
e.preventDefault();
|
|
createArticle();
|
|
});
|
|
|
|
// Handle edit article form submission
|
|
$('#editArticleForm').on('submit', function(e) {
|
|
e.preventDefault();
|
|
updateArticle();
|
|
});
|
|
|
|
// Handle delete confirmation
|
|
$('#confirmDelete').on('click', function() {
|
|
deleteArticle();
|
|
});
|
|
});
|
|
|
|
function loadArticles() {
|
|
$.get('/api/admin/help-articles', function(data) {
|
|
const articlesList = $('#articlesList');
|
|
articlesList.empty();
|
|
|
|
if (data.articles.length === 0) {
|
|
articlesList.html(`
|
|
<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;
|
|
}
|
|
|
|
data.articles.forEach(article => {
|
|
const categoryNames = {
|
|
'getting-started': 'Getting Started',
|
|
'user-management': 'User Management',
|
|
'file-management': 'File Management',
|
|
'communication': 'Communication',
|
|
'security': 'Security & Privacy',
|
|
'administration': 'Administration'
|
|
};
|
|
|
|
const card = $(`
|
|
<div class="col-lg-6 col-xl-4 mb-4">
|
|
<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>
|
|
</div>
|
|
`);
|
|
articlesList.append(card);
|
|
});
|
|
});
|
|
}
|
|
|
|
function createArticle() {
|
|
const formData = new FormData($('#createArticleForm')[0]);
|
|
formData.set('body', $('#articleBody').summernote('code'));
|
|
formData.set('is_published', $('#isPublished').is(':checked'));
|
|
|
|
$.ajax({
|
|
url: '/api/admin/help-articles',
|
|
method: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(response) {
|
|
$('#createArticleModal').modal('hide');
|
|
$('#createArticleForm')[0].reset();
|
|
$('#articleBody').summernote('code', '');
|
|
loadArticles();
|
|
showAlert('Article created successfully!', 'success');
|
|
},
|
|
error: function(xhr) {
|
|
showAlert('Error creating article: ' + xhr.responseJSON?.error || 'Unknown error', 'danger');
|
|
}
|
|
});
|
|
}
|
|
|
|
function editArticle(articleId) {
|
|
$.get(`/api/admin/help-articles/${articleId}`, function(data) {
|
|
$('#editArticleId').val(data.article.id);
|
|
$('#editArticleTitle').val(data.article.title);
|
|
$('#editArticleCategory').val(data.article.category);
|
|
$('#editArticleBody').summernote('code', data.article.body);
|
|
$('#editOrderIndex').val(data.article.order_index);
|
|
$('#editIsPublished').prop('checked', data.article.is_published);
|
|
$('#editArticleModal').modal('show');
|
|
});
|
|
}
|
|
|
|
function updateArticle() {
|
|
const formData = new FormData($('#editArticleForm')[0]);
|
|
formData.set('body', $('#editArticleBody').summernote('code'));
|
|
formData.set('is_published', $('#editIsPublished').is(':checked'));
|
|
|
|
$.ajax({
|
|
url: `/api/admin/help-articles/${$('#editArticleId').val()}`,
|
|
method: 'PUT',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(response) {
|
|
$('#editArticleModal').modal('hide');
|
|
loadArticles();
|
|
showAlert('Article updated successfully!', 'success');
|
|
},
|
|
error: function(xhr) {
|
|
showAlert('Error updating article: ' + xhr.responseJSON?.error || 'Unknown error', 'danger');
|
|
}
|
|
});
|
|
}
|
|
|
|
function confirmDelete(articleId, title) {
|
|
$('#deleteArticleId').val(articleId);
|
|
$('#deleteArticleTitle').text(title);
|
|
$('#deleteArticleModal').modal('show');
|
|
}
|
|
|
|
function deleteArticle() {
|
|
const articleId = $('#deleteArticleId').val();
|
|
|
|
$.ajax({
|
|
url: `/api/admin/help-articles/${articleId}`,
|
|
method: 'DELETE',
|
|
success: function(response) {
|
|
$('#deleteArticleModal').modal('hide');
|
|
loadArticles();
|
|
showAlert('Article deleted successfully!', 'success');
|
|
},
|
|
error: function(xhr) {
|
|
showAlert('Error deleting article: ' + xhr.responseJSON?.error || 'Unknown error', '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>
|
|
`;
|
|
$('.container-fluid').prepend(alertHtml);
|
|
}
|
|
</script>
|
|
{% endblock %} |