summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js.es6
blob: 1ca01d3bdb9c44e2d3c78272f65a02efb34a1c88 (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
/* global Vue */

require('./components/time_tracker');
require('../../smart_interval');
require('../../subbable_resource');

(() => {
  /* This Vue instance represents what will become the parent instance for the
    * sidebar. It will be responsible for managing `issuable` state and propagating
    * changes to sidebar components. We will want to create a separate service to
    * interface with the server at that point.
   */

  class IssuableTimeTracking {
    constructor(issuableJSON) {
      const parsedIssuable = JSON.parse(issuableJSON);
      return this.initComponent(parsedIssuable);
    }

    initComponent(parsedIssuable) {
      this.parentInstance = new Vue({
        el: '#issuable-time-tracker',
        data: {
          issuable: parsedIssuable,
        },
        methods: {
          fetchIssuable() {
            return gl.IssuableResource.get.call(gl.IssuableResource, {
              type: 'GET',
              url: gl.IssuableResource.endpoint,
            });
          },
          updateState(data) {
            this.issuable = data;
          },
          subscribeToUpdates() {
            gl.IssuableResource.subscribe(data => this.updateState(data));
          },
          listenForSlashCommands() {
            $(document).on('ajax:success', '.gfm-form', (e, data) => {
              const subscribedCommands = ['spend_time', 'time_estimate'];
              const changedCommands = data.commands_changes;

              if (changedCommands && _.intersection(subscribedCommands, changedCommands).length) {
                this.fetchIssuable();
              }
            });
          },
        },
        created() {
          this.fetchIssuable();
        },
        mounted() {
          this.subscribeToUpdates();
          this.listenForSlashCommands();
        },
      });
    }
  }

  gl.IssuableTimeTracking = IssuableTimeTracking;
})(window.gl || (window.gl = {}));