summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/boards/components/modal/filters/milestone.js.es6
blob: d555599d300684307ddba009165d18ab5edb66fd (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
/* eslint-disable no-new */
/* global Vue */
/* global MilestoneSelect */
module.exports = Vue.extend({
  name: 'filter-milestone',
  props: {
    milestonePath: {
      type: String,
      required: true,
    },
  },
  mounted() {
    new MilestoneSelect(null, this.$refs.dropdown);
  },
  template: `
    <div class="dropdown">
      <button
        class="dropdown-menu-toggle js-milestone-select"
        type="button"
        data-toggle="dropdown"
        data-show-any="true"
        data-show-upcoming="true"
        data-field-name="milestone_title"
        :data-milestones="milestonePath"
        ref="dropdown">
        <span class="dropdown-toggle-text">
          Milestone
        </span>
        <i class="fa fa-chevron-down"></i>
      </button>
      <div class="dropdown-menu dropdown-select dropdown-menu-selectable dropdown-menu-milestone">
        <div class="dropdown-title">
          <span>Filter by milestone</span>
          <button
            class="dropdown-title-button dropdown-menu-close"
            aria-label="Close"
            type="button">
            <i class="fa fa-times dropdown-menu-close-icon"></i>
          </button>
        </div>
        <div class="dropdown-input">
          <input
            type="search"
            class="dropdown-input-field"
            placeholder="Search milestones"
            autocomplete="off" />
          <i class="fa fa-search dropdown-input-search"></i>
          <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
        </div>
        <div class="dropdown-content"></div>
        <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
      </div>
    </div>
  `,
});