From f65f996948610fa190bdf09070747977467b0f14 Mon Sep 17 00:00:00 2001 From: yumoqing Date: Sun, 7 Jul 2024 01:05:31 +0800 Subject: [PATCH] bugfix --- bricks/build.sh | 2 +- bricks/css/bricks.css | 54 ++++++- bricks/datarow.js | 7 +- bricks/dataviewer.js | 323 ++++++++++++++++++++++++++++++++++++++++++ bricks/layout.js | 21 +++ bricks/tabular.js | 179 ++++------------------- 6 files changed, 423 insertions(+), 163 deletions(-) create mode 100644 bricks/dataviewer.js diff --git a/bricks/build.sh b/bricks/build.sh index 7daf8ee..e2c267e 100755 --- a/bricks/build.sh +++ b/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 \ diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css index 972bb40..855f137 100755 --- a/bricks/css/bricks.css +++ b/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; diff --git a/bricks/datarow.js b/bricks/datarow.js index f30158b..1535c4c 100644 --- a/bricks/datarow.js +++ b/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) } } diff --git a/bricks/dataviewer.js b/bricks/dataviewer.js new file mode 100644 index 0000000..76a3138 --- /dev/null +++ b/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 { + 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 { - 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)); + async before_data_handle(){ + await this.build_header_row(); } - 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); + async build_header_row(){ + var options = bricks.extend({cheight:this.cheight}, this.row_options); + var dr = new bricks.DataRow(options); + dr.render(false); + dr.set_css('tabular-header-row'); + this.scrollpanel.add_widget(dr); + } + async build_row(record){ + var r = await this.build_info(record); + 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)); + row.add_widget(content); + this.scrollpanel.add_widget(row); } 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