yumoqing/bricks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bugfix

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bricks/build.sh
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 \
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 \

54
bricks/css/bricks.css
View File

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

7
bricks/datarow.js
View File

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

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

21
bricks/layout.js
View File

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

179
bricks/tabular.js
View File

@ -1,84 +1,34 @@
var bricks = window.bricks || {};
bricks.Tabular = class extends bricks.DynamicAccordion {
bricks.Tabular = class extends bricks.DataViewer {
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);
async build_other(){
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));
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<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);