Use VueSelect instead of select2

Signed-off-by: Joas Schilling <coding@schilljs.com>

6 files changed, 72 insertions, 14 deletions

diff --git a/apps/updatenotification/js-src/app.js b/apps/updatenotification/js-src/app.js
index 349c5c6c7bb..85279423434 100644
--- a/apps/updatenotification/js-src/app.js
+++ b/apps/updatenotification/js-src/app.js
@@ -14,10 +14,6 @@ define(function (require) {
 
 	return {
 
-
-		/** @type {number|null} */
-		interval: null,
-
 		/** @type {Vue|null} */
 		vm: null,
 
@@ -27,6 +23,8 @@ define(function (require) {
 		initialise: function() {
 			var data = JSON.parse($('#updatenotification').attr('data-json'));
 			var Vue = require('vue');
+			var vSelect = require('vue-select');
+			Vue.component('v-select', vSelect.VueSelect);
 			this.vm = new Vue(require('./components/root.vue'));
 
 			this.vm.newVersionString = data.newVersionString;
diff --git a/apps/updatenotification/js-src/components/root.vue b/apps/updatenotification/js-src/components/root.vue
index 5f41ce3ec58..d6dcd37e2fd 100644
--- a/apps/updatenotification/js-src/components/root.vue
+++ b/apps/updatenotification/js-src/components/root.vue
@@ -30,7 +30,7 @@
 
 		<p id="oca_updatenotification_groups">
 			{{l_notify_groups}}
-			<input name="oca_updatenotification_groups_list" type="hidden" id="oca_updatenotification_groups_list" @change="saveNotifyGroups" :value="notifyGroups" style="width: 400px"><br />
+			<v-select multiple :value="notifyGroups" :options="availableGroups"></v-select><br />
 			<em v-if="currentChannel === 'daily' || currentChannel === 'git'">{{l_only_app_updates}}</em>
 			<em v-if="currentChannel === 'daily'">{{l_update_channel_daily}}</em>
 			<em v-if="currentChannel === 'git'">{{l_update_channel_git}}</em>
@@ -56,7 +56,9 @@
 				currentChannel: '',
 				channels: [],
 				notifyGroups: '',
-				isDefaultUpdateServerURL: true
+				availableGroups: [],
+				isDefaultUpdateServerURL: true,
+				enableChangeWatcher: false
 			};
 		},
 
@@ -64,6 +66,21 @@
 		_$releaseChannel: null,
 		_$notifyGroups: null,
 
+		watch: {
+			notifyGroups: function(selectedOptions) {
+				if (!this.enableChangeWatcher) {
+					return;
+				}
+
+				var selectedGroups = [];
+				_.each(selectedOptions, function(group) {
+					selectedGroups.push(group.value);
+				});
+
+				OCP.AppConfig.setValue('updatenotification', 'notify_groups', JSON.stringify(selectedGroups));
+			}
+		},
+
 		computed: {
 			l_check_in_progress: function() {
 				return t('updatenotification', 'The update check is not yet finished. Please refresh the page.');
@@ -163,11 +180,6 @@
 						OC.msg.finishedAction('#channel_save_msg', data);
 					}
 				});
-			},
-			saveNotifyGroups: function(e) {
-				var groups = e.val || [];
-				groups = JSON.stringify(groups);
-				OCP.AppConfig.setValue('updatenotification', 'notify_groups', groups);
 			}
 		},
 
@@ -178,10 +190,26 @@
 			this._$notifyGroups.on('change', function () {
 				this.$emit('input');
 			}.bind(this));
+
+			$.ajax({
+				url: OC.generateUrl('/settings/users/groups'),
+				dataType: 'json',
+				success: function(data) {
+					var results = [];
+					$.each(data.data.adminGroups, function(i, group) {
+						results.push({value: group.id, label: group.name});
+					});
+					$.each(data.data.groups, function(i, group) {
+						results.push({value: group.id, label: group.name});
+					});
+
+					this.availableGroups = results;
+					this.enableChangeWatcher = true;
+				}.bind(this)
+			});
 		},
 
 		updated: function () {
-			OC.Settings.setupGroupsSelect(this._$notifyGroups);
 			this._$el.find('.icon-info').tooltip({placement: 'right'});
 		}
 	}
