replace chosen with select2 to provide ajaxified user and group selection for files_external, fixes #7499

remove minified select2 js

show avatars for users, simpler results

remove unneeded users and groups from settings template

fix css, escape user and group names

1 files changed, 138 insertions, 9 deletions

diff --git a/apps/files_external/js/settings.js b/apps/files_external/js/settings.js
index 8a1bb2bec6f..69e99c03c89 100644
--- a/apps/files_external/js/settings.js
+++ b/apps/files_external/js/settings.js
@@ -42,9 +42,11 @@ OC.MountConfig={
 			}
 		});
 		if ($('#externalStorage').data('admin') === true) {
-			var multiselect = $(tr).find('.chzn-select').val();
+			var multiselect = $(tr).find('.applicableUsers').select2('val');
 			if (multiselect == null) {
 				return false;
+			 } else if (multiselect instanceof Array && multiselect.length === 0) {
+				 multiselect.push('all');
 			}
 		}
 		if (addMountPoint) {
@@ -166,8 +168,139 @@ OC.MountConfig={
 };
 
 $(document).ready(function() {
-	$('.chzn-select').chosen();
+	//initialize hidden input field with list of users and groups
+	$('#externalStorage').find('tr:not(#addMountPoint)').each(function(i,tr) {
+		var applicable = $(tr).find('.applicable');
+		if (applicable.length > 0) {
+			var groups = applicable.data('applicable-groups');
+			var groupsId = [];
+			$.each(groups, function () {
+				groupsId.push(this+"(group)");
+			});
+			var users = applicable.data('applicable-users');
+			if (users.indexOf('all') > -1) {
+				$(tr).find('.applicableUsers').val('');
+			} else {
+				$(tr).find('.applicableUsers').val(groupsId.concat(users).join(','));
+			}
+		}
+	});
+
+	var userListLimit = 30;
+	function addSelect2 ($elements) {
+		if ($elements.length > 0) {
+			$elements.select2({
+				placeholder: t('files_external', 'All users. Type to select user or group.'),
+				allowClear: true,
+				multiple: true,
+				//minimumInputLength: 1,
+				ajax: {
+					url: OC.generateUrl('apps/files_external/applicable'),
+					dataType: 'json',
+					quietMillis: 100,
+					data: function (term, page) { // page is the one-based page number tracked by Select2
+						return {
+							pattern: term, //search term
+							limit: userListLimit, // page size
+							offset: userListLimit*(page-1), // page number starts with 0
+						};
+					},
+					results: function (data, page) {
+						if (data.status === "success") {
+
+							var results = [];
+							var userCount = 0; // users is an object
+
+							// add groups
+							$.each(data.groups, function(i, group) {
+								results.push({name:group+'(group)', displayname:group, type:'group' });
+							});
+							// add users
+							$.each(data.users, function(id, user) {
+								userCount++;
+								results.push({name:id, displayname:user, type:'user' });
+							});
+
+
+							var more = (userCount >= userListLimit) || (data.groups.length >= userListLimit);
+							return {results: results, more: more};
+						} else {
+							//FIXME add error handling
+						}
+					}
+				},
+				initSelection: function(element, callback) {
 
+					var promises = [];
+
+					var results = [];
+
+					$(element.val().split(",")).each(function (i,userId) {
+						var def = new $.Deferred();
+						promises.push(def.promise());
+
+						var pos = userId.indexOf('(group)');
+						if (pos !== -1) {
+							//add as group
+							results.push({name:userId, displayname:userId.substr(0, pos), type:'group'});
+							def.resolve();
+						} else {
+							$.ajax(OC.generateUrl('apps/files_external/applicable'), {
+								data: {
+									pattern: userId
+								},
+								dataType: "json"
+							}).done(function(data) {
+								if (data.status === "success") {
+									if (data.users[userId]) {
+										results.push({name:userId, displayname:data.users[userId], type:'user'});
+									}
+									def.resolve();
+								} else {
+									//FIXME add error handling
+								}
+							});
+						}
+					});
+					$.when.apply(undefined, promises).then(function(){
+						callback(results);
+					});
+				},
+				id: function(element) {
+					return element.name;
+				},
+				formatResult: function (element) {
+					var $result = $('<span><div class="avatardiv"/><span>'+escapeHTML(element.displayname)+'</span></span>');
+					var $div = $result.find('.avatardiv')
+						.attr('data-type', element.type)
+						.attr('data-name', element.name)
+						.attr('data-displayname', element.displayname);
+					if (element.type === 'group') {
+						var url = OC.imagePath('core','places/contacts-dark'); // TODO better group icon
+						$div.html('<img width="32" height="32" src="'+url+'">');
+					}
+					return $result.get(0).outerHTML;
+				},
+				formatSelection: function (element) {
+					if (element.type === 'group') {
+						return '<span title="'+escapeHTML(element.name)+'" class="group">'+escapeHTML(element.displayname+' '+t('files_external', '(group)'))+'</span>';
+					} else {
+						return '<span title="'+escapeHTML(element.name)+'" class="user">'+escapeHTML(element.displayname)+'</span>';
+					}
+				},
+				escapeMarkup: function (m) { return m; } // we escape the markup in formatResult and formatSelection
+			}).on("select2-loaded", function() {
+				$.each($(".avatardiv"), function(i, div) {
+					$div = $(div);
+					if ($div.data('type') === 'user') {
+						$div.avatar($div.data('name'),32);
+					}
+				})
+			});
+		}
+	}
+	addSelect2($('tr:not(#addMountPoint) .applicableUsers'));
+	
 	$('#externalStorage').on('change', '#selectBackend', function() {
 		var tr = $(this).parent().parent();
 		$('#externalStorage tbody').append($(tr).clone());
@@ -209,15 +342,11 @@ $(document).ready(function() {
 				return false;
 			}
 		});
-		// Reset chosen
-		var chosen = $(tr).find('.applicable select');
-		chosen.parent().find('div').remove();
-		chosen.removeAttr('id').removeClass('chzn-done').css({display:'inline-block'});
-		chosen.chosen();
 		$(tr).find('td').last().attr('class', 'remove');
 		$(tr).find('td').last().removeAttr('style');
 		$(tr).removeAttr('id');
 		$(this).remove();
+		addSelect2($('tr:not(#addMountPoint) .applicableUsers'));
 	});
 
 	function suggestMountPoint(defaultMountPoint) {
@@ -270,8 +399,8 @@ $(document).ready(function() {
 		OC.MountConfig.saveStorage($(this).parent().parent().parent());
 	});
 
-	$('#externalStorage').on('change', '.applicable .chzn-select', function() {
-		OC.MountConfig.saveStorage($(this).parent().parent());
+	$('#externalStorage').on('change', '.applicable', function() {
+		OC.MountConfig.saveStorage($(this).parent());
 	});
 
 	$('#sslCertificate').on('click', 'td.remove>img', function() {