summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/vue_issue_show/index.js.es6
blob: f6f62d2c791d4cbc1a8e6f27751dc30946d91e7a (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
/*= require vue */
/*= require vue-resource */

/*= require vue_realtime_listener/index */
//= require ./issue_title

/* global Vue, VueResource, Flash */
/* eslint-disable no-underscore-dangle */

(() => {
  Vue.use(VueResource);

  /**
    not using vue_resource_interceptor because of the nested call to render html
    this requires a bit more custom logic
    specifically the 'if/else' in the 'setInterval' inside the 'fetch' method
  */
  Vue.activeResources = 0;

  const token = document.querySelector('meta[name="csrf-token"]');
  if (token) Vue.http.headers.post['X-CSRF-token'] = token.content;

  const vueData = document.querySelector('.vue-data').dataset;
  const isNotUser = vueData.user;

  let user;

  if (isNotUser === 'true') {
    user = false;
  } else {
    user = true;
  }

  const vm = new Vue({
    el: '.issue-title-vue',
    components: {
      'vue-title': gl.VueIssueTitle,
    },
    data() {
      return {
        initialTitle: vueData.initialTitle,
        endpoint: vueData.endpoint,
        user,
        token,
      };
    },
    template: `
      <div>
        <vue-title
          :initialTitle='initialTitle'
          :endpoint='endpoint'
          :user='user'
        >
        </vue-title>
      </div>
    `,
  });

  if (user) {
    const titleComp = vm.$children
      .filter(e => e.$options._componentTag === 'vue-title')[0];

    const startTitleFetch = () => titleComp.fetch();
    const removeIntervalLoops = () => titleComp.clear();
    const startIntervalLoops = () => startTitleFetch();

    gl.VueRealtimeListener(removeIntervalLoops, startIntervalLoops);
  }
})(window.gl || (window.gl = {}));