yumoqing
3edfa140e9
- Move all JS files from wwwroot/scripts/ to wwwroot/ root directory to comply with ahserver requirements - Fix component registration: use bricks.Factory.register() instead of bricks.register() - Fix function registration: use bricks.RF.register() instead of bricks.registerFunction() - Update UI files to use item_template_url with external templates for List components - Add proper list item template files (session-list-item.ui, service-list-item.ui, model-list-item.ui) - Ensure all custom components and functions use correct bricks framework API
106 lines
3.3 KiB
JavaScript
106 lines
3.3 KiB
JavaScript
// Simplified List component using urlwidget pattern
|
|
// This approach follows the bricks-framework best practices by delegating item rendering to separate .ui files
|
|
|
|
bricks.List = class extends bricks.VBox {
|
|
constructor(opts) {
|
|
super(opts);
|
|
this.data_url = opts.data_url || null;
|
|
this.items = opts.items || [];
|
|
this.item_template_url = opts.item_template_url || null; // URL to the item template .ui file
|
|
this.itemHeight = opts.itemHeight || 50;
|
|
this._loading = false;
|
|
|
|
// Set default dimensions
|
|
if (!this.options.width) this.options.width = '100%';
|
|
if (!this.options.height) this.options.height = '100%';
|
|
|
|
// Load data if provided
|
|
if (this.data_url) {
|
|
this.loadData();
|
|
} else if (this.items.length > 0 && this.item_template_url) {
|
|
this.renderItems();
|
|
}
|
|
}
|
|
|
|
async loadData() {
|
|
if (this._loading || !this.data_url) return;
|
|
this._loading = true;
|
|
|
|
try {
|
|
const response = await fetch(this.data_url);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
this.items = Array.isArray(data) ? data : (data.items || []);
|
|
this.renderItems();
|
|
} else {
|
|
console.error('Failed to load list data:', response.status);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading list data:', error);
|
|
} finally {
|
|
this._loading = false;
|
|
}
|
|
}
|
|
|
|
renderItems() {
|
|
// Clear existing children
|
|
this.subwidgets = [];
|
|
this.children.forEach(child => child.remove());
|
|
this.children = [];
|
|
|
|
// Render each item using urlwidget to load the item template
|
|
this.items.forEach((item, index) => {
|
|
const itemContainer = new bricks.VBox({
|
|
width: '100%',
|
|
height: this.itemHeight + 'px'
|
|
});
|
|
|
|
// Store item data on the container for reference
|
|
itemContainer._listItemData = item;
|
|
itemContainer._listItemIndex = index;
|
|
|
|
// Create urlwidget binding to load the item template
|
|
if (!itemContainer.binds) {
|
|
itemContainer.binds = [];
|
|
}
|
|
|
|
itemContainer.binds.push({
|
|
wid: 'self',
|
|
event: 'on_parent',
|
|
actiontype: 'urlwidget',
|
|
target: 'self',
|
|
options: {
|
|
url: this.item_template_url,
|
|
params: {
|
|
item: item,
|
|
index: index,
|
|
id: 'item_' + index
|
|
}
|
|
},
|
|
mode: 'replace'
|
|
});
|
|
|
|
this.appendChild(itemContainer);
|
|
});
|
|
|
|
this.refresh();
|
|
}
|
|
|
|
// Public method to reload data
|
|
reload() {
|
|
if (this.data_url) {
|
|
this.loadData();
|
|
}
|
|
}
|
|
|
|
// Public method to set items directly
|
|
setItems(items) {
|
|
this.items = items || [];
|
|
this.renderItems();
|
|
}
|
|
};
|
|
|
|
// Register the List component
|
|
bricks.Factory.register('List', bricks.List);
|
|
|
|
console.log('List component registered - uses urlwidget pattern for item rendering'); |