From ed8a8dabd3d34f7b5162526a1a7d803092aefbaf Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchampfaris@users.noreply.github.com>
Date: Sat, 24 Mar 2018 12:06:38 +0530
Subject: [PATCH] List view fixes (#5260)

* Listview fixes

- fix search icon in standard filter frappe/erpnext#12555
- show skeleton while loading list rows

* Optimize remove_script_and_style
---
 frappe/public/js/frappe/dom.js            | 11 +++++++--
 frappe/public/js/frappe/list/base_list.js | 30 ++++++++++++-----------
 frappe/public/js/frappe/list/list_view.js | 26 +++++++++++++-------
 3 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/frappe/public/js/frappe/dom.js b/frappe/public/js/frappe/dom.js
index 584c441db8..be9356175f 100644
--- a/frappe/public/js/frappe/dom.js
+++ b/frappe/public/js/frappe/dom.js
@@ -33,12 +33,19 @@ frappe.dom = {
 		document.getElementsByTagName('head')[0].appendChild(el);
 	},
 	remove_script_and_style: function(txt) {
+		const evil_tags = ["script", "style", "noscript", "title", "meta", "base", "head"];
+		const regex = new RegExp(evil_tags.map(tag => `<${tag}>.*<\\/${tag}>`).join('|'));
+		if (!regex.test(txt)) {
+			// no evil tags found, skip the DOM method entirely!
+			return txt;
+		}
+
 		var div = document.createElement('div');
 		div.innerHTML = txt;
 		var found = false;
-		["script", "style", "noscript", "title", "meta", "base", "head"].forEach(function(e, i) {
+		evil_tags.forEach(function(e) {
 			var elements = div.getElementsByTagName(e);
-			var i = elements.length;
+			i = elements.length;
 			while (i--) {
 				found = true;
 				elements[i].parentNode.removeChild(elements[i]);
diff --git a/frappe/public/js/frappe/list/base_list.js b/frappe/public/js/frappe/list/base_list.js
index a924522052..d842885bac 100644
--- a/frappe/public/js/frappe/list/base_list.js
+++ b/frappe/public/js/frappe/list/base_list.js
@@ -225,7 +225,7 @@ frappe.views.BaseList = class BaseList {
 	}
 
 	setup_result_area() {
-		this.$result = $(`<div class="result">`).hide();
+		this.$result = $(`<div class="result">`);
 		this.$frappe_list.append(this.$result);
 	}
 
@@ -531,19 +531,6 @@ class FilterArea {
 	}
 
 	make_standard_filters() {
-		$(
-			`<div class="flex justify-center align-center">
-				<span class="octicon octicon-search text-muted small"></span>
-			</div>`
-		)
-			.css({
-				height: '30px',
-				width: '20px',
-				marginRight: '-2px',
-				marginLeft: '10px'
-			})
-			.prependTo(this.standard_filters_wrapper);
-
 		let fields = [
 			{
 				fieldtype: 'Data',
@@ -602,6 +589,21 @@ class FilterArea {
 		}
 
 		fields.map(df => this.list_view.page.add_field(df));
+
+		// search icon in name filter
+		$('<span class="octicon octicon-search text-muted small"></span>')
+			.appendTo(this.list_view.page.fields_dict.name.$wrapper)
+			.css({
+				'position': 'absolute',
+				'z-index': '1',
+				'right': '7px',
+				'top': '9px',
+				'font-size': '90%'
+			});
+
+		this.list_view.page.fields_dict.name.$wrapper
+			.find('.form-control')
+			.css('padding-right', '2em');
 	}
 
 	get_standard_filters() {
diff --git a/frappe/public/js/frappe/list/list_view.js b/frappe/public/js/frappe/list/list_view.js
index 2e017e80da..ed70c71d5d 100644
--- a/frappe/public/js/frappe/list/list_view.js
+++ b/frappe/public/js/frappe/list/list_view.js
@@ -145,6 +145,8 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 
 	setup_view() {
 		this.setup_columns();
+		this.render_header();
+		this.render_skeleton();
 		this.setup_events();
 		this.settings.onload && this.settings.onload(this);
 	}
@@ -233,10 +235,8 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 		</div>`;
 	}
 
-	freeze(show) {
-		this.$result.find('.list-header-meta').html(__('Refreshing') + '...');
-		this.$result.find('.checkbox-actions').toggle(show);
-		this.$result.find('.list-header-subject').toggle(!show);
+	freeze() {
+		this.$result.find('.list-count').html(`<span>${__('Refreshing')}...</span>`);
 	}
 
 	get_args() {
@@ -264,6 +264,18 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 		}
 	}
 
+	render_header() {
+		if (this.$result.find('.list-row-head').length === 0) {
+			// append header once
+			this.$result.prepend(this.get_header_html());
+		}
+	}
+
+	render_skeleton() {
+		const $row = this.get_list_row_html_skeleton('<div><input type="checkbox" /></div>');
+		this.$result.append($row.repeat(3));
+	}
+
 	before_render() {
 		this.settings.before_render && this.settings.before_render();
 		frappe.model.user_settings.save(this.doctype, 'last_view', this.view_name);
@@ -274,12 +286,8 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 	}
 
 	render() {
+		this.$result.find('.list-row-container').remove();
 		if (this.data.length > 0) {
-			this.$result.find('.list-row-container').remove();
-			if (this.$result.find('.list-row-head').length === 0) {
-				// append header once
-				this.$result.prepend(this.get_header_html());
-			}
 			// append rows
 			this.$result.append(
 				this.data.map(doc => this.get_list_row_html(doc)).join('')