wip
This commit is contained in:
pika
parent
17885b005c
commit
f5c8e9ee23
4 changed files with 756 additions and 44 deletions
|
|
@ -5,9 +5,17 @@
|
|||
{% block header_title %}{% if category %}Edit Category{% else %}New Category{% endif %}{% endblock %}
|
||||
|
||||
{% block header_actions %}
|
||||
<button id="save-category" class="inline-flex items-center px-4 py-2 bg-primary text-black rounded-md hover:bg-primary-dark transition-colors">
|
||||
<button id="save-button" class="inline-flex items-center px-4 py-2 bg-primary text-black rounded-md hover:bg-primary-dark transition-colors">
|
||||
<i class="mdi mdi-content-save mr-2"></i> Save
|
||||
</button>
|
||||
<a href="{{ url_for('main.view_category', category_id=category.id) }}" class="inline-flex items-center px-4 py-2 bg-gray-700 text-white rounded-md hover:bg-gray-600 transition-colors ml-2">
|
||||
<i class="mdi mdi-arrow-left mr-2"></i> Back
|
||||
</a>
|
||||
{% if category and not category.is_root %}
|
||||
<button id="delete-category-btn" class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-500 transition-colors ml-2">
|
||||
<i class="mdi mdi-delete mr-2"></i> Delete
|
||||
</button>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
|
@ -181,12 +189,65 @@
|
|||
<i class="mdi mdi-check-circle mr-2"></i>
|
||||
<span>Category saved successfully!</span>
|
||||
</div>
|
||||
|
||||
<!-- Delete Category Modal -->
|
||||
<div id="delete-category-modal" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center hidden">
|
||||
<div class="bg-gray-800 rounded-lg shadow-lg w-full max-w-md mx-4">
|
||||
<div class="flex items-center justify-between p-4 border-b border-gray-700">
|
||||
<h3 class="text-lg font-medium text-white">Delete Category</h3>
|
||||
<button id="close-delete-modal" class="text-gray-400 hover:text-white">
|
||||
<i class="mdi mdi-close text-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<p class="text-gray-300 mb-6">
|
||||
Are you sure you want to delete <span class="font-semibold text-white">{{ category.name if category else 'this category' }}</span>?
|
||||
{% if category and (category.documents.count() > 0 or category.children.count() > 0) %}
|
||||
This category contains {{ category.documents.count() }} document(s) and {{ category.children.count() }} subcategory(ies).
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
{% if category and (category.documents.count() > 0 or category.children.count() > 0) %}
|
||||
<div class="mb-6">
|
||||
<p class="text-white mb-2">What should happen to the contents?</p>
|
||||
<div class="space-y-3">
|
||||
<label class="flex items-start">
|
||||
<input type="radio" name="delete-option" value="move" class="mt-1 mr-2" checked>
|
||||
<div>
|
||||
<span class="text-gray-300">Move contents to parent/root category</span>
|
||||
<p class="text-xs text-gray-500">Documents and subcategories will be preserved and moved to the parent category</p>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex items-start">
|
||||
<input type="radio" name="delete-option" value="delete" class="mt-1 mr-2">
|
||||
<div>
|
||||
<span class="text-gray-300">Delete all contents</span>
|
||||
<p class="text-xs text-gray-500">All documents and subcategories will be permanently deleted</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex justify-end space-x-3">
|
||||
<button id="cancel-delete-btn" class="px-4 py-2 bg-gray-700 text-white rounded-md hover:bg-gray-600 transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
<button id="confirm-delete-btn" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-500 transition-colors">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const saveButton = document.getElementById('save-category');
|
||||
const saveButton = document.getElementById('save-button');
|
||||
const nameInput = document.getElementById('category-name');
|
||||
const iconInput = document.getElementById('category-icon');
|
||||
const descriptionInput = document.getElementById('category-description');
|
||||
|
|
@ -444,6 +505,93 @@
|
|||
iconSearchInput.addEventListener('input', function() {
|
||||
populateIconsGrid(this.value);
|
||||
});
|
||||
|
||||
// Delete Category Functionality
|
||||
const deleteBtn = document.getElementById('delete-category-btn');
|
||||
const deleteModal = document.getElementById('delete-category-modal');
|
||||
const closeDeleteModalBtn = document.getElementById('close-delete-modal');
|
||||
const cancelDeleteBtn = document.getElementById('cancel-delete-btn');
|
||||
const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
|
||||
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener('click', function() {
|
||||
deleteModal.classList.remove('hidden');
|
||||
});
|
||||
}
|
||||
|
||||
if (closeDeleteModalBtn) {
|
||||
closeDeleteModalBtn.addEventListener('click', function() {
|
||||
deleteModal.classList.add('hidden');
|
||||
});
|
||||
}
|
||||
|
||||
if (cancelDeleteBtn) {
|
||||
cancelDeleteBtn.addEventListener('click', function() {
|
||||
deleteModal.classList.add('hidden');
|
||||
});
|
||||
}
|
||||
|
||||
if (confirmDeleteBtn) {
|
||||
confirmDeleteBtn.addEventListener('click', function() {
|
||||
// Get selected option
|
||||
const deleteOption = document.querySelector('input[name="delete-option"]:checked')?.value || 'move';
|
||||
const queryParams = deleteOption === 'delete' ? '' : '?preserve_contents=true';
|
||||
|
||||
// Send delete request
|
||||
fetch(`/api/category/{{ category.id if category else '' }}${queryParams}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token() }}'
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Server responded with an error: ' + response.status);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log("Category deleted successfully:", data);
|
||||
|
||||
// Show save notification
|
||||
const notification = document.createElement('div');
|
||||
notification.className = 'fixed bottom-4 right-4 bg-primary/90 text-white px-4 py-2 rounded-md shadow-lg transform translate-y-0 opacity-100 transition-all duration-300';
|
||||
notification.innerHTML = '<i class="mdi mdi-check-circle mr-2"></i> Category deleted successfully';
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Hide notification after 3 seconds
|
||||
setTimeout(() => {
|
||||
notification.classList.add('translate-y-16', 'opacity-0');
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
}, 3000);
|
||||
|
||||
// Redirect to home page or parent category
|
||||
setTimeout(() => {
|
||||
{% if category and category.parent_id %}
|
||||
window.location.href = '/category/{{ category.parent_id }}';
|
||||
{% else %}
|
||||
window.location.href = '/';
|
||||
{% endif %}
|
||||
}, 1000);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error deleting category:', error);
|
||||
|
||||
// Show error notification
|
||||
const notification = document.createElement('div');
|
||||
notification.className = 'fixed bottom-4 right-4 bg-red-600/90 text-white px-4 py-2 rounded-md shadow-lg transform translate-y-0 opacity-100 transition-all duration-300';
|
||||
notification.innerHTML = '<i class="mdi mdi-alert-circle mr-2"></i> Error deleting category';
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Hide notification after 3 seconds
|
||||
setTimeout(() => {
|
||||
notification.classList.add('translate-y-16', 'opacity-0');
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
}, 3000);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue