Sidebar details update when changing

Need to get working the subscription
Styling updates

10 files changed, 150 insertions, 19 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index b3a2386bbf3..c5dd51c39d7 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -5,6 +5,7 @@
 //= require_tree ./stores
 //= require_tree ./services
 //= require_tree ./mixins
+//= require_tree ./filters
 //= require ./components/board
 //= require ./components/board_sidebar
 //= require ./components/new_list_dropdown
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6
index c267b4f0817..12f69f93279 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js.es6
+++ b/app/assets/javascripts/boards/components/board_sidebar.js.es6
@@ -5,6 +5,9 @@
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.BoardSidebar = Vue.extend({
+    props: {
+      currentUser: Object
+    },
     data() {
       return {
         detail: Store.detail,
@@ -26,9 +29,12 @@
       issue () {
         if (this.showSidebar) {
           this.$nextTick(() => {
-            new IssuableContext();
+            new IssuableContext(this.currentUser);
             new MilestoneSelect();
+            new DueDateSelect();
+            new LabelsSelect();
             new Sidebar();
+            new Subscription('.subscription')
           });
         } else {
           $('.right-sidebar').getNiceScroll().remove();
diff --git a/app/assets/javascripts/boards/filters/due_date_filters.js.es6 b/app/assets/javascripts/boards/filters/due_date_filters.js.es6
new file mode 100644
index 00000000000..5c1519986c1
--- /dev/null
+++ b/app/assets/javascripts/boards/filters/due_date_filters.js.es6
@@ -0,0 +1,4 @@
+Vue.filter('due-date', (value) => {
+  const date = new Date(value.replace(new RegExp('-', 'g'), ','));
+  return $.datepicker.formatDate('M d, yy', date);
+});
diff --git a/app/assets/javascripts/boards/models/issue.js.es6 b/app/assets/javascripts/boards/models/issue.js.es6
index a8c28e27f41..fac753dadb5 100644
--- a/app/assets/javascripts/boards/models/issue.js.es6
+++ b/app/assets/javascripts/boards/models/issue.js.es6
@@ -4,6 +4,7 @@ class ListIssue {
     this.title = obj.title;
     this.confidential = obj.confidential;
     this.dueDate = obj.due_date;
+    this.subscribed = true;
     this.labels = [];
 
     if (obj.assignee) {
@@ -46,4 +47,17 @@ class ListIssue {
   getLists () {
     return gl.issueBoards.BoardsStore.state.lists.filter( list => list.findIssue(this.id) );
   }
+
+  update (url) {
+    const data = {
+      issue: {
+        milestone_id: this.milestone ? this.milestone.id : null,
+        due_date: this.dueDate,
+        assignee_id: this.assignee ? this.assignee.id : null,
+        label_ids: this.labels.map((label) => label.id )
+      }
+    };
+
+    return Vue.http.patch(url, data);
+  }
 }
diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6
index 2b825c3949f..b7a9ea16204 100644
--- a/app/assets/javascripts/boards/services/board_service.js.es6
+++ b/app/assets/javascripts/boards/services/board_service.js.es6
@@ -1,7 +1,5 @@
 class BoardService {
   constructor (root) {
-    Vue.http.options.root = root;
-
     this.lists = Vue.resource(`${root}/lists{/id}`, {}, {
       generate: {
         method: 'POST',
diff --git a/app/assets/javascripts/due_date_select.js b/app/assets/javascripts/due_date_select.js
index bf68b7e3a9b..aad81892311 100644
--- a/app/assets/javascripts/due_date_select.js
+++ b/app/assets/javascripts/due_date_select.js
@@ -38,6 +38,19 @@
             return $value.css('display', '');
           }
         });
+
+        var updateIssueBoardIssue = function () {
+          $dropdown.trigger('loading.gl.dropdown');
+          $selectbox.hide();
+          $value.css('display', '');
+          $loading.fadeIn();
+
+          gl.issueBoards.BoardsStore.detail.issue.update(issueUpdateURL)
+            .then(function () {
+              $loading.fadeOut();
+            });
+        }
+
         addDueDate = function(isDropdown) {
           var data, date, mediumDate, value;
           // Create the post date
@@ -83,15 +96,25 @@
         };
         $block.on('click', '.js-remove-due-date', function(e) {
           e.preventDefault();
-          $("input[name='" + fieldName + "']").val('');
-          return addDueDate(false);
+          if ($dropdown.hasClass('js-issue-boards-due-date')) {
+            gl.issueBoards.BoardsStore.detail.issue.dueDate = '';
+            updateIssueBoardIssue();
+          } else {
+            $("input[name='" + fieldName + "']").val('');
+            return addDueDate(false);
+          }
         });
         return $datePicker.datepicker({
           dateFormat: 'yy-mm-dd',
           defaultDate: $("input[name='" + fieldName + "']").val(),
           altField: "input[name='" + fieldName + "']",
           onSelect: function() {
-            return addDueDate(true);
+            if ($dropdown.hasClass('js-issue-boards-due-date')) {
+              gl.issueBoards.BoardsStore.detail.issue.dueDate = $("input[name='" + fieldName + "']").val();
+              updateIssueBoardIssue();
+            } else {
+              return addDueDate(true);
+            }
           }
         });
       });
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index e356872624a..6e5d3dff9eb 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -22,7 +22,7 @@
         abilityName = $dropdown.data('ability-name');
         $selectbox = $dropdown.closest('.selectbox');
         $block = $selectbox.closest('.block');
-        $form = $dropdown.closest('form');
+        $form = $dropdown.closest('.js-issuable-update');
         $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span');
         $sidebarLabelTooltip = $block.find('.js-sidebar-labels-tooltip');
         $value = $block.find('.value');
@@ -334,7 +334,7 @@
             page = $('body').data('page');
             isIssueIndex = page === 'projects:issues:index';
             isMRIndex = page === 'projects:merge_requests:index';
-            if (page === 'projects:boards:show') {
+            if (page === 'projects:boards:show' && !$dropdown.hasClass('js-issue-boards-label')) {
               if (label.isAny) {
                 gl.issueBoards.BoardsStore.state.filters['label_name'] = [];
               }
@@ -362,6 +362,30 @@
             else if ($dropdown.hasClass('js-filter-submit')) {
               return $dropdown.closest('form').submit();
             }
+            else if ($dropdown.hasClass('js-issue-boards-label')) {
+              if ($el.hasClass('is-active')) {
+                gl.issueBoards.BoardsStore.detail.issue.labels.push(new ListLabel({
+                  id: label.id,
+                  title: label.title,
+                  color: label.color[0],
+                  textColor: '#fff'
+                }));
+              }
+              else {
+                var labels = gl.issueBoards.BoardsStore.detail.issue.labels;
+                labels = labels.filter(function (selectedLabel) {
+                  return selectedLabel.id !== label.id;
+                });
+                gl.issueBoards.BoardsStore.detail.issue.labels = labels;
+              }
+
+              $loading.fadeIn();
+
+              gl.issueBoards.BoardsStore.detail.issue.update(issueUpdateURL)
+                .then(function () {
+                  $loading.fadeOut();
+                });
+            }
             else {
               if ($dropdown.hasClass('js-multiselect')) {
 
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index 26cc6eb0e96..3004cfee40c 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -110,7 +110,7 @@
               e.preventDefault();
               return;
             }
-            if (page === 'projects:boards:show') {
+            if (page === 'projects:boards:show' && !$dropdown.hasClass('js-issue-board-sidebar')) {
               gl.issueBoards.BoardsStore.state.filters[$dropdown.data('field-name')] = selected.name;
               gl.issueBoards.BoardsStore.updateFiltersUrl();
               e.preventDefault();
@@ -123,6 +123,24 @@
               return Issuable.filterResults($dropdown.closest('form'));
             } else if ($dropdown.hasClass('js-filter-submit')) {
               return $dropdown.closest('form').submit();
+            } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
+              if (selected.id !== -1) {
+                Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'milestone', new ListMilestone({
+                  id: selected.id,
+                  title: selected.name
+                }));
+              } else {
+                Vue.delete(gl.issueBoards.BoardsStore.detail.issue, 'milestone');
+              }
+
+              $dropdown.trigger('loading.gl.dropdown');
+              $loading.fadeIn();
+
+              gl.issueBoards.BoardsStore.detail.issue.update(issueUpdateURL)
+                .then(function () {
+                  $dropdown.trigger('loaded.gl.dropdown');
+                  $loading.fadeOut();
+                });
             } else {
               selected = $selectbox.find('input[type="hidden"]').val();
               data = {};
diff --git a/app/assets/javascripts/subscription.js b/app/assets/javascripts/subscription.js
index 5e3c5983d75..bfef9532d2b 100644
--- a/app/assets/javascripts/subscription.js
+++ b/app/assets/javascripts/subscription.js
@@ -22,13 +22,18 @@
         return function() {
           var status;
           btn.removeClass('disabled');
-          status = current_status === 'subscribed' ? 'unsubscribed' : 'subscribed';
-          _this.subscription_status.attr('data-status', status);
-          action = status === 'subscribed' ? 'Unsubscribe' : 'Subscribe';
-          btn.find('span').text(action);
-          _this.subscription_status.find('>div').toggleClass('hidden');
-          if (btn.attr('data-original-title')) {
-            return btn.tooltip('hide').attr('data-original-title', action).tooltip('fixTitle');
+
+          if ($('body').data('page') === 'projects:boards:show') {
+            Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'subscribed', !gl.issueBoards.BoardsStore.detail.issue.subscribed);
+          } else {
+            status = current_status === 'subscribed' ? 'unsubscribed' : 'subscribed';
+            _this.subscription_status.attr('data-status', status);
+            action = status === 'subscribed' ? 'Unsubscribe' : 'Subscribe';
+            btn.find('span').text(action);
+            _this.subscription_status.find('>div').toggleClass('hidden');
+            if (btn.attr('data-original-title')) {
+              return btn.tooltip('hide').attr('data-original-title', action).tooltip('fixTitle');
+            }
           }
         };
       })(this));
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index bcabda3ceb2..d3868f392ea 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -9,7 +9,11 @@
       this.usersPath = "/autocomplete/users.json";
       this.userPath = "/autocomplete/users/:id.json";
       if (currentUser != null) {
-        this.currentUser = JSON.parse(currentUser);
+        if (typeof currentUser === 'object') {
+          this.currentUser = currentUser;
+        } else {
+          this.currentUser = JSON.parse(currentUser);
+        }
       }
       $('.js-user-search').each((function(_this) {
         return function(i, dropdown) {
@@ -32,9 +36,30 @@
           $value = $block.find('.value');
           $collapsedSidebar = $block.find('.sidebar-collapsed-user');
           $loading = $block.find('.block-loading').fadeOut();
+
+          var updateIssueBoardsIssue = function () {
+            $loading.fadeIn();
+            gl.issueBoards.BoardsStore.detail.issue.update(issueURL)
+              .then(function () {
+                $loading.fadeOut();
+              });
+          };
+
           $block.on('click', '.js-assign-yourself', function(e) {
             e.preventDefault();
-            return assignTo(_this.currentUser.id);
+
+            if ($dropdown.hasClass('js-issue-board-assignee')) {
+              Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'assignee', new ListUser({
+                id: _this.currentUser.id,
+                username: _this.currentUser.username,
+                name: _this.currentUser.name,
+                avatar_url: _this.currentUser.avatar_url
+              }));
+
+              updateIssueBoardsIssue();
+            } else {
+              return assignTo(_this.currentUser.id);
+            }
           });
           assignTo = function(selected) {
             var data;
@@ -160,7 +185,7 @@
                 selectedId = user.id;
                 return;
               }
-              if (page === 'projects:boards:show') {
+              if (page === 'projects:boards:show' && !$dropdown.hasClass('js-issue-board-assignee')) {
                 selectedId = user.id;
                 gl.issueBoards.BoardsStore.state.filters[$dropdown.data('field-name')] = user.id;
                 gl.issueBoards.BoardsStore.updateFiltersUrl();
@@ -170,6 +195,19 @@
                 return Issuable.filterResults($dropdown.closest('form'));
               } else if ($dropdown.hasClass('js-filter-submit')) {
                 return $dropdown.closest('form').submit();
+              } else if ($dropdown.hasClass('js-issue-board-assignee')) {
+                if (user.id) {
+                  Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'assignee', new ListUser({
+                    id: user.id,
+                    username: user.username,
+                    name: user.name,
+                    avatar_url: user.avatar_url
+                  }));
+                } else {
+                  Vue.delete(gl.issueBoards.BoardsStore.detail.issue, 'assignee');
+                }
+
+                updateIssueBoardsIssue();
               } else {
                 selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").val();
                 return assignTo(selected);