This commit is contained in:
yumoqing 2024-05-30 16:06:46 +08:00
parent 1b6085b6c0
commit 8e020f2616
7 changed files with 213 additions and 76 deletions

View File

@ -16,8 +16,8 @@ body {
display:none; display:none;
position: absolute; position: absolute;
padding: 10px; padding: 10px;
color: #e8e8e8; color: #111111;
background-color: rgba(0.3, 0.3, 0.3, 1); background-color: #dddddd;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
margin-bottom: 10px; margin-bottom: 10px;
@ -188,6 +188,7 @@ body {
.inputbox { .inputbox {
background-color: #f8f8f8; background-color: #f8f8f8;
color: #111111;
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 10px; padding: 10px;
margin: 0 0 1em 0; margin: 0 0 1em 0;

View File

@ -22,20 +22,16 @@ bricks.DataRow = class extends bricks.HBox {
super(opts); super(opts);
this.record_w = null; this.record_w = null;
} }
render_header(editable, checkable){ render_header(){
this.render(editable, checkable, true); this.render(true);
this.set_css('accordion-item-header'); this.set_css('accordion-item-header');
this.editable = editable;
this.checkable = checkable;
} }
render_data(editable, checkable){ render_data(){
this.render(editable, checkable, false); this.render(false);
this.set_css('accordion-item-info'); this.set_css('accordion-item-info');
this.editable = editable;
this.checkable = checkable;
} }
render(editable, checkable, header){ render(header){
this.build_toolbar(editable, header); this.build_toolbar(header);
if (this.checkField){ if (this.checkField){
var w; var w;
if (header){ if (header){
@ -58,45 +54,18 @@ bricks.DataRow = class extends bricks.HBox {
this.user_data[this.checkField] = d[this.checkField]; this.user_data[this.checkField] = d[this.checkField];
this.dispatch('check_changed', this); this.dispatch('check_changed', this);
} }
build_toolbar(editable, header){ build_toolbar(header){
var tools = []; 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 (header){
if (this.toolbar){ if (this.toolbar){
this.toolbar.tools.forEach(t => { this.toolbar.tools.forEach(t => {
if (! rsvd.includes(t.name)) tools.push({name:'blankicon'});
tools.push({name:'blankicon'});
}); });
} }
} else { } else {
if (this.toolbar){ if (this.toolbar){
this.toolbar.tools.forEach(t => { this.toolbar.tools.forEach(t => {
if (! rsvd.includes(t.name)) tools.push(t);
tools.push(t)
}); });
} }
} }

View File

@ -56,9 +56,7 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
if (this.description){ if (this.description){
this.build_description(); this.build_description();
} }
if (this.toolbar){ await this.build_toolbar();
await this.build_toolbar();
}
await this.build_header(); await this.build_header();
var filler = new bricks.Filler(); var filler = new bricks.Filler();
this.container = new bricks.VScrollPanel({ }); this.container = new bricks.VScrollPanel({ });

View File

@ -131,21 +131,42 @@ bricks.Form = class extends bricks.VBox {
build_toolbar(widget){ build_toolbar(widget){
var box = new bricks.HBox({height:'auto', width:'100%'}); var box = new bricks.HBox({height:'auto', width:'100%'});
widget.add_widget(box); widget.add_widget(box);
var tb_desc = this.opts.toolbar || { var tools = [
width:"auto", {
tools:[ icon:bricks_resource('imgs/submit.png'),
{ name:'submit',
icon:bricks_resource('imgs/submit.png'), css:'submit_btn',
name:'submit', label:'Submit'
label:'Submit' },
}, {
{ icon:bricks_resource('imgs/reset.png'),
icon:bricks_resource('imgs/cancel.png'), name:'reset',
name:'cancel', css:'reset_btn',
label:'Cancel' 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); var tbw = new bricks.IconTextBar(tb_desc);
tbw.bind('command', this.command_handle.bind(this)); tbw.bind('command', this.command_handle.bind(this));
box.add_widget(new bricks.Filler()); box.add_widget(new bricks.Filler());

View File

@ -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 { bricks.PopupForm = class extends bricks.BPopup {
/* /*
{ {

View File

@ -186,23 +186,33 @@ bricks.ModalForm = class extends bricks.Modal {
super(opts); super(opts);
this.build_form(); this.build_form();
} }
getValue(){
return this.form.getValue();
}
build_form(){ build_form(){
var opts = { var opts = {
title:this.opts.title, title:this.opts.title,
description:this.opts.description, description:this.opts.description,
fields:this.opts.fields fields:this.opts.fields
} }
if (this.submit_url){
opts.submit_url = this.submit_url;
}
this.form = new bricks.Form(opts); this.form = new bricks.Form(opts);
this.add_widget(this.form); 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.form.bind('cancel', this.dismiss.bind(this))
this.open(); this.open();
} }
form_submitted(){ form_submit(){
var d = this.form.getValue(); var d = this.form.getValue();
this.dispatch('submit', d) this.dispatch('submit', d)
this.dismiss(); this.dismiss();
} }
form_submited(event){
this.dispatch('submited', event.params);
}
} }
bricks.Factory.register('Modal', bricks.Modal); bricks.Factory.register('Modal', bricks.Modal);
bricks.Factory.register('ModalForm', bricks.ModalForm); bricks.Factory.register('ModalForm', bricks.ModalForm);

View File

@ -4,6 +4,75 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
super(opts); super(opts);
this.get_edit_fields(); 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(){ get_edit_fields(){
var fs = this.row_options.fields; var fs = this.row_options.fields;
this.fields = []; this.fields = [];
@ -26,7 +95,7 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
header = false; header = false;
} }
var dr = new bricks.DataRow(options); var dr = new bricks.DataRow(options);
dr.render(this.editable, this.checkable, 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, item));
}); });
@ -35,7 +104,11 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
return dr; return dr;
} }
record_check_changed(event){ 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); this.dispatch('row_check_changed', data);
} }
async renew_record_view(form, info){ async renew_record_view(form, info){
@ -45,19 +118,74 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
} }
record_event_handle(event_name, record, row, item){ record_event_handle(event_name, record, row, item){
console.log('event_name=', event_name, 'record=', record); console.log('event_name=', event_name, 'record=', record);
switch(event_name){ this.dispatch(event_name, record);
case 'add': }
this.add_record(row, record); add_record(info){
break; var f = new bricks.ModalForm({
case 'update': "width":"90%",
this.update_record(row, record); "height":"70%",
break; "submit_url":this.editable.new_data_url,
case 'delete': "fields":this.fields
this.delete_record(row, record); });
break; f.open();
default: f.bind('submited', this.add_record_finish.bind(this, f));
this.dispatch(event_name, record); }
break; 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();
} }
} }
} }