=Refactored LoginManager to be more extensible and configurable, as well as...

Jake Vanderwerf

2025-11-04 42fa8304ddb811b0f725f245130f70c0f5e86a6c

 assets/js/concise/View.js

@@ -8,8 +8,10 @@

      this.container = container;
      this.initElements();
      this.settings = window.jvbUserSettings;

      this.store = store;

      this.items = {
         list: new Map(),
         grid: new Map(),
@@ -45,12 +47,11 @@
      // Subscribe to store updates
      this.store.subscribe((event, data) => {
         switch(event) {
            case 'data-loaded':
            case 'items-saved':
               this.handleDataUpdate(data);
               // this.handleDataUpdate(data);
               break;
            case 'items-updated':
               this.handleItemsUpdate(data.items);
            case 'data-loaded':
               this.handleItemsUpdate();
               break;
            case 'item-saved':
               // this.updateItem(data.item);
@@ -140,6 +141,7 @@

   setupViewSwitcher() {
      document.querySelectorAll('[data-view]').forEach(btn => {
         this.settings.addSetting(btn);
         btn.addEventListener('click', () => {
            this.currentView = btn.dataset.view;
            this.render();
@@ -151,33 +153,32 @@
    * Handle data updates from store
    */
   handleDataUpdate(data) {
      if (data.data && data.data.items) {
         this.render(data.data.items);
      }
      console.log(data);
      const items = data.data?.items || data.items || [];
      this.render(items);
   }

   /**
    * Handle items update
    */
   handleItemsUpdate(items) {
      this.render(items);
   handleItemsUpdate() {
      console.log(this.store.data);
      this.render(this.store.data);
   }

   render(items = null) {
   render(items = []) {
      if (!this.store) {
         console.error('No store connected to renderer');
         return;
      }

      // Get items from store if not provided
      if (!items) {
         const currentRequest = this.store.getCurrentRequest();
         if (currentRequest && currentRequest.data && currentRequest.data.items) {
            items = currentRequest.data.items;
         } else {

      // Handle empty state
      if (items.length === 0) {
         this.renderEmpty();
            return;
         }
      }

      switch(this.currentView) {
         case 'grid':
            this.renderGrid(items);
@@ -193,6 +194,17 @@
      this.updateSelectionUI();
   }

   renderEmpty() {
      this.toggleTable(false);
      window.removeChildren(this.ui.grid);

      const empty = window.getTemplate('emptyState');
      if (empty) {
         this.ui.grid.appendChild(empty);
         this.a11y?.announce('No items found');
      }
   }

   renderGrid(items) {
      this.toggleGrid();
      this.toggleTable(false);
@@ -246,8 +258,6 @@
         checkbox.id,
         checkbox.checked,
         label.htmlFor,
         img.src,
         img.alt,
         edit.dataset.id,
         trash.dataset.id
      ] = [
@@ -255,11 +265,26 @@
         `select-${item.id}`,
         this.selectedItems.has(`${item.id}`),
         `select-${item.id}`,
         item.images[item.fields.post_thumbnail]?.medium??'',
         item.images[item.fields.post_thumbnail]?.alt??'',
         item.id,
         item.id
      ];
      if (this.store.config.storeName === 'progress') {
         [
            img.src,
            img.alt,
         ] = [
            item.images[item.fields['timeline'][0].post_thumbnail]?.medium??'',
            item.images[item.fields['timeline'][0].post_thumbnail]?.alt??'',
         ];
      } else {
         [
            img.src,
            img.alt,
         ] = [
            item.images[item.fields.post_thumbnail]?.medium??'',
            item.images[item.fields.post_thumbnail]?.alt??'',
         ];
      }
      return card;
   }