Merge pull request #7171 from netchampfaris/datatable-column-resize-develop

Datatable column resize develop

frappe/public/js/frappe/list/base_list.js

@@ -365,6 +365,7 @@ frappe.views.BaseList = class BaseList {
 			this.toggle_result_area();
 			this.before_render();
 			this.render();
+			this.after_render();
 			this.freeze(false);
 			if (this.settings.refresh) {
 				this.settings.refresh(this);
@@ -393,6 +394,10 @@ frappe.views.BaseList = class BaseList {
 
 	}
 
+	after_render() {
+
+	}
+
 	render() {
 		// for child classes
 	}

frappe/public/js/frappe/misc/utils.js

@@ -1,6 +1,7 @@
 // Copyright (c) 2015, Frappe Technologies Pvt. Ltd. and Contributors
 // MIT License. See license.txt
 
+import deep_equal from "fast-deep-equal";
 frappe.provide('frappe.utils');
 
 Object.assign(frappe.utils, {
@@ -683,6 +684,11 @@ Object.assign(frappe.utils, {
 			return null;
 		}
 	},
+
+	deep_equal(a, b) {
+		return deep_equal(a, b);
+	},
+
 	get_points(points) {
 		return `<span class='bold' style="color: ${points >= 0 ? '#45A163': '#e42121'}">
 			${points > 0 ? '+': ''}${points}

frappe/public/js/frappe/views/reports/report_view.js

@@ -76,7 +76,7 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
 		return super.before_refresh();
 	}
 
-	before_render() {
+	after_render() {
 		if (this.report_doc) {
 			this.set_dirty_state_for_custom_report();
 		} else {
@@ -85,23 +85,25 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
 	}
 
 	set_dirty_state_for_custom_report() {
-		const json = JSON.stringify({
+		let current_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
-		});
+			page_length: this.page_length,
+			column_widths: this.get_column_widths()
+		}
 
-		const report_json = JSON.stringify({
+		let report_settings = {
 			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
-		});
+			page_length: this.report_doc.json.page_length,
+			column_widths: this.report_doc.json.column_widths
+		}
 
-		if (json != report_json) {
+		if (!frappe.utils.deep_equal(current_settings, report_settings)) {
 			this.page.set_indicator(__('Not Saved'), 'orange');
 		} else {
 			this.page.clear_indicator();
@@ -830,11 +832,16 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
 			return docfield.fieldtype === 'Date' ? 'right' : 'left';
 		})();
 
-		const width = (docfield ? cint(docfield.width) : null) || null;
-
 		// child table column
 		const id = doctype !== this.doctype ? `${doctype}:${fieldname}` : fieldname;
 
+		let width = (docfield ? cint(docfield.width) : null) || null;
+		if (this.report_doc) {
+			// load the user saved column width
+			let saved_column_widths = this.report_doc.json.column_widths || {};
+			width = saved_column_widths[id] || width;
+		}
+
 		let compareFn = null;
 		if (docfield.fieldtype === 'Date') {
 			compareFn = (cell, keyword) => {
@@ -950,7 +957,8 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
 				fields: this.fields,
 				order_by: this.sort_selector.get_sql_string(),
 				add_totals_row: this.add_totals_row,
-				page_length: this.page_length
+				page_length: this.page_length,
+				column_widths: this.get_column_widths()
 			}
 
 			return frappe.call({
@@ -975,6 +983,7 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
 						};
 						this.list_sidebar.setup_reports();
 						frappe.set_route('List', this.doctype, 'Report', r.message);
+						return;
 					}
 
 					// update state
@@ -994,6 +1003,20 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
 		}
 	}
 
+	get_column_widths() {
+		if (this.datatable) {
+			return this.datatable
+				.datamanager
+				.getColumns(true)
+				.reduce((acc, curr) => {
+					acc[curr.id] = parseInt(curr.width);
+					return acc;
+				}, {});
+		}
+
+		return {};
+	}
+
 	get_report_doc() {
 		return new Promise(resolve => {
 			frappe.model.with_doc('Report', this.report_name, () => {

package.json

@@ -23,7 +23,8 @@
     "bootstrap": "^4.3.1",
     "cookie": "^0.3.1",
     "express": "^4.16.2",
-    "frappe-datatable": "^1.8.0",
+    "fast-deep-equal": "^2.0.1",
+    "frappe-datatable": "^1.10.0",
     "frappe-gantt": "^0.1.0",
     "fuse.js": "^3.2.0",
     "highlight.js": "^9.12.0",

yarn.lock

@@ -1715,6 +1715,7 @@ forwarded@~0.1.2:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -1722,10 +1723,10 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-frappe-datatable@^1.8.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/frappe-datatable/-/frappe-datatable-1.9.0.tgz#63d6f2af0b6ea00f9b66bb3e55606f5d82b5644b"
-  integrity sha512-dEKUc8svDH2AoAlcHT4q3DA8Zo0kU3ihrpe9I2VqYKmmygltLXCH5iw3k3IZBVBy17hH49JtzAKGky0OazINHA==
+frappe-datatable@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/frappe-datatable/-/frappe-datatable-1.10.0.tgz#915a7a6754cf6b66dbf7b07323a381e760a74221"
+  integrity sha512-xuiFvDUSgKIaG0vZZvQsKLs5LUqFfo5nSE+wzBwEzE5iytBaJfKXzqud71AtqteQ0CCrEe9P/tMD+hZfcnbh/Q==
   dependencies:
     hyperlist "^1.0.0-beta"
     lodash "^4.17.5"