summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/groups/new_group_child.js
blob: 8e273579aae359e7b73934ccd0fe48733f47a779 (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
import DropLab from '../droplab/drop_lab';
import ISetter from '../droplab/plugins/input_setter';

const InputSetter = Object.assign({}, ISetter);

const NEW_PROJECT = 'new-project';
const NEW_SUBGROUP = 'new-subgroup';

export default class NewGroupChild {
  constructor(buttonWrapper) {
    this.buttonWrapper = buttonWrapper;
    this.newGroupChildButton = this.buttonWrapper.querySelector('.js-new-group-child');
    this.dropdownToggle = this.buttonWrapper.querySelector('.js-dropdown-toggle');
    this.dropdownList = this.buttonWrapper.querySelector('.dropdown-menu');

    this.newGroupPath = this.buttonWrapper.dataset.projectPath;
    this.subgroupPath = this.buttonWrapper.dataset.subgroupPath;

    this.init();
  }

  init() {
    this.initDroplab();
    this.bindEvents();
  }

  initDroplab() {
    this.droplab = new DropLab();
    this.droplab.init(
      this.dropdownToggle,
      this.dropdownList,
      [InputSetter],
      this.getDroplabConfig(),
    );
  }

  getDroplabConfig() {
    return {
      InputSetter: [{
        input: this.newGroupChildButton,
        valueAttribute: 'data-value',
        inputAttribute: 'data-action',
      }, {
        input: this.newGroupChildButton,
        valueAttribute: 'data-text',
      }],
    };
  }

  bindEvents() {
    this.newGroupChildButton
      .addEventListener('click', this.onClickNewGroupChildButton.bind(this));
  }

  onClickNewGroupChildButton(e) {
    if (e.target.dataset.action === NEW_PROJECT) {
      gl.utils.visitUrl(this.newGroupPath);
    } else if (e.target.dataset.action === NEW_SUBGROUP) {
      gl.utils.visitUrl(this.subgroupPath);
    }
  }
}