From 4089ba01e0881c89a72332e13bc3a80b6bddec2a Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Mon, 29 Jun 2026 22:15:55 +0000
Subject: [PATCH] =DashboardManager overhaul. A bit easier to modify the output of pages. Still have to get the account pages to work as expected, as well as verify the integrations and others are working - but registrar/content pages work as expected. Also fixed up the table generation in CRUD.js and CRUDSkeleton.php
---
assets/js/concise/PopulateForm.js | 241 ++++++++++++++++++++++++++++++++---------------
1 files changed, 163 insertions(+), 78 deletions(-)
diff --git a/assets/js/concise/PopulateForm.js b/assets/js/concise/PopulateForm.js
index be44bfa..3cdbee2 100644
--- a/assets/js/concise/PopulateForm.js
+++ b/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(',')
--
Gitblit v1.10.0