This commit is contained in:
yumoqing 2024-07-07 01:05:31 +08:00
parent 9ed1f6a125
commit f65f996948
6 changed files with 423 additions and 163 deletions

View File

@ -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 \ i18n.js widget.js layout.js bricks.js image.js html.js \
jsoncall.js myoperator.js scroll.js menu.js modal.js running.js \ jsoncall.js myoperator.js scroll.js menu.js modal.js running.js \
markdown_viewer.js video.js audio.js toolbar.js tab.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 \ tree.js multiple_state_image.js dynamiccolumn.js form.js message.js conform.js \
paging.js datagrid.js iframe.js cols.js \ paging.js datagrid.js iframe.js cols.js \
floaticonbar.js miniform.js wterm.js dynamicaccordion.js \ floaticonbar.js miniform.js wterm.js dynamicaccordion.js \

View File

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

View File

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

323
bricks/dataviewer.js Normal file
View File

@ -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);

View File

@ -57,6 +57,24 @@ bricks.Layout = class extends bricks.JsWidget {
} }
this.children = []; 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 { bricks.VBox = class extends bricks.Layout {
@ -69,8 +87,11 @@ bricks.VBox = class extends bricks.Layout {
bricks.Filler = class extends bricks.Layout { bricks.Filler = class extends bricks.Layout {
constructor(options){ constructor(options){
super(options); super(options);
this.set_css('filler');
/*
this.set_style('flexGrow', 1); this.set_style('flexGrow', 1);
this.set_style('overflow', 'auto'); this.set_style('overflow', 'auto');
*/
} }
} }

View File

@ -1,84 +1,34 @@
var bricks = window.bricks || {}; var bricks = window.bricks || {};
bricks.Tabular = class extends bricks.DynamicAccordion { bricks.Tabular = class extends bricks.DataViewer {
constructor(opts){ constructor(opts){
super(opts); super(opts);
this.get_edit_fields();
this.check_changed_row = null;
this.bind('row_check_changed', this.show_check_event_data.bind(this)); 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){
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){ async build_header_row(){
var tdesc = event.params; var options = bricks.extend({cheight:this.cheight}, this.row_options);
if (tdesc.selected_row && ! this.select_row){ var dr = new bricks.DataRow(options);
bricks.show_error({title:'Error', message:'need select a row'}); dr.render(false);
return; dr.set_css('tabular-header-row');
} this.scrollpanel.add_widget(dr);
if (tdesc.name == 'add'){ }
this.add_record(); async build_row(record){
return; var r = await this.build_info(record);
} var row = new bricks.VBox({});
if (tdesc.name == 'update'){ row.set_css('tabular-row');
this.update_record(this.select_row); row.add_widget(r);
return; var content = new bricks.VBox({
} height:'auto',
if (tdesc.name == 'delete'){ display:'none'
this.delete_record(this.select_row); });
return; r.bind('click', this.record_clicked.bind(this, r, record));
} row.add_widget(content);
var d = { this.scrollpanel.add_widget(row);
tabular:this,
row:this.select_row,
data:row.user_data
}
this.dispathc(t.name. d);
} }
get_edit_fields(){ get_edit_fields(){
var fs = this.row_options.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 header = true;
var options = bricks.extend({cheight:this.cheight}, this.row_options); var options = bricks.extend({cheight:this.cheight}, this.row_options);
if (record){ if (record){
@ -104,10 +54,9 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
var dr = new bricks.DataRow(options); var dr = new bricks.DataRow(options);
dr.render(header); dr.render(header);
dr.event_names.forEach(e => { 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)); dr.bind('check_changed', this.record_check_changed.bind(this));
item.add_widget(dr);
return dr; return dr;
} }
record_check_changed(event){ record_check_changed(event){
@ -131,82 +80,6 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
} }
return fs; 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); bricks.Factory.register('Tabular', bricks.Tabular);