Added select2 on the apps page

Moved setupGroupsSelect() from admin.js to a common settings.js
as OC.Settings.setupGoupsSelect().

Now using select2 as well on the apps page.

3 files changed, 92 insertions, 78 deletions

diff --git a/settings/js/admin.js b/settings/js/admin.js
index d38c770a28a..943bf78e024 100644
--- a/settings/js/admin.js
+++ b/settings/js/admin.js
@@ -1,64 +1,3 @@
-var SharingGroupList = {
-	setupGroupsSelect: function($elements) {
-		if ($elements.length > 0) {
-			// note: settings are saved through a "change" event registered
-			// on all input fields
-			$elements.select2({
-				placeholder: t('core', 'Groups'),
-				allowClear: true,
-				multiple: true,
-				ajax: {
-					url: OC.generateUrl('/settings/ajax/grouplist'),
-					dataType: 'json',
-					quietMillis: 100,
-					data: function (term) {
-						return {
-							pattern: term, //search term
-						};
-					},
-					results: function (data) {
-						if (data.status === "success") {
-							var results = [];
-
-							// add groups
-							$.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});
-							});
-
-							return {results: results};
-						} else {
-							//FIXME add error handling
-						}
-					}
-				},
-				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);
-				},
-				formatResult: function (element) {
-					return element.displayname;
-				},
-				formatSelection: function (element) {
-					return element.displayname;
-				}
-			});
-		}
-	}
-};
-
 $(document).ready(function(){
 	var params = OC.Util.History.parseUrlQuery();
 
@@ -80,7 +19,7 @@ $(document).ready(function(){
 
 
 	$('#excludedGroups').each(function (index, element) {
-		SharingGroupList.setupGroupsSelect($(element));
+		OC.Settings.setupGroupsSelect($(element));
 	});
 
 
diff --git a/settings/js/apps.js b/settings/js/apps.js
index e808e51e936..20b0c5ce18f 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -7,6 +7,11 @@
 
 OC.Settings = OC.Settings || {};
 OC.Settings.Apps = OC.Settings.Apps || {
+	setupGroupsSelect: function() {
+		OC.Settings.setupGroupsSelect($('#group_select'), {
+			placeholder: t('core', 'All')
+		});
+	},
 	loadApp:function(app) {
 		var page = $('#app-content');
 		page.find('p.license').show();
@@ -112,23 +117,16 @@ OC.Settings.Apps = OC.Settings.Apps || {
 			page.find(".warning").hide();
 		}
 
-		page.find("div.multiselect").parent().remove();
 		if(OC.Settings.Apps.isType(app, 'filesystem') || OC.Settings.Apps.isType(app, 'prelogin') ||
 			OC.Settings.Apps.isType(app, 'authentication') || OC.Settings.Apps.isType(app, 'logging')) {
 			page.find("#groups_enable").hide();
 			page.find("label[for='groups_enable']").hide();
 			page.find("#groups_enable").attr('checked', null);
 		} else {
-			$('#group_select > option').each(function (i, el) {
-				if (app.groups.length === 0 || app.groups.indexOf(el.value) >= 0) {
-					$(el).attr('selected', 'selected');
-				} else {
-					$(el).attr('selected', null);
-				}
-			});
+			$('#group_select').val((app.groups || []).join(','));
 			if (app.active) {
 				if (app.groups.length) {
-					$('#group_select').multiSelect();
+					OC.Settings.Apps.setupGroupsSelect();
 					page.find("#groups_enable").attr('checked','checked');
 				} else {
 					page.find("#groups_enable").attr('checked', null);
@@ -383,6 +381,11 @@ $(document).ready(function(){
 	$('#group_select').change(function() {
 		var element = $('#app-content input.enable');
 		var groups = $(this).val();
+		if (groups && groups !== '') {
+			groups = groups.split(',');
+		} else {
+			groups = [];
+		}
 		var appid = element.data('appid');
 		if (appid) {
 			OC.Settings.Apps.enableApp(appid, false, element, groups);
@@ -404,14 +407,14 @@ $(document).ready(function(){
 	}
 
 	$("#groups_enable").change(function() {
+		var $select = $('#group_select');
+		$select.val('');
 		if (this.checked) {
-			$("div.multiselect").parent().remove();
-			$('#group_select').multiSelect();
-		} else {
-			$('#group_select').hide().val(null);
-			$("div.multiselect").parent().remove();
+			OC.Settings.Apps.setupGroupsSelect();
 		}
-
-		$('#group_select').change();
+		else {
+			$select.select2('destroy');
+		}
+		$select.change();
 	});
 });
diff --git a/settings/js/settings.js b/settings/js/settings.js
new file mode 100644
index 00000000000..85e8996ae7f
--- /dev/null
+++ b/settings/js/settings.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2014, Vincent Petry <pvince81@owncloud.com>
+ * This file is licensed under the Affero General Public License version 3 or later.
+ * See the COPYING-README file.
+ */
+OC.Settings = OC.Settings || {};
+OC.Settings = _.extend(OC.Settings, {
+	/**
+	 * Setup selection box for group selection.
+	 * @param $elements jQuery element (hidden input) to setup select2 on
+	 * @param [extraOptions] extra options hash to pass to select2
+	 */
+	setupGroupsSelect: function($elements, extraOptions) {
+		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,
+				ajax: {
+					url: OC.generateUrl('/settings/ajax/grouplist'),
+					dataType: 'json',
+					quietMillis: 100,
+					data: function (term) {
+						return {
+							pattern: term, //search term
+						};
+					},
+					results: function (data) {
+						if (data.status === "success") {
+							var results = [];
+
+							// add groups
+							$.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});
+							});
+
+							return {results: results};
+						} else {
+							//FIXME add error handling
+						}
+					}
+				},
+				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);
+				},
+				formatResult: function (element) {
+					return element.displayname;
+				},
+				formatSelection: function (element) {
+					return element.displayname;
+				}
+			}, extraOptions || {}));
+		}
+	}
+});
+