bugfix

bricks/build.sh

@@ -1,4 +1,4 @@
-SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js \
+SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js uitype.js \
 	i18n.js widget.js layout.js bricks.js image.js \
 	jsoncall.js myoperator.js scroll.js menu.js modal.js running.js \
 	markdown_viewer.js video.js audio.js toolbar.js tab.js \
@@ -6,7 +6,7 @@ SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js \
 	tree.js multiple_state_image.js dynamiccolumn.js form.js message.js conform.js \
 	paging.js datagrid.js dataviewer.js iframe.js \
 	floaticonbar.js miniform.js wterm.js dynamicaccordion.js \
-	llm_dialog.js websocket.js "
+	llm_dialog.js websocket.js datarow.js tabular.js "
 echo ${SOURCES}
 cat ${SOURCES} > ../dist/bricks.js
 # uglifyjs --compress --mangle -- ../dist/bricks.js > ../dist/bricks.min.js

bricks/datarow.js

@@ -34,7 +34,7 @@ bricks.DataRow = class extends bricks.HBox {
 	}
 	build_toolbar(editable, header){
 		var tools = [];
-		const reserved = ['add', 'update', 'delete'];
+		var rsvd = ['add', 'update', 'delete'];
 
 		if (editable){
 			if (header){
@@ -55,16 +55,22 @@ bricks.DataRow = class extends bricks.HBox {
 		}
 		if (header){
 			if (this.toolbar){
-				this.toolbar.tools.forEach(t => if (not reserved.includes(t.name)) tools.push({name:'blankicon'}));
+				this.toolbar.tools.forEach(t => {
+					if (! rsvd.includes(t.name)) 
+						tools.push({name:'blankicon'});
+				});
 			}
 		} else {
 			if (this.toolbar){
-				this.toolbar.tools.forEach(t => if (not reserved.includes(t.name)) tools.push(t));
+				this.toolbar.tools.forEach(t => {
+					if (! rsvd.includes(t.name)) 
+						tools.push(t)
+				});
 			}
 		}
 		var toolbar = bricks.extend({cwidth:2.5}, this.toolbar || {});
 		toolbar.tools = tools;
-		var w = new bricks.IconBar(desc);
+		var w = new bricks.IconBar(toolbar);
 		this.add_widget(w);
 		this.event_names = []
 		for(var i=0;i<tools.length;i++){
@@ -72,26 +78,19 @@ bricks.DataRow = class extends bricks.HBox {
 			w.bind(tools[i].name, this.dispatch(tools[i].name));
 		}
 	}
+		
 	build_fields(header){
 		for (var i=0;i<this.fields.length;i++){
 			var f = this.fields[i]
-			var opts = {
+			var opts = bricks.extend({
-				margin:'3px';
+				margin:'3px'
-			};
+			}, f);
-			if (f.cwidth ){
-				opts.cwidth = f.cwidth;
-			} else if (f.width) {
-				opts.width = f.width
-			} else {
-				opts.width = '80px'
-			}
 			if (header){
-				opts.otext = f.label || f.name;
+				opts.value = f.label || f.name;
-				opts.i18n = true;
-			} else {
-				opts.text:f.value||f.defaultvalue||'';
 			}
-			var w = bricks.Text(opts);
+			var f = bricks.get_ViewBuilder(f.uitype);
+			if (!f) f = bricks.get_ViewBuilder('str');
+			var w = f(opts);
 			this.add_widget(w)
 		}
 	}

bricks/tabular.js

@@ -1,31 +1,40 @@
 var bricks = window.bricks || {};
-bricks.Tabular = class extends DynamicAccordion {
+bricks.Tabular = class extends bricks.DynamicAccordion {
 	constructor(opts){
 		super(opts);
+		this.fields = this.record_view.fields;
 	}
 	async build_info(item, record){
+		if (this.record_view.widgettype != 'DataRow'){
+			console.log('record_view must be DataRow');
+			return
+		}
 		if (record){
 			/* data row 
 			*/
-			var view = bricks.apply_data(this.record_View, record);
+			console.log('debug -------', this.record_view, record);
-			var dr = bricks.DataRow(view);
+			var desc = bricks.extend({}, this.record_view);
+			var opts = bricks.extend({}, this.record_view.options);
+			opts.user_data = record;
+			desc.options = opts;
+			var dr = await bricks.widgetBuild(desc, this,record);
 			dr.render(this.editable, this.checkable, false);
 			dr.bind('update', this.update_record.bind(this, dr, record));
 			dr.bind('delete', this.delete_record.bind(this, dr, record));
 			dr.event_names.forEach(e => {
-				dr.bind(e, this.record_event_handle.bind(this, record, dr, item));
+				dr.bind(e, this.record_event_handle.bind(this, e, record, dr, item));
 			});
-			return dr;
 		} else {
-			var view = bricks.apply_data(this.record_View, record);
+			var dr = await bricks.widgetBuild(this.record_view, this);
-			var dr = bricks.DataRow(view);
 			dr.render(this.editable, this.checkable, true);
 			dr.bind('add', this.add_record.bind(this, dr, record));
+			console.log('datarow=', dr);
+		}
+		item.add_widget(dr);
 		return dr;
 	}
-	}
+	record_event_handle(event_name, record, row, item){
-	record_event_handle(record, row, item){
+		this.dispatch(event_name, record);
-		
 	}
 }
 

bricks/uitype.js

@@ -0,0 +1,21 @@
+var bricks = window.bricks || {};
+bricks.uiViewers = {};
+bricks.add_ViewBuilder = function(uitype, handler){
+	bricks.uiViewers[uitype] = handler;
+}
+bricks.get_ViewBuilder = function(uitype){
+	return bricks.uiViewers[uitype];
+}
+bricks.add_ViewBuilder('str', function(opts){
+	var options = bricks.extend({}, opts);
+	options.otext = opts.value;
+	options.i18n = true;
+	return new bricks.Text(options);
+});
+
+bricks.add_ViewBuilder('icon', function(opts){
+	var options = bricks.extend({}, opts);
+	options.url = opts.value;
+	return new bricks.Icon(options);
+});
+		

examples/tabular.ui

@@ -0,0 +1,39 @@
+{
+	"widgettype":"Tabular",
+	"options":{
+		"data_url":"{{entire_url('./channels.dspy')}}",
+		"content_url":"{{entire_url('play_channel.dspy')}}",
+		"content_view":{
+			"id":"videoplayer",
+			"widgettype":"Iframe",
+			"options":{
+				"width":"100%",
+				"url":"${url}"
+			}   
+		},
+
+		"record_view":{
+			"widgettype":"DataRow",
+			"options":{
+				"fields":[
+					{
+						"name":"logo_url",
+						"uitype":"icon",
+						"label":"Icon",
+						"value":"${logo_url}"
+					},
+					{
+						"name":"title",
+						"uitype":"str",
+						"lable":"Channel",
+						"value":"${tv_name}"
+					}
+				],
+				"height":"100%",
+				"width":"100%"
+			},
+		},
+		"page_rows":800,
+		"cache_limit":5
+	}
+}