app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js


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

export default class TargetBranchDropdown {
  constructor() {
    this.$dropdown = $('.js-target-branch-dropdown');
    this.$dropdownToggle = this.$dropdown.find('.dropdown-toggle-text');
    this.$input = $('#schedule_ref');
    this.initialValue = this.$input.val();
    this.initDropdown();
  }

  initDropdown() {
    this.$dropdown.glDropdown({
      data: this.formatBranchesList(),
      filterable: true,
      selectable: true,
      toggleLabel: item => item.name,
      search: {
        fields: ['name'],
      },
      clicked: cfg => this.updateInputValue(cfg),
      text: item => item.name,
    });

    this.setDropdownToggle();
  }

  formatBranchesList() {
    return this.$dropdown.data('data')
      .map(val => ({ name: val }));
  }

  setDropdownToggle() {
    if (this.initialValue) {
      this.$dropdownToggle.text(this.initialValue);
    }
  }

  updateInputValue({ selectedObj, e }) {
    e.preventDefault();
    this.$input.val(selectedObj.name);
    gl.pipelineScheduleFieldErrors.updateFormValidityState();
  }
}