websites/flask-vim-docs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

working preview.. for view

Browse source
This commit is contained in:
pika 2025-04-17 11:27:48 +02:00
parent 9e2d3c9707
commit 17885b005c
4 changed files with 652 additions and 241 deletions
Download patch file Download diff file Expand all files Collapse all files

285
app/templates/category.html
View file

@ -13,9 +13,12 @@
<a href="{{ url_for('main.new_category') }}?parent_id={{ category.id }}" class="inline-flex items-center px-4 py-2 bg-primary/80 text-black rounded-md hover:bg-primary-dark transition-colors ml-2">
<i class="mdi mdi-folder-plus-outline mr-2"></i> New Subcategory
</a>
<button id="edit-category-btn" class="inline-flex items-center px-4 py-2 bg-gray-700 text-white rounded-md hover:bg-gray-600 transition-colors ml-2">
<a href="{{ url_for('main.edit_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-pencil mr-2"></i> Edit Category
</button>
</a>
<a href="{{ url_for('main.category_all_documents', 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-file-document-multiple-outline mr-2"></i> All Documents
</a>
{% endblock %}
{% block content %}
@ -85,14 +88,14 @@
{% endfor %}
<!-- Add subcategory card -->
<div id="add-subcategory-card" class="bg-gray-800/50 border-2 border-dashed border-gray-700 rounded-lg overflow-hidden hover:border-primary/50 hover:bg-gray-800/80 transition-all cursor-pointer">
<div class="p-5 h-full flex flex-col items-center justify-center text-center">
<div class="bg-gray-800/50 border-2 border-dashed border-gray-700 rounded-lg overflow-hidden hover:border-primary/50 hover:bg-gray-800/80 transition-all cursor-pointer">
<a href="{{ url_for('main.new_category') }}?parent_id={{ category.id }}" class="block p-5 h-full flex flex-col items-center justify-center text-center">
<div class="w-12 h-12 rounded-full bg-gray-700/50 flex items-center justify-center mb-3">
<i class="mdi mdi-folder-plus-outline text-2xl text-gray-500"></i>
</div>
<h3 class="text-gray-400 font-medium mb-1">New Subcategory</h3>
<p class="text-gray-500 text-sm">Add a subcategory to {{ category.name }}</p>
</div>
</a>
</div>
</div>
</div>
@ -102,12 +105,25 @@
<div>
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-white">Documents</h2>
<a href="{{ url_for('main.new_document') }}?category={{ category.id }}" class="icon-button" title="New Document">
<i class="mdi mdi-plus"></i>
</a>
<!-- View toggle buttons -->
<div class="flex items-center">
<div class="flex bg-gray-700 rounded-md p-1 mr-2">
<button id="grid-view-btn" class="px-3 py-1 rounded text-sm flex items-center active-view">
<i class="mdi mdi-view-grid mr-1"></i> Grid
</button>
<button id="list-view-btn" class="px-3 py-1 rounded text-sm flex items-center">
<i class="mdi mdi-view-list mr-1"></i> List
</button>
</div>
<a href="{{ url_for('main.new_document') }}?category={{ category.id }}" class="icon-button" title="New Document">
<i class="mdi mdi-plus"></i>
</a>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Grid view (default) -->
<div id="grid-view" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{% if category.documents.count() > 0 %}
{% for doc in category.documents %}
<div class="bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow">
@ -164,80 +180,59 @@
</div>
{% endif %}
</div>
</div>
</div>
<!-- Category Modal -->
<div id="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 id="modal-title" class="text-lg font-medium text-white">Add Subcategory</h3>
<button class="close-modal text-gray-400 hover:text-white">
<i class="mdi mdi-close text-lg"></i>
</button>
</div>
<div class="p-6">
<form id="category-form" class="space-y-4">
<input type="hidden" id="category-id" value="">
<div>
<label for="category-name" class="block text-sm font-medium text-gray-400 mb-1">Name</label>
<input type="text" id="category-name" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
</div>
<div>
<label for="category-icon" class="block text-sm font-medium text-gray-400 mb-1">Icon</label>
<div class="flex items-center">
<input type="text" id="category-icon" value="mdi-folder-outline" class="flex-1 px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
<div class="ml-3 w-10 h-10 flex items-center justify-center text-primary bg-primary/10 rounded-md">
<i id="icon-preview" class="mdi mdi-folder-outline text-xl"></i>
<!-- List view (initially hidden) -->
<div id="list-view" class="hidden">
<div class="bg-gray-800 rounded-lg shadow">
{% if category.documents.count() > 0 %}
<div class="divide-y divide-gray-700">
{% for doc in category.documents %}
<div class="document-list-item group">
<div class="flex items-center justify-between py-3 px-4 hover:bg-gray-700/50 transition-colors">
<div class="flex items-center flex-1 min-w-0">
<i class="mdi mdi-file-document-outline text-gray-400 mr-3"></i>
<div class="flex-1 min-w-0">
<a href="{{ url_for('main.view_document', doc_id=doc.id) }}" class="text-gray-300 hover:text-primary transition-colors block font-medium truncate">{{ doc.title }}</a>
<div class="mt-1 flex items-center text-xs text-gray-500">
<i class="mdi mdi-calendar-outline mr-1"></i>
<span>{{ doc.updated_date.strftime('%b %d, %Y') }}</span>
{% if doc.tags %}
<span class="mx-2">•</span>
<div class="flex gap-1">
{% for tag in doc.tags %}
<span class="text-xs px-1.5 py-0.5 bg-primary/20 text-primary rounded-full">{{ tag.name }}</span>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
<div class="flex items-center gap-2 hidden group-hover:flex">
<a href="{{ url_for('main.view_document', doc_id=doc.id) }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="View Document">
<i class="mdi mdi-eye-outline"></i>
</a>
<a href="{{ url_for('main.edit_document', doc_id=doc.id) }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Edit Document">
<i class="mdi mdi-pencil-outline"></i>
</a>
<a href="{{ url_for('main.export_document', doc_id=doc.id) }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Export Document">
<i class="mdi mdi-download-outline"></i>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="mt-2 flex flex-wrap gap-2">
<button type="button" data-icon="mdi-folder-outline" class="icon-select w-8 h-8 flex items-center justify-center bg-gray-700 rounded-md text-primary hover:bg-gray-600">
<i class="mdi mdi-folder-outline"></i>
</button>
<button type="button" data-icon="mdi-folder-text-outline" class="icon-select w-8 h-8 flex items-center justify-center bg-gray-700 rounded-md text-primary hover:bg-gray-600">
<i class="mdi mdi-folder-text-outline"></i>
</button>
<button type="button" data-icon="mdi-code-braces" class="icon-select w-8 h-8 flex items-center justify-center bg-gray-700 rounded-md text-primary hover:bg-gray-600">
<i class="mdi mdi-code-braces"></i>
</button>
<button type="button" data-icon="mdi-database" class="icon-select w-8 h-8 flex items-center justify-center bg-gray-700 rounded-md text-primary hover:bg-gray-600">
<i class="mdi mdi-database"></i>
</button>
<button type="button" data-icon="mdi-web" class="icon-select w-8 h-8 flex items-center justify-center bg-gray-700 rounded-md text-primary hover:bg-gray-600">
<i class="mdi mdi-web"></i>
</button>
<button type="button" data-icon="mdi-book-outline" class="icon-select w-8 h-8 flex items-center justify-center bg-gray-700 rounded-md text-primary hover:bg-gray-600">
<i class="mdi mdi-book-outline"></i>
</button>
{% else %}
<div class="p-8 text-center">
<i class="mdi mdi-file-document-outline text-6xl text-gray-700 mb-3"></i>
<h3 class="text-lg text-gray-400 mb-3">No documents in this category</h3>
<p class="text-gray-500 mb-4">Create your first document in this category</p>
<a href="{{ url_for('main.new_document') }}?category={{ category.id }}" 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-plus mr-2"></i> Create Document
</a>
</div>
</div>
<div>
<label for="category-description" class="block text-sm font-medium text-gray-400 mb-1">Description (Optional)</label>
<input type="text" id="category-description" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
</div>
<div>
<label for="category-parent" class="block text-sm font-medium text-gray-400 mb-1">Parent Category</label>
<select id="category-parent" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
<option value="">None</option>
<option value="{{ category.id }}" selected>{{ category.name }}</option>
</select>
</div>
<div class="pt-4 flex justify-end space-x-3">
<button type="button" id="cancel-btn" class="px-4 py-2 bg-gray-700 text-white rounded-md hover:bg-gray-600 transition-colors">
Cancel
</button>
<button type="submit" class="px-4 py-2 bg-primary text-black rounded-md hover:bg-primary-dark transition-colors">
Save
</button>
</div>
</form>
{% endif %}
</div>
</div>
</div>
</div>
@ -246,102 +241,6 @@
{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const modal = document.getElementById('category-modal');
const addBtn = document.getElementById('add-subcategory-btn');
const addCard = document.getElementById('add-subcategory-card');
const editBtn = document.getElementById('edit-category-btn');
const closeBtn = document.querySelector('.close-modal');
const cancelBtn = document.getElementById('cancel-btn');
const form = document.getElementById('category-form');
const modalTitle = document.getElementById('modal-title');
const iconInput = document.getElementById('category-icon');
const iconPreview = document.getElementById('icon-preview');
const iconSelectBtns = document.querySelectorAll('.icon-select');
// Open modal
function openModal(isEdit = false) {
if (isEdit) {
// Edit the current category
modalTitle.textContent = 'Edit Category';
document.getElementById('category-id').value = '{{ category.id }}';
document.getElementById('category-name').value = '{{ category.name }}';
document.getElementById('category-icon').value = '{{ category.icon }}';
document.getElementById('category-parent').value = '{{ category.parent_id }}' || '';
iconPreview.className = 'mdi {{ category.icon }} text-xl';
} else {
// Add new subcategory
modalTitle.textContent = 'Add Subcategory';
document.getElementById('category-id').value = '';
document.getElementById('category-name').value = '';
document.getElementById('category-icon').value = 'mdi-folder-outline';
document.getElementById('category-parent').value = '{{ category.id }}';
iconPreview.className = 'mdi mdi-folder-outline text-xl';
}
modal.classList.remove('hidden');
document.getElementById('category-name').focus();
}
// Close modal
function closeModal() {
modal.classList.add('hidden');
}
// Update icon preview
if (iconInput) {
iconInput.addEventListener('input', function() {
iconPreview.className = 'mdi ' + this.value + ' text-xl';
});
}
// Icon selection
iconSelectBtns.forEach(btn => {
btn.addEventListener('click', function() {
const icon = this.getAttribute('data-icon');
iconInput.value = icon;
iconPreview.className = 'mdi ' + icon + ' text-xl';
// Highlight selected icon
iconSelectBtns.forEach(b => b.classList.remove('ring-2', 'ring-primary'));
this.classList.add('ring-2', 'ring-primary');
});
});
// Event listeners
if (addBtn) addBtn.addEventListener('click', () => openModal(false));
if (addCard) addCard.addEventListener('click', () => openModal(false));
if (editBtn) editBtn.addEventListener('click', () => openModal(true));
if (closeBtn) closeBtn.addEventListener('click', closeModal);
if (cancelBtn) cancelBtn.addEventListener('click', closeModal);
// Form submission
if (form) {
form.addEventListener('submit', function(e) {
e.preventDefault();
const formData = {
id: document.getElementById('category-id').value || null,
name: document.getElementById('category-name').value,
icon: document.getElementById('category-icon').value,
description: document.getElementById('category-description').value,
parent_id: document.getElementById('category-parent').value || null
};
fetch('/api/category', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
window.location.reload();
})
.catch(error => console.error('Error:', error));
});
}
// Dropdown functionality for document cards
document.querySelectorAll('.dropdown button').forEach(btn => {
btn.addEventListener('click', function(e) {
@ -362,6 +261,42 @@
menu.classList.add('hidden');
});
});
// View toggle functionality
const gridViewBtn = document.getElementById('grid-view-btn');
const listViewBtn = document.getElementById('list-view-btn');
const gridView = document.getElementById('grid-view');
const listView = document.getElementById('list-view');
if (gridViewBtn && listViewBtn && gridView && listView) {
// Load view preference from localStorage
const viewPreference = localStorage.getItem('categoryViewPreference') || 'grid';
// Set initial view based on preference
if (viewPreference === 'list') {
gridView.classList.add('hidden');
listView.classList.remove('hidden');
gridViewBtn.classList.remove('active-view');
listViewBtn.classList.add('active-view');
}
// Toggle views
gridViewBtn.addEventListener('click', function() {
gridView.classList.remove('hidden');
listView.classList.add('hidden');
gridViewBtn.classList.add('active-view');
listViewBtn.classList.remove('active-view');
localStorage.setItem('categoryViewPreference', 'grid');
});
listViewBtn.addEventListener('click', function() {
listView.classList.remove('hidden');
gridView.classList.add('hidden');
listViewBtn.classList.add('active-view');
gridViewBtn.classList.remove('active-view');
localStorage.setItem('categoryViewPreference', 'list');
});
}
});
</script>
{% endblock %}