diff options
Diffstat (limited to 'app/assets/javascripts/notifications')
-rw-r--r-- | app/assets/javascripts/notifications/components/notification_email_listbox_input.vue | 46 | ||||
-rw-r--r-- | app/assets/javascripts/notifications/index.js | 27 |
2 files changed, 73 insertions, 0 deletions
diff --git a/app/assets/javascripts/notifications/components/notification_email_listbox_input.vue b/app/assets/javascripts/notifications/components/notification_email_listbox_input.vue new file mode 100644 index 00000000000..5d5524deb0d --- /dev/null +++ b/app/assets/javascripts/notifications/components/notification_email_listbox_input.vue @@ -0,0 +1,46 @@ +<script> +import ListboxInput from '~/vue_shared/components/listbox_input/listbox_input.vue'; + +export default { + components: { + ListboxInput, + }, + inject: ['label', 'name', 'emails', 'emptyValueText', 'value', 'disabled'], + data() { + return { + selected: this.value, + }; + }, + computed: { + options() { + return [ + { + value: '', + text: this.emptyValueText, + }, + ...this.emails.map((email) => ({ + text: email, + value: email, + })), + ]; + }, + }, + methods: { + async onSelect() { + await this.$nextTick(); + this.$el.closest('form').submit(); + }, + }, +}; +</script> + +<template> + <listbox-input + v-model="selected" + :label="label" + :name="name" + :items="options" + :disabled="disabled" + @select="onSelect" + /> +</template> diff --git a/app/assets/javascripts/notifications/index.js b/app/assets/javascripts/notifications/index.js index a81f2c2590b..1395084f68c 100644 --- a/app/assets/javascripts/notifications/index.js +++ b/app/assets/javascripts/notifications/index.js @@ -2,10 +2,37 @@ import { GlToast } from '@gitlab/ui'; import Vue from 'vue'; import { parseBoolean } from '~/lib/utils/common_utils'; import NotificationsDropdown from './components/notifications_dropdown.vue'; +import NotificationEmailListboxInput from './components/notification_email_listbox_input.vue'; Vue.use(GlToast); +const initNotificationEmailListboxInputs = () => { + const els = [...document.querySelectorAll('.js-notification-email-listbox-input')]; + + els.forEach((el, index) => { + const { label, name, emptyValueText, value = '' } = el.dataset; + + return new Vue({ + el, + name: `NotificationEmailListboxInputRoot${index + 1}`, + provide: { + label, + name, + emails: JSON.parse(el.dataset.emails), + emptyValueText, + value, + disabled: parseBoolean(el.dataset.disabled), + }, + render(h) { + return h(NotificationEmailListboxInput); + }, + }); + }); +}; + export default () => { + initNotificationEmailListboxInputs(); + const containers = document.querySelectorAll('.js-vue-notification-dropdown'); if (!containers.length) return false; |