=minor changes, particularly around the JVB_CHILD_URL pattern

Jake Vanderwerf

2026-02-17 a24a06002081ad71a78ffeff9072725ba39cf121

 assets/js/concise/Queue.js

@@ -5,6 +5,7 @@

      this.user = window.auth.getUser();


      this.canUpdateUI = true;
      this.isProcessing = false;
      this.isPolling = false;
@@ -15,6 +16,8 @@
      this.api = jvbSettings.api;
      this.endpoint = 'queue';

      this.queueItems = new Map();

      this.init();
   }
   init() {
@@ -24,13 +27,14 @@
      this.initElements();
      this.initListeners();
      this.initStore();
      if (this.canUpdateUI) {
         this.popup = new window.jvbPopup({
      if (this.canUpdateUI && this.ui.panel) {
         this.popup = window.jvbPopup.registerPopup({
            popup: this.ui.panel,
            toggle: this.ui.toggle.button,
            name: 'Queue Panel',
         });
      }
      this.defineTemplates();
   }

   initElements() {
@@ -130,6 +134,7 @@
            actions: {
               cancel: 'button.cancel',
               retry: 'button.retry',
               refresh: 'button.refresh',
               dismiss: 'button.dismiss',
            }
         },
@@ -138,6 +143,17 @@
      if (!this.ui.panel) this.canUpdateUI = false;
   }

   defineTemplates() {
      const T = window.jvbTemplates;

      T.define('emptyState');
      T.define('queueItem', {
         setup({el, refs, manyRefs, data}) {
            el.dataset.id = data.id;
         }
      });
   }


   initListeners() {
      this.activityListeners = null;
@@ -145,14 +161,18 @@
      this.onlineHandler = this.handleOnline.bind(this);
      this.offlineHandler = this.handleOffline.bind(this);
      this.unloadHandler = this.handleBeforeUnload.bind(this);
      this.visibilityHandler = this.handleVisibilityChange.bind(this);

      document.addEventListener('click', this.clickHandler);
      window.addEventListener('online', this.onlineHandler);
      window.addEventListener('offline', this.offlineHandler);

      window.addEventListener('beforeunload', this.unloadHandler);

      document.addEventListener('visibilitychange', this.visibilityHandler);
   }
      handleOnline() {
         this.updatePanel();
         this.updatePanel('synced');
         if (this.getQueueByStatus(this.pendingStatuses).length > 0) {
            this.processQueue();
         }
@@ -160,7 +180,16 @@
      handleOffline() {
         this.updatePanel('offline');
      }

      handleVisibilityChange(e) {
         if (this.isPolling && document.hidden) {
            this.stopPolling();
         } else {
            this.maybeStartPolling();
         }
      }
   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
@@ -173,8 +202,19 @@
         if (!window.targetCheck(e, this.selectors.panel+', '+this.selectors.toggle.button)) return;
         const refresh = window.targetCheck(e, this.selectors.refresh.button);
         if (refresh) {
            this.ui.refresh.button.classList.add('fetching');
            this.store.clearCache();
            this.store.fetch();
            this.store.clearFilters();
            this.store.fetch().finally(() => {
               this.ui.refresh.button.classList.remove('fetching');
            });
            return;
         }


         const refreshPage = window.targetCheck(e, this.selectors.actions.refresh);
         if (refreshPage) {
            this.handleRefresh(opId);
            return;
         }

@@ -265,6 +305,9 @@
               {name: 'status', keyPath: 'status'},
               {name: 'type', keyPath: 'type'},
            ],
            filters: {
               user: window.auth.getUser()
            },
            showLoading: false,
         }
      )
@@ -272,22 +315,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
   ****************************************************************************/
@@ -304,6 +415,7 @@
         title: 'Operation',
         status: 'queued',
         timestamp: Date.now(),
         created_at: new Date().toISOString(),
         retries: 0,
         user: this.user,
         ... operation
@@ -332,14 +444,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();
@@ -364,9 +478,12 @@
      }
      if (statusOrId.length ===0) return;
      if (!['cancel', 'dismiss', 'retry'].includes(action)) return;

      const shouldRemove = ['cancel', 'dismiss'].includes(action);
      if (shouldRemove) {
         statusOrId.forEach(id => this.removeOperationUI(id));
         statusOrId.forEach(id => {
            this.removeOperationUI(id)
         });
      }

      try {
@@ -380,7 +497,7 @@
               },
               body: JSON.stringify({
                  action,
                  ids: statusOrId,
                  ids: Array.isArray(statusOrId) ? statusOrId : [statusOrId],
                  user: this.user
               })
            }
