filters are not autocompletes webnotes/erpnext#1306

webnotes/core/doctype/comment/comment.py

@@ -12,7 +12,10 @@ class DocType:
 		if webnotes.conn.sql("""select count(*) from tabComment where comment_doctype=%s
 			and comment_docname=%s""", (self.doc.doctype, self.doc.name))[0][0] >= 50:
 			webnotes.msgprint("Max Comments reached!", raise_exception=True)
-						
+	
+	def on_update(self):
+		self.update_comment_in_doc()
+		
 	def update_comment_in_doc(self):
 		if self.doc.comment_doctype and self.doc.comment_docname and self.doc.comment:
 			try:

webnotes/public/css/common.css

@@ -539,6 +539,13 @@ ul.linked-with-list li {
 	display: none;
 }
 
+.ui-autocomplete {
+	max-height: 200px;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+
 @media (min-width: 768px) {
 	.hidden-xs-inline {
 		display: inline;

webnotes/public/js/wn/ui/filters.js

@@ -107,18 +107,19 @@ wn.ui.Filter = Class.extend({
 		this.$w = this.flist.$w.find('.list_filter:last-child');
 	},
 	make_select: function() {
-		this.fieldselect = new wn.ui.FieldSelect(this.$w.find('.fieldname_select_area'), 
-			this.doctype, this.filter_fields);
+		var me = this;
+		this.fieldselect = new wn.ui.FieldSelect({
+			parent: this.$w.find('.fieldname_select_area'), 
+			doctype: this.doctype, 
+			filter_fields: this.filter_fields, 
+			select: function(doctype, fieldname) {
+				me.set_field(doctype, fieldname);
+			}
+		});
 	},
 	set_events: function() {
 		var me = this;
 		
-		// render fields		
-		this.fieldselect.$select.bind('change', function() {
-			var $selected = $(this).find("option:selected")
-			me.set_field($selected.attr("table"), $selected.attr("fieldname"));
-		});
-
 		this.$w.find('a.close').bind('click', function() { 
 			me.$w.css('display','none');
 			var value = me.field.get_parsed_value();
@@ -167,7 +168,7 @@ wn.ui.Filter = Class.extend({
 		if(value!=null) this.field.set_input(value);
 	},
 	
-	set_field: function(tablename, fieldname, fieldtype, condition) {
+	set_field: function(doctype, fieldname, fieldtype, condition) {
 		var me = this;
 		
 		// set in fieldname (again)
@@ -177,7 +178,15 @@ wn.ui.Filter = Class.extend({
 			parent: me.field.df.parent,
 		} : {}
 
-		var df = copy_dict(me.fieldselect.fields_by_name[tablename][fieldname]);
+		var original_docfield = me.fieldselect.fields_by_name[doctype][fieldname];
+
+		if(!original_docfield) {
+			msgprint("Field " + df.label + " is not selectable.");
+			return;
+		}
+
+
+		var df = copy_dict(me.fieldselect.fields_by_name[doctype][fieldname]);
 		this.set_fieldtype(df, fieldtype);
 			
 		// called when condition is changed, 
@@ -188,12 +197,8 @@ wn.ui.Filter = Class.extend({
 		}
 
 		// clear field area and make field
-		me.fieldselect.$select.val(tablename + "." + fieldname);
-		
-		if(me.fieldselect.$select.val() != tablename + "." + fieldname) {
-			msgprint("Field " + df.label + " is not selectable.");
-			return;
-		}
+		me.fieldselect.selected_doctype = doctype;
+		me.fieldselect.selected_fieldname = fieldname;
 		
 		// save old text
 		var old_text = null;
@@ -215,6 +220,7 @@ wn.ui.Filter = Class.extend({
 		
 		if(!condition) this.set_default_condition(df, fieldtype);
 		
+		// run on enter
 		$(me.field.wrapper).find(':input').keydown(function(ev) {
 			if(ev.which==13) {
 				me.flist.listobj.run();
@@ -275,7 +281,7 @@ wn.ui.Filter = Class.extend({
 			}
 		} else if(val === '%') val = null;
 		
-		return [me.fieldselect.$select.find('option:selected').attr('table'), 
+		return [me.fieldselect.selected_doctype, 
 			me.field.df.fieldname, me.$w.find('.condition').val(), val];
 	}
 
@@ -283,17 +289,73 @@ wn.ui.Filter = Class.extend({
 
 // <select> widget with all fields of a doctype as options
 wn.ui.FieldSelect = Class.extend({
-	init: function(parent, doctype, filter_fields, with_blank) {
-		this.doctype = doctype;
+	// opts parent, doctype, filter_fields, with_blank, select
+	init: function(opts) {
+		$.extend(this, opts);
 		this.fields_by_name = {};
-		this.with_blank = with_blank;
-		this.$select = $('<select class="form-control">').appendTo(parent);
-		if(filter_fields) {
-			for(var i in filter_fields)
+		this.options = [];
+		this.$select = $('<input class="form-control">').appendTo(this.parent);
+		var me = this;
+		this.$select.autocomplete({
+			source: me.options,
+			minLength: 0,
+			focus: function(event, ui) {
+				me.$select.val(ui.item.label);
+				return false;
+			},
+			select: function(event, ui) {
+				me.selected_doctype = ui.item.doctype;
+				me.selected_fieldname = ui.item.fieldname;
+				me.$select.val(ui.item.label);
+				if(me.select) me.select(ui.item.doctype, ui.item.fieldname);
+				return false;
+			}
+		});
+		
+		if(this.filter_fields) {
+			for(var i in this.filter_fields)
 				this.add_field_option(this.filter_fields[i])			
 		} else {
 			this.build_options();
 		}
+		this.set_value(this.doctype, "name");
+		window.last_filter = this;
+	},
+	get_value: function() {
+		return this.selected_doctype ? this.selected_doctype + "." + this.selected_fieldname : null;
+	},
+	val: function(value) {
+		if(value===undefined) {
+			return this.get_value()
+		} else {
+			this.set_value(value)
+		}
+	},
+	clear: function() {
+		this.selected_doctype = null;
+		this.selected_fieldname = null;
+		this.$select.val("");
+	},
+	set_value: function(doctype, fieldname) {
+		var me = this;
+		this.clear();
+		if(!doctype) return;
+		
+		// old style
+		if(doctype.indexOf(".")!==-1) {
+			parts = doctype.split(".");
+			doctype = parts[0];
+			fieldname = parts[1];
+		}
+		
+		$.each(this.options, function(i, v) {
+			if(v.doctype===doctype && v.fieldname===fieldname) {
+				me.selected_doctype = doctype;
+				me.selected_fieldname = fieldname;
+				me.$select.val(v.label);
+				return false;
+			}
+		});
 	},
 	build_options: function() {
 		var me = this;
@@ -317,9 +379,10 @@ wn.ui.FieldSelect = Class.extend({
 		
 		// blank
 		if(this.with_blank) {
-			this.$select.append($('<option>', {
-				value: ''
-			}).text(''));
+			this.options.push({
+				label:"",
+				value:"",
+			})
 		}
 
 		// main table
@@ -353,11 +416,12 @@ wn.ui.FieldSelect = Class.extend({
 		}
 		if(wn.model.no_value_type.indexOf(df.fieldtype)==-1 && 
 			!(me.fields_by_name[df.parent] && me.fields_by_name[df.parent][df.fieldname])) {
-			this.$select.append($('<option>', {
-				value: table + "." + df.fieldname,
-				fieldname: df.fieldname,
-				table: df.parent
-			}).text(wn._(label)));
+				this.options.push({
+					label: wn._(label),
+					value: table + "." + df.fieldname,
+					fieldname: df.fieldname,
+					doctype: df.parent
+				})
 			if(!me.fields_by_name[df.parent]) me.fields_by_name[df.parent] = {};
 			me.fields_by_name[df.parent][df.fieldname] = df;	
 		}

webnotes/public/js/wn/views/reportview.js

@@ -189,13 +189,15 @@ wn.views.ReportView = wn.ui.Listing.extend({
 		
 		return order_by;
 	},
-	get_selected_table_and_column: function($select) {
-		return this.get_full_column_name([$select.find('option:selected').attr('fieldname'), 
-			$select.find('option:selected').attr('table')]) 
+	
+	get_selected_table_and_column: function(select) {
+		return select.selected_doctype ? 
+			this.get_full_column_name([select.selected_fieldname, select.selected_doctype]) : "";
 	},
 	
 	// get table_name.column_name
 	get_full_column_name: function(v) {
+		if(!v) return;
 		return (v[1] ? ('`tab' + v[1] + '`') : this.tab_name) + '.' + v[0];
 	},
 
@@ -415,22 +417,27 @@ wn.views.ReportView = wn.ui.Listing.extend({
 			<div><button class="btn btn-info">'+wn._('Update')+'</div>');
 		
 		// first
-		this.sort_by_select = new wn.ui.FieldSelect($(this.sort_dialog.body).find('.sort-column'), 
-			this.doctype).$select;
-		this.sort_by_select.css('width', '60%');
+		this.sort_by_select = new wn.ui.FieldSelect({
+			parent: $(this.sort_dialog.body).find('.sort-column'),
+			doctype: this.doctype
+		});
+		this.sort_by_select.$select.css('width', '60%');
 		this.sort_order_select = $(this.sort_dialog.body).find('.sort-order');
 		
 		// second
-		this.sort_by_next_select = new wn.ui.FieldSelect($(this.sort_dialog.body).find('.sort-column-1'), 
-			this.doctype, null, true).$select;
-		this.sort_by_next_select.css('width', '60%');
+		this.sort_by_next_select = new wn.ui.FieldSelect({
+			parent: $(this.sort_dialog.body).find('.sort-column-1'),
+			doctype: this.doctype,
+			with_blank: true
+		});
+		this.sort_by_next_select.$select.css('width', '60%');
 		this.sort_order_next_select = $(this.sort_dialog.body).find('.sort-order-1');
 		
 		// initial values
-		this.sort_by_select.val(this.doctype + '.modified');
+		this.sort_by_select.set_value(this.doctype, 'modified');
 		this.sort_order_select.val('desc');
 		
-		this.sort_by_next_select.val('');
+		this.sort_by_next_select.clear();
 		this.sort_order_next_select.val('desc');
 		
 		// button actions
@@ -555,10 +562,18 @@ wn.ui.ColumnPicker = Class.extend({
 	init: function(list) {
 		this.list = list;
 		this.doctype = list.doctype;
-		this.selects = {};
+	},
+	clear: function() {
+		this.columns = [];
+		$(this.dialog.body).html('<div class="help">'+wn._("Drag to sort columns")+'</div>\
+			<div class="column-list"></div>\
+			<div><button class="btn btn-default btn-add"><i class="icon-plus"></i>\
+				'+wn._("Add Column")+'</button></div>\
+			<hr>\
+			<div><button class="btn btn-info">'+wn._("Update")+'</div>');
+		
 	},
 	show: function(columns) {
-		wn.require('assets/webnotes/js/lib/jquery/jquery.ui.interactions.min.js');
 		var me = this;
 		if(!this.dialog) {
 			this.dialog = new wn.ui.Dialog({
@@ -566,14 +581,10 @@ wn.ui.ColumnPicker = Class.extend({
 				width: '400'
 			});
 		}
-		$(this.dialog.body).html('<div class="help">'+wn._("Drag to sort columns")+'</div>\
-			<div class="column-list"></div>\
-			<div><button class="btn btn-default btn-add"><i class="icon-plus"></i>\
-				'+wn._("Add Column")+'</button></div>\
-			<hr>\
-			<div><button class="btn btn-info">'+wn._("Update")+'</div>');
-		
-		// show existing	
+
+		this.clear();
+
+		// show existing
 		$.each(columns, function(i, c) {
 			me.add_column(c);
 		});
@@ -589,12 +600,10 @@ wn.ui.ColumnPicker = Class.extend({
 		$(this.dialog.body).find('.btn-info').click(function() {
 			me.dialog.hide();
 			// selected columns as list of [column_name, table_name]
-			var columns = [];
-			$(me.dialog.body).find('select').each(function() {
-				var $selected = $(this).find('option:selected');
-				columns.push([$selected.attr('fieldname'), 
-					$selected.attr('table')]);
+			var columns = $.map(me.columns, function(v) {
+				return v ? [[v.selected_fieldname, v.selected_doctype]] : null;
 			});
+			
 			wn.defaults.set_default("_list_settings:" + me.doctype, columns);
 			me.list.columns = columns;
 			me.list.run();
@@ -603,6 +612,7 @@ wn.ui.ColumnPicker = Class.extend({
 		this.dialog.show();
 	},
 	add_column: function(c) {
+		if(!c) return;
 		var w = $('<div style="padding: 5px; background-color: #eee; \
 			width: 90%; margin-bottom: 10px; border-radius: 3px; cursor: move;">\
 			<img src="assets/webnotes/images/ui/drag-handle.png" style="margin-right: 10px;">\
@@ -610,15 +620,20 @@ wn.ui.ColumnPicker = Class.extend({
 			</div>')
 			.appendTo($(this.dialog.body).find('.column-list'));
 		
-		var fieldselect = new wn.ui.FieldSelect(w, this.doctype);
+		var fieldselect = new wn.ui.FieldSelect({parent:w, doctype:this.doctype}), 
+			me = this;
 		
 		fieldselect.$select.css({"display": "inline"});
 		
-		fieldselect.$select
-			.css({width: '70%', 'margin-top':'5px'})
-			.val((c[1] || this.doctype) + "." + c[0]);
-		w.find('.close').click(function() {
+		fieldselect.$select.css({width: '70%', 'margin-top':'5px'})
+		fieldselect.val((c[1] || this.doctype) + "." + c[0]);
+		
+		w.find('.close').data("fieldselect", fieldselect).click(function() {
+			console.log(me.columns.indexOf($(this).data('fieldselect')));
+			delete me.columns[me.columns.indexOf($(this).data('fieldselect'))];
 			$(this).parent().remove();
 		});
+		
+		this.columns.push(fieldselect);
 	}
 });