summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/search.js
blob: 363322af47ab17a12c61433a7c9c78c05eca1adc (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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import Flash from './flash';
import Api from './api';

export default class Search {
  constructor() {
    const $groupDropdown = $('.js-search-group-dropdown');
    const $projectDropdown = $('.js-search-project-dropdown');

    this.searchInput = '.js-search-input';
    this.searchClear = '.js-search-clear';

    this.groupId = $groupDropdown.data('group-id');
    this.eventListeners();

    $groupDropdown.glDropdown({
      selectable: true,
      filterable: true,
      fieldName: 'group_id',
      search: {
        fields: ['full_name'],
      },
      data(term, callback) {
        return Api.groups(term, {}, (data) => {
          data.unshift({
            full_name: 'Any',
          });
          data.splice(1, 0, 'divider');
          return callback(data);
        });
      },
      id(obj) {
        return obj.id;
      },
      text(obj) {
        return obj.full_name;
      },
      toggleLabel(obj) {
        return `${($groupDropdown.data('default-label'))} ${obj.full_name}`;
      },
      clicked: () => Search.submitSearch(),
    });

    $projectDropdown.glDropdown({
      selectable: true,
      filterable: true,
      fieldName: 'project_id',
      search: {
        fields: ['name'],
      },
      data: (term, callback) => {
        this.getProjectsData(term)
          .then((data) => {
            data.unshift({
              name_with_namespace: 'Any',
            });
            data.splice(1, 0, 'divider');

            return data;
          })
          .then(data => callback(data))
          .catch(() => new Flash('Error fetching projects'));
      },
      id(obj) {
        return obj.id;
      },
      text(obj) {
        return obj.name_with_namespace;
      },
      toggleLabel(obj) {
        return `${($projectDropdown.data('default-label'))} ${obj.name_with_namespace}`;
      },
      clicked: () => Search.submitSearch(),
    });
  }

  eventListeners() {
    $(document)
      .off('keyup', this.searchInput)
      .on('keyup', this.searchInput, this.searchKeyUp);
    $(document)
      .off('click', this.searchClear)
      .on('click', this.searchClear, this.clearSearchField.bind(this));
  }

  static submitSearch() {
    return $('.js-search-form').submit();
  }

  searchKeyUp() {
    const $input = $(this);
    if ($input.val() === '') {
      $('.js-search-clear').addClass('hidden');
    } else {
      $('.js-search-clear').removeClass('hidden');
    }
  }

  clearSearchField() {
    return $(this.searchInput).val('').trigger('keyup').focus();
  }

  getProjectsData(term) {
    return new Promise((resolve) => {
      if (this.groupId) {
        Api.groupProjects(this.groupId, term, resolve);
      } else {
        Api.projects(term, {
          order_by: 'id',
        }, resolve);
      }
    });
  }
}