toggle_labels.js 1.39 KB
Newer Older
1 2
import Vue from 'vue';
import { mapState, mapGetters, mapActions } from 'vuex';
3
import { GlToggle } from '@gitlab/ui';
4
import Tracking from '~/tracking';
5
import store from '~/boards/stores';
6
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
7 8 9

export default () =>
  new Vue({
10
    el: document.getElementById('js-board-labels-toggle'),
11 12
    components: {
      GlToggle,
13
      LocalStorageSync,
14 15 16 17
    },
    store,
    computed: {
      ...mapState(['isShowingLabels']),
18
      ...mapGetters(['labelToggleState']),
19 20
    },
    methods: {
21
      ...mapActions(['setShowLabels']),
22

23 24
      onToggle(val) {
        this.setShowLabels(val);
25 26 27

        Tracking.event(document.body.dataset.page, 'toggle', {
          label: 'show_labels',
28
          property: this.labelToggleState,
29 30
        });
      },
31 32 33 34

      onStorageUpdate(val) {
        this.setShowLabels(JSON.parse(val));
      },
35 36
    },
    template: `
37
      <div class="board-labels-toggle-wrapper d-flex align-items-center gl-ml-3">
38
        <local-storage-sync storage-key="gl-show-board-labels" :value="JSON.stringify(isShowingLabels)" @input="onStorageUpdate" />
39 40
        <gl-toggle
          :value="isShowingLabels"
GitLab Bot's avatar
GitLab Bot committed
41 42
          label="Show labels"
          label-position="left"
43
          aria-describedby="board-labels-toggle-text"
44 45 46 47 48 49
          data-qa-selector="show_labels_toggle"
          @change="onToggle"
        />
      </div>
    `,
  });