From 8c6502de2f8ec2bd8382cd6945c327d7be400e14 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Wed, 28 Jan 2026 05:34:41 +0000
Subject: [PATCH] =Queue cleanup - seems to be working enough to get legacy before and after going!
---
assets/js/concise/Queue.js | 153 ++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 139 insertions(+), 14 deletions(-)
diff --git a/assets/js/concise/Queue.js b/assets/js/concise/Queue.js
index a44d3a1..12aa58b 100644
--- a/assets/js/concise/Queue.js
+++ b/assets/js/concise/Queue.js
@@ -5,6 +5,7 @@
this.user = window.auth.getUser();
+
this.canUpdateUI = true;
this.isProcessing = false;
this.isPolling = false;
@@ -26,7 +27,7 @@
this.initElements();
this.initListeners();
this.initStore();
- if (this.canUpdateUI) {
+ if (this.canUpdateUI && this.ui.panel) {
this.popup = new window.jvbPopup({
popup: this.ui.panel,
toggle: this.ui.toggle.button,
@@ -133,6 +134,7 @@
actions: {
cancel: 'button.cancel',
retry: 'button.retry',
+ refresh: 'button.refresh',
dismiss: 'button.dismiss',
}
},
@@ -175,6 +177,7 @@
this.updatePanel('offline');
}
handleBeforeUnload(e) {
+ if (!this.ui.panel) return;
const total = this.getQueueByStatus(this.pendingStatuses).length;
if (total > 0) {
// Modern browsers ignore custom messages, but this triggers the native dialog
@@ -196,6 +199,13 @@
return;
}
+
+ const refreshPage = window.targetCheck(e, this.selectors.actions.refresh);
+ if (refreshPage) {
+ this.handleRefresh(opId);
+ return;
+ }
+
const clear = window.targetCheck(e, this.selectors.actions.clear);
if (clear) {
this.opActions('completed', 'dismiss').then(()=>{});
@@ -283,6 +293,9 @@
{name: 'status', keyPath: 'status'},
{name: 'type', keyPath: 'type'},
],
+ filters: {
+ user: window.auth.getUser()
+ },
showLoading: false,
}
)
@@ -290,22 +303,90 @@
this.store.subscribe((event, data) => {
switch (event) {
case 'data-loaded':
+ const serverOps = this.store.getAll();
+
+ serverOps.forEach(serverOp => {
+ const localOp = this.queue.get(serverOp.id);
+ const mapped = this.mapServerOperation(serverOp);
+
+ this.queue.set(mapped.id, mapped);
+
+ // Notify if changed
+ if (localOp && localOp.status !== mapped.status) {
+ this.notify('operation-status', mapped);
+ }
+ });
+
+ this.maybeStartPolling();
+ this.updateUI();
+ break;
+
case 'items-save':
this.maybeStartPolling();
this.updateUI();
break;
+
case 'item-saved':
- if (data.previousItem && data.previousItem.status !== data.item.status) {
- this.updateOperationStatus(data.item.id, data.item.status);
+ if (data.item) {
+ this.queue.set(data.item.id, data.item);
+ if (data.previousItem?.status !== data.item.status) {
+ this.notify('operation-status', data.item);
+ }
}
this.maybeStartPolling();
break;
- default:
-
- break;
}
});
}
+
+ /**
+ * Handle refresh button click - clears cache for the relevant store
+ */
+ handleRefresh(opId) {
+ const op = this.getQueue(opId);
+ if (!op) return;
+
+ // Determine which store to refresh based on operation type
+ let storeName = null;
+
+ // Map operation types to store names
+ const typeToStore = {
+ 'content_update': op.data?.posts ? Object.values(op.data.posts)[0]?.content : null,
+ 'batch_creation': op.data?.content,
+ 'image_upload': 'uploads',
+ 'video_upload': 'uploads',
+ 'document_upload': 'uploads',
+ };
+
+ storeName = typeToStore[op.type];
+
+ // If we found a store name, clear its cache
+ if (storeName && window.jvbStore) {
+ const store = window.jvbStore.stores.get(storeName);
+ if (store) {
+ window.jvbStore.clearCache(storeName);
+ window.jvbStore.fetch(storeName);
+
+ // Give visual feedback
+ const button = this.items.get(opId)?.ui?.actions?.refresh;
+ if (button) {
+ const originalText = button.querySelector('span').textContent;
+ button.querySelector('span').textContent = 'Refreshed!';
+ button.disabled = true;
+
+ setTimeout(() => {
+ button.querySelector('span').textContent = originalText;
+ button.disabled = false;
+ }, 2000);
+ }
+ }
+ } else {
+ // Fallback: just reload the page if we can't determine the store
+ if (confirm('Refresh the page to see changes?')) {
+ window.location.reload();
+ }
+ }
+ }
/****************************************************************************
OPERATIONS
****************************************************************************/
@@ -351,14 +432,16 @@
const existingOps = Array.from(this.getAllQueue()).filter(op=> {
return op.status === 'queued' &&
- op.endpoint === item.endpoint &&
- op.canMerge
+ op.endpoint === item.endpoint &&
+ op.canMerge
});
if (existingOps.length > 0) {
const existing = existingOps[0];
existing.data = window.deepMerge(existing.data, item.data);
existing.timestamp = Date.now();
+ this.setQueue(existing);
+
this.updateOperationStatus(existing.id, existing.status);
this.updateUI();
this.trackActivity();
@@ -464,7 +547,13 @@
}
this.setProcessing(false);
- this.stopActivityTracking();
+ const remainingQueue = this.getQueueByStatus('queued');
+ if (remainingQueue.length === 0) {
+ this.stopActivityTracking();
+ } else {
+ // Still have queued items, restart activity tracking
+ this.trackActivity();
+ }
this.toggleQueue(this.maybeStartPolling());
}
@@ -486,13 +575,13 @@
let requestBody;
if (operation.data instanceof FormData) {
operation.data.append('id', operation.id);
- operation.data.append('user', this.user);
+ operation.data.append('user', window.auth.getUser());
requestBody = operation.data;
} else {
requestBody = JSON.stringify({
...operation.data,
id: operation.id,
- user: this.user
+ user: window.auth.getUser()
});
operation.headers['Content-Type'] = 'application/json';
}
@@ -839,6 +928,9 @@
item.ui.actions['retry'].hidden = op.status !=='failed';
}
if (item.ui.actions.dismiss) item.ui.actions.dismiss.hidden = this.pendingStatuses.includes(op.status);
+ if (item.ui.actions.refresh) {
+ item.ui.actions.refresh.hidden = op.status !== 'completed';
+ }
}
getProgress(op) {
if (op.progress) return op.progress;
@@ -861,7 +953,7 @@
}
updatePanel(status = 'syncing') {
- if (!this.panelStatuses.includes(status)) return;
+ if (!this.ui.panel || !this.panelStatuses.includes(status)) return;
this.ui.panel.classList.remove(...this.panelStatuses);
this.ui.panel.classList.add(status);
}
@@ -896,9 +988,9 @@
case 'processing':
return item.progress ? `${item.progress}% complete` : 'Processing...';
case 'completed':
- return 'Successfully completed';
+ return 'Successfully completed. Refresh to see changes.';
case 'failed':
- return `Failed: ${item.lastError || 'Unknown error'} (Retry ${item.retries}/${this.config.maxRetries})`;
+ return `Failed: ${item.lastError || 'Unknown error'} (Retry ${item.retries}/${2})`;
case 'failed_permanent':
return `Failed: ${item.lastError || 'Unknown error'}`;
default:
@@ -906,6 +998,7 @@
}
}
toggleQueue(on = true) {
+ if (!this.ui.panel) return;
this.ui.panel.hidden = !on;
this.ui.toggle.button.hidden = !on;
}
@@ -913,6 +1006,38 @@
this.isProcessing = on;
this.ui.toggle.button.classList.toggle('saving', on);
}
+
+ /**
+ * Map server operation format to frontend format
+ * Server uses: type, data (requestData), status (from state/outcome)
+ * Frontend uses: endpoint, data, status, headers, method, etc.
+ */
+ mapServerOperation(serverOp) {
+ const localOp = this.queue.get(serverOp.id);
+
+ // If we have local operation data, preserve it
+ if (localOp && localOp.endpoint) {
+ return {
+ ...localOp,
+ ...serverOp,
+ endpoint: localOp.endpoint,
+ method: localOp.method,
+ headers: localOp.headers,
+ };
+ }
+
+ // Minimal mapping for server-only operations
+ // Extract endpoint from type if possible, otherwise use type
+ const endpoint = serverOp.type ? serverOp.type.replace('_update', '').replace('_', '/') : 'unknown';
+
+ return {
+ ...serverOp,
+ endpoint: endpoint,
+ method: 'POST',
+ headers: { ...this.headers },
+ };
+ }
+
/****************************************************************************
SUBSCRIPTION
****************************************************************************/
--
Gitblit v1.10.0