summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/boards/components/board_sidebar.js
blob: 9bcea302da2a6f7e442c348aba042d5c99b87d62 (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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/* eslint-disable comma-dangle, space-before-function-paren, no-new */
/* global IssuableContext */
/* global MilestoneSelect */
/* global LabelsSelect */
/* global Sidebar */
/* global Flash */

import Vue from 'vue';
import eventHub from '../../sidebar/event_hub';

import AssigneeTitle from '../../sidebar/components/assignees/assignee_title';
import Assignees from '../../sidebar/components/assignees/assignees';

require('./sidebar/remove_issue');

const Store = gl.issueBoards.BoardsStore;

window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};

gl.issueBoards.BoardSidebar = Vue.extend({
  props: {
    currentUser: Object
  },
  data() {
    return {
      detail: Store.detail,
      issue: {},
      list: {},
      loadingAssignees: false,
    };
  },
  computed: {
    showSidebar () {
      return Object.keys(this.issue).length;
    },
    assigneeId() {
      return this.issue.assignee ? this.issue.assignee.id : 0;
    },
    milestoneTitle() {
      return this.issue.milestone ? this.issue.milestone.title : 'No Milestone';
    }
  },
  watch: {
    detail: {
      handler () {
        if (this.issue.id !== this.detail.issue.id) {
          $('.js-issue-board-sidebar', this.$el).each((i, el) => {
            $(el).data('glDropdown').clearMenu();
          });
        }

        this.issue = this.detail.issue;
        this.list = this.detail.list;

        this.$nextTick(() => {
          this.endpoint = this.$refs.assigneeDropdown.dataset.issueUpdate;
        });
      },
      deep: true
    },
    issue () {
      if (this.showSidebar) {
        this.$nextTick(() => {
          $('.right-sidebar').getNiceScroll(0).doScrollTop(0, 0);
          $('.right-sidebar').getNiceScroll().resize();
        });
      }

      this.issue = this.detail.issue;
      this.list = this.detail.list;
    },
    deep: true
  },
  methods: {
    closeSidebar () {
      this.detail.issue = {};
    },
    assignSelf () {
      // Notify gl dropdown that we are now assigning to current user
      this.$refs.assigneeBlock.dispatchEvent(new Event('assignYourself'));

      this.addAssignee(this.currentUser);
      this.saveAssignees();
    },
    removeAssignee (a) {
      gl.issueBoards.BoardsStore.detail.issue.removeAssignee(a);
    },
    addAssignee (a) {
      gl.issueBoards.BoardsStore.detail.issue.addAssignee(a);
    },
    removeAllAssignees () {
      gl.issueBoards.BoardsStore.detail.issue.removeAllAssignees();
    },
    saveAssignees () {
      this.loadingAssignees = true;

      gl.issueBoards.BoardsStore.detail.issue.update(this.endpoint)
        .then(() => {
          this.loadingAssignees = false;
        })
        .catch(() => {
          this.loadingAssignees = false;
          return new Flash('An error occurred while saving assignees');
        });
    },
  },
  created () {
    // Get events from glDropdown
    eventHub.$on('sidebar.removeAssignee', this.removeAssignee);
    eventHub.$on('sidebar.addAssignee', this.addAssignee);
    eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees);
    eventHub.$on('sidebar.saveAssignees', this.saveAssignees);
  },
  beforeDestroy() {
    eventHub.$off('sidebar.removeAssignee', this.removeAssignee);
    eventHub.$off('sidebar.addAssignee', this.addAssignee);
    eventHub.$off('sidebar.removeAllAssignees', this.removeAllAssignees);
    eventHub.$off('sidebar.saveAssignees', this.saveAssignees);
  },
  mounted () {
    new IssuableContext(this.currentUser);
    new MilestoneSelect();
    new gl.DueDateSelectors();
    new LabelsSelect();
    new Sidebar();
    gl.Subscription.bindAll('.subscription');
  },
  components: {
    removeBtn: gl.issueBoards.RemoveIssueBtn,
    'assignee-title': AssigneeTitle,
    assignees: Assignees,
  },
});