@@ -394,7 +511,10 @@
         }
         statusOrId.forEach(id => {
            let item = this.getQueue(id);
            this.notify(`${action}-operation`, item);
            if (item) {
               this.notify(`${action}-operation`, item);
            }

            if (shouldRemove) {
               this.clearQueue(id);
            } else {
@@ -439,10 +559,15 @@
      }

      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());

      this.toggleQueue(this.maybeStartPolling());
   }

   async processOperation(operation) {
@@ -462,13 +587,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';
         }
@@ -545,13 +670,37 @@
      });
   }

   sortOperations(ops) {
      const statusPriority = {
         'processing': 0,
         'uploading': 1,
         'pending': 2,
         'queued': 3,
         'localProcessing': 4,
         'failed': 5,
         'completed': 6,
         'failed_permanent': 7
      };

      return ops.sort((a, b) => {
         // First by status priority
         const priorityDiff = (statusPriority[a.status] ?? 99) - (statusPriority[b.status] ?? 99);
         if (priorityDiff !== 0) return priorityDiff;

         // Then by updated_at (most recent first)
         const aTime = a.updated_at ?? a.timestamp ?? 0;
         const bTime = b.updated_at ?? b.timestamp ?? 0;
         return new Date(bTime) - new Date(aTime);
      });
   }

   getAllQueue() {
      let ops = [... new Set([
         ...Array.from(this.store.data.values()),
         ... Array.from(this.queue.values())
      ])];
      //Sort operations by operation updated_at
      return this.sortByDate(ops);
      return this.sortOperations(ops);
   }

   getQueueByStatus(status) {
@@ -563,7 +712,7 @@
         ...Array.from(this.store.filterByIndex({status: status})),
         ...Array.from(this.queue.values()).filter(op => status.includes(op.status))
      ])];
      return this.sortByDate(ops);
      return this.sortOperations(ops);
   }


