From 8e020f2616b1ba3b43280386fe0c844cbfbc4a05 Mon Sep 17 00:00:00 2001 From: yumoqing Date: Thu, 30 May 2024 16:06:46 +0800 Subject: [PATCH] bugfix --- bricks/css/bricks.css | 5 +- bricks/datarow.js | 49 +++--------- bricks/dynamicaccordion.js | 4 +- bricks/form.js | 49 ++++++++---- bricks/message.js | 10 +++ bricks/modal.js | 14 +++- bricks/tabular.js | 158 +++++++++++++++++++++++++++++++++---- 7 files changed, 213 insertions(+), 76 deletions(-) diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css index 2905ef3..1bd7f56 100755 --- a/bricks/css/bricks.css +++ b/bricks/css/bricks.css @@ -16,8 +16,8 @@ body { display:none; position: absolute; padding: 10px; - color: #e8e8e8; - background-color: rgba(0.3, 0.3, 0.3, 1); + color: #111111; + 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; diff --git a/bricks/datarow.js b/bricks/datarow.js index 61a7e06..644e1f3 100644 --- a/bricks/datarow.js +++ b/bricks/datarow.js @@ -22,20 +22,16 @@ bricks.DataRow = class extends bricks.HBox { super(opts); this.record_w = null; } - render_header(editable, checkable){ - this.render(editable, checkable, true); + render_header(){ + this.render(true); this.set_css('accordion-item-header'); - this.editable = editable; - this.checkable = checkable; } - render_data(editable, checkable){ - this.render(editable, checkable, false); + render_data(){ + this.render(false); this.set_css('accordion-item-info'); - this.editable = editable; - this.checkable = checkable; } - render(editable, checkable, header){ - this.build_toolbar(editable, header); + render(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); }); } } diff --git a/bricks/dynamicaccordion.js b/bricks/dynamicaccordion.js index cf04b9e..aed1613 100644 --- a/bricks/dynamicaccordion.js +++ b/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({ }); diff --git a/bricks/form.js b/bricks/form.js index d1610fe..444b6bf 100644 --- a/bricks/form.js +++ b/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 || { - width:"auto", - tools:[ - { - icon:bricks_resource('imgs/submit.png'), - name:'submit', - label:'Submit' - }, - { - icon:bricks_resource('imgs/cancel.png'), - name:'cancel', - label:'Cancel' + var tools = [ + { + icon:bricks_resource('imgs/submit.png'), + name:'submit', + css:'submit_btn', + label:'Submit' + }, + { + icon:bricks_resource('imgs/reset.png'), + name:'reset', + css:'reset_btn', + 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()); diff --git a/bricks/message.js b/bricks/message.js index 077112b..4fbb54d 100644 --- a/bricks/message.js +++ b/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 { /* { diff --git a/bricks/modal.js b/bricks/modal.js index 7b2e703..5602ba6 100755 --- a/bricks/modal.js +++ b/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); diff --git a/bricks/tabular.js b/bricks/tabular.js index eacdf7b..4ee8f7f 100644 --- a/bricks/tabular.js +++ b/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){ - case 'add': - this.add_record(row, record); - break; - case 'update': - this.update_record(row, record); - break; - case 'delete': - this.delete_record(row, record); - break; - default: - this.dispatch(event_name, record); - break; + 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(); } } }