Merge pull request #7888 from scmmishra/filter-dropdown-fixes

refactor: minor ux improvements to dropdown filters

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

@@ -551,12 +551,12 @@ class FilterArea {
 		const fields_dict = this.list_view.page.fields_dict;
 
 		if (fieldname in fields_dict) {
-			fields_dict[fieldname].set_value('');
-			return;
+			return fields_dict[fieldname].set_value('');
 		}
 
 		let filter = this.filter_list.get_filter(fieldname);
 		if (filter) filter.remove();
+		return Promise.resolve();
 	}
 
 	clear(refresh = true) {

frappe/public/js/frappe/list/list_sidebar.js

@@ -22,7 +22,7 @@ frappe.views.ListSidebar = class ListSidebar {
 		this.sidebar = $('<div class="list-sidebar overlay-sidebar hidden-xs hidden-sm"></div>')
 			.html(sidebar_content)
 			.appendTo(this.page.sidebar.empty());
-		
+
 		this.setup_reports();
 		this.setup_list_filter();
 		this.setup_views();
@@ -253,10 +253,16 @@ frappe.views.ListSidebar = class ListSidebar {
 		let $elements = dropdown.find('li');
 		$dropdown_search.on('keyup',()=> {
 			let text_filter = $search_input.val().toLowerCase();
+			// Replace trailing and leading spaces
+			text_filter = text_filter.replace(/^\s+|\s+$/g, '');
 			let text;
 			for (var i = 0; i < $elements.length; i++) {
-				text = $elements.eq(i).find(text_class).text();
-				if (text.toLowerCase().indexOf(text_filter) > -1) {
+				let text_element = $elements.eq(i).find(text_class);
+
+				let text = text_element.text().toLowerCase();
+				// Search data-name since label for current user is 'Me'
+				let name = text_element.data('name').toLowerCase();
+				if (text.includes(text_filter) || name.includes(text_filter)) {
 					$elements.eq(i).css('display','');
 				} else {
 					$elements.eq(i).css('display','none');

frappe/public/js/frappe/list/list_sidebar_group_by.js

@@ -19,10 +19,10 @@ frappe.views.ListGroupBy = class ListGroupBy {
 
 	make_group_by_fields_modal() {
 		let d = new frappe.ui.Dialog ({
-			title: __("Add Filter By"),
+			title: __("Select Filters"),
 			fields: this.get_group_by_dropdown_fields()
 		});
-		d.set_primary_action("Add", ({ group_by_fields }) => {
+		d.set_primary_action("Save", ({ group_by_fields }) => {
 			frappe.model.user_settings.save(this.doctype, 'group_by_fields', group_by_fields || null);
 			this.group_by_fields = group_by_fields ? ['assigned_to', ...group_by_fields] : ['assigned_to'];
 			this.render_group_by_items();
@@ -110,11 +110,18 @@ frappe.views.ListGroupBy = class ListGroupBy {
 	}
 
 	get_group_by_count(field) {
+		let current_filters = this.list_view.get_filters_for_args();
+
+		// remove filter of the current field
+		current_filters = current_filters.filter((f_arr) => !f_arr.includes(field === 'assigned_to' ? '_assign': field));
+
 		let args =  {
 			doctype: this.doctype,
-			current_filters: this.list_view.get_filters_for_args(),
+			current_filters: current_filters,
 			field: field,
 		};
+
+
 		return frappe.call('frappe.desk.listview.get_group_by_count', args).then((r) => {
 			let field_counts = r.message || [];
 			field_counts = field_counts.filter(f => f.count !== 0);
@@ -135,7 +142,7 @@ frappe.views.ListGroupBy = class ListGroupBy {
 
 			return `<li class="group-by-item" data-value="${value}">
 				<a class="badge-hover" href="#" onclick="return false;">
-					<span class="group-by-value">${label}</span>
+					<span class="group-by-value" data-name="${field.name}">${label}</span>
 					<span class="badge pull-right group-by-count">${field.count}</span>
 				</a>
 			</li>`;
@@ -145,6 +152,10 @@ frappe.views.ListGroupBy = class ListGroupBy {
 				<input type="text" placeholder="${__('Search')}" class="form-control dropdown-search-input input-xs">
 			</div>
 		`;
+
+		// Sort and set frappe.session.user on top of the list
+		fields.sort((item) => item.name ===  frappe.session.user ? -1 : 1);
+
 		let dropdown_html = standard_html + fields.map(get_dropdown_html).join('');
 		dropdown.html(dropdown_html);
 	}
@@ -156,20 +167,21 @@ frappe.views.ListGroupBy = class ListGroupBy {
 			let value = decodeURIComponent($target.data('value').trim());
 			fieldname = fieldname === 'assigned_to' ? '_assign': fieldname;
 
-			this.list_view.filter_area.remove(fieldname);
+			return this.list_view.filter_area.remove(fieldname)
+				.then(() => {
+					let operator = '=';
+					if (value === '') {
+						operator = 'is';
+						value = 'not set';
+					}
+					if (fieldname === '_assign') {
+						operator = 'like';
+						value = `%${value}%`;
+					}
 
-			let operator = '=';
-			if (value === '') {
-				operator = 'is';
-				value = 'not set';
-			}
-			if (fieldname === '_assign') {
-				operator = 'like';
-				value = `%${value}%`;
-			}
-
-			this.list_view.filter_area.add(this.doctype, fieldname, operator, value);
+					return this.list_view.filter_area.add(this.doctype, fieldname, operator, value);
+				});
 		});
 	}
 
-};
+};