From 4ae8e26749bc94a5c700f123cfeae209151411d8 Mon Sep 17 00:00:00 2001
From: yumoqing <yumoqing@gmail.com>
Date: Mon, 8 Jul 2024 21:19:09 +0800
Subject: [PATCH] bugfix

---
 bricks/css/bricks.css |  7 +++--
 bricks/datarow.js     |  3 +-
 bricks/dataviewer.js  | 48 +++++++++++++++++++-------------
 bricks/form.js        | 29 +++++++++----------
 bricks/input.js       |  6 ++++
 bricks/llm.js         | 25 ++++-------------
 bricks/tabular.js     | 65 +++++++++++++++++++++++++++++++++++++------
 bricks/utils.js       |  9 ++++++
 8 files changed, 127 insertions(+), 65 deletions(-)

diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css
index 855f137..3a05ab1 100755
--- a/bricks/css/bricks.css
+++ b/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;
 }
 
diff --git a/bricks/datarow.js b/bricks/datarow.js
index 1535c4c..b9470a2 100644
--- a/bricks/datarow.js
+++ b/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);
diff --git a/bricks/dataviewer.js b/bricks/dataviewer.js
index 76a3138..ca9150e 100644
--- a/bricks/dataviewer.js
+++ b/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){
-		/* will be overwrite by subclass */
+	async build_row(record, page, pos){
 		var r = await this.build_record_view(record);
-		r.bind('click', this.record_clicked.bind(this, r, record));
-		this.scrollpanel.add_widget(r);
-	}
-	async record_clicked(info, content, record, event){
-		this.select_line(info);
-		if(! this.content_view){
-			return;
-		}
-		this.toggle_content(info, content, record, event);
+		r.set_attribute('data-page', page);
+		this.scrollpanel.add_widget(r, pos);
 	}
 	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);
-		info.renew(record);
+		var record = bricks.extend(row.user_data, d);
+		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.select_row.unset_css('accordion-item-info-selected');
+			this.scrollpanel.remove_widget(this.select_row);
 			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);
diff --git a/bricks/form.js b/bricks/form.js
index ad709e2..c0142d3 100644
--- a/bricks/form.js
+++ b/bricks/form.js
@@ -262,20 +262,21 @@ bricks.Form = class extends bricks.VBox {
 			} else {
 				data = this.getValue();
 			}
-		if (! data) {
-			running.dismiss();
-			return;
-		}
-		this.dispatch('submit', data);
-		if (this.submit_url){
-			var rc = new bricks.HttpResponse();
-			var resp = await rc.httpcall(this.submit_url,
-						{
-							method:this.method || 'POST',
-							params:data
-						});
-			this.dispatch('submited', resp);
-		}
+			if (! data) {
+				running.dismiss();
+				return;
+			}
+			data = bricks.delete_null_values(data);
+			this.dispatch('submit', data);
+			if (this.submit_url){
+				var rc = new bricks.HttpResponse();
+				var resp = await rc.httpcall(this.submit_url,
+							{
+								method:this.method || 'POST',
+								params:data
+							});
+				this.dispatch('submited', resp);
+			}
 		} catch (e){
 			console.log('form submit error', e);
 		}
diff --git a/bricks/input.js b/bricks/input.js
index ce4851d..474173f 100755
--- a/bricks/input.js
+++ b/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 {
diff --git a/bricks/llm.js b/bricks/llm.js
index fb53e1f..92459de 100644
--- a/bricks/llm.js
+++ b/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);
-		mout.update_data(this.stream_data);
+		this.resp_data = d;
+		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]);
-		this.stream_data[merge_field] = txt;
-		var lmsg = bricks.apply_data(msg, this.stream_data);
+		var txt = bricks.escapeSpecialChars(this.resp_data.content)
+		this.resp_data.content = txt;
+		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);
diff --git a/bricks/tabular.js b/bricks/tabular.js
index 7cb9721..de8df4b 100644
--- a/bricks/tabular.js
+++ b/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({});
-		row.set_css('tabular-row');
+		if (!this.content_view){
+			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);
-		info.renew(record);
+		var record = bricks.extend(row.user_data, d);
+		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);
diff --git a/bricks/utils.js b/bricks/utils.js
index 66bb57c..c392b4f 100755
--- a/bricks/utils.js
+++ b/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) === '{}';