bugfix

bricks/css/bricks.css

@@ -16,8 +16,8 @@ body {
 	display:none;
 	position: absolute;
 	padding: 10px;
-	color: #e8e8e8;
+	color: #111111;
-	background-color: rgba(0.3, 0.3, 0.3, 1);
+	background-color: #dddddd;
 	border: 1px solid #ccc;
 	border-radius: 5px;
 	margin-bottom: 10px;
@@ -188,6 +188,7 @@ body {
 
 .inputbox {
 	background-color: #f8f8f8;
+	color: #111111;
 	border: 1px solid #ccc;
 	padding: 10px;
 	margin: 0 0 1em 0;

bricks/datarow.js

@@ -22,20 +22,16 @@ bricks.DataRow = class extends bricks.HBox {
 		super(opts);
 		this.record_w = null;
 	}
-	render_header(editable, checkable){
+	render_header(){
-		this.render(editable, checkable, true);
+		this.render(true);
 		this.set_css('accordion-item-header');
-		this.editable = editable;
-		this.checkable = checkable;
 	}
-	render_data(editable, checkable){
+	render_data(){
-		this.render(editable, checkable, false);
+		this.render(false);
 		this.set_css('accordion-item-info');
-		this.editable = editable;
-		this.checkable = checkable;
 	}
-	render(editable, checkable, header){
+	render(header){
-		this.build_toolbar(editable, header);
+		this.build_toolbar(header);
 		if (this.checkField){
 			var w;
 			if (header){
@@ -58,45 +54,18 @@ bricks.DataRow = class extends bricks.HBox {
 		this.user_data[this.checkField] = d[this.checkField];
 		this.dispatch('check_changed', this);
 	}
-	build_toolbar(editable, header){
+	build_toolbar(header){
 		var tools = [];
-		var rsvd = ['add', 'update', 'delete'];
-
-		if (editable){
-			if (header){
-				tools.push({
-					name:'add',
-					tip:'add new record',
-					icon:editable.add_icon || bricks_resource('imgs/add.png')
-				});
-				tools.push({
-					name:'blankicon'
-				});
-			} else {
-				tools.push({
-					name:'update',
-					tip:'update current record',
-					icon:editable.update_icon || bricks_resource('imgs/update.png')
-				});
-				tools.push({
-					name:'delete',
-					tip:'delete current record',
-					icon:editable.delete_icon || bricks_resource('imgs/delete.png')
-				});
-			}
-		}
 		if (header){
 			if (this.toolbar){
 				this.toolbar.tools.forEach(t => {
-					if (! rsvd.includes(t.name)) 
+					tools.push({name:'blankicon'});
-						tools.push({name:'blankicon'});
 				});
 			}
 		} else {
 			if (this.toolbar){
 				this.toolbar.tools.forEach(t => {
-					if (! rsvd.includes(t.name)) 
+					tools.push(t);
-						tools.push(t)
 				});
 			}
 		}

bricks/dynamicaccordion.js

@@ -56,9 +56,7 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 		if (this.description){
 			this.build_description();
 		}
-		if (this.toolbar){
+		await this.build_toolbar();
-			await this.build_toolbar();
-		}
 		await this.build_header();
 		var filler = new bricks.Filler();
 		this.container = new bricks.VScrollPanel({ });

bricks/form.js

@@ -131,21 +131,42 @@ bricks.Form = class extends bricks.VBox {
 	build_toolbar(widget){
 		var box = new bricks.HBox({height:'auto', width:'100%'});
 		widget.add_widget(box);
-		var tb_desc = this.opts.toolbar || {
+		var tools = [
-			width:"auto",
+			{
-			tools:[
+				icon:bricks_resource('imgs/submit.png'),
-				{
+				name:'submit',
-					icon:bricks_resource('imgs/submit.png'),
+				css:'submit_btn',
-					name:'submit',
+				label:'Submit'
-					label:'Submit'
+			},
-				},
+			{
-				{
+				icon:bricks_resource('imgs/reset.png'),
-					icon:bricks_resource('imgs/cancel.png'),
+				name:'reset',
-					name:'cancel',
+				css:'reset_btn',
-					label:'Cancel'
+				label:'Reset'
+			},
+			{
+				icon:bricks_resource('imgs/cancel.png'),
+				name:'cancel',
+				css:'clear_btn',
+				label:'Cancel'
+			}
+		]
+		var tb_desc;
+		var names = [ ' submit', 'reset', 'cancel' ];
+		if (this.toolbar){
+			tb_desc = bricks.extend(tb_desc, this.toolbar);
+			tb_desc.tools = tools;
+			this.toolbar.tools.forEach(t => {
+				if (! names.includes(t.name)) {
+					tb_desc.tools.push(t);
 				}
-			]
+			});
-		};
+		} else {
+			tb_desc = {
+				width:"auto",
+				tools:tools
+			};
+		}
 		var tbw = new bricks.IconTextBar(tb_desc);
 		tbw.bind('command', this.command_handle.bind(this));
 		box.add_widget(new bricks.Filler());

bricks/message.js

@@ -92,6 +92,16 @@ bricks.Error = class extends bricks.Message {
 	}
 }
 
+bricks.show_error = function(opts){
+	var w = new bricks.Error(opts);
+	w.open();
+}
+
+bricks.show_message = function(opts){
+	var w = new bricks.Message(opts);
+	w.open();
+}
+
 bricks.PopupForm = class extends bricks.BPopup {
 	/* 
 	{

bricks/modal.js

@@ -186,23 +186,33 @@ bricks.ModalForm = class extends bricks.Modal {
 		super(opts);
 		this.build_form();
 	}
+	getValue(){
+		return this.form.getValue();
+	}
 	build_form(){
 		var opts = {
 			title:this.opts.title,
 			description:this.opts.description,
 			fields:this.opts.fields
 		}
+		if (this.submit_url){
+			opts.submit_url = this.submit_url;
+		}
 		this.form = new bricks.Form(opts);
 		this.add_widget(this.form);
-		this.form.bind('submit', this.form_submitted.bind(this));
+		this.form.bind('submit', this.form_submit.bind(this));
+		this.form.bind('submited', this.form_submited.bind(this));
 		this.form.bind('cancel', this.dismiss.bind(this))
 		this.open();
 	}
-	form_submitted(){
+	form_submit(){
 		var d = this.form.getValue();
 		this.dispatch('submit', d)
 		this.dismiss();
 	}
+	form_submited(event){
+		this.dispatch('submited', event.params);
+	}
 }
 bricks.Factory.register('Modal', bricks.Modal);
 bricks.Factory.register('ModalForm', bricks.ModalForm);

bricks/tabular.js

@@ -4,6 +4,75 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
 		super(opts);
 		this.get_edit_fields();
 	}
+	build_toolbar(){
+		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 = [];
@@ -26,7 +95,7 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
 			header = false;
 		}
 		var dr = new bricks.DataRow(options);
-		dr.render(this.editable, this.checkable, header);
+		dr.render(header);
 		dr.event_names.forEach(e => {
 			dr.toolbar_w.bind(e, this.record_event_handle.bind(this, e, record, dr, item));
 		});
@@ -35,7 +104,11 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
 		return dr;
 	}
 	record_check_changed(event){
-		var data = event.params.user_data;
+		var data = {
+			tabular:this, 
+			'row': event.params,
+			'data':event.params.user_data
+		};
 		this.dispatch('row_check_changed', data);
 	}
 	async renew_record_view(form, info){
@@ -45,19 +118,74 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
 	}
 	record_event_handle(event_name, record, row, item){
 		console.log('event_name=', event_name, 'record=', record);
-		switch(event_name){
+		this.dispatch(event_name, record);
-			case 'add':
+	}
-				this.add_record(row, record);
+	add_record(info){
-				break;
+		var f = new bricks.ModalForm({
-			case 'update':
+				"width":"90%",
-				this.update_record(row, record);
+				"height":"70%",
-				break;
+				"submit_url":this.editable.new_data_url,
-			case 'delete':
+				"fields":this.fields
-				this.delete_record(row, record);
+		});
-				break;
+		f.open();
-			default:
+		f.bind('submited', this.add_record_finish.bind(this, f));
-				this.dispatch(event_name, record);
+	}
-				break;
+	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 = [];
+		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();
 		}
 	}
 }