=DashboardManager overhaul. A bit easier to modify the output of pages. Sti...

Jake Vanderwerf

2026-06-29 4089ba01e0881c89a72332e13bc3a80b6bddec2a

 assets/js/concise/PopulateForm.js

@@ -38,7 +38,7 @@
      for (let [name, value] of Object.entries(this.data.fields)) {
         let field = form.querySelector(`[data-field="${name}"]`);
         if (field) {
            this.populateField(field, name, value);
            this.populateField(field, name, value, Object.hasOwn(this.data, 'prefix') ? this.data.prefix : null);
         }
      }
   }
@@ -55,11 +55,12 @@
    * @param {HTMLElement} field
    * @param {string} name
    * @param {mixed} value
    * @param {string|null} prefix, to prefix the input name/id
    */
   populateField(field, name, value) {
   populateField(field, name, value, prefix = null) {

      let type = this.formHelper.getFieldType(field);
      if (!type || this.isEmptyValue(name) || this.isEmptyValue(value)) return;
      if (!type || this.isEmptyValue(name)) return;

      const handlers = {
         'repeater': this.populateRepeater.bind(this),
@@ -86,24 +87,37 @@
      };

      if (Object.hasOwn(handlers, type)) {
         handlers[type](field, name, value);
         handlers[type](field, name, value, prefix);
      } else {
         this.populateText(field, name, value);
         this.populateText(field, name, value, prefix);
      }
   }

   populateRepeater(field, name, value) {
      if (!value || !Array.isArray(value)) return;

   populateRepeater(field, name, value, prefix = null) {
      const container = field.querySelector('.repeater-items');
      let template = field.querySelector('template')?.className ?? false;
      if (!container || !template) return;

      // Normalize: server/store may return an object with numeric keys instead of an array
      if (typeof value === 'string') {
         try { value = JSON.parse(value); } catch(e) { value = []; }
      }
      if (value && !Array.isArray(value) && typeof value === 'object') {
         value = Object.values(value);
      }

      if (!value || !Array.isArray(value) || value.length === 0) {
         window.removeChildren(container);
         return;
      }

      window.removeChildren(container);

      value.forEach((data, index) => {
         const templateData = { ...data, index, repeater: field };

         if (prefix) {
            templateData.prefix = prefix;
         }
         const row = this.templates.create(template, templateData);
         if (!row) return;

@@ -117,18 +131,29 @@
         for (let [fieldName, fieldValue] of Object.entries(data)) {
            let subField = row.querySelector(`[data-field="${fieldName}"]`);
            if (subField) {
               this.populateField(subField, fieldName, fieldValue);
               this.populateField(subField, fieldName, fieldValue, prefix);
            }
         }
      });
   }
   populateTagList(field, name, value) {
      if (!value || !Array.isArray(value)) return;
   populateTagList(field, name, value, prefix = null) {

      const container = field.querySelector('.tag-items');
      let template = field.querySelector('template')?.className ?? false;
      if (!container || !template) return;

      if (typeof value === 'string') {
         try { value = JSON.parse(value); } catch(e) { value = []; }
      }
      if (value && !Array.isArray(value) && typeof value === 'object') {
         value = Object.values(value);
      }

      if (!value || !Array.isArray(value) || value.length === 0) {
         window.removeChildren(container);
         return;
      }

      window.removeChildren(container);

      value.forEach((data, index) => {
@@ -143,6 +168,10 @@
         row.querySelectorAll('input[type="hidden"]').forEach(input => {
            const key = input.dataset.field;
            if (key && data[key] !== undefined) {
               if (prefix) {
                  window.prefixInput(input, prefix, field,false, true);
               }

               input.value = data[key];
            }
         });
@@ -171,31 +200,38 @@
            return data[format] ?? values[0] ?? 'New Item';
      }
   }
   populateGroup(field, name, value) {
   populateGroup(field, name, value, prefix = null) {
      if (!value || typeof value !== 'object') return;

      console.log(value, 'Populating Group Value: ')
      for (let [subName, subValue] of Object.entries(value)) {
         let subField = field.querySelector(`[data-field="${subName}"]`);
         if (subField) {
            this.populateField(subField, subName, subValue);
            this.populateField(subField, subName, subValue, prefix);
         }
      }
   }
   populateLocation(field, name, value) {
   populateLocation(field, name, value, prefix = null) {
      const subFields = ['address', 'lat', 'lng', 'street', 'city', 'province', 'postal_code', 'country'];
      subFields.forEach(subField => {
         if (Object.hasOwn(value, subField)) {
            let input = field.querySelector(`[data-location-field="${subField}"]`);

            if (prefix && input) {
               window.prefixInput(input, prefix, field,false, true);
            }
            if (input) input.value = String(value[subField]||'');

         }
      });
   }
   populateTaxonomy(field, name, value) {
   populateTaxonomy(field, name, value, prefix = null) {
      let termIds = this.splitIDs(value);
      if (termIds.length === 0) return;

      const hiddenInput = field.querySelector(`input[type="hidden"][name="${name}"]`);
      if (hiddenInput) {
         if (prefix) {
            window.prefixInput(hiddenInput, prefix, field,false, true);
         }
         hiddenInput.value = termIds.join(',');
         if (window.jvbSelector) {
            requestAnimationFrame(() => {
@@ -204,20 +240,22 @@
         }
      }
   }
   populateUser(field, name, value) {
      this.populateTaxonomy(field, name, value);
   populateUser(field, name, value, prefix = null) {
      this.populateTaxonomy(field, name, value, prefix);
   }
   populateUpload(field, name, value) {
   populateUpload(field, name, value, prefix = null) {
      if (field.dataset.subtype && field.dataset.subtype === 'timeline') {
         this.populateTimelineGallery(field,name,value);
         this.populateTimelineGallery(field,name,value, prefix);
         return;
      }

      if (this.isEmptyValue(value)) return;
      const ids = this.splitIDs(value);
      if (ids.length === 0) return;
      const hiddenInput = field.querySelector(`input[type="hidden"]`);
      if (hiddenInput) {
         if (prefix) {
            window.prefixInput(hiddenInput, prefix, field,false, true);
         }
         hiddenInput.value = ids.join(',');
      }

@@ -234,55 +272,67 @@
               }
            };
            data.id = id;

            grid.append(this.templates.create('uploadItem', data));
            let items = grid.children;

            let item = Array.from(items).filter(it => { return it.dataset.id === `${id}`});
            item = item[0]??false;
            if (item) {
               this.populateUploadMeta(item, null, id);
            }
         });
      }

      this.populateUploadMeta(field, name, value);
   }
      populateUploadMeta(element, name, id) {
         // Find the image_data field group
         const imageDataField = element.querySelector('[data-field="image_data"]');
         if (!imageDataField) return;
         let data = this.data.images[id]??false;
         if (!data) return;
   populateUploadMeta(element, name, id, prefix = null) {
      // Find the image_data field group
      const imageDataField = element.querySelector('[data-field="image_data"]');
      if (!imageDataField) return;
      let data = this.data.images[id]??false;
      if (!data) return;

         // Set upload ID or attachment ID
         imageDataField.dataset.attachmentId = data.id;
         imageDataField.setAttribute('data-ignore', '');
      // Set upload ID or attachment ID
      imageDataField.dataset.attachmentId = data.id;
      imageDataField.setAttribute('data-ignore', '');

         // Populate the metadata fields
         const meta = [
            'image-title',
            'image-alt-text',
            'image-caption'
         ];
      // Populate the metadata fields
      const meta = [
         'image-title',
         'image-alt-text',
         'image-caption'
      ];

         for (const m of meta) {
            const input = imageDataField.querySelector(`[data-field="${m}"] input, [data-field="${m}"] textarea`);
            if (input && data[m]!=='') {
               input.value = window.decodeHTMLEntities(data[m]);
      for (const m of meta) {
         const input = imageDataField.querySelector(`[data-field="image_data|${m}"] input, [data-field="image_data|${m}"] textarea`);
         if (input && prefix) {
            window.prefixInput(input, prefix, element,false, true);
         }
         if (input && data[m]!=='') {
            input.value = window.decodeHTMLEntities(data[m]);
         }
      }
   }
   populateTimelineGallery(field,name, value, prefix = null) {
      if (!value || !Array.isArray(value) || value.length === 0) return;

      let grid = field.querySelector('.item-grid');

      if (grid) {
         window.removeChildren(grid);

         field.querySelector('.progress')?.remove();
         for (let data of value) {
            if (prefix) {
               data.prefix = prefix;
            }
            let point = this.templates.create('timelineItem', data);
            if (point) {
               grid.append(point);
            }
         }
      }
      populateTimelineGallery(field,name, value) {
         if (!value || !Array.isArray(value) || value.length === 0) return;

         let grid = field.querySelector('.item-grid');

         if (grid) {
            window.removeChildren(grid);

            field.querySelector('.progress')?.remove();
            for (let data of value) {
               let point = this.templates.create('timelineItem', data);
               if (point) {
                  grid.append(point);
               }
            }
         }
      }
   populateMultiValue(field, name, value) {
   }
   populateMultiValue(field, name, value, prefix = null) {
      if (typeof value === 'string') {
         try {
            value = JSON.parse(value);
@@ -298,37 +348,69 @@
         for (let option of select.options) {
            option.selected = value.includes(option.value);
         }

         if (prefix) {
            window.prefixInput(select, prefix, field,false, true);
         }
         return;
      }
      field.querySelectorAll(`input[type="checkbox"][name="${name}[]"], input[type="checkbox"][name="${name}"]`).forEach(checkbox => {

         if (prefix) {
            window.prefixInput(checkbox, prefix, field,false, true);
         }

         checkbox.checked = value.includes(checkbox.value);
      });

   }
   populateSingleValue(field, name, value) {
   populateSingleValue(field, name, value, prefix = null) {
      value = String(value || '');

      let select = field.querySelector(`select[name="${name}"]`);
      if (select) {
         if (prefix) {
            window.prefixInput(select, prefix, field,false, true);
         }
         select.value = value;

         return;
      }

      let input = field.querySelector(`input[type="radio"][value="${value}"], input[type="checkbox"][value="${value}"]`)
         || field.querySelector(`[name="${name}"][value="${value}"]`);
      if (input) {
         if (prefix) {
            window.prefixInput(input, prefix, field,false, true);
         }
         input.checked = true;
      }
   }
   populateBoolean(field, name, value) {
      const input = field.querySelector(`[name="${name}"], input[type="checkbox"]`);
      if (input) {
         input.checked = Boolean(value);

      if (prefix) {
         field.querySelectorAll(`input[type="radio"],input[type="checkbox"], input[name="${name}"]`).forEach(i => {
            if (i !== input) {
               window.prefixInput(input, prefix, field, false, true);
            }
         });
      }
   }
   populateDate(field, name, value) {
   populateBoolean(field, name, value, prefix = null) {
      const input = field.querySelector(`[name="${name}"], input[type="checkbox"]`);
      if (input) {
         if (prefix) {
            window.prefixInput(input, prefix, field,false, true);
         }
         input.checked = Boolean(value);

      }
   }
   populateDate(field, name, value, prefix = null) {
      const input = field.querySelector(`[name="${name}"], input`);
      if (input) {
         if (prefix) {
            window.prefixInput(input, prefix, field,false, true);
         }

         if (typeof value === 'object' && Object.hasOwn(value, 'date')) {
            value = value.date;
         }
@@ -352,17 +434,22 @@
         } catch (e) {
            input.value = value;
         }

      }
   }
   populateNumber(field, name, value) {
   populateNumber(field, name, value, prefix = null) {
      const input = field.querySelector(`[name="${name}"], input[type="number"]`);
      if (input) {
         if (prefix) {
            window.prefixInput(input, prefix, field,false, true);
         }
         input.value = Number(value) || 0;

      }
   }
   populateTextarea(field, name, value) {
   populateTextarea(field, name, value, prefix = null) {
      let textarea = field.querySelector('textarea[data-editor], textarea');
      this.populateText(field, name, value);
      this.populateText(field, name, value, prefix);

      if (textarea?.dataset.editor) {
         const editor = field.querySelector('.ql-editor');
@@ -373,22 +460,20 @@
         }
      }
   }
   populateText(field, name, value) {
   populateText(field, name, value, prefix = null) {
      let input = field.querySelector(`[name="${name}"]`)
         || field.querySelector('textarea[data-editor]')
         || field.querySelector('input:not([type="hidden"]):not([type="file"]), textarea, select');
      if (input) {
         if (prefix) {
            window.prefixInput(input, prefix, field,false, true);
         }
         input.value = window.decodeHTMLEntities(value??'');
      }
   }
   /********************************************************************
   UTILITY
    ********************************************************************/
   getFormHelper() {
      window.requestAnimationFrame(()=> {
         this.formHelper = window.jvbForm;
      });
   }

   splitIDs(value) {
      return String(value).split(',')