Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

support articles

Browse Source
This commit is contained in:
Kobe
2025-06-24 09:43:31 +02:00
parent fed00ff2a0
commit 875e20304b
11 changed files with 1018 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

402
templates/admin/support_articles.html
View File

@@ -2,6 +2,37 @@
{% 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">
@@ -10,18 +41,373 @@
<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>
<div class="card border-0 shadow-sm">
<div class="card-body">
<div class="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">Support Articles</h4>
<p class="text-muted">Content coming soon...</p>
</div>
</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 %}