summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/repo/index.js
blob: b6801af7fcbfe830ffa43a7c76a8940628c3796d (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
import Vue from 'vue';
import { mapActions } from 'vuex';
import { convertPermissionToBoolean } from '../lib/utils/common_utils';
import Repo from './components/repo.vue';
import RepoEditButton from './components/repo_edit_button.vue';
import newBranchForm from './components/new_branch_form.vue';
import newDropdown from './components/new_dropdown/index.vue';
import store from './stores';
import Translate from '../vue_shared/translate';

function initRepo(el) {
  if (!el) return null;

  return new Vue({
    el,
    store,
    components: {
      repo: Repo,
    },
    methods: {
      ...mapActions([
        'setInitialData',
      ]),
    },
    created() {
      const data = el.dataset;

      this.setInitialData({
        project: {
          id: data.projectId,
          name: data.projectName,
          url: data.projectUrl,
        },
        endpoints: {
          rootEndpoint: data.url,
          newMergeRequestUrl: data.newMergeRequestUrl,
          rootUrl: data.rootUrl,
        },
        canCommit: convertPermissionToBoolean(data.canCommit),
        onTopOfBranch: convertPermissionToBoolean(data.onTopOfBranch),
        currentRef: data.ref,
        path: data.currentPath,
        currentBranch: data.currentBranch,
        isRoot: convertPermissionToBoolean(data.root),
        isInitialRoot: convertPermissionToBoolean(data.root),
      });
    },
    render(createElement) {
      return createElement('repo');
    },
  });
}

function initRepoEditButton(el) {
  return new Vue({
    el,
    store,
    components: {
      repoEditButton: RepoEditButton,
    },
    render(createElement) {
      return createElement('repo-edit-button');
    },
  });
}

function initNewDropdown(el) {
  return new Vue({
    el,
    store,
    components: {
      newDropdown,
    },
    render(createElement) {
      return createElement('new-dropdown');
    },
  });
}

function initNewBranchForm() {
  const el = document.querySelector('.js-new-branch-dropdown');

  if (!el) return null;

  return new Vue({
    el,
    components: {
      newBranchForm,
    },
    store,
    render(createElement) {
      return createElement('new-branch-form');
    },
  });
}

const repo = document.getElementById('repo');
const editButton = document.querySelector('.editable-mode');
const newDropdownHolder = document.querySelector('.js-new-dropdown');

Vue.use(Translate);

initRepo(repo);
initRepoEditButton(editButton);
initNewBranchForm();
initNewDropdown(newDropdownHolder);