summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
blob: 110175a67797bdcd370c86020b1415a6f82ace11 (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
import $ from 'jquery';
import _ from 'underscore';
import { __ } from '~/locale';

function isValidProjectId(id) {
  return id > 0;
}

class SidebarMoveIssue {
  constructor(mediator, dropdownToggle, confirmButton) {
    this.mediator = mediator;

    this.$dropdownToggle = $(dropdownToggle);
    this.$confirmButton = $(confirmButton);

    this.onConfirmClickedWrapper = this.onConfirmClicked.bind(this);
  }

  init() {
    this.initDropdown();
    this.addEventListeners();
  }

  destroy() {
    this.removeEventListeners();
  }

  initDropdown() {
    this.$dropdownToggle.glDropdown({
      search: {
        fields: ['name_with_namespace'],
      },
      showMenuAbove: true,
      selectable: true,
      filterable: true,
      filterRemote: true,
      multiSelect: false,
      // Keep the dropdown open after selecting an option
      shouldPropagate: false,
      data: (searchTerm, callback) => {
        this.mediator
          .fetchAutocompleteProjects(searchTerm)
          .then(callback)
          .catch(
            () => new window.Flash(__('An error occurred while fetching projects autocomplete.')),
          );
      },
      renderRow: project => `
        <li>
          <a href="#" class="js-move-issue-dropdown-item">
            ${_.escape(project.name_with_namespace)}
          </a>
        </li>
      `,
      clicked: options => {
        const project = options.selectedObj;
        const selectedProjectId = options.isMarking ? project.id : 0;
        this.mediator.setMoveToProjectId(selectedProjectId);

        this.$confirmButton.prop('disabled', !isValidProjectId(selectedProjectId));
      },
    });
  }

  addEventListeners() {
    this.$confirmButton.on('click', this.onConfirmClickedWrapper);
  }

  removeEventListeners() {
    this.$confirmButton.off('click', this.onConfirmClickedWrapper);
  }

  onConfirmClicked() {
    if (isValidProjectId(this.mediator.store.moveToProjectId)) {
      this.$confirmButton.disable().addClass('is-loading');

      this.mediator.moveIssue().catch(() => {
        window.Flash(__('An error occurred while moving the issue.'));
        this.$confirmButton.enable().removeClass('is-loading');
      });
    }
  }
}

export default SidebarMoveIssue;