diff --git a/apps/updatenotification/js-src/webpack.config.js b/apps/updatenotification/js-src/webpack.config.js
index 30bdd5efb5c..1e62a3de9c9 100644
--- a/apps/updatenotification/js-src/webpack.config.js
+++ b/apps/updatenotification/js-src/webpack.config.js
@@ -24,6 +24,7 @@ module.exports = {
 	},
 	resolve: {
 		alias: {
+			'vue-select': 'vue-select/dist/vue-select.js',
 			'vue': process.env.NODE_ENV === 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js'
 		}
 	},
diff --git a/apps/updatenotification/lib/Settings/Admin.php b/apps/updatenotification/lib/Settings/Admin.php
index 55cab099940..258cba35e80 100644
--- a/apps/updatenotification/lib/Settings/Admin.php
+++ b/apps/updatenotification/lib/Settings/Admin.php
@@ -30,6 +30,7 @@ use OCA\UpdateNotification\UpdateChecker;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\IConfig;
 use OCP\IDateTimeFormatter;
+use OCP\IGroupManager;
 use OCP\Settings\ISettings;
 use OCP\Util;
 
@@ -38,19 +39,24 @@ class Admin implements ISettings {
 	private $config;
 	/** @var UpdateChecker */
 	private $updateChecker;
+	/** @var IGroupManager */
+	private $groupManager;
 	/** @var IDateTimeFormatter */
 	private $dateTimeFormatter;
 
 	/**
 	 * @param IConfig $config
 	 * @param UpdateChecker $updateChecker
+	 * @param IGroupManager $groupManager
 	 * @param IDateTimeFormatter $dateTimeFormatter
 	 */
 	public function __construct(IConfig $config,
 								UpdateChecker $updateChecker,
+								IGroupManager $groupManager,
 								IDateTimeFormatter $dateTimeFormatter) {
 		$this->config = $config;
 		$this->updateChecker = $updateChecker;
+		$this->groupManager = $groupManager;
 		$this->dateTimeFormatter = $dateTimeFormatter;
 	}
 
@@ -90,7 +96,7 @@ class Admin implements ISettings {
 			'updaterEnabled' => empty($updateState['updaterEnabled']) ? false : $updateState['updaterEnabled'],
 			'isDefaultUpdateServerURL' => $updateServerURL === $defaultUpdateServerURL,
 			'updateServerURL' => $updateServerURL,
-			'notifyGroups' => implode('|', $notifyGroups),
+			'notifyGroups' => $this->getSelectedGroups($notifyGroups),
 		];
 
 		$params = [
@@ -101,6 +107,25 @@ class Admin implements ISettings {
 	}
 
 	/**
+	 * @param array $groupIds
+	 * @return array
+	 */
+	protected function getSelectedGroups(array $groupIds): array {
+		$result = [];
+		foreach ($groupIds as $groupId) {
+			$group = $this->groupManager->get($groupId);
+
+			if ($group === null) {
+				continue;
+			}
+
+			$result[] = ['value' => $group->getGID(), 'label' => $group->getDisplayName()];
+		}
+
+		return $result;
+	}
+
+	/**
 	 * @return string the section ID, e.g. 'sharing'
 	 */
 	public function getSection(): string {
diff --git a/apps/updatenotification/package-lock.json b/apps/updatenotification/package-lock.json
index a221deb4c8c..ec478c67819 100644
--- a/apps/updatenotification/package-lock.json
+++ b/apps/updatenotification/package-lock.json
@@ -5880,6 +5880,11 @@
         "vue-template-es2015-compiler": "1.6.0"
       }
     },
+    "vue-select": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-2.4.0.tgz",
+      "integrity": "sha512-WxQc7t65ht3YSwSgcSdHFU8cSOWKpvH6n1B/Z9ua44hMB2oVcy0Mieu4qjMPrYx3AQQ8Y8F+pfNIylRZ0t3IVA=="
+    },
     "vue-style-loader": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.1.1.tgz",
diff --git a/apps/updatenotification/package.json b/apps/updatenotification/package.json
index 77bbf183703..afdd9b08c60 100644
--- a/apps/updatenotification/package.json
+++ b/apps/updatenotification/package.json
@@ -23,7 +23,8 @@
   },
   "homepage": "https://github.com/nextcloud/notifications#readme",
   "dependencies": {
-    "vue": "^2.5.13"
+    "vue": "^2.5.13",
+    "vue-select": "^2.4.0"
   },
   "devDependencies": {
     "cross-env": "^5.1.3",