bricks/bricks/form.js

223 lines
4.3 KiB
JavaScript
Raw Normal View History

2024-02-01 17:54:04 +08:00
var bricks = window.bricks || {};
2023-09-14 10:28:07 +08:00
2024-02-01 16:40:31 +08:00
bricks.FormBody = class extends bricks.VBox {
2023-09-14 10:28:07 +08:00
/*
{
title:
description:
fields: [
{
"name":,
"label":,
"removable":
"icon":
"content":
},
...
]
}
*/
constructor(opts){
opts.width = '100%';
opts.scrollY = 'scroll';
super(opts);
this.name_inputs = {};
if (this.opts.title){
2024-02-01 17:54:04 +08:00
var t = new bricks.Title2({
2023-09-14 10:28:07 +08:00
otext:this.opts.title,
height:'auto',
i18n:true});
this.add_widget(t);
}
if (this.opts.description){
2024-02-01 17:54:04 +08:00
var d = new bricks.Text({
2023-09-14 10:28:07 +08:00
otext:this.opts.description,
height:'auto',
i18n:true});
this.add_widget(d);
}
2024-02-01 17:54:04 +08:00
this.form_body = new bricks.Layout({width:'100%',
2023-09-14 10:28:07 +08:00
overflow:'auto'
});
this.add_widget(this.form_body);
this.form_body.set_css('multicolumns');
this.build_fields();
}
reset_data(){
for (var name in this.name_inputs){
if (! this.name_inputs.hasOwnProperty(name)){
continue;
}
var w = this.name_inputs[name];
w.reset();
}
}
getValue(){
var data = {};
for (var name in this.name_inputs){
if (! this.name_inputs.hasOwnProperty(name)){
continue;
}
var w = this.name_inputs[name];
var d = w.getValue();
if (w.required && ( d[name] == '' || d[name] === null)){
console.log('data=', data, 'd=', d);
w.focus();
return;
}
extend(data, d);
}
return data;
}
async validation(){
var data = this.getValue();
2024-02-20 15:11:18 +08:00
this.dispatch('submit', data);
2023-09-14 10:28:07 +08:00
if (this.submit_url){
2024-02-21 11:31:09 +08:00
var rc = new bricks.HttpResponse();
var resp = await rc.httpcall(this.submit_url,
2023-09-14 10:28:07 +08:00
{
2024-02-20 16:18:56 +08:00
method:this.method || 'POST',
2023-09-14 10:28:07 +08:00
params:data
});
2024-02-21 11:31:09 +08:00
this.dispatch('submited', resp);
2023-09-14 10:28:07 +08:00
}
}
build_fields(){
var fields = this.opts.fields;
for (var i=0; i<fields.length; i++){
2024-02-01 17:54:04 +08:00
var box = new bricks.VBox({height:'auto',overflow:'none'});
2023-09-14 10:28:07 +08:00
box.set_css('inputbox');
this.form_body.add_widget(box);
2024-02-01 17:54:04 +08:00
var txt = new bricks.Text({
2023-09-14 10:28:07 +08:00
otext:fields[i].label||fields[i].name,
height:'auto',
i18n:true});
box.add_widget(txt);
var w = Input.factory(fields[i]);
if (w){
box.add_widget(w);
this.name_inputs[fields[i].name] = w;
console.log(fields[i].uitype, 'create Input ok');
} else {
console.log(fields[i], 'createInput failed');
}
}
}
}
2024-02-01 16:40:31 +08:00
bricks.Form = class extends bricks.VBox {
2023-09-14 10:28:07 +08:00
/*
{
title:
description:
notoolbar:False,
cols:
dataurl:
toolbar:
submit_url:
fields
}
*/
constructor(opts){
super(opts);
2024-02-01 17:54:04 +08:00
this.body = new bricks.FormBody(opts);
2024-02-21 11:39:31 +08:00
this.body.bind('submited', this.redispatch_submited.bind(this));
2023-09-14 10:28:07 +08:00
this.add_widget(this.body);
if (! opts.notoolbar)
this.build_toolbar(this);
}
2024-02-21 11:39:31 +08:00
redispatch_submited(args, event){
console.log('redispatch_submited():args=',args, 'event=', event);
self.dispatch('submited', args);
}
2023-09-14 10:28:07 +08:00
build_toolbar(widget){
2024-02-01 17:54:04 +08:00
var box = new bricks.HBox({height:'auto', width:'100%'});
2023-09-14 10:28:07 +08:00
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'
}
]
};
2024-02-01 17:54:04 +08:00
var tbw = new bricks.Toolbar(tb_desc);
2023-09-14 10:28:07 +08:00
tbw.bind('command', this.command_handle.bind(this));
2024-02-01 17:54:04 +08:00
box.add_widget(new bricks.HFiller());
2023-09-14 10:28:07 +08:00
box.add_widget(tbw);
2024-02-01 17:54:04 +08:00
box.add_widget(new bricks.HFiller());
2023-09-14 10:28:07 +08:00
}
command_handle(event){
var params = event.params;
console.log('Form(): click_handle() params=', params);
if (!params){
error('click_handle() get a null params');
return
}
if (params.name == 'submit'){
this.body.validation();
} else if (params.name == 'cancel'){
this.cancel();
} else if (params.name == 'reset'){
this.body.reset_data();
} else {
if (params.action){
f = buildEventHandler(this, params);
if (f) f(event);
}
}
}
getValue(){
return this.body.getValue();
}
cancel(){
this.dispatch('cancel');
}
}
2024-02-01 16:40:31 +08:00
bricks.TabForm = class extends bricks.Form {
2023-09-14 10:28:07 +08:00
/*
options
{
css:
tab_long: 100%
tab_pos:"top"
items:[
{
name:
label:"tab1",
icon:
removable:
refresh:false,
content:{
"widgettype":...
}
}
]
}
{
...
fields:[
{
}
]
*/
constructor(opts){
super(opts);
}
build_fields(fields){
}
}
2024-02-01 16:40:31 +08:00
bricks.Factory.register('Form', bricks.Form);
2023-09-14 10:28:07 +08:00
// Factory.register('TabForm', TabForm);