This commit is contained in:
yumoqing 2024-05-06 11:19:10 +08:00
parent 6adcd1d730
commit 03afb3950e
5 changed files with 99 additions and 31 deletions

View File

@ -1,4 +1,4 @@
SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js \
SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js uitype.js \
i18n.js widget.js layout.js bricks.js image.js \
jsoncall.js myoperator.js scroll.js menu.js modal.js running.js \
markdown_viewer.js video.js audio.js toolbar.js tab.js \
@ -6,7 +6,7 @@ SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js \
tree.js multiple_state_image.js dynamiccolumn.js form.js message.js conform.js \
paging.js datagrid.js dataviewer.js iframe.js \
floaticonbar.js miniform.js wterm.js dynamicaccordion.js \
llm_dialog.js websocket.js "
llm_dialog.js websocket.js datarow.js tabular.js "
echo ${SOURCES}
cat ${SOURCES} > ../dist/bricks.js
# uglifyjs --compress --mangle -- ../dist/bricks.js > ../dist/bricks.min.js

View File

@ -34,7 +34,7 @@ bricks.DataRow = class extends bricks.HBox {
}
build_toolbar(editable, header){
var tools = [];
const reserved = ['add', 'update', 'delete'];
var rsvd = ['add', 'update', 'delete'];
if (editable){
if (header){
@ -55,16 +55,22 @@ bricks.DataRow = class extends bricks.HBox {
}
if (header){
if (this.toolbar){
this.toolbar.tools.forEach(t => if (not reserved.includes(t.name)) tools.push({name:'blankicon'}));
this.toolbar.tools.forEach(t => {
if (! rsvd.includes(t.name))
tools.push({name:'blankicon'});
});
}
} else {
if (this.toolbar){
this.toolbar.tools.forEach(t => if (not reserved.includes(t.name)) tools.push(t));
this.toolbar.tools.forEach(t => {
if (! rsvd.includes(t.name))
tools.push(t)
});
}
}
var toolbar = bricks.extend({cwidth:2.5}, this.toolbar || {});
toolbar.tools = tools;
var w = new bricks.IconBar(desc);
var w = new bricks.IconBar(toolbar);
this.add_widget(w);
this.event_names = []
for(var i=0;i<tools.length;i++){
@ -72,26 +78,19 @@ bricks.DataRow = class extends bricks.HBox {
w.bind(tools[i].name, this.dispatch(tools[i].name));
}
}
build_fields(header){
for (var i=0;i<this.fields.length;i++){
var f = this.fields[i]
var opts = {
margin:'3px';
};
if (f.cwidth ){
opts.cwidth = f.cwidth;
} else if (f.width) {
opts.width = f.width
} else {
opts.width = '80px'
}
var opts = bricks.extend({
margin:'3px'
}, f);
if (header){
opts.otext = f.label || f.name;
opts.i18n = true;
} else {
opts.text:f.value||f.defaultvalue||'';
opts.value = f.label || f.name;
}
var w = bricks.Text(opts);
var f = bricks.get_ViewBuilder(f.uitype);
if (!f) f = bricks.get_ViewBuilder('str');
var w = f(opts);
this.add_widget(w)
}
}

View File

@ -1,31 +1,40 @@
var bricks = window.bricks || {};
bricks.Tabular = class extends DynamicAccordion {
bricks.Tabular = class extends bricks.DynamicAccordion {
constructor(opts){
super(opts);
this.fields = this.record_view.fields;
}
async build_info(item, record){
if (this.record_view.widgettype != 'DataRow'){
console.log('record_view must be DataRow');
return
}
if (record){
/* data row
*/
var view = bricks.apply_data(this.record_View, record);
var dr = bricks.DataRow(view);
console.log('debug -------', this.record_view, record);
var desc = bricks.extend({}, this.record_view);
var opts = bricks.extend({}, this.record_view.options);
opts.user_data = record;
desc.options = opts;
var dr = await bricks.widgetBuild(desc, this,record);
dr.render(this.editable, this.checkable, false);
dr.bind('update', this.update_record.bind(this, dr, record));
dr.bind('delete', this.delete_record.bind(this, dr, record));
dr.event_names.forEach(e => {
dr.bind(e, this.record_event_handle.bind(this, record, dr, item));
dr.bind(e, this.record_event_handle.bind(this, e, record, dr, item));
});
return dr;
} else {
var view = bricks.apply_data(this.record_View, record);
var dr = bricks.DataRow(view);
var dr = await bricks.widgetBuild(this.record_view, this);
dr.render(this.editable, this.checkable, true);
dr.bind('add', this.add_record.bind(this, dr, record));
return dr;
console.log('datarow=', dr);
}
item.add_widget(dr);
return dr;
}
record_event_handle(record, row, item){
record_event_handle(event_name, record, row, item){
this.dispatch(event_name, record);
}
}

21
bricks/uitype.js Normal file
View File

@ -0,0 +1,21 @@
var bricks = window.bricks || {};
bricks.uiViewers = {};
bricks.add_ViewBuilder = function(uitype, handler){
bricks.uiViewers[uitype] = handler;
}
bricks.get_ViewBuilder = function(uitype){
return bricks.uiViewers[uitype];
}
bricks.add_ViewBuilder('str', function(opts){
var options = bricks.extend({}, opts);
options.otext = opts.value;
options.i18n = true;
return new bricks.Text(options);
});
bricks.add_ViewBuilder('icon', function(opts){
var options = bricks.extend({}, opts);
options.url = opts.value;
return new bricks.Icon(options);
});

39
examples/tabular.ui Normal file
View File

@ -0,0 +1,39 @@
{
"widgettype":"Tabular",
"options":{
"data_url":"{{entire_url('./channels.dspy')}}",
"content_url":"{{entire_url('play_channel.dspy')}}",
"content_view":{
"id":"videoplayer",
"widgettype":"Iframe",
"options":{
"width":"100%",
"url":"${url}"
}
},
"record_view":{
"widgettype":"DataRow",
"options":{
"fields":[
{
"name":"logo_url",
"uitype":"icon",
"label":"Icon",
"value":"${logo_url}"
},
{
"name":"title",
"uitype":"str",
"lable":"Channel",
"value":"${tv_name}"
}
],
"height":"100%",
"width":"100%"
},
},
"page_rows":800,
"cache_limit":5
}
}