feat: Tabular inline search form - hidden by default, toggle via toolbar filter button
- build_search_form_widget(): creates InlineForm from opts.search_form config - toggle_search_form(): show/hide on filter toolbar button click - search_form_submited(): saves values, hides form, re-renders with params - merge_search_params(): includes search_form_values in backend requests
This commit is contained in:
parent
937d6575ed
commit
42e7214a86
@ -32,6 +32,7 @@ bricks.DataViewer = class extends bricks.VBox {
|
|||||||
this.build_description_widget();
|
this.build_description_widget();
|
||||||
this.build_toolbar_widget();
|
this.build_toolbar_widget();
|
||||||
this.build_searchbar_widget();
|
this.build_searchbar_widget();
|
||||||
|
this.build_search_form_widget();
|
||||||
this.build_records_area();
|
this.build_records_area();
|
||||||
await this.build_other();
|
await this.build_other();
|
||||||
this.check_changed_row = null;
|
this.check_changed_row = null;
|
||||||
@ -107,6 +108,22 @@ bricks.DataViewer = class extends bricks.VBox {
|
|||||||
this.searchbar_w.bind('search', this.search_event_handle.bind(this));
|
this.searchbar_w.bind('search', this.search_event_handle.bind(this));
|
||||||
this.add_widget(this.searchbar_w);
|
this.add_widget(this.searchbar_w);
|
||||||
}
|
}
|
||||||
|
build_search_form_widget(){
|
||||||
|
var sf = this.opts.search_form;
|
||||||
|
if (!sf || !sf.fields || sf.fields.length == 0){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var form_opts = bricks.extend({}, sf);
|
||||||
|
form_opts.css = sf.css || 'card';
|
||||||
|
form_opts.padding = sf.padding || '8px';
|
||||||
|
form_opts.show_label = sf.show_label !== undefined ? sf.show_label : false;
|
||||||
|
form_opts.submit_label = sf.submit_label || '搜索';
|
||||||
|
form_opts.submit_css = sf.submit_css || 'primary';
|
||||||
|
this.search_form_w = new bricks.InlineForm(form_opts);
|
||||||
|
this.search_form_w.bind('submit', this.search_form_submited.bind(this));
|
||||||
|
this.add_widget(this.search_form_w);
|
||||||
|
this.search_form_w.hide();
|
||||||
|
}
|
||||||
merge_search_params(params){
|
merge_search_params(params){
|
||||||
var merged = bricks.extend({}, params || {});
|
var merged = bricks.extend({}, params || {});
|
||||||
if (this.searchable){
|
if (this.searchable){
|
||||||
@ -127,6 +144,14 @@ bricks.DataViewer = class extends bricks.VBox {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/* search_form: send InlineForm field values */
|
||||||
|
if (this.search_form_values){
|
||||||
|
for (var k in this.search_form_values){
|
||||||
|
if (this.search_form_values[k] !== '' && this.search_form_values[k] !== null && this.search_form_values[k] !== undefined){
|
||||||
|
merged[k] = this.search_form_values[k];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
return merged;
|
return merged;
|
||||||
}
|
}
|
||||||
async search_event_handle(event){
|
async search_event_handle(event){
|
||||||
@ -253,7 +278,7 @@ bricks.DataViewer = class extends bricks.VBox {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (tdesc.name == 'filter'){
|
if (tdesc.name == 'filter'){
|
||||||
await this.show_filter_form();
|
this.toggle_search_form();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var data = null;
|
var data = null;
|
||||||
@ -264,6 +289,27 @@ bricks.DataViewer = class extends bricks.VBox {
|
|||||||
console.log(tdesc.name, 'clicked ==================', tdesc.name, data)
|
console.log(tdesc.name, 'clicked ==================', tdesc.name, data)
|
||||||
this.dispatch(tdesc.name, data);
|
this.dispatch(tdesc.name, data);
|
||||||
}
|
}
|
||||||
|
toggle_search_form(){
|
||||||
|
if (!this.search_form_w) return;
|
||||||
|
if (this.search_form_w.dom_element.style.display == 'none'){
|
||||||
|
this.search_form_w.show();
|
||||||
|
} else {
|
||||||
|
this.search_form_w.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async search_form_submited(event){
|
||||||
|
var params = event.params || {};
|
||||||
|
this.search_form_values = params;
|
||||||
|
this.search_form_w.hide();
|
||||||
|
this.old_params = null;
|
||||||
|
this.select_row = null;
|
||||||
|
this.active_item = null;
|
||||||
|
this.data_offset = 0;
|
||||||
|
if (this.loader){
|
||||||
|
this.loader.pages = [];
|
||||||
|
}
|
||||||
|
await this.render({});
|
||||||
|
}
|
||||||
/* Recursively extract {var, field, op} from data_filter JSON tree */
|
/* Recursively extract {var, field, op} from data_filter JSON tree */
|
||||||
get_filter_fields(){
|
get_filter_fields(){
|
||||||
var fields = [];
|
var fields = [];
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user