summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
blob: b920b17d9152e82269157990bdc2f12a4b99a07a (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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/*= require filtered_search/filtered_search_dropdown */
(() => {
  const dropdownData = [{
    icon: 'fa-pencil',
    hint: 'author:',
    tag: '<author>',
  }, {
    icon: 'fa-user',
    hint: 'assignee:',
    tag: '<assignee>',
  }, {
    icon: 'fa-clock-o',
    hint: 'milestone:',
    tag: '<milestone>',
  }, {
    icon: 'fa-tag',
    hint: 'label:',
    tag: '<label>',
  }];

  class DropdownHint extends gl.FilteredSearchDropdown {
    constructor(droplab, dropdown, input) {
      super(droplab, dropdown, input);
      this.config = {
        droplabFilter: {
          template: 'hint',
          filterFunction: this.filterMethod,
        },
      };
    }

    itemClicked(e) {
      const { selected } = e.detail;

      if (selected.hasAttribute('data-value')) {
        this.dismissDropdown();
      } else {
        const token = selected.querySelector('.js-filter-hint').innerText.trim();
        const tag = selected.querySelector('.js-filter-tag').innerText.trim();

        if (tag.length) {
          gl.FilteredSearchDropdownManager
            .addWordToInput(this.getSelectedTextWithoutEscaping(token));
        }
        this.dismissDropdown();
        this.dispatchInputEvent();
      }
    }

    getSelectedTextWithoutEscaping(selectedToken) {
      const lastWord = this.input.value.split(' ').last();
      const lastWordIndex = selectedToken.indexOf(lastWord);

      return lastWordIndex === -1 ? selectedToken : selectedToken.slice(lastWord.length);
    }

    renderContent() {
      this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config);
      this.droplab.setData(this.hookId, dropdownData);
    }

    filterMethod(item, query) {
      const updatedItem = item;
      const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);

      if (value === '') {
        updatedItem.droplab_hidden = false;
      } else {
        updatedItem.droplab_hidden = updatedItem.hint.indexOf(value) === -1;
      }

      return updatedItem;
    }

    init() {
      this.droplab.addHook(this.input, this.dropdown, [droplabFilter], this.config).init();
    }
  }

  window.gl = window.gl || {};
  gl.DropdownHint = DropdownHint;
})();