| | |
| | | actions: { |
| | | cancel: 'button.cancel', |
| | | retry: 'button.retry', |
| | | refresh: 'button.refresh', |
| | | dismiss: 'button.dismiss', |
| | | } |
| | | }, |
| | |
| | | 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(()=>{}); |
| | |
| | | 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 |
| | | ****************************************************************************/ |
| | |
| | | |
| | | 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(); |
| | |
| | | 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; |
| | |
| | | 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}/${2})`; |
| | | case 'failed_permanent': |
| | |
| | | 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 |
| | | ****************************************************************************/ |