bricks/bricks/form.js
2024-04-19 17:13:05 +08:00

263 lines
6.0 KiB
JavaScript

var bricks = window.bricks || {};
bricks.need_formdata_fields = ['file', 'image', 'video', 'audio'];
bricks.show_resp_message_or_error = async function(resp){
var desc = await resp.json();
await bricks.widgetBuild(desc, bricks.Body);
}
bricks.FieldGroup = class extends bricks.VBox {
constructor(opts){
opts.leftMargin = '10px';
super(opts);
}
build_fields(form, parent, fields){
var dc = new bricks.DynamicColumn({mobile_cols:2});
for (var i=0;i<fields.length;i++){
if (fields[i].uitype == 'group'){
if (dc.children.length>0){
parent.add_widget(dc);
dc = new bricks.DynamicColumn({mobile_cols:2});
}
this.build_fields(form, dc, fields[i].fields);
parent.add_widget(dc);
dc = new bricks.DynamicColumn({mobile_cols:2});
} else {
var box;
if (! form.opts.input_layout || form.opts.input_layout == 'VBox'){
box = new bricks.VBox({height:'auto',overflow:'none'});
} else {
box = new bricks.HBox({height:'auto',overflow:'none'});
}
box.set_css('inputbox');
if (fields[i].uitype !== 'hide'){
dc.add_widget(box);
}
if(bricks.need_formdata_fields.includes(fields[i].uitype)){
form.need_formdata = true;
}
var txt = new bricks.Text({
otext:fields[i].label||fields[i].name,
dynsize:true,
height:'auto',
i18n:true});
box.add_widget(txt);
var w = Input.factory(fields[i]);
if (w){
box.add_widget(w);
form.name_inputs[fields[i].name] = w;
} else {
bricks.debug(fields[i], 'createInput failed');
}
}
}
if (dc.children.length > 0){
parent.add_widget(dc);
}
}
}
bricks.FormBody = class extends bricks.VScrollPanel {
/*
{
title:
description:
fields: [
{
"name":,
"label":,
"removable":
"icon":
"content":
},
...
]
}
*/
constructor(form, opts){
opts.width = '100%';
opts.height = '100%';
super(opts);
this.form = form;
this.name_inputs = {};
this.fg = new bricks.FieldGroup({});
this.fg.build_fields(form, this, form.opts.fields)
}
}
bricks.Form = class extends bricks.VBox {
/*
{
title:
description:
notoolbar:False,
input_layout:"VBox" or "HBox", default is "VBox",
cols:
dataurl:
toolbar:
submit_url:
method:
fields
}
*/
constructor(opts){
opts.height = "100%";
opts.width = "100%";
opts.overflow = "auto";
super(opts);
this.name_inputs = {};
this.need_formdata = false;
if (this.opts.title){
var t = new bricks.Title3({
otext:this.opts.title,
height:'auto',
i18n:true});
this.add_widget(t, 0);
}
if (this.opts.description){
var d = new bricks.Text({
otext:this.opts.description,
height:'auto',
i18n:true});
this.add_widget(d);
}
var filler = new bricks.Filler({});
this.add_widget(filler);
this.body = new bricks.FormBody(this, opts);
filler.add_widget(this.body);
if (! opts.notoolbar)
this.build_toolbar(this);
}
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 tbw = new bricks.IconTextBar(tb_desc);
tbw.bind('command', this.command_handle.bind(this));
box.add_widget(new bricks.Filler());
box.add_widget(tbw);
box.add_widget(new bricks.Filler());
}
command_handle(event){
var params = event.params;
bricks.debug('Form(): click_handle() params=', params);
if (!params){
error('click_handle() get a null params');
return
}
if (params.name == 'submit'){
this.validation();
} else if (params.name == 'cancel'){
this.cancel();
} else if (params.name == 'reset'){
this.reset_data();
} else {
if (params.action){
f = bricks.buildEventHandler(this, params);
if (f) f(event);
}
}
}
cancel(){
this.dispatch('cancel');
}
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)){
bricks.debug('data=', data, 'd=', d);
new bricks.Error({title:'Requirement', message:'required field must input"' + w.label + '"'})
w.focus();
return;
}
bricks.extend(data, d);
}
return data;
}
get_formdata(){
var data = new FormData();
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)){
bricks.debug('data=', data, 'd=', d);
new bricks.Error({title:'Requirement', message:'required field must input"' + w.label + '"'})
w.focus();
return;
}
if (bricks.need_formdata_fields.includes(w.uitype)){
var files = w.get_files();
for (var i=0;i<files.length;i++){
// data.append(name, w.fileContents[i].body, w.fileContents[i].filename);
data.append(name, files[i]);
}
} else {
data.append(name, d[name]);
}
}
return data;
}
async validation(){
var running = new bricks.Running({target:this});
try {
var data;
if (this.need_formdata){
data = this.get_formdata();
} else {
data = this.getValue();
}
if (! data) {
running.dismiss();
return;
}
this.dispatch('submit', data);
if (this.submit_url){
var rc = new bricks.HttpResponse();
var resp = await rc.httpcall(this.submit_url,
{
method:this.method || 'POST',
params:data
});
this.dispatch('submited', resp);
}
} catch (e){
console.log('form submit error', e);
}
running.dismiss();
}
}
bricks.Factory.register('Form', bricks.Form);