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

Jake Vanderwerf

2025-11-04 42fa8304ddb811b0f725f245130f70c0f5e86a6c

 assets/js/concise/View.js

@@ -3,14 +3,15 @@
 */
class ViewController {
   constructor(container, store) {
      console.log(container);
      this.a11y = window.jvbA11y;
      this.error = window.jvbError;

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

      this.store = store;

      this.items = {
         list: new Map(),
         grid: new Map(),
@@ -40,19 +41,23 @@
      }

      this.ui = window.uiFromSelectors(this.selectors, this.container);
      console.log(this.ui);
   }

   init() {
      // Subscribe to store updates
      this.store.subscribe((event, data) => {
         switch(event) {
            case 'data-fetched':
            case 'data-cached':
               this.handleDataUpdate(data);
            case 'items-saved':
               // this.handleDataUpdate(data);
               break;
            case 'items-updated':
               this.handleItemsUpdate(data.items);
            case 'data-loaded':
               this.handleItemsUpdate();
               break;
            case 'item-saved':
               // this.updateItem(data.item);
               break;
            case 'item-deleted':
               // this.deleteItem(data.item);
               break;
         }
      });
@@ -128,14 +133,15 @@

   toggleColumns(column, show) {
      let theColumn = this.ui.table.columns.filter(col => col.className === column);
      console.log(theColumn);
      console.log('Toggle Columns');
      console.log(column, show);
      console.log(this.ui.table.columns);
      // console.log(theColumn);
      // console.log('Toggle Columns');
      // console.log(column, show);
      // console.log(this.ui.table.columns);
   }

   setupViewSwitcher() {
      document.querySelectorAll('[data-view]').forEach(btn => {
         this.settings.addSetting(btn);
         btn.addEventListener('click', () => {
            this.currentView = btn.dataset.view;
            this.render();
@@ -147,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 {
            return;
         }

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

      switch(this.currentView) {
         case 'grid':
            this.renderGrid(items);
@@ -189,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);
@@ -201,11 +217,16 @@

      items.forEach(item => {
         let card;
         if (this.items.grid.has(item.id)) {
            card = this.items.grid.get(item.id);
         } else {
         if (this.store.renderOrRetrieve) {
            card = this.store.renderOrRetrieve(item, 'grid', this.renderGridItem.bind(this));
            this.items.grid.set(item.id, card);
         } else {
            // Fallback to local cache
            if (this.items.grid.has(item.id)) {
               card = this.items.grid.get(item.id);
            } else {
               card = this.renderGridItem(item);
               this.items.grid.set(item.id, card);
            }
         }

         fragment.appendChild(card);
@@ -237,8 +258,6 @@
         checkbox.id,
         checkbox.checked,
         label.htmlFor,
         img.src,
         img.alt,
         edit.dataset.id,
         trash.dataset.id
      ] = [
@@ -246,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;
   }

@@ -368,7 +402,7 @@
               if (!isEmpty) {
                  field.querySelector('input').checked = parseInt(value) === 1;
               }
               field.querySelector('.toggle-label').hidden = true;
               field.querySelector('.toggle-label')?.remove();
               break;
            case 'select':
               label.remove();