[UX] Report builder (#6608)
* fix: Remove fixed height check * fix(sort-selector): Set sort arrow correctly on load * fix(query-report): Simplify help message * fix(report-builder): Set dirty state when report settings are changed - Also save the page_length when saving the report
This commit is contained in:
parent
36364fa54d
commit
5693080940
3 changed files with 65 additions and 47 deletions
|
|
@ -17,7 +17,7 @@
|
|||
<button class="btn btn-default btn-xs btn-order"
|
||||
data-value="{{ sort_order }}">
|
||||
<span class="octicon text-muted
|
||||
octicon-arrow-{{ sort_order===" desc " ? "down " : "up " }}">
|
||||
octicon-arrow-{{ sort_order==="desc" ? "down " : "up " }}">
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -952,12 +952,8 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
|
|||
}
|
||||
|
||||
show_tip() {
|
||||
const part1 = __('For comparative filters, start with ">" or "<" or "=", e.g. >5 or =324');
|
||||
const part2 = __('For ranges use ":", e.g. "5:10" (to filter values between 5 & 10');
|
||||
this.page.footer.removeClass('hide').addClass('text-muted text-center').html(`
|
||||
<p>${part1}</p>
|
||||
<p>${part2}</p>
|
||||
`);
|
||||
const message = __('For comparison, use >5, <10 or =324. For ranges, use 5:10 (for values between 5 & 10).');
|
||||
this.page.footer.removeClass('hide').addClass('text-muted text-center').html(`<p>${message}</p>`);
|
||||
}
|
||||
|
||||
message_div(message) {
|
||||
|
|
|
|||
|
|
@ -32,6 +32,8 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
|
|||
this.order_by = this.report_doc.json.order_by;
|
||||
this.add_totals_row = this.report_doc.json.add_totals_row;
|
||||
this.page_title = this.report_name;
|
||||
this.page_length = this.report_doc.json.page_length || 20;
|
||||
this.order_by = this.report_doc.json.order_by || 'modified desc';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -39,7 +41,6 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
|
|||
setup_view() {
|
||||
this.setup_columns();
|
||||
this.bind_charts_button();
|
||||
this.setup_dynamic_row_height_check();
|
||||
}
|
||||
|
||||
setup_result_area() {
|
||||
|
|
@ -50,8 +51,53 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
|
|||
this.$result.append(this.$datatable_wrapper);
|
||||
}
|
||||
|
||||
setup_paging_area() {
|
||||
super.setup_paging_area();
|
||||
const message = __('For comparison, use >5, <10 or =324. For ranges, use 5:10 (for values between 5 & 10).');
|
||||
this.$paging_area.find('.level-left').append(
|
||||
`<p class="text-muted text-medium margin-left">${message}</p>`
|
||||
)
|
||||
}
|
||||
|
||||
setup_sort_selector() {
|
||||
this.sort_selector = new frappe.ui.SortSelector({
|
||||
parent: this.filter_area.$filter_list_wrapper,
|
||||
doctype: this.doctype,
|
||||
args: this.order_by,
|
||||
onchange: this.on_sort_change.bind(this)
|
||||
});
|
||||
}
|
||||
|
||||
before_render() {
|
||||
this.save_report_settings();
|
||||
if (this.report_doc) {
|
||||
this.set_dirty_state_for_custom_report();
|
||||
} else {
|
||||
this.save_report_settings();
|
||||
}
|
||||
}
|
||||
|
||||
set_dirty_state_for_custom_report() {
|
||||
const json = JSON.stringify({
|
||||
filters: this.filter_area.get(),
|
||||
fields: this.fields,
|
||||
order_by: this.sort_selector.get_sql_string(),
|
||||
add_totals_row: this.add_totals_row,
|
||||
page_length: this.page_length
|
||||
});
|
||||
|
||||
const report_json = JSON.stringify({
|
||||
filters: this.report_doc.json.filters,
|
||||
fields: this.report_doc.json.fields,
|
||||
order_by: this.report_doc.json.order_by,
|
||||
add_totals_row: this.report_doc.json.add_totals_row,
|
||||
page_length: this.report_doc.json.page_length
|
||||
});
|
||||
|
||||
if (json != report_json) {
|
||||
this.page.set_indicator(__('Not Saved'), 'orange');
|
||||
} else {
|
||||
this.page.clear_indicator();
|
||||
}
|
||||
}
|
||||
|
||||
save_report_settings() {
|
||||
|
|
@ -121,16 +167,6 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
|
|||
}
|
||||
}
|
||||
|
||||
on_filter_change() {
|
||||
if (this.report_doc) {
|
||||
if (JSON.stringify(this.filters) !== JSON.stringify(this.filter_area.get())) {
|
||||
this.page.set_indicator(__('Not Saved'), 'orange');
|
||||
} else {
|
||||
this.page.clear_indicator();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
update_row(doc, flash_row) {
|
||||
const to_refresh = [];
|
||||
|
||||
|
|
@ -178,8 +214,8 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
|
|||
columns: this.columns,
|
||||
data: this.get_data(values),
|
||||
getEditor: this.get_editing_object.bind(this),
|
||||
dynamicRowHeight: !this.fixed_row_height.get_value(),
|
||||
checkboxColumn: true,
|
||||
inlineFilters: true,
|
||||
cellHeight: 37,
|
||||
events: {
|
||||
onRemoveColumn: (column) => {
|
||||
|
|
@ -534,7 +570,7 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
|
|||
|
||||
set_fields() {
|
||||
if (this.report_name && this.report_doc.json.fields) {
|
||||
this.fields = this.report_doc.json.fields;
|
||||
this.fields = this.report_doc.json.fields.slice();
|
||||
return;
|
||||
} else if (this.view_user_settings.fields) {
|
||||
// get from user_settings
|
||||
|
|
@ -857,23 +893,6 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
|
|||
});
|
||||
}
|
||||
|
||||
setup_dynamic_row_height_check() {
|
||||
this.fixed_row_height = frappe.ui.form.make_control({
|
||||
df: {
|
||||
fieldtype: 'Check',
|
||||
fieldname: 'fixed_row_height',
|
||||
label: __('Fixed height'),
|
||||
onchange: () => {
|
||||
this.render(true);
|
||||
}
|
||||
},
|
||||
parent: this.$paging_area.find('.level-left'),
|
||||
render_input: true
|
||||
});
|
||||
this.fixed_row_height.$wrapper.addClass('report-action-checkbox');
|
||||
this.fixed_row_height.set_value(1);
|
||||
}
|
||||
|
||||
get_checked_items(only_docnames) {
|
||||
const indexes = this.datatable.rowmanager.getCheckedRows();
|
||||
const items = indexes.filter(i => i != undefined)
|
||||
|
|
@ -889,17 +908,20 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
|
|||
save_report(save_type) {
|
||||
const _save_report = (name) => {
|
||||
// callback
|
||||
const report_settings = {
|
||||
filters: this.filter_area.get(),
|
||||
fields: this.fields,
|
||||
order_by: this.sort_selector.get_sql_string(),
|
||||
add_totals_row: this.add_totals_row,
|
||||
page_length: this.page_length
|
||||
}
|
||||
|
||||
return frappe.call({
|
||||
method: 'frappe.desk.reportview.save_report',
|
||||
args: {
|
||||
name: name,
|
||||
doctype: this.doctype,
|
||||
json: JSON.stringify({
|
||||
filters: this.filter_area.get(),
|
||||
fields: this.fields,
|
||||
order_by: this.sort_selector.get_sql_string(),
|
||||
add_totals_row: this.add_totals_row
|
||||
})
|
||||
json: JSON.stringify(report_settings)
|
||||
},
|
||||
callback:(r) => {
|
||||
if(r.exc) {
|
||||
|
|
@ -910,9 +932,9 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
|
|||
frappe.set_route('List', this.doctype, 'Report', r.message);
|
||||
}
|
||||
|
||||
// reset dirty state
|
||||
this.filters = this.filter_area.get();
|
||||
this.on_filter_change();
|
||||
// update state
|
||||
this.report_doc.json = report_settings;
|
||||
this.set_dirty_state_for_custom_report();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue