feat: add web UI with login, CRUD, admin, and API key management
- Add login page with JWT authentication - Add dashboard with stats and quick actions - Add links management page (full CRUD with search) - Add collections management page - Add API key management page with copy-to-clipboard - Add admin user management page (admin only) - Fix UUID type mismatches across all endpoints - Add updated_at column to api_keys and audit_log in schema.sql - Fix DB_PASSWORD default in docker-compose.yml - Add PyJWT to requirements.txt - Fix API docs URL (/docs instead of /api/docs) - Improve JS error handling (show actual messages) - Rewrite conftest.py with proper DB lifecycle management - Add 42 new integration tests (84 total, all passing) - test_admin.py: 15 tests for admin endpoints - test_auth_extended.py: 9 tests for API key CRUD - test_tags.py: 12 tests for tag endpoints - test_sync.py: 6 tests for sync endpoints
This commit is contained in:
DavidSaylor
144
LinkSyncServer/static/js/collections-page.js
Normal file
144
LinkSyncServer/static/js/collections-page.js
Normal file
@@ -0,0 +1,144 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const collectionsList = document.getElementById('collections-list');
|
||||
const modal = document.getElementById('collection-modal');
|
||||
const deleteModal = document.getElementById('delete-collection-modal');
|
||||
const form = document.getElementById('collection-form');
|
||||
let deleteTargetId = null;
|
||||
|
||||
async function loadCollections() {
|
||||
try {
|
||||
const collections = await LinkSync.getCollections();
|
||||
renderCollections(Array.isArray(collections) ? collections : []);
|
||||
} catch (err) {
|
||||
collectionsList.innerHTML = `<div class="empty-state"><p>Failed to load collections: ${err.message}</p></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderCollections(collections) {
|
||||
if (!collections || collections.length === 0) {
|
||||
collectionsList.innerHTML = '<div class="empty-state"><p>No collections found.</p><button class="btn btn-primary" id="empty-add-col-btn">+ Create your first collection</button></div>';
|
||||
document.getElementById('empty-add-col-btn').addEventListener('click', openCollectionModal);
|
||||
return;
|
||||
}
|
||||
|
||||
collectionsList.innerHTML = collections.map(col => `
|
||||
<div class="collection-card">
|
||||
<h3>${escapeHtml(col.name)}</h3>
|
||||
<p>${escapeHtml(col.description || 'No description')}</p>
|
||||
<div class="meta">
|
||||
<span class="badge badge-${col.query_type}">${col.query_type}</span>
|
||||
<span class="badge ${col.is_public ? 'badge-public' : 'badge-private'}">${col.is_public ? 'Public' : 'Private'}</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn btn-sm btn-outline" data-action="edit" data-id="${col.id}">Edit</button>
|
||||
<button class="btn btn-sm btn-danger" data-action="delete" data-id="${col.id}">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
collectionsList.querySelectorAll('[data-action="edit"]').forEach(btn => {
|
||||
btn.addEventListener('click', () => editCollection(btn.dataset.id));
|
||||
});
|
||||
collectionsList.querySelectorAll('[data-action="delete"]').forEach(btn => {
|
||||
btn.addEventListener('click', () => confirmDeleteCollection(btn.dataset.id));
|
||||
});
|
||||
}
|
||||
|
||||
function openCollectionModal(col = null) {
|
||||
document.getElementById('collection-modal-title').textContent = col ? 'Edit Collection' : 'Create Collection';
|
||||
document.getElementById('collection-id').value = col ? col.id : '';
|
||||
document.getElementById('collection-name').value = col ? col.name : '';
|
||||
document.getElementById('collection-description').value = col ? (col.description || '') : '';
|
||||
document.getElementById('collection-type').value = col ? col.query_type : 'static';
|
||||
document.getElementById('collection-public').checked = col ? col.is_public : false;
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
|
||||
async function editCollection(id) {
|
||||
try {
|
||||
const collections = await LinkSync.getCollections();
|
||||
const col = (Array.isArray(collections) ? collections : []).find(c => c.id === id);
|
||||
if (col) openCollectionModal(col);
|
||||
} catch (err) {
|
||||
alert('Failed to load collection details');
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDeleteCollection(id) {
|
||||
deleteTargetId = id;
|
||||
deleteModal.style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
modal.style.display = 'none';
|
||||
form.reset();
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
deleteModal.style.display = 'none';
|
||||
deleteTargetId = null;
|
||||
}
|
||||
|
||||
document.getElementById('new-collection-btn').addEventListener('click', () => openCollectionModal());
|
||||
document.getElementById('collection-modal-close').addEventListener('click', closeModal);
|
||||
document.getElementById('collection-cancel-btn').addEventListener('click', closeModal);
|
||||
document.getElementById('delete-collection-cancel-btn').addEventListener('click', closeDeleteModal);
|
||||
|
||||
modal.querySelector('.modal-overlay').addEventListener('click', closeModal);
|
||||
deleteModal.querySelector('.modal-overlay').addEventListener('click', closeDeleteModal);
|
||||
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
const saveBtn = document.getElementById('collection-save-btn');
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.textContent = 'Saving...';
|
||||
|
||||
const id = document.getElementById('collection-id').value;
|
||||
const data = {
|
||||
name: document.getElementById('collection-name').value,
|
||||
description: document.getElementById('collection-description').value || null,
|
||||
query_type: document.getElementById('collection-type').value,
|
||||
is_public: document.getElementById('collection-public').checked,
|
||||
};
|
||||
|
||||
try {
|
||||
if (id) {
|
||||
await LinkSync.updateCollection(id, data);
|
||||
} else {
|
||||
await LinkSync.createCollection(data);
|
||||
}
|
||||
closeModal();
|
||||
loadCollections();
|
||||
} catch (err) {
|
||||
alert('Failed to save collection: ' + err.message);
|
||||
} finally {
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = 'Save';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('confirm-delete-collection-btn').addEventListener('click', async function() {
|
||||
if (!deleteTargetId) return;
|
||||
try {
|
||||
await LinkSync.deleteCollection(deleteTargetId);
|
||||
closeDeleteModal();
|
||||
loadCollections();
|
||||
} catch (err) {
|
||||
alert('Failed to delete collection: ' + err.message);
|
||||
}
|
||||
});
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('action') === 'new') {
|
||||
openCollectionModal();
|
||||
}
|
||||
|
||||
loadCollections();
|
||||
|
||||
function escapeHtml(str) {
|
||||
if (!str) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user