bugfix

bricks/css/bricks.css

@@ -299,29 +299,30 @@ body {
 	overflow: auto;
 }
 .tabular-header-row {
+	background-color: #dddddd;
 	display: table-header-group;
 	position: sticky;
 	top: 0;
 	width: auto;
 }
 .tabular-row {
-	border: 1px solid #ccc;
 	width: auto;
 	margin-bottom: 5px;
 }
 .tabular-row:nth-child(odd) {
-	background-color: #fdfdfd;
+	background-color: #5dfdfd;
 }
 .tabular-row:nth-child(even) {
 	background-color: #f9f9f9;
 }
 .tabular-row-selected {
-	background-color: #efefef;
+	background-color: #ef0000;
 }
 .tabular-row-content {
 	padding: 10px;
 }
 .tabular-cell {
+	border: 1px solid #ccc;
 	text-overflow: ellipsis;
 }
 

bricks/datarow.js

@@ -20,15 +20,14 @@ bricks.DataRow = class extends bricks.HBox {
 	*/
 	constructor(opts){
 		super(opts);
+		this.set_style('width', 'auto');
 		this.record_w = null;
 	}
 	render_header(){
 		this.render(true);
-		this.set_css('tabular-header-row');
 	}
 	render_data(){
 		this.render(false);
-		this.set_css('tabular-row');
 	}
 	render(header){
 		this.build_toolbar(header);

bricks/dataviewer.js

@@ -13,8 +13,10 @@ bricks.DataViewer = class extends bricks.VBox {
 			cache_pages:this.opts.cache_limit
 		});
 		this.old_params = null;
+		this.select_row = null;
 		this.active_item = null;
 		this.loading = false;
+		this.data_offset = 0;
 		this.bind('row_check_changed', this.show_check_event_data.bind(this));
 		schedule_once(this.build_all.bind(this), 0.1);
 	}
@@ -71,28 +73,30 @@ bricks.DataViewer = class extends bricks.VBox {
 		this.filler_widget.add_widget(this.scrollpanel);
 	}
 	async renderPageData(data, page){
+		var pos;
+		if (! this.loader.is_max_page(page)){
+			data.reverse();
+			pos = this.data_offset;
+		} else {
+			pos = null;
+		}
+		
 		for(var i=0; i<data.length;i++){
 			var rec = data[i];
-			await this.build_row(rec);
+			await this.build_row(rec, page, pos);
 		}
 	}
 	async build_record_view(record){
+		/* will be overwrite by subclass */
 		var w = new bricks.VBox({width: '100px',height:'100px'});
 		w.set_css('test_box');
+
 		return w;
 	}
