class BaseDashboardManager {
|
constructor(config) {
|
this.config = {
|
apiNamespace: jvbSettings.api,
|
selectors: {
|
container: '.replace',
|
grid: '[role="grid"]',
|
statusFilters: '.status-filters',
|
bulkControls: '.bulk-edit-controls',
|
scrollSentinel: '.scroll-sentinel',
|
savePopup: '.save-popup',
|
selectAll: '#select-all',
|
bulkActionSelect: '.bulk-action-select',
|
selectedCount: '.selected-count'
|
},
|
bulkEditMode: false,
|
selectedItems: new Set(),
|
page: 1,
|
loading: false,
|
hasMore: true,
|
...config
|
};
|
|
// Initialize after DOM is ready
|
if (document.readyState === 'loading') {
|
document.addEventListener('DOMContentLoaded', () => this.init());
|
} else {
|
this.init();
|
}
|
}
|
|
init() {
|
// Cache DOM elements
|
this.container = document.querySelector(this.config.selectors.container);
|
if (!this.container) {
|
console.warn('Container element not found');
|
return;
|
}
|
|
this.grid = this.container.querySelector(this.config.selectors.grid);
|
this.statusFilters = this.container.querySelector(this.config.selectors.statusFilters);
|
this.bulkControls = this.container.querySelector(this.config.selectors.bulkControls);
|
this.scrollSentinel = this.container.querySelector(this.config.selectors.scrollSentinel);
|
this.savePopup = document.querySelector(this.config.selectors.savePopup);
|
|
this.loadingManager = new LoadingManager();
|
this.initModalHandling();
|
// Initialize components only if required elements exist
|
if (this.grid) {
|
this.initStatusFilters();
|
this.initBulkEdit();
|
this.initInfiniteScroll();
|
this.initCache();
|
this.initModalHandling();
|
}
|
}
|
|
// Status filtering
|
initStatusFilters() {
|
if (!this.statusFilters) return;
|
|
this.statusFilters.addEventListener('click', async e => {
|
const button = e.target.closest('.status-filter');
|
if (!button) return;
|
|
this.updateActiveFilter(button);
|
await this.handleStatusChange(button.dataset.status);
|
});
|
}
|
|
updateActiveFilter(button) {
|
this.statusFilters.querySelectorAll('.status-filter').forEach(btn =>
|
btn.classList.remove('active')
|
);
|
button.classList.add('active');
|
}
|
|
async handleStatusChange(newStatus) {
|
this.config.currentStatus = newStatus;
|
|
// Reset state
|
this.page = 1;
|
this.hasMore = true;
|
this.selectedItems.clear();
|
|
if (this.bulkEditMode) {
|
this.toggleBulkEdit();
|
}
|
|
// Update view
|
document.body.classList.remove('view-all', 'view-publish', 'view-draft', 'view-trash');
|
document.body.classList.add(`view-${newStatus}`);
|
|
// Reload content
|
await this.loadItems();
|
}
|
|
// Bulk editing
|
initBulkEdit() {
|
if (!this.bulkControls) return;
|
const selectAll = this.container.querySelector(this.config.selectors.selectAll);
|
if (!selectAll) return;
|
|
selectAll.addEventListener('change', () => {
|
const visibleItems = this.getVisibleItems();
|
visibleItems.forEach(item => {
|
item.classList.toggle('selected', selectAll.checked);
|
if (selectAll.checked) {
|
this.selectedItems.add(item.dataset.id);
|
} else {
|
this.selectedItems.delete(item.dataset.id);
|
}
|
});
|
this.updateBulkControls();
|
});
|
this.bulkControls.addEventListener('click', e => {
|
const button = e.target.closest('button');
|
if (!button) return;
|
|
switch (button.className) {
|
case 'toggle-bulk-edit':
|
this.toggleBulkEdit();
|
break;
|
case 'bulk-edit':
|
this.openBulkEditModal();
|
break;
|
case 'bulk-delete':
|
this.handleBulkDelete();
|
break;
|
case 'bulk-restore':
|
this.handleBulkRestore();
|
break;
|
case 'cancel-bulk':
|
this.toggleBulkEdit();
|
break;
|
}
|
});
|
|
// Add click handler for grid items in batch mode
|
this.grid.addEventListener('click', e => {
|
if (!this.bulkEditMode) return;
|
|
const item = e.target.closest('li');
|
if (!item) return;
|
|
const isSelected = item.classList.toggle('selected');
|
if (isSelected) {
|
this.selectedItems.add(item.dataset.id);
|
} else {
|
this.selectedItems.delete(item.dataset.id);
|
}
|
|
this.updateSelectAllState();
|
this.updateBulkControls();
|
});
|
|
// Initialize bulk action handling
|
const bulkActionSelect = this.container.querySelector(this.config.selectors.bulkActionSelect);
|
const applyBulk = this.container.querySelector('.apply-bulk');
|
|
if (applyBulk && bulkActionSelect) {
|
applyBulk.addEventListener('click', () => {
|
const action = bulkActionSelect.value;
|
if (!action || this.selectedItems.size === 0) return;
|
|
switch (action) {
|
case 'trash':
|
this.handleBulkDelete();
|
break;
|
case 'publish':
|
this.handleBulkStatusChange('publish');
|
break;
|
case 'draft':
|
this.handleBulkStatusChange('draft');
|
break;
|
}
|
});
|
}
|
|
// Handle escape key
|
document.addEventListener('keydown', e => {
|
if (e.key === 'Escape' && this.bulkEditMode) {
|
this.toggleBulkEdit();
|
}
|
});
|
|
// Initialize long press handling
|
this.initLongPress();
|
}
|
|
async handleBulkStatusChange(status) {
|
if (this.selectedItems.size === 0) return;
|
|
try {
|
this.loadingManager.show(
|
`Updating ${this.selectedItems.size} tattoos...`,
|
'Updating',
|
this.config.quips.update
|
);
|
|
const results = await this.processBatchOperation('status',
|
Array.from(this.selectedItems),
|
{ status }
|
);
|
|
// Update UI for changed items
|
results.forEach(result => {
|
if (result.success) {
|
const item = this.grid.querySelector(`[data-id="${result.id}"]`);
|
if (item) {
|
item.className = status;
|
}
|
}
|
});
|
|
this.showNotification(
|
`${this.selectedItems.size} tattoos updated successfully`
|
);
|
|
} catch (error) {
|
console.error('Bulk status update error:', error);
|
this.showNotification('Error updating tattoos', 'error');
|
} finally {
|
this.loadingManager.hide();
|
this.toggleBulkEdit();
|
}
|
}
|
|
updateSelectAllState() {
|
const selectAll = this.container.querySelector(this.config.selectors.selectAll);
|
if (!selectAll) return;
|
|
const visibleItems = this.getVisibleItems();
|
const checkedCount = visibleItems.filter(item =>
|
this.selectedItems.has(item.dataset.id)
|
).length;
|
|
if (checkedCount === 0) {
|
selectAll.checked = false;
|
selectAll.indeterminate = false;
|
} else if (checkedCount === visibleItems.length) {
|
selectAll.checked = true;
|
selectAll.indeterminate = false;
|
} else {
|
selectAll.checked = false;
|
selectAll.indeterminate = true;
|
}
|
}
|
|
updateBulkControls() {
|
const bulkActions = this.container.querySelector('.bulk-actions');
|
if (!bulkActions) return;
|
|
const hasSelection = this.selectedItems.size > 0;
|
bulkActions.hidden = !hasSelection;
|
|
// Update selected count
|
const countEl = this.container.querySelector(this.config.selectors.selectedCount);
|
if (countEl) {
|
countEl.textContent = hasSelection ?
|
`${this.selectedItems.size} selected` : '';
|
}
|
|
// Toggle batch-mode class on body
|
document.body.classList.toggle('batch-mode', this.bulkEditMode);
|
}
|
|
clearSelection() {
|
this.selectedItems.clear();
|
this.getVisibleItems().forEach(item =>
|
item.classList.remove('selected')
|
);
|
|
const selectAll = this.container.querySelector(this.config.selectors.selectAll);
|
if (selectAll) {
|
selectAll.checked = false;
|
selectAll.indeterminate = false;
|
}
|
|
this.updateBulkControls();
|
}
|
|
getVisibleItems() {
|
return Array.from(
|
this.grid.querySelectorAll('li:not([hidden])')
|
);
|
}
|
|
initLongPress() {
|
// Configuration for long press
|
this.longPressConfig = {
|
delay: 500, // Time in ms to trigger long press
|
startTime: 0,
|
startTarget: null,
|
timer: null,
|
touchStarted: false
|
};
|
|
// Add touch event listeners
|
this.grid.addEventListener('touchstart', (e) => this.handleTouchStart(e), { passive: true });
|
this.grid.addEventListener('touchend', () => this.handleTouchEnd());
|
this.grid.addEventListener('touchmove', () => this.handleTouchMove());
|
|
// Add mouse event listeners
|
this.grid.addEventListener('mousedown', (e) => this.handleMouseDown(e));
|
this.grid.addEventListener('mouseup', () => this.handleMouseUp());
|
this.grid.addEventListener('mouseleave', () => this.handleMouseUp());
|
}
|
|
handleTouchStart(e) {
|
if (this.currentStatus === 'trash') return; // Don't activate in trash view
|
|
const item = e.target.closest('li');
|
if (!item) return;
|
|
this.longPressConfig.touchStarted = true;
|
this.startLongPress(item);
|
}
|
|
handleTouchEnd() {
|
this.longPressConfig.touchStarted = false;
|
this.cancelLongPress();
|
}
|
|
handleTouchMove() {
|
if (this.longPressConfig.touchStarted) {
|
this.cancelLongPress();
|
}
|
}
|
|
handleMouseDown(e) {
|
if (this.currentStatus === 'trash') return; // Don't activate in trash view
|
|
// Only handle left mouse button
|
if (e.button !== 0) return;
|
|
const item = e.target.closest('li');
|
if (!item) return;
|
|
this.startLongPress(item);
|
}
|
|
handleMouseUp() {
|
this.cancelLongPress();
|
}
|
|
startLongPress(item) {
|
this.longPressConfig.startTime = Date.now();
|
this.longPressConfig.startTarget = item;
|
|
// Clear any existing timer
|
if (this.longPressConfig.timer) {
|
clearTimeout(this.longPressConfig.timer);
|
}
|
|
// Set new timer
|
this.longPressConfig.timer = setTimeout(() => {
|
if (!this.bulkEditMode) {
|
this.toggleBulkEdit();
|
// Select the long-pressed item
|
this.toggleItemSelection(item);
|
|
// Add visual feedback
|
item.classList.add('long-press-activated');
|
setTimeout(() => {
|
item.classList.remove('long-press-activated');
|
}, 200);
|
}
|
}, this.longPressConfig.delay);
|
}
|
|
cancelLongPress() {
|
if (this.longPressConfig.timer) {
|
clearTimeout(this.longPressConfig.timer);
|
}
|
this.longPressConfig.startTime = 0;
|
this.longPressConfig.startTarget = null;
|
}
|
|
toggleBulkEdit() {
|
this.bulkEditMode = !this.bulkEditMode;
|
document.body.classList.toggle('batch-mode', this.bulkEditMode);
|
|
if (!this.bulkEditMode) {
|
this.selectedItems.clear();
|
this.grid.querySelectorAll('.selected').forEach(item =>
|
item.classList.remove('selected')
|
);
|
this.updateSelectedCount();
|
}
|
}
|
|
updateSelectedCount() {
|
const count = this.selectedItems.size;
|
this.container.querySelector('.selected-count').textContent =
|
count ? `${count} selected` : '';
|
}
|
|
// Infinite scrolling
|
initInfiniteScroll() {
|
if (!this.scrollSentinel) return;
|
|
const observer = new IntersectionObserver(
|
entries => {
|
entries.forEach(entry => {
|
if (entry.isIntersecting && !this.loading && this.hasMore) {
|
this.loadMoreItems();
|
}
|
});
|
},
|
{ rootMargin: '300px' }
|
);
|
|
observer.observe(this.scrollSentinel);
|
}
|
|
// Caching
|
initCache() {
|
this.cache = {
|
data: {},
|
metadata: {},
|
maxAge: 5 * 60 * 1000, // 5 minutes
|
};
|
}
|
|
getCachedData(status, page) {
|
const cached = this.cache.data[status]?.[page];
|
if (!cached) return null;
|
|
const metadata = this.cache.metadata[status];
|
if (!metadata || Date.now() - metadata.lastUpdated > this.cache.maxAge) {
|
return null;
|
}
|
|
return cached;
|
}
|
|
updateCache(status, page, data) {
|
if (!this.cache.data[status]) {
|
this.cache.data[status] = {};
|
this.cache.metadata[status] = {
|
lastUpdated: Date.now(),
|
totalPages: 1
|
};
|
}
|
|
this.cache.data[status][page] = data;
|
this.cache.metadata[status].lastUpdated = Date.now();
|
this.cache.metadata[status].totalPages = Math.max(
|
this.cache.metadata[status].totalPages,
|
page
|
);
|
}
|
|
clearCache() {
|
this.cache.data = {};
|
this.cache.metadata = {};
|
}
|
|
// Modal handling
|
initModalHandling() {
|
// Implemented by child classes
|
}
|
|
// API interaction
|
async fetchWithError(endpoint, options = {}) {
|
const defaultOptions = {
|
credentials: 'same-origin',
|
headers: {
|
'X-WP-Nonce': jvbSettings.nonce,
|
'Content-Type': 'application/json'
|
}
|
};
|
|
try {
|
const response = await fetch(
|
`${this.config.apiNamespace}${endpoint}`,
|
{ ...defaultOptions, ...options }
|
);
|
|
if (!response.ok) {
|
const data = await response.json().catch(() => ({}));
|
throw new Error(data.message || `HTTP error! status: ${response.status}`);
|
}
|
|
return await response.json();
|
} catch (error) {
|
console.error('API Error:', error);
|
throw error;
|
}
|
}
|
|
// Loading state
|
showLoading(message, title, quips) {
|
this.loadingManager.show(message, title, quips);
|
this.grid.classList.add('loading');
|
}
|
|
hideLoading() {
|
this.loadingManager.hide();
|
this.grid.classList.remove('loading');
|
}
|
|
// Must be implemented by child classes
|
async loadItems() {
|
throw new Error('loadItems must be implemented by child class');
|
}
|
|
async loadMoreItems() {
|
throw new Error('loadMoreItems must be implemented by child class');
|
}
|
|
async handleBulkDelete() {
|
throw new Error('handleBulkDelete must be implemented by child class');
|
}
|
|
async handleBulkRestore() {
|
throw new Error('handleBulkRestore must be implemented by child class');
|
}
|
}
|
|
// Export managers
|
window.BaseDashboardManager = BaseDashboardManager;
|
