subscriptions.vue 2.52 KB
Newer Older
Eric Eastwood's avatar
Eric Eastwood committed
1
<script>
2 3 4 5 6
import { __ } from '~/locale';
import icon from '~/vue_shared/components/icon.vue';
import toggleButton from '~/vue_shared/components/toggle_button.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import eventHub from '../../event_hub';
7

8 9 10 11
const ICON_ON = 'notifications';
const ICON_OFF = 'notifications-off';
const LABEL_ON = __('Notifications on');
const LABEL_OFF = __('Notifications off');
Eric Eastwood's avatar
Eric Eastwood committed
12

13 14 15 16 17 18 19 20 21 22 23 24 25
export default {
  directives: {
    tooltip,
  },
  components: {
    icon,
    toggleButton,
  },
  props: {
    loading: {
      type: Boolean,
      required: false,
      default: false,
26
    },
27 28 29 30
    subscribed: {
      type: Boolean,
      required: false,
      default: null,
Eric Eastwood's avatar
Eric Eastwood committed
31
    },
32 33 34 35
    id: {
      type: Number,
      required: false,
      default: null,
Eric Eastwood's avatar
Eric Eastwood committed
36
    },
37 38 39 40
  },
  computed: {
    showLoadingState() {
      return this.subscribed === null;
Eric Eastwood's avatar
Eric Eastwood committed
41
    },
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
    notificationIcon() {
      return this.subscribed ? ICON_ON : ICON_OFF;
    },
    notificationTooltip() {
      return this.subscribed ? LABEL_ON : LABEL_OFF;
    },
  },
  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);
63

64 65 66 67 68
      // Component event emission.
      this.$emit('toggleSubscription', this.id);
    },
    onClickCollapsedIcon() {
      this.$emit('toggleSidebar');
Eric Eastwood's avatar
Eric Eastwood committed
69
    },
70 71
  },
};
Eric Eastwood's avatar
Eric Eastwood committed
72 73 74 75
</script>

<template>
  <div>
Mike Greiling's avatar
Mike Greiling committed
76
    <div class="sidebar-collapsed-icon" @click="onClickCollapsedIcon">
77 78 79 80 81
      <span
        v-tooltip
        :title="notificationTooltip"
        data-container="body"
        data-placement="left"
82
        data-boundary="viewport"
83 84 85 86 87 88 89 90
      >
        <icon
          :name="notificationIcon"
          :size="16"
          aria-hidden="true"
          class="sidebar-item-icon is-active"
        />
      </span>
Eric Eastwood's avatar
Eric Eastwood committed
91
    </div>
Mike Greiling's avatar
Mike Greiling committed
92
    <span class="issuable-header-text hide-collapsed float-left"> {{ __('Notifications') }} </span>
93
    <toggle-button
Mike Greiling's avatar
Mike Greiling committed
94
      ref="toggleButton"
95 96
      :is-loading="showLoadingState"
      :value="subscribed"
97
      class="float-right hide-collapsed js-issuable-subscribe-button"
98
      @change="toggleSubscription"
Eric Eastwood's avatar
Eric Eastwood committed
99 100 101
    />
  </div>
</template>