debian-mirror-gitlab/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

131 lines
3.3 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2021-03-11 19:13:27 +05:30
import { GlIcon, GlToggle, GlTooltipDirective } from '@gitlab/ui';
2018-12-13 13:39:08 +05:30
import { __ } from '~/locale';
2019-12-21 20:55:43 +05:30
import Tracking from '~/tracking';
2018-12-13 13:39:08 +05:30
import eventHub from '../../event_hub';
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
const ICON_ON = 'notifications';
const ICON_OFF = 'notifications-off';
const LABEL_ON = __('Notifications on');
const LABEL_OFF = __('Notifications off');
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
export default {
directives: {
2021-01-29 00:20:46 +05:30
GlTooltip: GlTooltipDirective,
2018-12-13 13:39:08 +05:30
},
components: {
2020-11-24 15:15:51 +05:30
GlIcon,
2021-03-11 19:13:27 +05:30
GlToggle,
2018-12-13 13:39:08 +05:30
},
2019-12-21 20:55:43 +05:30
mixins: [Tracking.mixin({ label: 'right_sidebar' })],
2018-12-13 13:39:08 +05:30
props: {
loading: {
type: Boolean,
required: false,
default: false,
2018-03-17 18:26:18 +05:30
},
2019-12-26 22:10:19 +05:30
projectEmailsDisabled: {
type: Boolean,
required: false,
default: false,
},
subscribeDisabledDescription: {
type: String,
required: false,
default: '',
},
2018-12-13 13:39:08 +05:30
subscribed: {
type: Boolean,
required: false,
default: null,
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
id: {
type: Number,
required: false,
default: null,
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
},
computed: {
2020-01-01 13:55:28 +05:30
tracking() {
return {
// eslint-disable-next-line no-underscore-dangle
category: this.$options._componentTag,
};
},
2018-12-13 13:39:08 +05:30
showLoadingState() {
return this.subscribed === null;
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
notificationIcon() {
2019-12-26 22:10:19 +05:30
if (this.projectEmailsDisabled) {
return ICON_OFF;
}
2018-12-13 13:39:08 +05:30
return this.subscribed ? ICON_ON : ICON_OFF;
},
notificationTooltip() {
2019-12-26 22:10:19 +05:30
if (this.projectEmailsDisabled) {
return this.subscribeDisabledDescription;
}
2018-12-13 13:39:08 +05:30
return this.subscribed ? LABEL_ON : LABEL_OFF;
},
2019-12-26 22:10:19 +05:30
notificationText() {
if (this.projectEmailsDisabled) {
return this.subscribeDisabledDescription;
}
return __('Notifications');
},
2018-12-13 13:39:08 +05:30
},
methods: {
/**
* We need to emit this event on both component & eventHub
* for 2 dependencies;
*
* 1. eventHub: This component is used in Issue Boards sidebar
* where component template is part of HAML
* and event listeners are tied to app's eventHub.
* 2. Component: This compone is also used in Epics in EE
* where listeners are tied to component event.
*/
toggleSubscription() {
// App's eventHub event emission.
eventHub.$emit('toggleSubscription', this.id);
2018-10-15 14:42:47 +05:30
2018-12-13 13:39:08 +05:30
// Component event emission.
this.$emit('toggleSubscription', this.id);
2019-12-04 20:38:33 +05:30
2019-12-21 20:55:43 +05:30
this.track('toggle_button', {
property: 'notifications',
value: this.subscribed ? 0 : 1,
});
2018-12-13 13:39:08 +05:30
},
onClickCollapsedIcon() {
this.$emit('toggleSidebar');
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
},
};
2018-03-17 18:26:18 +05:30
</script>
<template>
2021-03-11 19:13:27 +05:30
<div class="gl-display-flex gl-justify-content-space-between">
2019-10-12 21:52:04 +05:30
<span
2019-12-26 22:10:19 +05:30
ref="tooltip"
2021-01-29 00:20:46 +05:30
v-gl-tooltip.viewport.left
2019-10-12 21:52:04 +05:30
:title="notificationTooltip"
2021-01-29 00:20:46 +05:30
class="sidebar-collapsed-icon"
2019-10-12 21:52:04 +05:30
@click="onClickCollapsedIcon"
>
2021-02-22 17:27:13 +05:30
<gl-icon :name="notificationIcon" :size="16" class="sidebar-item-icon is-active" />
2019-10-12 21:52:04 +05:30
</span>
2021-03-11 19:13:27 +05:30
<span class="hide-collapsed" data-testid="subscription-title"> {{ notificationText }} </span>
<gl-toggle
2019-12-26 22:10:19 +05:30
v-if="!projectEmailsDisabled"
2018-03-17 18:26:18 +05:30
:is-loading="showLoadingState"
:value="subscribed"
2021-03-11 19:13:27 +05:30
class="hide-collapsed"
data-testid="subscription-toggle"
2021-04-17 20:07:23 +05:30
:label="__('Notifications')"
label-position="hidden"
2018-03-17 18:26:18 +05:30
@change="toggleSubscription"
/>
</div>
</template>