bugfix

bricks/build.sh

@@ -2,7 +2,7 @@ SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js uitype.js \
 	i18n.js widget.js layout.js bricks.js image.js html.js \
 	jsoncall.js myoperator.js scroll.js menu.js modal.js running.js \
 	markdown_viewer.js video.js audio.js toolbar.js tab.js \
-	input.js registerfunction.js button.js accordion.js \
+	input.js registerfunction.js button.js accordion.js dataviewer.js \
 	tree.js multiple_state_image.js dynamiccolumn.js form.js message.js conform.js \
 	paging.js datagrid.js iframe.js cols.js \
 	floaticonbar.js miniform.js wterm.js dynamicaccordion.js \

bricks/css/bricks.css

@@ -103,7 +103,8 @@ body {
 
 .filler, .hfiller, .vfiller {
 	flex: auto;
-	// overflow:auto;
+	flex-grow: 1;
+	overflow:hidden;
 }
 
 .vfiller .vbox:last-child {
@@ -253,19 +254,22 @@ body {
 	display: flex;
 	flex-direction: column;
 }
+.accordion-item {
+	border: 1px solid #ccc;
+	width: auto;
+	margin-bottom: 5px;
+}
 .accordion-item:nth-child(odd) {
 	background-color: #fdfdfd;
+	width: auto;
 }
 .accordion-item:nth-child(even) {
 	background-color: #f9f9f9;
+	width: auto;
 }
 .accordion-item-selected {
 	background-color: #efefef;
 }
-.accordion-item {
-	border: 1px solid #ccc;
-	margin-bottom: 5px;
-}
 .accordion-item-header {
 	padding: 10px;
 	background-color: #f0f0f0;
@@ -274,14 +278,52 @@ body {
 	padding: 10px;
 	background-color: #fbfbfb;
 	cursor: pointer;
+	width: auto;
 	height: 50px;
 }
+.test_box {
+	height: 100px;
+	background-color: #e6e6e6;
+	border-radius: 5px;
+	flex-shrink:0;
+	border: 1px solid #c00;
+}
+	
 .accordion-item-info-selected {
 	background-color: #e6e6e6;
 }
-.accordion-item-content {
+.scrollpanel
+.tabular-table {
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+}
+.tabular-header-row {
+	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;
+}
+.tabular-row:nth-child(even) {
+	background-color: #f9f9f9;
+}
+.tabular-row-selected {
+	background-color: #efefef;
+}
+.tabular-row-content {
 	padding: 10px;
 }
+.tabular-cell {
+	text-overflow: ellipsis;
+}
 
 .llm_msg {
 	margin-left: 5px;

bricks/datarow.js

@@ -24,11 +24,11 @@ bricks.DataRow = class extends bricks.HBox {
 	}
 	render_header(){
 		this.render(true);
-		this.set_css('accordion-item-header');
+		this.set_css('tabular-header-row');
 	}
 	render_data(){
 		this.render(false);
-		this.set_css('accordion-item-info');
+		this.set_css('tabular-row');
 	}
 	render(header){
 		this.build_toolbar(header);
@@ -115,7 +115,7 @@ bricks.DataRow = class extends bricks.HBox {
 				opts.value = f.label || f.name;
 			} else {
 				opts.user_data = this.user_data;
-				opts.value = this.user_data[f.name];
+				opts.value = opts.tip = this.user_data[f.name];
 			}
 			var cwidth = cwidths[f.name];
 			if (cwidth){
@@ -124,6 +124,7 @@ bricks.DataRow = class extends bricks.HBox {
 			var f = bricks.get_ViewBuilder(f.uitype);
 			if (!f) f = bricks.get_ViewBuilder('str');
 			var w = f(opts);
+			w.set_css('tabular-cell');
 			cw.add_widget(w)
 		}
 	}

bricks/dataviewer.js

@@ -0,0 +1,323 @@
+var bricks = window.bricks || {};
+bricks.DataViewer = class extends bricks.VBox {
+	constructor(opts){
+		opts.width = '100%';
+		opts.height = '100%';
+		opts.overflow = 'hidden';
+		super(opts);
+		this.loader = new bricks.PageDataLoader({
+			url:this.opts.data_url,
+			params:this.opts.data_params,
+			pagerows:this.opts.page_rows,
+			method:this.opts.data_method,
+			cache_pages:this.opts.cache_limit
+		});
+		this.old_params = null;
+		this.active_item = null;
+		this.loading = false;
+		this.bind('row_check_changed', this.show_check_event_data.bind(this));
+		schedule_once(this.build_all.bind(this), 0.1);
+	}
+	async build_all(){
+		this.build_title_widget();
+		this.build_description_widget();
+		this.build_toolbar_widget();
+		this.build_records_area();
+		await this.build_other();
+		this.check_changed_row = null;
+		this.scrollpanel.bind('min_threshold', this.load_previous_page.bind(this));
+		this.scrollpanel.bind('max_threshold', this.load_next_page.bind(this));
+		await this.render();
+	}
+	async build_other(){
+	}
+	async render(params) {
+		params = params || {};
+		if (params == this.old_params){
+			return;
+		}
+		this.old_params = params;
+		bricks.debug('params=', params, 'render() called');
+		var d = await this.loader.loadData(params);
+		if (d){
+			this.scrollpanel.clear_widgets();
+			await this.before_data_handle();
+			await this.dataHandle(d);
+		} else {
+			bricks.debug(params, 'load data return null');
+		}
+	}
+	async before_data_handle(){
+	}
+	async dataHandle(d){
+		var data = d.rows;
+		var page = d.add_page;
+		if (!data){
+			return;
+		}
+		await this.renderPageData(data, page);
+		if (d.delete_page){
+			this.delete_page(d.delete_page);
+		}
+	}
+	build_records_area(){
+		this.filler_widget = new bricks.Filler({});
+		this.add_widget(this.filler_widget)
+		this.scrollpanel = new bricks.VBox({});
+		this.scrollpanel.set_css('scrollpanel');
+		this.scrollpanel.set_style('height','100%');
+		this.scrollpanel.set_style('width','100%');
+		this.scrollpanel.set_style('overflow','auto');
+		this.filler_widget.add_widget(this.scrollpanel);
+	}
+	async renderPageData(data, page){
+		for(var i=0; i<data.length;i++){
+			var rec = data[i];
+			await this.build_row(rec);
+		}
+	}
+	async build_record_view(record){
+		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 */
+		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);
+	}
+	show_check_event_data(event){
+		var d = event.params;
+		console.log('row_check_changed event data=', d);
+	}
+	build_toolbar_widget(){
+		var edit_names = [];
+		var tbdesc = {
+			width:'auto',
+			tools:[]
+		}
+		if (this.editable){
+			tbdesc.tools = [
+				{
+					name:'add',
+					tip:'add new record',
+					icon:this.editable.add_icon || bricks_resource('imgs/add.png')
+				},
+				{
+					name:'update',
+					tip:'update selected record',
+					selected_row:true,
+					icon:this.editable.update_icon || bricks_resource('imgs/update.png')
+				},
+				{
+					name:'delete',
+					tip:'delete selected record',
+					selected_row:true,
+					icon:this.editable.delete_icon || bricks_resource('imgs/delete.png')
+				}
+			];
+			tbdesc.tools.forEach(t => {
+				edit_names.push(t.name);
+			});
+		}
+		if (this.toolbar){
+			this.toolbar.tools.forEach(t => {
+				if (! edit_names.incloudes(t.name)){
+					tbdesc.tools.push(t);
+				}
+			});
+		}
+		if (tbdesc.tools.length == 0){
+			return;
+		}
+		this.toolbar_w = new bricks.IconTextBar(tbdesc);
+		this.add_widget(this.toolbar_w);
+		this.toolbar_w.bind('command', this.command_event_handle.bind(this));
+	}
+	command_event_handle(event){
+		var tdesc = event.params;
+		if (tdesc.selected_row && ! this.select_row){
+			bricks.show_error({title:'Error', message:'need select a row'});
+			return;
+		}
+		if (tdesc.name == 'add'){
+			this.add_record();
+			return;
+		}
+		if (tdesc.name == 'update'){
+			this.update_record(this.select_row);
+			return;
+		}
+		if (tdesc.name == 'delete'){
+			this.delete_record(this.select_row);
+			return;
+		}
+		var d = {
+			tabular:this,
+			row:this.select_row,
+			data:row.user_data
+		}
+		this.dispathc(t.name. d);
+	}
+	get_edit_fields(){
+		var fs = this.row_options.fields;
+		this.fields = [];
+		var exclouded = [];
+		if (this.row_options.editexclouded){
+			exclouded = this.row_options.editexclouded;
+		}
+		fs.forEach(f => {
+			if (!exclouded.includes(f.name)){
+				this.fields.push(f);
+			}
+		});
+	}
+	record_check_changed(event){
+		this.check_changed_row = event.params;
+		this.dispatch('row_check_changed', event.params.user_data);
+	}
+	async renew_record_view(form, info){
+		var d = form.getValue();
+		var record = bricks.extend(info.user_data, d);
+		info.renew(record);
+	}
+	get_hidefields(){
+		var fs = [];
+		var params = this.data_params || {};
+		for (var k in params){
+			fs.push({name:k, value:params[k], uitype:'hide'});
+		}
+		return fs;
+	}
+	add_record(info){
+		var hidefields = [];
+		if (!this.data_params){
+			this.data_params = {}
+		}
+		var fs = this.get_hidefields();
+		for (var i=0;i<this.fields.length;i++){
+			fs.push(this.fields[i]);
+		}
+		var f = new bricks.ModalForm({
+				"width":"90%",
+				"height":"70%",
+				"submit_url":this.editable.new_data_url,
+				"fields":fs
+		});
+		f.open();
+		f.bind('submited', this.add_record_finish.bind(this, f));
+	}
+	async add_record_finish(f, event){
+		f.dismiss();
+		var resp = event.params;
+		var desc = await resp.json();
+		var w = await bricks.widgetBuild(desc);
+		this.render();
+	}
+	update_record(){
+		var record = this.select_row.user_data;
+		var fields = this.get_hidefields();
+		for (var i=0; i< this.fields.length; i++){
+			var f = bricks.extend({}, this.fields[i]);
+			f.value = record[f.name];
+			fields.push(f);
+		}
+		var f = new bricks.ModalForm({
+				"width":"90%",
+				"height":"70%",
+				"submit_url":this.editable.update_data_url+'?id=' + record.id,
+				"fields":fields
+		});
+		f.open();
+		f.bind('submited', this.update_record_finish.bind(this, f));
+	}
+	update_cancel(f){
+		f.dismiss();
+	}
+	async update_record_finish(form, event){
+		var resp = event.params;
+		var desc = await resp.json();
+		var w = await bricks.widgetBuild(desc);
+		if (desc.widgettype == 'Message'){
+			await this.renew_record_view(form, this.select_row);
+		}
+	}
+	delete_record(info, 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('discard', conform_w.dismiss.bind(conform_w));
+	}
+	
+	async delete_record_act(){
+		var id = this.select_row.user_data.id;
+		var url = this.editable.delete_data_url + '?id=' + id;
+		var hc = new bricks.HttpJson();
+		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.select_row = null;
+			this.render();
+		}
+	}
+	async load_previous_page(){
+		if (this.loading){
+			bricks.debug('this.loading is set, do not thing');
+			return;
+		}
+		var running = new bricks.Running({target:this});
+		this.loading = true;
+		try {
+			var d = await this.loader.loadPreviousPage();
+			if (d){
+				this.dataHandle(d);
+				var total = this.container.dom_element.scrollHeight - this.container.dom_element.clientHeight;
+				this.container.dom_element.scrollTop = d.pos_rate * total;
+			} else {
+				bricks.debug(this.loader, 'load previous page error');
+			}
+		} catch (e) {
+			bricks.debug('e=', e);
+		}
+		this.loading = false;
+		running.dismiss();
+	}
+	async load_next_page(){
+		if (this.loading){
+			bricks.debug('this.loading is set, do not thing');
+			return;
+		}
+		var running = new bricks.Running({target:this});
+		this.loading = true;
+		try {
+			var d = await this.loader.loadNextPage();
+			if (d){
+				this.dataHandle(d);
+				var total = this.container.dom_element.scrollHeight - this.container.dom_element.clientHeight;
+				this.container.dom_element.scrollTop = d.pos_rate * total;
+			} else {
+				bricks.debug(this.loader, 'load next page error');
+			}
+		} catch (e){
+			bricks.debug('error happened', e);
+		}
+		this.loading = false;
+		running.dismiss();
+		bricks.debug('load_next_page() finished');
+	}
+}
+
+bricks.Factory.register('DataViewer', bricks.DataViewer);

bricks/layout.js

@@ -57,6 +57,24 @@ bricks.Layout = class  extends bricks.JsWidget {
 		}
 		this.children = [];
 	}
+	build_title_widget(){
+		if (this.title){
+			this.title_widget = new bricks.Title3({otext:this.title, i18n:true});
+			this.add_widget(this.title_widget);
+		}
+	}
+	build_description_widget(){
+		if (this.description){
+			this.description_widget = new bricks.Text({otext:this.description, i18n:true});
+			this.add_widget(this.description_widget);
+		}
+	}
+	build_toolbar_widget(ext_tools){
+		if (this.toolbar){
+			this.toolbar_widget = new bricks.FloatTextIconBar(this.toolbar);
+			this.add_widget(this.toolbar_widget);
+		}
+	}
 }
 
 bricks.VBox = class extends bricks.Layout {
@@ -69,8 +87,11 @@ bricks.VBox = class extends bricks.Layout {
 bricks.Filler = class extends bricks.Layout {
 	constructor(options){
 		super(options);
+		this.set_css('filler');
+		/*
 		this.set_style('flexGrow', 1);
 		this.set_style('overflow', 'auto');
+		*/
 	}
 }
 

bricks/tabular.js

@@ -1,84 +1,34 @@
 var bricks = window.bricks || {};
-bricks.Tabular = class extends bricks.DynamicAccordion {
+bricks.Tabular = class extends bricks.DataViewer {
 	constructor(opts){
 		super(opts);
-		this.get_edit_fields();
-		this.check_changed_row = null;
 		this.bind('row_check_changed', this.show_check_event_data.bind(this));
 	}
-
+	async build_other(){
-	show_check_event_data(event){
+		this.get_edit_fields();
-		var d = event.params;
-		console.log('row_check_changed event data=', d);
 	}
-	build_toolbar(){
+	async before_data_handle(){
-		var edit_names = [];
+		await this.build_header_row();
-		var tbdesc = {
-			width:'auto',
-			tools:[]
 	}
-		if (this.editable){
+	async build_header_row(){
-			tbdesc.tools = [
+		var options = bricks.extend({cheight:this.cheight}, this.row_options);
-				{
+		var dr = new bricks.DataRow(options);
-					name:'add',
+		dr.render(false);
-					tip:'add new record',
+		dr.set_css('tabular-header-row');
-					icon:this.editable.add_icon || bricks_resource('imgs/add.png')
+		this.scrollpanel.add_widget(dr);
-				},
-				{
-					name:'update',
-					tip:'update selected record',
-					selected_row:true,
-					icon:this.editable.update_icon || bricks_resource('imgs/update.png')
-				},
-				{
-					name:'delete',
-					tip:'delete selected record',
-					selected_row:true,
-					icon:this.editable.delete_icon || bricks_resource('imgs/delete.png')
 	}
-			];
+	async build_row(record){
-			tbdesc.tools.forEach(t => {
+		var r = await this.build_info(record);
-				edit_names.push(t.name);
+		var row = new bricks.VBox({});
+		row.set_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));
-		if (this.toolbar){
+		row.add_widget(content);
-			this.toolbar.tools.forEach(t => {
+		this.scrollpanel.add_widget(row);
-				if (! edit_names.incloudes(t.name)){
-					tbdesc.tools.push(t);
-				}
-			});
-		}
-		if (tbdesc.tools.length == 0){
-			return;
-		}
-		this.toolbar_w = new bricks.IconTextBar(tbdesc);
-		this.add_widget(this.toolbar_w);
-		this.toolbar_w.bind('command', this.command_event_handle.bind(this));
-	}
-	command_event_handle(event){
-		var tdesc = event.params;
-		if (tdesc.selected_row && ! this.select_row){
-			bricks.show_error({title:'Error', message:'need select a row'});
-			return;
-		}
-		if (tdesc.name == 'add'){
-			this.add_record();
-			return;
-		}
-		if (tdesc.name == 'update'){
-			this.update_record(this.select_row);
-			return;
-		}
-		if (tdesc.name == 'delete'){
-			this.delete_record(this.select_row);
-			return;
-		}
-		var d = {
-			tabular:this,
-			row:this.select_row,
-			data:row.user_data
-		}
-		this.dispathc(t.name. d);
 	}
 	get_edit_fields(){
 		var fs = this.row_options.fields;
@@ -94,7 +44,7 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
 		});
 	}
 
-	async build_info(item, record){
+	async build_info(record){
 		var header = true;
 		var options = bricks.extend({cheight:this.cheight}, this.row_options);
 		if (record){
@@ -104,10 +54,9 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
 		var dr = new bricks.DataRow(options);
 		dr.render(header);
 		dr.event_names.forEach(e => {
-			dr.toolbar_w.bind(e, this.record_event_handle.bind(this, e, record, dr, item));
+			dr.toolbar_w.bind(e, this.record_event_handle.bind(this, e, record, dr));
 		});
 		dr.bind('check_changed', this.record_check_changed.bind(this));
-		item.add_widget(dr);
 		return dr;
 	}
 	record_check_changed(event){
@@ -131,82 +80,6 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
 		}
 		return fs;
 	}
-	add_record(info){
-		var hidefields = [];
-		if (!this.data_params){
-			this.data_params = {}
-		}
-		var fs = this.get_hidefields();
-		for (var i=0;i<this.fields.length;i++){
-			fs.push(this.fields[i]);
-		}
-		var f = new bricks.ModalForm({
-				"width":"90%",
-				"height":"70%",
-				"submit_url":this.editable.new_data_url,
-				"fields":fs
-		});
-		f.open();
-		f.bind('submited', this.add_record_finish.bind(this, f));
-	}
-	async add_record_finish(f, event){
-		f.dismiss();
-		var resp = event.params;
-		var desc = await resp.json();
-		var w = await bricks.widgetBuild(desc);
-		this.render();
-	}
-	update_record(){
-		var record = this.select_row.user_data;
-		var fields = this.get_hidefields();
-		for (var i=0; i< this.fields.length; i++){
-			var f = bricks.extend({}, this.fields[i]);
-			f.value = record[f.name];
-			fields.push(f);
-		}
-		var f = new bricks.ModalForm({
-				"width":"90%",
-				"height":"70%",
-				"submit_url":this.editable.update_data_url+'?id=' + record.id,
-				"fields":fields
-		});
-		f.open();
-		f.bind('submited', this.update_record_finish.bind(this, f));
-	}
-	update_cancel(f){
-		f.dismiss();
-	}
-	async update_record_finish(form, event){
-		var resp = event.params;
-		var desc = await resp.json();
-		var w = await bricks.widgetBuild(desc);
-		if (desc.widgettype == 'Message'){
-			await this.renew_record_view(form, this.select_row);
-		}
-	}
-	delete_record(info, 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('discard', conform_w.dismiss.bind(conform_w));
-	}
-	
-	async delete_record_act(){
-		var id = this.select_row.user_data.id;
-		var url = this.editable.delete_data_url + '?id=' + id;
-		var hc = new bricks.HttpJson();
-		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.select_row = null;
-			this.render();
-		}
-	}
 }
 
 bricks.Factory.register('Tabular', bricks.Tabular);