bugfix
This commit is contained in:
parent
1b6085b6c0
commit
8e020f2616
@ -16,8 +16,8 @@ body {
|
||||
display:none;
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
color: #e8e8e8;
|
||||
background-color: rgba(0.3, 0.3, 0.3, 1);
|
||||
color: #111111;
|
||||
background-color: #dddddd;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
@ -188,6 +188,7 @@ body {
|
||||
|
||||
.inputbox {
|
||||
background-color: #f8f8f8;
|
||||
color: #111111;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
margin: 0 0 1em 0;
|
||||
|
@ -22,20 +22,16 @@ bricks.DataRow = class extends bricks.HBox {
|
||||
super(opts);
|
||||
this.record_w = null;
|
||||
}
|
||||
render_header(editable, checkable){
|
||||
this.render(editable, checkable, true);
|
||||
render_header(){
|
||||
this.render(true);
|
||||
this.set_css('accordion-item-header');
|
||||
this.editable = editable;
|
||||
this.checkable = checkable;
|
||||
}
|
||||
render_data(editable, checkable){
|
||||
this.render(editable, checkable, false);
|
||||
render_data(){
|
||||
this.render(false);
|
||||
this.set_css('accordion-item-info');
|
||||
this.editable = editable;
|
||||
this.checkable = checkable;
|
||||
}
|
||||
render(editable, checkable, header){
|
||||
this.build_toolbar(editable, header);
|
||||
render(header){
|
||||
this.build_toolbar(header);
|
||||
if (this.checkField){
|
||||
var w;
|
||||
if (header){
|
||||
@ -58,45 +54,18 @@ bricks.DataRow = class extends bricks.HBox {
|
||||
this.user_data[this.checkField] = d[this.checkField];
|
||||
this.dispatch('check_changed', this);
|
||||
}
|
||||
build_toolbar(editable, header){
|
||||
build_toolbar(header){
|
||||
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 (this.toolbar){
|
||||
this.toolbar.tools.forEach(t => {
|
||||
if (! rsvd.includes(t.name))
|
||||
tools.push({name:'blankicon'});
|
||||
tools.push({name:'blankicon'});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (this.toolbar){
|
||||
this.toolbar.tools.forEach(t => {
|
||||
if (! rsvd.includes(t.name))
|
||||
tools.push(t)
|
||||
tools.push(t);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -56,9 +56,7 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
|
||||
if (this.description){
|
||||
this.build_description();
|
||||
}
|
||||
if (this.toolbar){
|
||||
await this.build_toolbar();
|
||||
}
|
||||
await this.build_toolbar();
|
||||
await this.build_header();
|
||||
var filler = new bricks.Filler();
|
||||
this.container = new bricks.VScrollPanel({ });
|
||||
|
@ -131,21 +131,42 @@ bricks.Form = class extends bricks.VBox {
|
||||
build_toolbar(widget){
|
||||
var box = new bricks.HBox({height:'auto', width:'100%'});
|
||||
widget.add_widget(box);
|
||||
var tb_desc = this.opts.toolbar || {
|
||||
width:"auto",
|
||||
tools:[
|
||||
{
|
||||
icon:bricks_resource('imgs/submit.png'),
|
||||
name:'submit',
|
||||
label:'Submit'
|
||||
},
|
||||
{
|
||||
icon:bricks_resource('imgs/cancel.png'),
|
||||
name:'cancel',
|
||||
label:'Cancel'
|
||||
var tools = [
|
||||
{
|
||||
icon:bricks_resource('imgs/submit.png'),
|
||||
name:'submit',
|
||||
css:'submit_btn',
|
||||
label:'Submit'
|
||||
},
|
||||
{
|
||||
icon:bricks_resource('imgs/reset.png'),
|
||||
name:'reset',
|
||||
css:'reset_btn',
|
||||
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);
|
||||
tbw.bind('command', this.command_handle.bind(this));
|
||||
box.add_widget(new bricks.Filler());
|
||||
|
@ -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 {
|
||||
/*
|
||||
{
|
||||
|
@ -186,23 +186,33 @@ bricks.ModalForm = class extends bricks.Modal {
|
||||
super(opts);
|
||||
this.build_form();
|
||||
}
|
||||
getValue(){
|
||||
return this.form.getValue();
|
||||
}
|
||||
build_form(){
|
||||
var opts = {
|
||||
title:this.opts.title,
|
||||
description:this.opts.description,
|
||||
fields:this.opts.fields
|
||||
}
|
||||
if (this.submit_url){
|
||||
opts.submit_url = this.submit_url;
|
||||
}
|
||||
this.form = new bricks.Form(opts);
|
||||
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.open();
|
||||
}
|
||||
form_submitted(){
|
||||
form_submit(){
|
||||
var d = this.form.getValue();
|
||||
this.dispatch('submit', d)
|
||||
this.dismiss();
|
||||
}
|
||||
form_submited(event){
|
||||
this.dispatch('submited', event.params);
|
||||
}
|
||||
}
|
||||
bricks.Factory.register('Modal', bricks.Modal);
|
||||
bricks.Factory.register('ModalForm', bricks.ModalForm);
|
||||
|
@ -4,6 +4,75 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
|
||||
super(opts);
|
||||
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(){
|
||||
var fs = this.row_options.fields;
|
||||
this.fields = [];
|
||||
@ -26,7 +95,7 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
|
||||
header = false;
|
||||
}
|
||||
var dr = new bricks.DataRow(options);
|
||||
dr.render(this.editable, this.checkable, header);
|
||||
dr.render(header);
|
||||
dr.event_names.forEach(e => {
|
||||
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;
|
||||
}
|
||||
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);
|
||||
}
|
||||
async renew_record_view(form, info){
|
||||
@ -45,19 +118,74 @@ bricks.Tabular = class extends bricks.DynamicAccordion {
|
||||
}
|
||||
record_event_handle(event_name, record, row, item){
|
||||
console.log('event_name=', event_name, 'record=', record);
|
||||
switch(event_name){
|
||||
case 'add':
|
||||
this.add_record(row, record);
|
||||
break;
|
||||
case 'update':
|
||||
this.update_record(row, record);
|
||||
break;
|
||||
case 'delete':
|
||||
this.delete_record(row, record);
|
||||
break;
|
||||
default:
|
||||
this.dispatch(event_name, record);
|
||||
break;
|
||||
this.dispatch(event_name, record);
|
||||
}
|
||||
add_record(info){
|
||||
var f = new bricks.ModalForm({
|
||||
"width":"90%",
|
||||
"height":"70%",
|
||||
"submit_url":this.editable.new_data_url,
|
||||
"fields":this.fields
|
||||
});
|
||||
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 = [];
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user