Sets, Parts and Minifigures have pagination now
This commit is contained in:
@@ -1,4 +1,11 @@
|
||||
// Minifigures page functionality
|
||||
|
||||
// Check if we're in pagination mode (server-side) or original mode (client-side)
|
||||
function isPaginationMode() {
|
||||
const tableElement = document.querySelector('#minifigures');
|
||||
return tableElement && tableElement.getAttribute('data-table') === 'false';
|
||||
}
|
||||
|
||||
function filterByOwner() {
|
||||
const select = document.getElementById('filter-owner');
|
||||
const selectedOwner = select.value;
|
||||
@@ -10,6 +17,11 @@ function filterByOwner() {
|
||||
currentUrl.searchParams.set('owner', selectedOwner);
|
||||
}
|
||||
|
||||
// Reset to page 1 when filtering
|
||||
if (isPaginationMode()) {
|
||||
currentUrl.searchParams.set('page', '1');
|
||||
}
|
||||
|
||||
window.location.href = currentUrl.toString();
|
||||
}
|
||||
|
||||
@@ -46,29 +58,73 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
}
|
||||
|
||||
if (searchInput && searchClear) {
|
||||
// Wait for table to be initialized by setup_tables
|
||||
setTimeout(() => {
|
||||
const tableElement = document.querySelector('table[data-table="true"]');
|
||||
if (tableElement && window.brickTableInstance) {
|
||||
// Enable custom search for minifigures table
|
||||
window.brickTableInstance.table.searchable = true;
|
||||
if (isPaginationMode()) {
|
||||
// PAGINATION MODE - Server-side search
|
||||
const searchForm = document.createElement('form');
|
||||
searchForm.style.display = 'none';
|
||||
searchInput.parentNode.appendChild(searchForm);
|
||||
searchForm.appendChild(searchInput.cloneNode(true));
|
||||
|
||||
// Connect search input to table
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
window.brickTableInstance.table.search(e.target.value);
|
||||
});
|
||||
// Handle Enter key for search
|
||||
searchInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
performServerSearch();
|
||||
}
|
||||
});
|
||||
|
||||
// Clear search
|
||||
searchClear.addEventListener('click', () => {
|
||||
searchInput.value = '';
|
||||
window.brickTableInstance.table.search('');
|
||||
});
|
||||
|
||||
// Setup sort buttons
|
||||
setupSortButtons();
|
||||
// Handle search button click (if exists)
|
||||
const searchButton = document.querySelector('[data-search-trigger]');
|
||||
if (searchButton) {
|
||||
searchButton.addEventListener('click', performServerSearch);
|
||||
}
|
||||
}, 100);
|
||||
|
||||
// Clear search
|
||||
searchClear.addEventListener('click', () => {
|
||||
searchInput.value = '';
|
||||
performServerSearch();
|
||||
});
|
||||
|
||||
function performServerSearch() {
|
||||
const currentUrl = new URL(window.location);
|
||||
const searchQuery = searchInput.value.trim();
|
||||
|
||||
if (searchQuery) {
|
||||
currentUrl.searchParams.set('search', searchQuery);
|
||||
} else {
|
||||
currentUrl.searchParams.delete('search');
|
||||
}
|
||||
|
||||
// Reset to page 1 when searching
|
||||
currentUrl.searchParams.set('page', '1');
|
||||
window.location.href = currentUrl.toString();
|
||||
}
|
||||
|
||||
} else {
|
||||
// ORIGINAL MODE - Client-side search with Simple DataTables
|
||||
setTimeout(() => {
|
||||
const tableElement = document.querySelector('table[data-table="true"]');
|
||||
if (tableElement && window.brickTableInstance) {
|
||||
// Enable custom search for minifigures table
|
||||
window.brickTableInstance.table.searchable = true;
|
||||
|
||||
// Connect search input to table
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
window.brickTableInstance.table.search(e.target.value);
|
||||
});
|
||||
|
||||
// Clear search
|
||||
searchClear.addEventListener('click', () => {
|
||||
searchInput.value = '';
|
||||
window.brickTableInstance.table.search('');
|
||||
});
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
// Setup sort buttons for both modes
|
||||
setupSortButtons();
|
||||
});
|
||||
|
||||
function setupSortButtons() {
|
||||
@@ -81,67 +137,100 @@ function setupSortButtons() {
|
||||
const attribute = button.dataset.sortAttribute;
|
||||
const isDesc = button.dataset.sortDesc === 'true';
|
||||
|
||||
// Get column index based on attribute
|
||||
const columnMap = {
|
||||
'name': 1,
|
||||
'parts': 2,
|
||||
'quantity': 3,
|
||||
'missing': 4,
|
||||
'damaged': 5,
|
||||
'sets': 6
|
||||
};
|
||||
if (isPaginationMode()) {
|
||||
// PAGINATION MODE - Server-side sorting
|
||||
const currentUrl = new URL(window.location);
|
||||
const currentSort = currentUrl.searchParams.get('sort');
|
||||
const currentOrder = currentUrl.searchParams.get('order');
|
||||
|
||||
const columnIndex = columnMap[attribute];
|
||||
if (columnIndex !== undefined && window.brickTableInstance) {
|
||||
// Determine sort direction
|
||||
const isCurrentlyActive = button.classList.contains('btn-primary');
|
||||
const currentDirection = button.dataset.currentDirection || (isDesc ? 'desc' : 'asc');
|
||||
const newDirection = isCurrentlyActive ?
|
||||
(currentDirection === 'asc' ? 'desc' : 'asc') :
|
||||
(isDesc ? 'desc' : 'asc');
|
||||
// Determine new sort direction
|
||||
let newOrder = isDesc ? 'desc' : 'asc';
|
||||
if (currentSort === attribute) {
|
||||
// Toggle direction if clicking the same column
|
||||
newOrder = currentOrder === 'asc' ? 'desc' : 'asc';
|
||||
}
|
||||
|
||||
// Clear other active buttons
|
||||
sortButtons.forEach(btn => {
|
||||
btn.classList.remove('btn-primary');
|
||||
btn.classList.add('btn-outline-primary');
|
||||
btn.removeAttribute('data-current-direction');
|
||||
});
|
||||
currentUrl.searchParams.set('sort', attribute);
|
||||
currentUrl.searchParams.set('order', newOrder);
|
||||
|
||||
// Mark this button as active
|
||||
button.classList.remove('btn-outline-primary');
|
||||
button.classList.add('btn-primary');
|
||||
button.dataset.currentDirection = newDirection;
|
||||
// Reset to page 1 when sorting
|
||||
currentUrl.searchParams.set('page', '1');
|
||||
window.location.href = currentUrl.toString();
|
||||
|
||||
// Apply sort using Simple DataTables API
|
||||
window.brickTableInstance.table.columns.sort(columnIndex, newDirection);
|
||||
} else {
|
||||
// ORIGINAL MODE - Client-side sorting with Simple DataTables
|
||||
const columnMap = {
|
||||
'name': 1,
|
||||
'parts': 2,
|
||||
'quantity': 3,
|
||||
'missing': 4, // Only if visible
|
||||
'damaged': 5, // Only if visible, adjust based on missing column
|
||||
'sets': 6 // Adjust based on visible columns
|
||||
};
|
||||
|
||||
const columnIndex = columnMap[attribute];
|
||||
if (columnIndex !== undefined && window.brickTableInstance) {
|
||||
// Determine sort direction
|
||||
const isCurrentlyActive = button.classList.contains('btn-primary');
|
||||
const currentDirection = button.dataset.currentDirection || (isDesc ? 'desc' : 'asc');
|
||||
const newDirection = isCurrentlyActive ?
|
||||
(currentDirection === 'asc' ? 'desc' : 'asc') :
|
||||
(isDesc ? 'desc' : 'asc');
|
||||
|
||||
// Clear other active buttons
|
||||
sortButtons.forEach(btn => {
|
||||
btn.classList.remove('btn-primary');
|
||||
btn.classList.add('btn-outline-primary');
|
||||
btn.removeAttribute('data-current-direction');
|
||||
});
|
||||
|
||||
// Mark this button as active
|
||||
button.classList.remove('btn-outline-primary');
|
||||
button.classList.add('btn-primary');
|
||||
button.dataset.currentDirection = newDirection;
|
||||
|
||||
// Apply sort using Simple DataTables API
|
||||
window.brickTableInstance.table.columns.sort(columnIndex, newDirection);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (clearButton) {
|
||||
clearButton.addEventListener('click', () => {
|
||||
// Clear all sort buttons
|
||||
sortButtons.forEach(btn => {
|
||||
btn.classList.remove('btn-primary');
|
||||
btn.classList.add('btn-outline-primary');
|
||||
btn.removeAttribute('data-current-direction');
|
||||
});
|
||||
if (isPaginationMode()) {
|
||||
// PAGINATION MODE - Clear server-side sorting
|
||||
const currentUrl = new URL(window.location);
|
||||
currentUrl.searchParams.delete('sort');
|
||||
currentUrl.searchParams.delete('order');
|
||||
currentUrl.searchParams.set('page', '1');
|
||||
window.location.href = currentUrl.toString();
|
||||
|
||||
// Reset table sort - remove all sorting
|
||||
if (window.brickTableInstance) {
|
||||
// Destroy and recreate to clear sorting
|
||||
const tableElement = document.querySelector('#minifigures');
|
||||
const currentPerPage = window.brickTableInstance.table.options.perPage;
|
||||
window.brickTableInstance.table.destroy();
|
||||
} else {
|
||||
// ORIGINAL MODE - Clear client-side sorting
|
||||
// Clear all sort buttons
|
||||
sortButtons.forEach(btn => {
|
||||
btn.classList.remove('btn-primary');
|
||||
btn.classList.add('btn-outline-primary');
|
||||
btn.removeAttribute('data-current-direction');
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
// Create new instance using the globally available BrickTable class
|
||||
const newInstance = new window.BrickTable(tableElement, currentPerPage);
|
||||
window.brickTableInstance = newInstance;
|
||||
// Reset table sort - remove all sorting
|
||||
if (window.brickTableInstance) {
|
||||
// Destroy and recreate to clear sorting
|
||||
const tableElement = document.querySelector('#minifigures');
|
||||
const currentPerPage = window.brickTableInstance.table.options.perPage;
|
||||
window.brickTableInstance.table.destroy();
|
||||
|
||||
// Re-enable search functionality
|
||||
newInstance.table.searchable = true;
|
||||
}, 50);
|
||||
setTimeout(() => {
|
||||
// Create new instance using the globally available BrickTable class
|
||||
const newInstance = new window.BrickTable(tableElement, currentPerPage);
|
||||
window.brickTableInstance = newInstance;
|
||||
|
||||
// Re-enable search functionality
|
||||
newInstance.table.searchable = true;
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
108
static/scripts/sets.js
Normal file
108
static/scripts/sets.js
Normal file
@@ -0,0 +1,108 @@
|
||||
// Sets page functionality
|
||||
|
||||
// Check if we're in pagination mode (server-side) or original mode (client-side)
|
||||
function isPaginationMode() {
|
||||
const gridElement = document.querySelector('#grid');
|
||||
return gridElement && gridElement.getAttribute('data-grid') === 'false';
|
||||
}
|
||||
|
||||
// Setup page functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const searchInput = document.getElementById('grid-search');
|
||||
const searchClear = document.getElementById('grid-search-clear');
|
||||
|
||||
if (searchInput && searchClear) {
|
||||
if (isPaginationMode()) {
|
||||
// PAGINATION MODE - Server-side search
|
||||
const searchForm = document.createElement('form');
|
||||
searchForm.style.display = 'none';
|
||||
searchInput.parentNode.appendChild(searchForm);
|
||||
searchForm.appendChild(searchInput.cloneNode(true));
|
||||
|
||||
// Handle Enter key for search
|
||||
searchInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
performServerSearch();
|
||||
}
|
||||
});
|
||||
|
||||
// Handle search button click (if exists)
|
||||
const searchButton = document.querySelector('[data-search-trigger]');
|
||||
if (searchButton) {
|
||||
searchButton.addEventListener('click', performServerSearch);
|
||||
}
|
||||
|
||||
// Clear search
|
||||
searchClear.addEventListener('click', () => {
|
||||
searchInput.value = '';
|
||||
performServerSearch();
|
||||
});
|
||||
|
||||
function performServerSearch() {
|
||||
const currentUrl = new URL(window.location);
|
||||
const searchQuery = searchInput.value.trim();
|
||||
|
||||
if (searchQuery) {
|
||||
currentUrl.searchParams.set('search', searchQuery);
|
||||
} else {
|
||||
currentUrl.searchParams.delete('search');
|
||||
}
|
||||
|
||||
// Reset to page 1 when searching
|
||||
currentUrl.searchParams.set('page', '1');
|
||||
window.location.href = currentUrl.toString();
|
||||
}
|
||||
|
||||
// Setup sort buttons for pagination mode
|
||||
setupPaginationSortButtons();
|
||||
|
||||
} else {
|
||||
// ORIGINAL MODE - Grid search functionality is handled by existing grid scripts
|
||||
// No additional setup needed here
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function setupPaginationSortButtons() {
|
||||
// Sort button functionality for pagination mode
|
||||
const sortButtons = document.querySelectorAll('[data-sort-attribute]');
|
||||
const clearButton = document.querySelector('[data-sort-clear]');
|
||||
|
||||
sortButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const attribute = button.dataset.sortAttribute;
|
||||
const isDesc = button.dataset.sortDesc === 'true';
|
||||
|
||||
// PAGINATION MODE - Server-side sorting
|
||||
const currentUrl = new URL(window.location);
|
||||
const currentSort = currentUrl.searchParams.get('sort');
|
||||
const currentOrder = currentUrl.searchParams.get('order');
|
||||
|
||||
// Determine new sort direction
|
||||
let newOrder = isDesc ? 'desc' : 'asc';
|
||||
if (currentSort === attribute) {
|
||||
// Toggle direction if clicking the same column
|
||||
newOrder = currentOrder === 'asc' ? 'desc' : 'asc';
|
||||
}
|
||||
|
||||
currentUrl.searchParams.set('sort', attribute);
|
||||
currentUrl.searchParams.set('order', newOrder);
|
||||
|
||||
// Reset to page 1 when sorting
|
||||
currentUrl.searchParams.set('page', '1');
|
||||
window.location.href = currentUrl.toString();
|
||||
});
|
||||
});
|
||||
|
||||
if (clearButton) {
|
||||
clearButton.addEventListener('click', () => {
|
||||
// PAGINATION MODE - Clear server-side sorting
|
||||
const currentUrl = new URL(window.location);
|
||||
currentUrl.searchParams.delete('sort');
|
||||
currentUrl.searchParams.delete('order');
|
||||
currentUrl.searchParams.set('page', '1');
|
||||
window.location.href = currentUrl.toString();
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user