Merge pull request #8255 from nextcloud/bugfix/noid/group-display-name

Full implement group display names

4 files changed, 113 insertions, 106 deletions

diff --git a/settings/js/apps.js b/settings/js/apps.js
index f8db5088af0..0e5d7308e40 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -641,14 +641,13 @@ OC.Settings.Apps = OC.Settings.Apps || {
 						$('#navigation li[data-id=' + previousEntry.id + ']').after(li);
 
 						// draw attention to the newly added app entry
-						// by flashing it twice
+						// by flashing twice the more apps menu
 						if(addedApps[entry.id]) {
-							$('#header .menutoggle')
+							$('#header #more-apps')
 								.animate({opacity: 0.5})
 								.animate({opacity: 1})
 								.animate({opacity: 0.5})
-								.animate({opacity: 1})
-								.animate({opacity: 0.75});
+								.animate({opacity: 1});
 						}
 					}
 
diff --git a/settings/js/settings.js b/settings/js/settings.js
index 3a1e67f41cd..16718bd5cbe 100644
--- a/settings/js/settings.js
+++ b/settings/js/settings.js
@@ -24,77 +24,68 @@ OC.Settings = _.extend(OC.Settings, {
 		var self = this;
 		options = options || {};
 		if ($elements.length > 0) {
-			// note: settings are saved through a "change" event registered
-			// on all input fields
-			$elements.select2(_.extend({
-				placeholder: t('core', 'Groups'),
-				allowClear: true,
-				multiple: true,
-				toggleSelect: true,
-				separator: '|',
-				query: _.debounce(function(query) {
-					var queryData = {};
-					if (self._cachedGroups && query.term === '') {
-						query.callback({results: self._cachedGroups});
-						return;
-					}
-					if (query.term !== '') {
-						queryData = {
-							pattern: query.term,
-							filterGroups: 1
-						};
-					}
-					$.ajax({
-						url: OC.generateUrl('/settings/users/groups'),
-						data: queryData,
-						dataType: 'json',
-						success: function(data) {
-							var results = [];
+			// Let's load the data and THEN init our select
+			$.ajax({
+				url: OC.generateUrl('/settings/users/groups'),
+				dataType: 'json',
+				success: function(data) {
+					var results = [];
 
-							// add groups
-							if (!options.excludeAdmins) {
-								$.each(data.data.adminGroups, function(i, group) {
-									results.push({id:group.id, displayname:group.name});
+					// add groups
+					if (!options.excludeAdmins) {
+						$.each(data.data.adminGroups, function(i, group) {
+							results.push({id:group.id, displayname:group.name});
+						});
+					}
+					$.each(data.data.groups, function(i, group) {
+						results.push({id:group.id, displayname:group.name});
+					});
+					// note: settings are saved through a "change" event registered
+					// on all input fields
+					$elements.select2(_.extend({
+						placeholder: t('core', 'Groups'),
+						allowClear: true,
+						multiple: true,
+						toggleSelect: true,
+						separator: '|',
+						data: { results: results, text: 'displayname' },
+						initSelection: function(element, callback) {
+							var groups = $(element).val();
+							var selection;
+							if (groups && results.length > 0) {
+								selection = _.map((groups || []).split('|').sort(), function(groupId) {
+									return {
+										id: groupId,
+										displayname: results.find(group =>group.id === groupId).displayname
+									};
+								});
+							} else if (groups) {
+								selection = _.map((groups || []).split('|').sort(), function(groupId) {
+									return {
+										id: groupId,
+										displayname: groupId
+									};
 								});
 							}
-							$.each(data.data.groups, function(i, group) {
-								results.push({id:group.id, displayname:group.name});
-							});
-
-							if (query.term === '') {
-								// cache full list
-								self._cachedGroups = results;
-							}
-							query.callback({results: results});
+							callback(selection);
+						},
+						formatResult: function (element) {
+							return escapeHTML(element.displayname);
+						},
+						formatSelection: function (element) {
+							return escapeHTML(element.displayname);
+						},
+						escapeMarkup: function(m) {
+							// prevent double markup escape
+							return m;
 						}
-					});
-				}, 100, true),
-				id: function(element) {
-					return element.id;
-				},
-				initSelection: function(element, callback) {
-					var selection =
-						_.map(($(element).val() || []).split('|').sort(),
-							function(groupName) {
-						return {
-							id: groupName,
-							displayname: groupName
-						};
-					});
-					callback(selection);
+					}, extraOptions || {}));
 				},
-				formatResult: function (element) {
-					return escapeHTML(element.displayname);
-				},
-				formatSelection: function (element) {
-					return escapeHTML(element.displayname);
-				},
-				escapeMarkup: function(m) {
-					// prevent double markup escape
-					return m;
+				error : function(data) {
+					OC.Notification.show(t('settings', 'Unable to retrieve the group list'), {type: 'error'});
+					console.log(data);
 				}
-			}, extraOptions || {}));
+			});
 		}
 	}
 });
-
diff --git a/settings/js/users/groups.js b/settings/js/users/groups.js
index 522291a00d7..08bd26b230e 100644
--- a/settings/js/users/groups.js
+++ b/settings/js/users/groups.js
@@ -17,11 +17,14 @@ GroupList = {
 	filter: '',
 	filterGroups: false,
 
-	addGroup: function (gid, usercount) {
+	addGroup: function (gid, displayName, usercount) {
+		if (_.isUndefined(displayName)) {
+			displayName = gid;
+		}
 		var $li = $userGroupList.find('.isgroup:last-child').clone();
 		$li
 			.data('gid', gid)
-			.find('.groupname').text(gid);
+			.find('.groupname').text(displayName);
 		GroupList.setUserCount($li, usercount);
 
 		$li.appendTo($userGroupList);
@@ -128,22 +131,22 @@ GroupList = {
 		}
 	},
 
-	createGroup: function (groupname) {
+	createGroup: function (groupid) {
 		if (OC.PasswordConfirmation.requiresPasswordConfirmation()) {
-			OC.PasswordConfirmation.requirePasswordConfirmation(_.bind(this.createGroup, this, groupname));
+			OC.PasswordConfirmation.requirePasswordConfirmation(_.bind(this.createGroup, this, groupid));
 			return;
 		}
 
 		$.post(
 			OC.generateUrl('/settings/users/groups'),
 			{
-				id: groupname
+				id: groupid
 			},
 			function (result) {
 				if (result.groupname) {
 					var addedGroup = result.groupname;
-					UserList.availableGroups = $.unique($.merge(UserList.availableGroups, [addedGroup]));
-					GroupList.addGroup(result.groupname);
+					UserList.availableGroups[groupid] = {displayName: result.groupname};
+					GroupList.addGroup(groupid, result.groupname);
 				}
 				GroupList.toggleAddGroup();
 			}).fail(function(result) {
@@ -173,7 +176,7 @@ GroupList = {
 								GroupList.setUserCount(GroupList.getGroupLI(group.name).first(), group.usercount);
 							}
 							else {
-								var $li = GroupList.addGroup(group.name, group.usercount);
+								var $li = GroupList.addGroup(group.id, group.name, group.usercount);
 
 								$li.addClass('appear transparent');
 								lis.push($li);
diff --git a/settings/js/users/users.js b/settings/js/users/users.js
index 9bbdd48e99e..847cceb8cc3 100644
--- a/settings/js/users/users.js
+++ b/settings/js/users/users.js
@@ -52,8 +52,8 @@ var UserList = {
 	 *            {
 	 * 				'name': 			'username',
 	 * 				'displayname': 		'Users display name',
-	 * 				'groups': 			['group1', 'group2'],
-	 * 				'subadmin': 		['group4', 'group5'],
+	 * 				'groups': 			{group1: {displayName: 'Group 1'}, group2: {displayName: 'Group 2'}}
+	 * 				'subadmin': 		{group5: {displayName: 'Group 5'}, group6: {displayName: 'Group 6'}}
 	 *				'quota': 			'10 GB',
 	 *				'quota_bytes':		'10737418240',
 	 *				'storageLocation':	'/srv/www/owncloud/data/username',
@@ -66,7 +66,7 @@ var UserList = {
 	 * 			}
 	 */
 	add: function (user) {
-		if (this.currentGid && this.currentGid !== '_everyone' && this.currentGid !== '_disabledUsers' && _.indexOf(user.groups, this.currentGid) < 0) {
+		if (this.currentGid && this.currentGid !== '_everyone' && this.currentGid !== '_disabledUsers' && Object.keys(user.groups).indexOf(this.currentGid) < 0) {
 			return false;
 		}
 
@@ -454,11 +454,10 @@ var UserList = {
 				if (!OC.isUserAdmin() && checked.length === 1 && checked[0] === group) {
 					return false;
 				}
-
-				if (add && OC.isUserAdmin() && UserList.availableGroups.indexOf(group) === -1) {
+				if (add && OC.isUserAdmin() && _.isUndefined(UserList.availableGroups[group])) {
 					GroupList.createGroup(group);
-					if (UserList.availableGroups.indexOf(group) === -1) {
-						UserList.availableGroups.push(group);
+					if (_.isUndefined(UserList.availableGroups[group])) {
+						UserList.availableGroups[group] = {displayName: group};
 					}
 				}
 
@@ -473,8 +472,8 @@ var UserList = {
 					},
 					success: function () {
 						GroupList.update();
-						if (add && UserList.availableGroups.indexOf(group) === -1) {
-							UserList.availableGroups.push(group);
+						if (add && _.isUndefined(UserList.availableGroups[group])) {
+							UserList.availableGroups[group] = {displayName: group};
 						}
 
 						if (add) {
@@ -647,11 +646,12 @@ var UserList = {
 	 * Creates a temporary jquery.multiselect selector on the given group field
 	 */
 	_triggerGroupEdit: function ($td, isSubadminSelect) {
+		var self = this;
 		var $groupsListContainer = $td.find('.groupsListContainer');
-		var placeholder = $groupsListContainer.attr('data-placeholder') || t('settings', 'no group');
+		var placeholder = $groupsListContainer.data('placeholder') || t('settings', 'no group');
 		var user = UserList.getUID($td);
-		var checked = $td.data('groups') || [];
-		var extraGroups = [].concat(checked);
+		var checked = $td.data('groups') || {};
+		var extraGroups = Object.assign({}, checked);
 
 		$td.find('.multiselectoptions').remove();
 
@@ -663,22 +663,21 @@ var UserList = {
 			$groupsSelect = $('<select multiple="multiple" class="subadminsselect multiselect button" title="' + placeholder + '"></select>')
 		}
 
-		function createItem (group) {
-			if (isSubadminSelect && group === 'admin') {
+		function createItem (gid, group) {
+			if (isSubadminSelect && group.displayName === 'admin') {
 				// can't become subadmin of "admin" group
 				return;
 			}
-			$groupsSelect.append($('<option value="' + escapeHTML(group) + '">' + escapeHTML(group) + '</option>'));
+			$groupsSelect.append($('<option value="' + escapeHTML(gid) + '">' + escapeHTML(group.displayName) + '</option>'));
 		}
 
-		$.each(this.availableGroups, function (i, group) {
+		$.each(this.availableGroups, function (gid, group) {
 			// some new groups might be selected but not in the available groups list yet
-			var extraIndex = extraGroups.indexOf(group);
-			if (extraIndex >= 0) {
+			if (extraGroups[gid] !== undefined) {
 				// remove extra group as it was found
-				extraGroups.splice(extraIndex, 1);
+				delete extraGroups[gid];
 			}
-			createItem(group);
+			createItem(gid, group);
 		});
 		$.each(extraGroups, function (i, group) {
 			createItem(group);
@@ -686,10 +685,13 @@ var UserList = {
 
 		$td.append($groupsSelect);
 
+		var checkedIds = Object.keys(checked).map(function(group, gid) {
+			return checked[group].displayName;
+		});
 		if (isSubadminSelect) {
-			UserList.applySubadminSelect($groupsSelect, user, checked);
+			UserList.applySubadminSelect($groupsSelect, user, checkedIds);
 		} else {
-			UserList.applyGroupSelect($groupsSelect, user, checked);
+			UserList.applyGroupSelect($groupsSelect, user, checkedIds);
 		}
 
 		$groupsListContainer.addClass('hidden');
@@ -699,7 +701,15 @@ var UserList = {
 			$td.find('.multiselect:not(.groupsListContainer)').parent().remove();
 			$td.find('.multiselectoptions').remove();
 			$groupsListContainer.removeClass('hidden');
-			UserList._updateGroupListLabel($td, e.checked);
+			// Pull all checked groups from this.availableGroups
+			var checked = Object.keys(self.availableGroups).reduce(function (previous, key) {
+				if(e.checked.indexOf(key) >= 0) {
+					return Object.assign(previous, {[key]:self.availableGroups[key]});
+				} else {
+					return previous;
+				}
+			}, {});
+			UserList._updateGroupListLabel($td, checked);
 		});
 	},
 
@@ -707,9 +717,12 @@ var UserList = {
 	 * Updates the groups list td with the given groups selection
 	 */
 	_updateGroupListLabel: function ($td, groups) {
-		var placeholder = $td.find('.groupsListContainer').attr('data-placeholder');
+		var placeholder = $td.find('.groupsListContainer').data('placeholder');
 		var $groupsEl = $td.find('.groupsList');
-		$groupsEl.text(groups.join(', ') || placeholder || t('settings', 'no group'));
+		var grouptext = Object.keys(groups).map(function(group, gid) {
+			return groups[group].displayName;
+		});
+		$groupsEl.text(grouptext.join(', ') || placeholder || t('settings', 'no group'));
 		$td.data('groups', groups);
 	}
 };
@@ -1029,7 +1042,7 @@ $(document).ready(function () {
 		OC.Search.clear();
 	});
 
-	UserList._updateGroupListLabel($('#newuser .groups'), []);
+	UserList._updateGroupListLabel($('#newuser .groups'), {});
 	var _submitNewUserForm = function (event) {
 		event.preventDefault();
 		if (OC.PasswordConfirmation.requiresPasswordConfirmation()) {
@@ -1057,7 +1070,8 @@ $(document).ready(function () {
 		}
 
 		promise.then(function () {
-			var groups = $('#newuser .groups').data('groups') || [];
+			var groups = $('#newuser .groups').data('groups') || {};
+			groups = Object.keys(groups);
 			$.post(
 				OC.generateUrl('/settings/users/users'),
 				{
@@ -1070,8 +1084,8 @@ $(document).ready(function () {
 					if (result.groups) {
 						for (var i in result.groups) {
 							var gid = result.groups[i];
-							if (UserList.availableGroups.indexOf(gid) === -1) {
-								UserList.availableGroups.push(gid);
+							if (_.isUndefined(UserList.availableGroups[gid])) {
+								UserList.availableGroups[gid] = {displayName: gid};
 							}
 							var $li = GroupList.getGroupLI(gid);
 							var userCount = GroupList.getUserCount($li);