search.js 2.72 KB
Newer Older
1 2
import Flash from '~/flash';
import Api from '~/api';
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
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) => {
Fatih Acet's avatar
Fatih Acet committed
53
            data.unshift({
54
              name_with_namespace: 'Any',
Fatih Acet's avatar
Fatih Acet committed
55 56
            });
            data.splice(1, 0, 'divider');
57

58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
            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(),
    });
  }
Fatih Acet's avatar
Fatih Acet committed
75

76 77 78 79 80 81 82 83
  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));
  }
Fatih Acet's avatar
Fatih Acet committed
84

85 86 87
  static submitSearch() {
    return $('.js-search-form').submit();
  }
Fatih Acet's avatar
Fatih Acet committed
88

89 90 91 92 93 94 95 96
  searchKeyUp() {
    const $input = $(this);
    if ($input.val() === '') {
      $('.js-search-clear').addClass('hidden');
    } else {
      $('.js-search-clear').removeClass('hidden');
    }
  }
Fatih Acet's avatar
Fatih Acet committed
97

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

102 103 104 105 106 107 108 109 110 111 112 113
  getProjectsData(term) {
    return new Promise((resolve) => {
      if (this.groupId) {
        Api.groupProjects(this.groupId, term, resolve);
      } else {
        Api.projects(term, {
          order_by: 'id',
        }, resolve);
      }
    });
  }
}