Listview fixes (#5316)

- Kanban filters will now save on change
- List skeleton won't show in other views
- Show only single row skeleton in list view

frappe/public/js/frappe/db.js

@@ -64,12 +64,12 @@ frappe.db = {
 		});
 	},
 	get_doc: function(doctype, name, filters = null) {
-		return new Promise(resolve => {
+		return new Promise((resolve, reject) => {
 			frappe.call({
 				method: "frappe.client.get",
 				args: { doctype, name, filters },
 				callback: r => resolve(r.message)
-			});
+			}).fail(reject);
 		});
 	},
 	insert: function(doc) {

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

@@ -197,14 +197,16 @@ frappe.views.BaseList = class BaseList {
 	}
 
 	setup_main_section() {
-		this.setup_list_wrapper();
-		this.setup_filter_area();
-		this.setup_sort_selector();
-		this.setup_result_area();
-		this.setup_no_result_area();
-		this.setup_freeze_area();
-		this.setup_paging_area();
-		this.setup_footnote_area();
+		return frappe.run_serially([
+			this.setup_list_wrapper,
+			this.setup_filter_area,
+			this.setup_sort_selector,
+			this.setup_result_area,
+			this.setup_no_result_area,
+			this.setup_freeze_area,
+			this.setup_paging_area,
+			this.setup_footnote_area
+		].map(fn => fn.bind(this)));
 	}
 
 	setup_list_wrapper() {

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

@@ -273,7 +273,7 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 
 	render_skeleton() {
 		const $row = this.get_list_row_html_skeleton('<div><input type="checkbox" /></div>');
-		this.$result.append($row.repeat(3));
+		this.$result.append($row);
 	}
 
 	before_render() {

frappe/public/js/frappe/views/calendar/calendar.js

@@ -26,6 +26,10 @@ frappe.views.CalendarView = class CalendarView extends frappe.views.ListView {
 		this.calendar_name = frappe.get_route()[3];
 	}
 
+	setup_view() {
+
+	}
+
 	before_render() {
 		super.before_render();
 		this.save_view_user_settings({

frappe/public/js/frappe/views/image/image_view.js

@@ -11,6 +11,10 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
 		this.page_title = this.page_title + ' ' + __('Images');
 	}
 
+	setup_view() {
+		this.setup_columns();
+	}
+
 	set_fields() {
 		this.fields = [
 			'name',

frappe/public/js/frappe/views/kanban/kanban_board.js

@@ -3,7 +3,6 @@ frappe.provide("frappe.views");
 (function() {
 
 	var method_prefix = 'frappe.desk.doctype.kanban_board.kanban_board.';
-	var saving_filters = false;
 
 	var store = fluxify.createStore({
 		id: 'store',
@@ -23,32 +22,24 @@ frappe.provide("frappe.views");
 					empty_state: true
 				});
 
-				get_board(opts.board_name)
-					.then(function(board) {
-						var card_meta = opts.card_meta;
-						opts.card_meta = card_meta;
-						opts.board = board;
-						var cards = opts.cards.map(function(card) {
-							return prepare_card(card, opts);
-						});
-						var columns = prepare_columns(board.columns);
+				var board = opts.board;
+				var card_meta = opts.card_meta;
+				opts.card_meta = card_meta;
+				opts.board = board;
+				var cards = opts.cards.map(function(card) {
+					return prepare_card(card, opts);
+				});
+				var columns = prepare_columns(board.columns);
 
-						updater.set({
-							doctype: opts.doctype,
-							board: board,
-							card_meta: card_meta,
-							cards: cards,
-							columns: columns,
-							cur_list: opts.cur_list,
-							empty_state: false
-						});
-					})
-					.fail(function() {
-						// redirect back to List
-						setTimeout(() => {
-							frappe.set_route('List', opts.doctype, 'List');
-						}, 2000);
-					});
+				updater.set({
+					doctype: opts.doctype,
+					board: board,
+					card_meta: card_meta,
+					cards: cards,
+					columns: columns,
+					cur_list: opts.cur_list,
+					empty_state: false
+				});
 			},
 			update_cards: function(updater, cards) {
 				var state = this;
@@ -97,33 +88,6 @@ frappe.provide("frappe.views");
 						console.error(err); // eslint-disable-line
 					});
 			},
-			set_filter_state: function(updater) {
-				is_filters_modified(this.board, this.cur_list)
-					.then(function(flag) {
-						updater.set({
-							filters_modified: flag
-						});
-					});
-			},
-			save_filters: function(updater) {
-				if(saving_filters) return;
-				saving_filters = true;
-				var filters = JSON.stringify(this.cur_list.filter_area.get());
-				frappe.call({
-					method: method_prefix + 'save_filters',
-					args: {
-						board_name: this.board.name,
-						filters: filters
-					}
-				}).then(function() {
-					saving_filters = false;
-					updater.set({ filters_modified: false });
-					frappe.show_alert({
-						message: __('Filters saved'),
-						indicator: 'green'
-					}, 0.5);
-				});
-			},
 			add_card: function(updater, card_title, column_title) {
 				var doc = frappe.model.get_new_doc(this.doctype);
 				var field = this.card_meta.title_field;
@@ -292,7 +256,6 @@ frappe.provide("frappe.views");
 
 		function bind_events() {
 			bind_add_column();
-			bind_save_filter();
 		}
 
 		function setup_sortable() {
@@ -348,19 +311,6 @@ frappe.provide("frappe.views");
 			});
 		}
 
-		function bind_save_filter() {
-			var set_filter_state = function() {
-				fluxify.doAction('set_filter_state');
-			};
-
-			if(isBound(self.$kanban_board, 'after-refresh', set_filter_state)) return;
-
-			store.on('change:filters_modified', function(modified) {
-				if(modified) fluxify.doAction('save_filters');
-			});
-			self.$kanban_board.on('after-refresh', set_filter_state);
-		}
-
 		function setup_restore_columns() {
 			var cur_list = store.getState().cur_list;
 			var columns = store.getState().columns;
@@ -673,34 +623,6 @@ frappe.provide("frappe.views");
 		init();
 	};
 
-	// Helpers
-	function get_board(board_name) {
-		return frappe.call({
-			type: 'GET',
-			method: "frappe.client.get",
-			args: {
-				doctype: 'Kanban Board',
-				name: board_name
-			}
-		}).then(function(r) {
-			var board = r.message;
-			if (!board) {
-				frappe.msgprint(__('Kanban Board {0} does not exist.',
-					['<b>' + self.board_name + '</b>']));
-			}
-			return prepare_board(board);
-		}, function(e) {
-			console.log(e); // eslint-disable-line
-		});
-	}
-
-	function prepare_board(board) {
-		board.filters_array = board.filters ?
-			JSON.parse(board.filters) : [];
-		return board;
-	}
-
-
 	function prepare_card(card, state, doc) {
 		var assigned_list = card._assign ?
 			JSON.parse(card._assign) : [];

frappe/public/js/frappe/views/kanban/kanban_view.js

@@ -28,6 +28,23 @@ frappe.views.KanbanView = class KanbanView extends frappe.views.ListView {
 		this.board_name = frappe.get_route()[3];
 		this.page_title = this.board_name;
 		this.card_meta = this.get_card_meta();
+
+		return this.get_board()
+			.then(() => {
+				this.filters = this.board.filters_array;
+			});
+	}
+
+	get_board() {
+		return frappe.db.get_doc('Kanban Board', this.board_name)
+			.then(board => {
+				this.board = board;
+				this.board.filters_array = JSON.parse(this.board.filters || '[]');
+			});
+	}
+
+	setup_view() {
+
 	}
 
 	set_fields() {
@@ -35,23 +52,35 @@ frappe.views.KanbanView = class KanbanView extends frappe.views.ListView {
 		this._add_field(this.card_meta.title_field);
 	}
 
-	show() {
-		super.show();
+	before_render() {
 		this.save_view_user_settings({
 			last_kanban_board: this.board_name
 		});
+
+		frappe.call({
+			method: 'frappe.desk.doctype.kanban_board.kanban_board.save_filters',
+			args: {
+				board_name: this.board_name,
+				filters: this.filter_area.get()
+			}
+		}).then(function() {
+			frappe.show_alert({
+				message: __('Filters saved'),
+				indicator: 'green'
+			}, 0.5);
+		});
 	}
 
 	render() {
 		const board_name = this.board_name;
 		if(this.kanban && board_name === this.kanban.board_name) {
 			this.kanban.update(this.data);
-			this.kanban.$kanban_board.trigger('after-refresh');
 			return;
 		}
 
 		this.kanban = new frappe.views.KanbanBoard({
 			doctype: this.doctype,
+			board: this.board,
 			board_name: board_name,
 			cards: this.data,
 			card_meta: this.card_meta,
@@ -59,7 +88,6 @@ frappe.views.KanbanView = class KanbanView extends frappe.views.ListView {
 			cur_list: this,
 			user_settings: this.view_user_settings
 		});
-		this.kanban.$kanban_board.trigger('after-refresh');
 	}
 
 	get_card_meta() {