Use VueSelect instead of select2
Signed-off-by: Joas Schilling <coding@schilljs.com>
This commit is contained in:
Joas Schilling
parent
308c7db333
commit
59c007bedd
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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'});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
|
|
@ -100,6 +106,25 @@ class Admin implements ISettings {
|
|||
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'
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue