bricks/bricks/tabular.js

var bricks = window.bricks || {};
bricks.Tabular = class extends bricks.DynamicAccordion {
	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));
	}

	show_check_event_data(event){
		var d = event.params;
		console.log('row_check_changed event data=', d);
	}
	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 = [];
		var exclouded = [];
		if (this.row_options.editexclouded){
			exclouded = this.row_options.editexclouded;
		}
		fs.forEach(f => {
			if (!exclouded.includes(f.name)){
				this.fields.push(f);
			}
		});
	}

	async build_info(item, record){
		var header = true;
		var options = bricks.extend({cheight:this.cheight}, this.row_options);
		if (record){
			options.user_data = record;
			header = false;
		}
		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.bind('check_changed', this.record_check_changed.bind(this));
		item.add_widget(dr);
		return dr;
	}
	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);
	}
	record_event_handle(event_name, record, row, item){
		console.log('event_name=', event_name, 'record=', record);
		this.dispatch(event_name, record);
	}
	add_record(info){
		var f = new bricks.ModalForm({
				"width":"90%",
				"height":"70%",
				"submit_url":this.editable.new_data_url,
				"fields":this.fields
		});
		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 = [];
		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);