@@ -589,32 +738,59 @@
    POLLING
   ****************************************************************************/
   maybeStartPolling() {
      const incomplete = this.getQueueByStatus(this.pendingStatuses);
      const incomplete = this.getQueueByStatus([...this.pendingStatuses, ...this.workingStatuses]);
      if (incomplete.length > 0) {
         this.startPolling();
         return true;
      }
      this.updatePanel('synced');
      return false;
   }
   startPolling() {
      if (this.isPolling) return;
      this.isPolling = true;
      this.updatePanel('pending');
      this.runPollCycle();
   }

      this.pollTimer = setInterval(async () => {
         try {
            this.store.clearCache();
            await this.store.fetch();
            if (!this.maybeStartPolling()) {
               this.stopPolling();
               this.updatePanel('synced');
            }
         } catch (error) {
            console.error('Polling error:', error);
   async runPollCycle() {
      if (!this.isPolling) return;

      try {
         this.ui.refresh.button.classList.add('fetching');
         this.store.clearCache();
         await this.store.fetch();
         this.ui.refresh.button.classList.remove('fetching');
         if (!this.maybeStartPolling()) {
            this.stopPolling();
            this.updatePanel('synced');
            return;
         }
      },
         5000);
      this.startCountdown();
      } catch (error) {
         console.error('Polling error:', error);
      }

      // Schedule next poll with countdown
      this.startCountdown(5, () => this.runPollCycle());
   }

   startCountdown(count, onComplete) {
      if (!this.ui.refresh.countdown) {
         console.warn('Countdown element not found');
         return;
      }
      this.ui.refresh.countdown.classList.add('counting');
      this.ui.refresh.countdown.textContent = count;

      this.countdownTimer = setInterval(() => {
         count--;
         if (count > 0) {
            this.ui.refresh.countdown.textContent = count;
         } else {
            this.stopCountdown();
            if (onComplete) onComplete();
         }
      }, 1000);
   }

   stopPolling() {
@@ -626,24 +802,14 @@
      }
      this.stopCountdown();
   }
   startCountdown(count = 5) {
      if (!this.isPolling) return;
      this.ui.refresh.countdown.textContent = count;
      this.countdownTimer = setInterval(async() => {
         count--;
         if (count >= 0) {
            this.ui.refresh.countdown.textContent = count;
         }else {
            this.ui.refresh.countdown.textContent = '';
            this.stopCountdown();
         }
      },1000);
   }

   stopCountdown() {
      if (this.countdownTimer) {
         clearInterval(this.countdownTimer);
         this.countdownTimer = null;
      }
      this.ui.refresh.countdown.classList.remove('counting');
      this.ui.refresh.countdown.textContent = '';
   }
   /****************************************************************************
    UI
@@ -661,6 +827,12 @@
         this.ui.actions.retry.disabled = operations.filter(op => op.status === 'failed').length === 0;
         this.ui.actions.clear.disabled = operations.filter(op => op.status === 'completed').length ===0;

         const activeCount = operations.filter(op =>
            [...this.pendingStatuses, ...this.workingStatuses].includes(op.status)
         ).length;
         this.ui.toggle.count.hidden = activeCount === 0;
         this.ui.toggle.count.textContent = activeCount;

         for (let status of this.statuses) {
            if (status === 'failed_permanent') continue;
            let total = operations.filter(op => op.status === status).length;
@@ -681,35 +853,45 @@

      const status = this.store.filters?.status ?? 'all';
      const operations = (status === 'all') ? this.getAllQueue() : this.getQueueByStatus(status);
      const sortedOps = this.sortOperations(operations);

      window.removeChildren(this.ui.items.container);

      if (operations.length === 0) {
         const empty = window.getTemplate('emptyQueue');
      if (sortedOps.length === 0) {
         window.removeChildren(this.ui.items.container);
         const empty = window.jvbTemplates.create('emptyQueue');
         this.ui.items.container.append(empty);
         this.a11y.announce('No items in queue');
         return;
      } else {
         this.ui.items.container.querySelector('.empty-group')?.remove();
      }

      operations.forEach(op => {
         let item = this.items.get(op.id);
      // Track which items should exist
      const expectedIds = new Set(sortedOps.map(op => op.id));

      // Remove items that shouldn't exist
      this.items.forEach((item, id) => {
         if (!expectedIds.has(id)) {
            item.element?.remove();
            this.items.delete(id);
         }
      });

      // Update/add items in order
      sortedOps.forEach((op, index) => {
         let item = this.items.get(op.id);
         if (!item) {
            // Create new element and reference
            item = this.createOperationElement(op);
         }

         if (item?.element) {
            this.updateOperationUI(op.id);
            // Reorder by re-appending (moves to end in correct order)
            this.ui.items.container.append(item.element);
         }
      });
   }

   createOperationElement(op) {
      const el = window.getTemplate('queueItem');
      el.dataset.id = op.id;

      const el = window.jvbTemplates.create('queueItem', op);
      const item = {
         element: el,
         ui: window.uiFromSelectors(this.selectors.item, el)
@@ -742,20 +924,15 @@
            item.ui.startedAt.textContent = window.formatTimeAgo(op.created_at);
         }
         let text = op.status === 'completed' ? 'Completed: ' : 'Last updated: ';
         let shouldShow =Object.hasOwn(op, 'updated_at') || Object.hasOwn(op, 'completed_at');
         item.ui.completed.wrap.hidden = !shouldShow;
         if (shouldShow && item.ui.completed.label && item.ui.completed.time) {
            let time;
            if (Object.hasOwn(op, 'completed_at')) {
               time = op.completed_at;
            } else {
               time = op.updated_at;
            }

            item.ui.completed.label.textContent = text;
            item.ui.completed.time.setAttribute('datetime', time);
            item.ui.completed.time.textContent = window.formatTimeAgo(time);
         const shouldShowCompleted = op.status === 'completed' && (op.completed_at || op.updated_at);
         item.ui.completed.wrap.hidden = !shouldShowCompleted;
         if (shouldShowCompleted) {
            const completedTime = op.completed_at ?? op.updated_at;
            item.ui.completed.label.textContent = 'Completed: ';
            item.ui.completed.time.setAttribute('datetime', completedTime);
            item.ui.completed.time.textContent = window.formatTimeAgo(completedTime);
         }

         window.showProgress(item.ui.progress, progress, 100, this.statusLabel(op.status));
         if (item.ui.actions.cancel) item.ui.actions.cancel.hidden = this.completedStatuses.includes(op.status);
         if (item.ui.actions['retry']) {
@@ -763,21 +940,32 @@
            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;
         if (!this.statuses.includes(op.status)) return 0;
         let statusProgress = {
            'queued': 10,
            'uploading': 25,
            'pending': 40,
            'processing':70,
            'completed':100,
            'failed':0,
            'failed_permanent':0
         };
         return statusProgress[op.status]??0;
   getProgress(op) {
      // Check server-provided percentage first
      if (op.progress_percentage !== undefined) {
         return op.progress_percentage;
      }
      // Legacy: check old 'progress' field
      if (op.progress !== undefined) {
         return op.progress;
      }
      // Fallback to status-based calculation
      if (!this.statuses.includes(op.status)) return 0;
      const statusProgress = {
         'queued': 10,
         'uploading': 25,
         'pending': 40,
         'processing': 70,
         'completed': 100,
         'failed': 0,
         'failed_permanent': 0
      };
      return statusProgress[op.status] ?? 0;
   }
   removeOperationUI(opId) {
      let op = this.items.get(opId);
      if (!op) return;
@@ -785,8 +973,8 @@
   }

   updatePanel(status = 'syncing') {
      if (!this.panelStatuses.includes(status)) return;
      this.ui.panel.classList.remove(this.panelStatuses);
      if (!this.ui.panel || !this.panelStatuses.includes(status)) return;
      this.ui.panel.classList.remove(...this.panelStatuses);
      this.ui.panel.classList.add(status);
   }
   /****************************************************************************
@@ -802,7 +990,8 @@
         'processing': 'Processing',
         'completed': 'Completed',
         'failed': 'Failed',
         'failed_permanent': 'Failed permanently'
         'failed_permanent': 'Failed permanently',
         'merged': 'Merged'
      };
      return labels[status];
   }
@@ -818,11 +1007,26 @@
         case 'pending':
            return item.position ? `Position ${item.position} in queue` : 'In server queue';
         case 'processing':
            return item.progress ? `${item.progress}% complete` : 'Processing...';
            // Show progress count if available
            if (item.count && item.progress_count !== undefined) {
               const processed = item.progress_count;
               const total = item.count;
               const percentage = Math.round((processed / total) * 100);
               return `Processing ${processed}/${total} items (${percentage}%)`;
            }
            // Fallback to percentage only
            if (item.progress_percentage !== undefined) {
               return `${item.progress_percentage}% complete`;
            }
            return 'Processing...';
         case 'completed':
            return 'Successfully completed';
            return 'Successfully completed. Refresh to see changes.';
         case 'merged':
            return item.merged_into
               ? `Merged with another operation (${item.merged_into.substring(0, 8)}...)`
               : 'Merged with another operation';
         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:
@@ -830,6 +1034,7 @@
      }
   }
   toggleQueue(on = true) {
      if (!this.ui.panel) return;
      this.ui.panel.hidden = !on;
      this.ui.toggle.button.hidden = !on;
   }
@@ -837,6 +1042,68 @@
      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) {
         const mappedOp = {
            ...localOp,
            ...serverOp,
            endpoint: localOp.endpoint,
            method: localOp.method,
            headers: localOp.headers,
            progress_percentage: serverOp.progress_percentage,
            progress_count: serverOp.progress_count,
            count: serverOp.count
         };

         if (serverOp.merged_into) {
            this.handleMergedOperation(mappedOp);
         }
      }


      // 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';

      const mappedOp = {
         ...serverOp,
         endpoint: endpoint,
         method: 'POST',
         headers: { ...this.headers },
      };
      if (serverOp.merged_into) {
         this.handleMergedOperation(mappedOp);
      }
      return mappedOp
   }

   /**
    * Handle merged operations
    * The target operation already has merged data from server,
    * so we just need to clean up the merged operation locally
    */
   handleMergedOperation(operation) {
      if (!operation.merged_into) return;

      console.log(`[Queue] Operation ${operation.id} merged into ${operation.merged_into}`);

      // Auto-dismiss merged operation after brief display
      // The target operation already has all the merged data from server
      setTimeout(() => {
         this.store.delete(operation.id);
         this.removeOperationFromUI(operation.id);
      }, 3000);
   }

   /****************************************************************************
    SUBSCRIPTION
    ****************************************************************************/
@@ -870,3 +1137,4 @@
      }
   });
});