Possible to override Query Report js class?

I’m trying to extend the Query Report js class with some additional controls, I have it mostly working with composition but refreshing and reloading isn’t quite working properly. I really need to override some class methods using inheritance, but I’m struggling to replace the query-report object with my own. I’ve tried the below in my report js file (after declaring the extended class) but it doesn’t call my show() I suspect because the query_report.js content is loaded later. Any ideas please?

frappe.standard_pages['query-report'] = function() {
	const wrapper = frappe.container.add_page('query-report');

	frappe.ui.make_app_page({
		parent: wrapper,
		title: __('Query Report'),
		single_column: true,
	});

	frappe.query_report = new TaxDetail({   <-- extends QueryReport
		parent: wrapper,
	});

	$(wrapper).bind('show', function() {
		frappe.query_report.show();
	});
};

frappe.standard_pages['query-report']();
1 Like

I had to monkey-patch the QueryReport class, it works nicely:

erpnext.TaxDetail = class TaxDetail {
	constructor() {
		this.patch();
		this.load_report();
	}
	// Monkey patch the QueryReport class
	patch() {
		this.qr = frappe.query_report;
		this.super = {
			refresh_report: this.qr.refresh_report,
			show_footer_message: this.qr.show_footer_message
		}
		this.qr.refresh_report = () => this.refresh_report();
		this.qr.show_footer_message = () => this.show_footer_message();
	}
	show_footer_message() {
		this.super.show_footer_message.apply(this.qr);
...
1 Like