Listview fixes (#5479)

* update frappe-datatable to 0.0.5

* [fix] List view realtime update

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

@@ -326,17 +326,21 @@ frappe.views.BaseList = class BaseList {
 		};
 	}
 
-	refresh() {
+	get_call_args() {
-		this.freeze(true);
-		// fetch data from server
 		const args = this.get_args();
-		return frappe.call({
+		return {
 			method: this.method,
 			type: 'GET',
 			args: args,
 			freeze: this.freeze_on_refresh || false,
 			freeze_message: this.freeze_message || (__('Loading') + '...')
-		}).then(r => {
+		};
+	}
+
+	refresh() {
+		this.freeze(true);
+		// fetch data from server
+		return frappe.call(this.get_call_args()).then(r => {
 			// render
 			this.prepare_data(r);
 			this.toggle_result_area();

frappe/public/js/frappe/list/list_view.js

@@ -635,6 +635,16 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 	}
 
 	setup_events() {
+		this.setup_filterable();
+		this.setup_list_click();
+		this.setup_tag_event();
+		this.setup_new_doc_event();
+		this.setup_check_events();
+		this.setup_like();
+		this.setup_realtime_updates();
+	}
+
+	setup_filterable() {
 		// filterable events
 		this.$result.on('click', '.filterable', e => {
 			if (e.metaKey || e.ctrlKey) return;
@@ -653,10 +663,11 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 			});
 			this.filter_area.add(filters_to_apply);
 		});
+	}
 
+	setup_list_click() {
 		this.$result.on('click', '.list-row', (e) => {
 			const $target = $(e.target);
-
 			// tick checkbox if Ctrl/Meta key is pressed
 			if (e.ctrlKey || e.metaKey && !$target.is('a')) {
 				const $list_row = $(e.currentTarget);
@@ -666,16 +677,13 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 				this.on_row_checked();
 				return;
 			}
-
 			// don't open form when checkbox, like, filterable are clicked
 			if ($target.hasClass('filterable') ||
 				$target.hasClass('octicon-heart') ||
 				$target.is(':checkbox') ||
-				$target.is('a')
+				$target.is('a')) {
-			) {
 				return;
 			}
-
 			// open form
 			const $row = $(e.currentTarget);
 			const link = $row.find('.list-subject a').get(0);
@@ -684,16 +692,6 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 				return false;
 			}
 		});
-
-		// toggle tags
-		this.list_sidebar.parent.on('click', '.list-tag-preview', () => {
-			this.toggle_tags();
-		});
-
-		this.$no_result.find('.btn-new-doc').click(() => this.make_new_doc());
-
-		this.setup_check_events();
-		this.setup_like();
 	}
 
 	setup_check_events() {
@@ -755,6 +753,48 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 		frappe.ui.setup_like_popover(this.$result, '.liked-by');
 	}
 
+	setup_new_doc_event() {
+		this.$no_result.find('.btn-new-doc').click(() => this.make_new_doc());
+	}
+
+	setup_tag_event() {
+		this.list_sidebar.parent.on('click', '.list-tag-preview', () => {
+			this.toggle_tags();
+		});
+	}
+
+	setup_realtime_updates() {
+		frappe.realtime.on('list_update', data => {
+			const { doctype, name } = data;
+			if (doctype !== this.doctype) return;
+
+			// filters to get only the doc with this name
+			const call_args = this.get_call_args();
+			call_args.args.filters.push([this.doctype, 'name', '=', name]);
+			call_args.args.start = 0;
+
+			frappe.call(call_args)
+				.then(({ message }) => {
+					if (!message) return;
+					const data = frappe.utils.dict(message.keys, message.values);
+					if (!(data && data.length)) return;
+
+					const datum = data[0];
+					const index = this.data.findIndex(d => d.name === datum.name);
+
+					if (index === -1) {
+						// append new data
+						this.data.push(datum);
+					} else {
+						// update this data in place
+						this.data[index] = datum;
+					}
+
+					this.render();
+				});
+		});
+	}
+
 	on_row_checked() {
 		this.$list_head_subject = this.$list_head_subject || this.$result.find('header .list-header-subject');
 		this.$checkbox_actions = this.$checkbox_actions || this.$result.find('header .checkbox-actions');
@@ -793,10 +833,8 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 		return frappe.model.user_settings.save(this.doctype, this.view_name, obj);
 	}
 
-	on_update(data) {
+	on_update() {
-		if (data.doctype === this.doctype) {
+
-			this.refresh();
-		}
 	}
 
 	get_menu_items() {

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

@@ -40,7 +40,7 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
 
 	setup_result_area() {
 		super.setup_result_area();
-		this.$datatable_wrapper = $('<div class="data-table-wrapper">');
+		this.$datatable_wrapper = $('<div class="datatable-wrapper">');
 		this.$charts_wrapper = $('<div class="charts-wrapper">');
 		this.$result.append(this.$charts_wrapper);
 		this.$result.append(this.$datatable_wrapper);
@@ -131,7 +131,7 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
 		// indicate row update
 		const _flash_row = (rowIndex) => {
 			if (!flash_row) return;
-			const $row = this.$result.find(`.data-table-row[data-row-index="${rowIndex}"]`);
+			const $row = this.$result.find(`.dt-row[data-row-index="${rowIndex}"]`);
 			$row.addClass('row-update');
 			setTimeout(() => $row.removeClass('row-update'), 500);
 		};

frappe/public/less/frappe-datatable.less

@@ -1,36 +1,24 @@
 @import "variables.less";
 
-.data-table {
+.datatable {
 	margin-left: -1px;
 	margin-top: -1px;
 	font-size: @text-medium;
 
-	.data-table-col .edit-cell {
-		padding: 0;
-
-		input {
-			font-size: inherit;
-			height: 27px;
-		}
-	}
-
-	.data-table-col .content {
-		padding: 0.5rem;
-	}
-
 	.frappe-control {
 		margin: 0;
-	}
-	.form-group {
-		margin: 0;
-	}
-	.form-control {
 		border-radius: 0px;
 		border: none;
 	}
+
+	.form-group {
+		margin: 0;
+	}
+
 	.link-btn {
 		top: 6px;
 	}
+
 	select {
 		height: 27px;
 	}
@@ -38,37 +26,36 @@
 	.checkbox {
 		margin: 7px 0 7px 8px;
 	}
+
 	[data-fieldtype="Color"] .control-input {
 		overflow: hidden;
 	}
+}
 
-	.body-scrollable {
+.dt-scrollable {
-		&::-webkit-scrollbar {
+	max-height: calc(100vh - 250px);
-			display: none;
+}
-		}
+
+table td.dt-cell {
+	position: relative;
+}
+
+.dt-cell__edit {
+	padding: 0;
+
+	input {
+		font-size: inherit;
+		height: 27px;
 	}
+}
 
-	.data-table-header {
+.dt-header {
-		background-color: @panel-bg;
+	background-color: @panel-bg;
-		color: @text-muted;
+	color: @text-muted;
-	}
+}
 
-	.data-table-row.row-update {
+.dt-row.row-update {
-		animation: 500ms breathe forwards;
+	animation: 500ms breathe forwards;
-	}
-
-	.data-table-row.row-highlight {
-		background-color: @extra-light-yellow;
-	}
-
-	.report-tree-node {
-		display: inline-block;
-
-		.toggle {
-			cursor: pointer;
-			font-size: @text-regular;
-		}
-	}
 }
 
 @keyframes breathe {

frappe/public/less/report.less

@@ -67,16 +67,3 @@
 		margin-bottom: 2px;
 	}
 }
-
-// datatable
-.data-table  {
-	.edit-popup {
-		.frappe-control {
-			padding: 0;
-
-			.form-group {
-				margin: 0;
-			}
-		}
-	}
-}

package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "cookie": "^0.3.1",
     "express": "^4.16.2",
-    "frappe-datatable": "frappe/datatable",
+    "frappe-datatable": "^0.0.5",
     "frappe-gantt": "^0.1.0",
     "fuse": "^0.4.0",
     "fuse.js": "^3.2.0",

yarn.lock

@@ -862,9 +862,9 @@ forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
 
-frappe-datatable@frappe/datatable:
+frappe-datatable@^0.0.5:
-  version "0.0.4"
+  version "0.0.5"
-  resolved "https://codeload.github.com/frappe/datatable/tar.gz/4bb400230087fbf97e8587a34916e14f77fa01cd"
+  resolved "https://registry.yarnpkg.com/frappe-datatable/-/frappe-datatable-0.0.5.tgz#347c58c2ffae574a2d32560b1e11251c2d8f07f2"
   dependencies:
     clusterize.js "^0.18.0"
     lodash "^4.17.5"