Use VueSelect instead of select2

Signed-off-by: Joas Schilling <coding@schilljs.com>
This commit is contained in:
Joas Schilling 2018-01-31 10:54:22 +01:00
parent 308c7db333
commit 59c007bedd
No known key found for this signature in database
GPG Key ID: 7076EA9751AACDDA
6 changed files with 72 additions and 14 deletions

View File

@ -14,10 +14,6 @@ define(function (require) {
return { return {
/** @type {number|null} */
interval: null,
/** @type {Vue|null} */ /** @type {Vue|null} */
vm: null, vm: null,
@ -27,6 +23,8 @@ define(function (require) {
initialise: function() { initialise: function() {
var data = JSON.parse($('#updatenotification').attr('data-json')); var data = JSON.parse($('#updatenotification').attr('data-json'));
var Vue = require('vue'); 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 = new Vue(require('./components/root.vue'));
this.vm.newVersionString = data.newVersionString; this.vm.newVersionString = data.newVersionString;

View File

@ -30,7 +30,7 @@
<p id="oca_updatenotification_groups"> <p id="oca_updatenotification_groups">
{{l_notify_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' || currentChannel === 'git'">{{l_only_app_updates}}</em>
<em v-if="currentChannel === 'daily'">{{l_update_channel_daily}}</em> <em v-if="currentChannel === 'daily'">{{l_update_channel_daily}}</em>
<em v-if="currentChannel === 'git'">{{l_update_channel_git}}</em> <em v-if="currentChannel === 'git'">{{l_update_channel_git}}</em>
@ -56,7 +56,9 @@
currentChannel: '', currentChannel: '',
channels: [], channels: [],
notifyGroups: '', notifyGroups: '',
isDefaultUpdateServerURL: true availableGroups: [],
isDefaultUpdateServerURL: true,
enableChangeWatcher: false
}; };
}, },
@ -64,6 +66,21 @@
_$releaseChannel: null, _$releaseChannel: null,
_$notifyGroups: 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: { computed: {
l_check_in_progress: function() { l_check_in_progress: function() {
return t('updatenotification', 'The update check is not yet finished. Please refresh the page.'); 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); 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._$notifyGroups.on('change', function () {
this.$emit('input'); this.$emit('input');
}.bind(this)); }.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 () { updated: function () {
OC.Settings.setupGroupsSelect(this._$notifyGroups);
this._$el.find('.icon-info').tooltip({placement: 'right'}); this._$el.find('.icon-info').tooltip({placement: 'right'});
} }
} }

View File

@ -24,6 +24,7 @@ module.exports = {
}, },
resolve: { resolve: {
alias: { alias: {
'vue-select': 'vue-select/dist/vue-select.js',
'vue': process.env.NODE_ENV === 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js' 'vue': process.env.NODE_ENV === 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js'
} }
}, },

View File

@ -30,6 +30,7 @@ use OCA\UpdateNotification\UpdateChecker;
use OCP\AppFramework\Http\TemplateResponse; use OCP\AppFramework\Http\TemplateResponse;
use OCP\IConfig; use OCP\IConfig;
use OCP\IDateTimeFormatter; use OCP\IDateTimeFormatter;
use OCP\IGroupManager;
use OCP\Settings\ISettings; use OCP\Settings\ISettings;
use OCP\Util; use OCP\Util;
@ -38,19 +39,24 @@ class Admin implements ISettings {
private $config; private $config;
/** @var UpdateChecker */ /** @var UpdateChecker */
private $updateChecker; private $updateChecker;
/** @var IGroupManager */
private $groupManager;
/** @var IDateTimeFormatter */ /** @var IDateTimeFormatter */
private $dateTimeFormatter; private $dateTimeFormatter;
/** /**
* @param IConfig $config * @param IConfig $config
* @param UpdateChecker $updateChecker * @param UpdateChecker $updateChecker
* @param IGroupManager $groupManager
* @param IDateTimeFormatter $dateTimeFormatter * @param IDateTimeFormatter $dateTimeFormatter
*/ */
public function __construct(IConfig $config, public function __construct(IConfig $config,
UpdateChecker $updateChecker, UpdateChecker $updateChecker,
IGroupManager $groupManager,
IDateTimeFormatter $dateTimeFormatter) { IDateTimeFormatter $dateTimeFormatter) {
$this->config = $config; $this->config = $config;
$this->updateChecker = $updateChecker; $this->updateChecker = $updateChecker;
$this->groupManager = $groupManager;
$this->dateTimeFormatter = $dateTimeFormatter; $this->dateTimeFormatter = $dateTimeFormatter;
} }
@ -90,7 +96,7 @@ class Admin implements ISettings {
'updaterEnabled' => empty($updateState['updaterEnabled']) ? false : $updateState['updaterEnabled'], 'updaterEnabled' => empty($updateState['updaterEnabled']) ? false : $updateState['updaterEnabled'],
'isDefaultUpdateServerURL' => $updateServerURL === $defaultUpdateServerURL, 'isDefaultUpdateServerURL' => $updateServerURL === $defaultUpdateServerURL,
'updateServerURL' => $updateServerURL, 'updateServerURL' => $updateServerURL,
'notifyGroups' => implode('|', $notifyGroups), 'notifyGroups' => $this->getSelectedGroups($notifyGroups),
]; ];
$params = [ $params = [
@ -100,6 +106,25 @@ class Admin implements ISettings {
return new TemplateResponse('updatenotification', 'admin', $params, ''); return new TemplateResponse('updatenotification', 'admin', $params, '');
} }
/**
* @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' * @return string the section ID, e.g. 'sharing'
*/ */

View File

@ -5880,6 +5880,11 @@
"vue-template-es2015-compiler": "1.6.0" "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": { "vue-style-loader": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.1.1.tgz", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.1.1.tgz",

View File

@ -23,7 +23,8 @@
}, },
"homepage": "https://github.com/nextcloud/notifications#readme", "homepage": "https://github.com/nextcloud/notifications#readme",
"dependencies": { "dependencies": {
"vue": "^2.5.13" "vue": "^2.5.13",
"vue-select": "^2.4.0"
}, },
"devDependencies": { "devDependencies": {
"cross-env": "^5.1.3", "cross-env": "^5.1.3",