summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/ide/components/nav_dropdown.vue
blob: 8cea8655461226ac32a48afb971e23eeef86a77e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script>
import $ from 'jquery';
import { mapGetters } from 'vuex';
import NavForm from './nav_form.vue';
import NavDropdownButton from './nav_dropdown_button.vue';

export default {
  components: {
    NavDropdownButton,
    NavForm,
  },
  data() {
    return {
      isVisibleDropdown: false,
    };
  },
  computed: {
    ...mapGetters(['canReadMergeRequests']),
  },
  mounted() {
    this.addDropdownListeners();
  },
  beforeDestroy() {
    this.removeDropdownListeners();
  },
  methods: {
    addDropdownListeners() {
      $(this.$refs.dropdown)
        .on('show.bs.dropdown', () => this.showDropdown())
        .on('hide.bs.dropdown', () => this.hideDropdown());
    },
    removeDropdownListeners() {
      // eslint-disable-next-line @gitlab/no-global-event-off
      $(this.$refs.dropdown)
        .off('show.bs.dropdown')
        .off('hide.bs.dropdown');
    },
    showDropdown() {
      this.isVisibleDropdown = true;
    },
    hideDropdown() {
      this.isVisibleDropdown = false;
    },
  },
};
</script>

<template>
  <div ref="dropdown" class="btn-group ide-nav-dropdown dropdown" data-testid="ide-nav-dropdown">
    <nav-dropdown-button :show-merge-requests="canReadMergeRequests" />
    <div class="dropdown-menu dropdown-menu-left p-0">
      <nav-form v-if="isVisibleDropdown" :show-merge-requests="canReadMergeRequests" />
    </div>
  </div>
</template>