-	async build_row(record){
+	async build_row(record, page, pos){
-		/* will be overwrite by subclass */
 		var r = await this.build_record_view(record);
-		r.bind('click', this.record_clicked.bind(this, r, record));
+		r.set_attribute('data-page', page);
-		this.scrollpanel.add_widget(r);
+		this.scrollpanel.add_widget(r, pos);
-	}
-	async record_clicked(info, content, record, event){
-		this.select_line(info);
-		if(! this.content_view){
-			return;
-		}
-		this.toggle_content(info, content, record, event);
 	}
 	show_check_event_data(event){
 		var d = event.params;
@@ -184,10 +188,10 @@ bricks.DataViewer = class extends bricks.VBox {
 		this.check_changed_row = event.params;
 		this.dispatch('row_check_changed', event.params.user_data);
 	}
-	async renew_record_view(form, info){
+	async renew_record_view(form, row){
 		var d = form.getValue();
-		var record = bricks.extend(info.user_data, d);
+		var record = bricks.extend(row.user_data, d);
-		info.renew(record);
+		row.renew(record);
 	}
 	get_hidefields(){
 		var fs = [];
@@ -250,13 +254,13 @@ bricks.DataViewer = class extends bricks.VBox {
 			await this.renew_record_view(form, this.select_row);
 		}
 	}
-	delete_record(info, record){
+	delete_record(row, record){
 		var conform_w = new bricks.Conform({
 			target:this,
 			title:'Delete conform',
 			message:'Are you sure to delete is record?'
 		});
-		conform_w.bind('conformed', this.delete_record_act.bind(this, info, record));
+		conform_w.bind('conformed', this.delete_record_act.bind(this, row, record));
 		conform_w.bind('discard', conform_w.dismiss.bind(conform_w));
 	}
 	
@@ -267,8 +271,7 @@ bricks.DataViewer = class extends bricks.VBox {
 		var desc = await hc.get(url);
 		var w = await bricks.widgetBuild(desc);
 		if (desc.widgettype == 'Message'){
-			this.container.remove_widget(this.select_row.parent);
+			this.scrollpanel.remove_widget(this.select_row);
-			this.select_row.unset_css('accordion-item-info-selected');
 			this.select_row = null;
 			this.render();
 		}
@@ -318,6 +321,13 @@ bricks.DataViewer = class extends bricks.VBox {
 		running.dismiss();
 		bricks.debug('load_next_page() finished');
 	}
+	delete_page(page){
+		var items = this.dom_element.querySelectorAll('[data-page="' + page + '"]');
+		for (var i=0;i<items.length;i++) {
+			var w = items[i].bricks_widget;
+			this.container.remove_widget(w);
+		}
+	}
 }
 
 bricks.Factory.register('DataViewer', bricks.DataViewer);

bricks/form.js

@@ -266,6 +266,7 @@ bricks.Form = class extends bricks.VBox {
 				running.dismiss();
 				return;
 			}
+			data = bricks.delete_null_values(data);
 			this.dispatch('submit', data);
 			if (this.submit_url){
 				var rc = new bricks.HttpResponse();

bricks/input.js

@@ -598,6 +598,12 @@ bricks.UiDate =class extends bricks.UiStr {
 			e.min = this.opts.min_date;
 		}
 	}
+	resultValue(){
+		if (this.value == ''){
+			return null;
+		}
+		return this.value;
+	}
 }
 
 bricks.UiText =class extends bricks.UiType {

bricks/llm.js

@@ -85,7 +85,6 @@ bricks.LlmModel = class extends bricks.JsWidget {
 		}
 		if (this.response_mode == 'stream') {
 			var hr = new bricks.HttpResponseStream();
-			this.set_stream_data();
 			var resp = await hr.post(this.opts.url, {params:d});
 			await hr.handle_chunk(resp, this.chunk_response.bind(this, mout));
 			this.chunk_ended(mout);
@@ -113,34 +112,22 @@ bricks.LlmModel = class extends bricks.JsWidget {
 	llm_msg_format(){
 		return this.llm_message_format || {role:'assistant', content:"${content}"}
 	}
-	set_stream_data(data){
-		if (! data){
-			this.stream_data = null;
-		}
-		if (! this.stream_data){
-			this.stream_data = data;
-			return;
-		}
-		var merge_field = this.opts.merge_field || 'content';
-		this.stream_data[merge_field] += data[merge_field];
-	}
 	chunk_response(mout, l){
 		var d = JSON.parse(l);
 		if (! d.content || d.content == ''){
 			return;
 		}
 		d.content = bricks.escapeSpecialChars(d.content);
-		this.set_stream_data(d);
+		this.resp_data = d;
-		mout.update_data(this.stream_data);
+		mout.update_data(d);
 	}
 	chunk_ended(){
 		if (! this.messages) return;
-
 		var msg = this.llm_msg_format();
 		var merge_field = this.opts.merge_field || 'content';
-		var txt = bricks.escapeSpecialChars(this.stream_data[merge_field]);
+		var txt = bricks.escapeSpecialChars(this.resp_data.content)
-		this.stream_data[merge_field] = txt;
+		this.resp_data.content = txt;
-		var lmsg = bricks.apply_data(msg, this.stream_data);
+		var lmsg = bricks.apply_data(msg, this.this.resp_data);
 		this.messages.push(lmsg);
 	}
 }
@@ -174,7 +161,7 @@ bricks.LlmIO = class extends bricks.VBox {
 		this.llmmodels = [];
 		this.title_w = new bricks.HBox({cheight:2});
 		this.i_w = new bricks.VBox({cheight:5});
-		this.o_w = new bricks.Filler({});
+		this.o_w = new bricks.Filler({overflow:'auto'});
 		this.add_widget(this.title_w);
 		this.add_widget(this.o_w);
 		this.add_widget(this.i_w);

bricks/tabular.js

@@ -9,6 +9,7 @@ bricks.Tabular = class extends bricks.DataViewer {
 	}
 	async before_data_handle(){
 		await this.build_header_row();
+		this.data_offset = 1;
 	}
 	async build_header_row(){
 		var options = bricks.extend({cheight:this.cheight}, this.row_options);
@@ -17,18 +18,62 @@ bricks.Tabular = class extends bricks.DataViewer {
 		dr.set_css('tabular-header-row');
 		this.scrollpanel.add_widget(dr);
 	}
-	async build_row(record){
+	async build_record_view(record){
 		var r = await this.build_info(record);
-		var row = new bricks.VBox({});
+		if (!this.content_view){
-		row.set_css('tabular-row');
+			r.user_data = record;
+			r.bind('click', this.record_clicked.bind(this, r, record));
+			return r;
+		}
+		var row = new bricks.VBox({
+			css:'tabular-row'
+		});
 		row.add_widget(r);
 		var content = new bricks.VBox({
 			height:'auto',
 			display:'none'
 		});
-		r.bind('click', this.record_clicked.bind(this, r, record));
 		row.add_widget(content);
-		this.scrollpanel.add_widget(row);
+		r.bind('click', this.record_clicked.bind(this, row, record));
+		row.rec_widget = r;
+		row.content_widget = content;
+		row.user_data = record;
+		return row
+	}
+	async record_clicked(row, record, event){
+		var r = event.target.bricks_widget;
+		var old_select_row = this.select_row;
+		if (old_select_row){
+			this.select_row = null;
+			if (this.content_view){
+				await this.toggle_content(old_select_row, false);
+				old_select_row.rec_widget.set_css('tabular-row-selected', true);
+			} else {
+				old_select_row.set_css('tabular-row-selected', true);
+			}
+		}
+		if (old_select_row != row){
+			this.select_row = row;
+			if (this.content_view){
+				row.rec_widget.set_css('tabular-row-selected');
+				await this.toggle_content(row, true);
+			} else {
+				row.set_css('tabular-row-selected');
+			}
+		}
+	}
+	async toggle_content(row, flag){
+		if (flag){
+			row.content_widget.show();
+			row.content_widget.clear_widgets();
+			var w = await bricks.widgetBuild(this.content_view, row.content_widget, row.user_data);
+			if (w){
+				row.content_widget.add_widget(w);
+			}
+		} else {
+			row.content_widget.hide();
+			row.content_widget.clear_widgets();
+		}
 	}
 	get_edit_fields(){
 		var fs = this.row_options.fields;
@@ -63,10 +108,14 @@ bricks.Tabular = class extends bricks.DataViewer {
 		this.check_changed_row = event.params;
 		this.dispatch('row_check_changed', event.params.user_data);
 	}
-	async renew_record_view(form, info){
+	async renew_record_view(form, row){
 		var d = form.getValue();
-		var record = bricks.extend(info.user_data, d);
+		var record = bricks.extend(row.user_data, d);
-		info.renew(record);
+		if (this.content_view){
+			row.rec_widget.renew(record);
+		} else {
+			row.renew(record);
+		}
 	}
 	record_event_handle(event_name, record, row, item){
 		console.log('event_name=', event_name, 'record=', record);

bricks/utils.js

@@ -1,5 +1,14 @@
 var bricks = window.bricks || {};
 bricks.bug = false;
+bricks.delete_null_values = function(obj) {
+  for (let key in obj) {
+    if (obj[key] === null) {
+      delete obj[key];
+    }
+  }
+  return obj;
+}
+
 bricks.is_empty = function(obj){
 	if (obj === null) return true;
 	return JSON.stringify(obj) === '{}';