[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:
Faris Ansari 2018-12-12 14:11:23 +05:30 committed by Rushabh Mehta
parent 36364fa54d
commit 5693080940
3 changed files with 65 additions and 47 deletions

View file

@ -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>

View file

@ -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) {

View file

@ -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();
}
});