summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/boards/components/modal/lists_dropdown.js
blob: 8cd15df90fa09b64af1a1bb9953cf80161dac5d6 (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
import Vue from 'vue';

const ModalStore = gl.issueBoards.ModalStore;

gl.issueBoards.ModalFooterListsDropdown = Vue.extend({
  data() {
    return {
      modal: ModalStore.store,
      state: gl.issueBoards.BoardsStore.state,
    };
  },
  computed: {
    selected() {
      return this.modal.selectedList || this.state.lists[0];
    },
  },
  destroyed() {
    this.modal.selectedList = null;
  },
  template: `
    <div class="dropdown inline">
      <button
        class="dropdown-menu-toggle"
        type="button"
        data-toggle="dropdown"
        aria-expanded="false">
        <span
          class="dropdown-label-box"
          :style="{ backgroundColor: selected.label.color }">
        </span>
        {{ selected.title }}
        <i class="fa fa-chevron-down"></i>
      </button>
      <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
        <ul>
          <li
            v-for="list in state.lists"
            v-if="list.type == 'label'">
            <a
              href="#"
              role="button"
              :class="{ 'is-active': list.id == selected.id }"
              @click.prevent="modal.selectedList = list">
              <span
                class="dropdown-label-box"
                :style="{ backgroundColor: list.label.color }">
              </span>
              {{ list.title }}
            </a>
          </li>
        </ul>
      </div>
    </div>
  `,
});