1 files changed, 49 insertions, 3 deletions
diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js
index ef4093b59e3..20d23162940 100644
--- a/app/assets/javascripts/boards/boards_bundle.js
+++ b/app/assets/javascripts/boards/boards_bundle.js
@@ -1,12 +1,13 @@
 /* eslint-disable one-var, quote-props, comma-dangle, space-before-function-paren */
-/* global BoardService */
 
 import _ from 'underscore';
 import Vue from 'vue';
 import VueResource from 'vue-resource';
 import Flash from '../flash';
+import { __ } from '../locale';
 import FilteredSearchBoards from './filtered_search_boards';
 import eventHub from './eventhub';
+import sidebarEventHub from '../sidebar/event_hub';
 import './models/issue';
 import './models/label';
 import './models/list';
@@ -14,7 +15,7 @@ import './models/milestone';
 import './models/assignee';
 import './stores/boards_store';
 import './stores/modal_store';
-import './services/board_service';
+import BoardService from './services/board_service';
 import './mixins/modal_mixins';
 import './mixins/sortable_default_options';
 import './filters/due_date_filters';
@@ -77,11 +78,16 @@ $(() => {
       });
       Store.rootPath = this.boardsEndpoint;
 
-      // Listen for updateTokens event
       eventHub.$on('updateTokens', this.updateTokens);
+      eventHub.$on('newDetailIssue', this.updateDetailIssue);
+      eventHub.$on('clearDetailIssue', this.clearDetailIssue);
+      sidebarEventHub.$on('toggleSubscription', this.toggleSubscription);
     },
     beforeDestroy() {
       eventHub.$off('updateTokens', this.updateTokens);
+      eventHub.$off('newDetailIssue', this.updateDetailIssue);
+      eventHub.$off('clearDetailIssue', this.clearDetailIssue);
+      sidebarEventHub.$off('toggleSubscription', this.toggleSubscription);
     },
     mounted () {
       this.filterManager = new FilteredSearchBoards(Store.filter, true);
@@ -112,6 +118,46 @@ $(() => {
     methods: {
       updateTokens() {
         this.filterManager.updateTokens();
+      },
+      updateDetailIssue(newIssue) {
+        const sidebarInfoEndpoint = newIssue.sidebarInfoEndpoint;
+        if (sidebarInfoEndpoint && newIssue.subscribed === undefined) {
+          newIssue.setFetchingState('subscriptions', true);
+          BoardService.getIssueInfo(sidebarInfoEndpoint)
+            .then(res => res.json())
+            .then((data) => {
+              newIssue.setFetchingState('subscriptions', false);
+              newIssue.updateData({
+                subscribed: data.subscribed,
+              });
+            })
+            .catch(() => {
+              newIssue.setFetchingState('subscriptions', false);
+              Flash(__('An error occurred while fetching sidebar data'));
+            });
+        }
+
+        Store.detail.issue = newIssue;
+      },
+      clearDetailIssue() {
+        Store.detail.issue = {};
+      },
+      toggleSubscription(id) {
+        const issue = Store.detail.issue;
+        if (issue.id === id && issue.toggleSubscriptionEndpoint) {
+          issue.setFetchingState('subscriptions', true);
+          BoardService.toggleIssueSubscription(issue.toggleSubscriptionEndpoint)
+            .then(() => {
+              issue.setFetchingState('subscriptions', false);
+              issue.updateData({
+                subscribed: !issue.subscribed,
+              });
+            })
+            .catch(() => {
+              issue.setFetchingState('subscriptions', false);
+              Flash(__('An error occurred when toggling the notification subscription'));
+            });
+        }
       }
     },
   });