New Control: MultiSelect (#4425)

* New Control: MultiSelect

* fix codacy

frappe/public/build.json

@@ -54,7 +54,8 @@
 		"public/js/frappe/form/controls/heading.js",
 		"public/js/frappe/form/controls/autocomplete.js",
 		"public/js/frappe/form/controls/barcode.js",
-		"public/js/frappe/form/controls/geolocation.js"
+		"public/js/frappe/form/controls/geolocation.js",
+		"public/js/frappe/form/controls/multiselect.js"
 	],
 	"js/dialog.min.js": [
 		"public/js/frappe/dom.js",

frappe/public/css/list.css

@@ -34,11 +34,14 @@
 }
 .set-filters .btn-group {
   margin-right: 10px;
+  white-space: nowrap;
+  font-size: 0;
 }
 .set-filters .btn-group .btn-default {
   background-color: transparent;
   border: 1px solid #d1d8dd;
   color: #8D99A6;
+  float: none;
 }
 .filter-box {
   border-bottom: 1px solid #d1d8dd;

frappe/public/js/frappe/form/controls/autocomplete.js

@@ -2,30 +2,32 @@ frappe.ui.form.ControlAutocomplete = frappe.ui.form.ControlData.extend({
 	make_input() {
 		this._super();
 		this.setup_awesomplete();
+		this.set_options();
+	},
+
+	set_options() {
+		if (this.df.options) {
+			let options = this.df.options || [];
+			if(typeof options === 'string') {
+				options = options.split('\n');
+			}
+			this._data = options;
+		}
+	},
+
+	get_awesomplete_settings() {
+		return {
+			minChars: 0,
+			maxItems: 99,
+			autoFirst: true,
+			list: this.get_data()
+		};
 	},
 
 	setup_awesomplete() {
 		var me = this;
 
-		this.awesomplete = new Awesomplete(this.input, {
-			minChars: 0,
-			maxItems: 99,
-			autoFirst: true,
-			list: this.get_data(),
-			data: function (item) {
-				if (typeof item === 'string') {
-					item = {
-						label: item,
-						value: item
-					};
-				}
-
-				return {
-					label: item.label || item.value,
-					value: item.value
-				};
-			}
-		});
+		this.awesomplete = new Awesomplete(this.input, this.get_awesomplete_settings());
 
 		$(this.input_area).find('.awesomplete ul').css('min-width', '100%');
 

frappe/public/js/frappe/form/controls/multiselect.js

@@ -0,0 +1,29 @@
+frappe.ui.form.ControlMultiSelect = frappe.ui.form.ControlAutocomplete.extend({
+	get_awesomplete_settings() {
+		const settings = this._super();
+
+		return Object.assign(settings, {
+			filter: function(text, input) {
+				return Awesomplete.FILTER_CONTAINS(text, input.match(/[^,]*$/)[0]);
+			},
+
+			item: function(text, input) {
+				return Awesomplete.ITEM(text, input.match(/[^,]*$/)[0]);
+			},
+
+			replace: function(text) {
+				const before = this.input.value.match(/^.+,\s*|/)[0];
+				this.input.value = before + text + ", ";
+			}
+		});
+	},
+
+	get_data() {
+		const value = this.get_value() || '';
+		const values = value.split(', ').filter(d => d);
+		const data = this._super();
+
+		// return values which are not already selected
+		return data.filter(d => !values.includes(d));
+	}
+});