Show clicked issue data in the sidebar

app/assets/javascripts/boards/components/board_card.js.es6

@@ -39,8 +39,7 @@
         Store.updateFiltersUrl();
       },
       showIssue () {
-        Store.state.detailIssue = this.issue;
-        console.log(Store.state.detailIssue);
+        Store.detail.issue = this.issue;
       }
     }
   });

app/assets/javascripts/boards/components/board_sidebar.js.es6

@@ -7,18 +7,37 @@
   gl.issueBoards.BoardSidebar = Vue.extend({
     data() {
       return {
-        issue: Store.state.detailIssue
+        detail: Store.detail,
+        issue: {}
       };
     },
-    ready: function () {
-      console.log(this.issue);
+    computed: {
+      showSidebar () {
+        return Object.keys(this.issue).length;
+      }
     },
     watch: {
-      issue: {
+      detail: {
         handler () {
-          console.log('a');
+          this.issue = this.detail.issue;
         },
         deep: true
+      },
+      issue () {
+        if (this.showSidebar) {
+          this.$nextTick(() => {
+            new IssuableContext();
+            new MilestoneSelect();
+            new Sidebar();
+          });
+        } else {
+          $('.right-sidebar').getNiceScroll().remove();
+        }
+      }
+    },
+    methods: {
+      closeSidebar () {
+        this.detail.issue = {};
       }
     }
   });

app/assets/javascripts/boards/models/issue.js.es6

@@ -3,12 +3,17 @@ class ListIssue {
     this.id = obj.iid;
     this.title = obj.title;
     this.confidential = obj.confidential;
+    this.dueDate = obj.due_date;
     this.labels = [];
 
     if (obj.assignee) {
       this.assignee = new ListUser(obj.assignee);
     }
 
+    if (obj.milestone) {
+      this.milestone = new ListMilestone(obj.milestone);
+    }
+
     obj.labels.forEach((label) => {
       this.labels.push(new ListLabel(label));
     });

app/assets/javascripts/boards/models/milestone.js.es6

+class ListMilestone {
+  constructor (obj) {
+    this.id = obj.id;
+    this.title = obj.title;
+  }
+}

app/assets/javascripts/boards/stores/boards_store.js.es6

@@ -4,8 +4,9 @@
 
   gl.issueBoards.BoardsStore = {
     disabled: false,
-    state: {
-      detailIssue: {}
+    state: {},
+    detail: {
+      issue: {}
     },
     moving: {
       issue: {},

app/assets/javascripts/right_sidebar.js

@@ -5,15 +5,24 @@
     function Sidebar(currentUser) {
       this.toggleTodo = bind(this.toggleTodo, this);
       this.sidebar = $('aside');
+      this.removeListeners();
       this.addEventListeners();
     }
 
+    Sidebar.prototype.removeListeners = function () {
+      this.sidebar.off('click', '.sidebar-collapsed-icon');
+      $('.dropdown').off('hidden.gl.dropdown');
+      $('.dropdown').off('loading.gl.dropdown');
+      $('.dropdown').off('loaded.gl.dropdown');
+      $(document).off('click', '.js-sidebar-toggle');
+    }
+
     Sidebar.prototype.addEventListeners = function() {
       this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
       $('.dropdown').on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
       $('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
       $('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
-      $(document).off('click', '.js-sidebar-toggle').on('click', '.js-sidebar-toggle', function(e, triggered) {
+      $(document).on('click', '.js-sidebar-toggle', function(e, triggered) {
         var $allGutterToggleIcons, $this, $thisIcon;
         e.preventDefault();
         $this = $(this);

app/controllers/projects/boards/issues_controller.rb

@@ -73,7 +73,7 @@ module Projects
 
       def serialize_as_json(resource)
         resource.as_json(
-          only: [:iid, :title, :confidential],
+          only: [:iid, :title, :confidential, :due_date],
           include: {
             assignee: { only: [:id, :name, :username], methods: [:avatar_url] },
             labels:   { only: [:id, :title, :description, :color, :priority], methods: [:text_color] }

app/views/projects/boards/components/_sidebar.html.haml

@@ -3,38 +3,19 @@
     .issuable-sidebar
       .block.issuable-sidebar-header
         %span.issuable-header-text.hide-collapsed.pull-left
-          %strong Test
+          %strong
+            {{ issue.title }}
           %br/
-          %span #13
-        %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", aria: { label: "Toggle sidebar" } }
+          %span
+            = precede "#" do
+              {{ issue.id }}
+        %a.gutter-toggle.pull-right{ role: "button",
+          href: "#",
+          "@click" => "closeSidebar",
+          aria: { label: "Toggle sidebar" } }
           = icon("times")
-      .block.assignee
-        .title.hide-collapsed
-          Assignee
-          = icon("spinner spin", class: "block-loading")
-          = link_to "Edit", "#", class: "edit-link pull-right"
-        .value.hide-collapsed
-          %span.assign-yourself.no-value
-            No assignee
-            \-
-            %a.js-assign-yourself{ href: "#" }
-              assign yourself
-      .block.milestone
-        .title.hide-collapsed
-          Milestone
-          = icon("spinner spin", class: "block-loading")
-        .value.hide-collapsed
-          %span.no-value
-            None
-      .block.due_date
-        .title.hide-collapsed
-          Due date
-          = icon("spinner spin", class: "block-loading")
-        .value.hide-collapsed
-          %span.no-value No due date
-      .block.labels
-        .title.hide-collapsed
-          Labels
-          = icon("spinner spin", class: "block-loading")
-        .value.issuable-show-labels.hide-collapsed
-          %span.no-value None
+      = render "projects/boards/components/sidebar/assignee"
+      = render "projects/boards/components/sidebar/milestone"
+      = render "projects/boards/components/sidebar/due_date"
+      = render "projects/boards/components/sidebar/labels"
+      = render "projects/boards/components/sidebar/notifications"

app/views/projects/boards/components/sidebar/_assignee.html.haml

+.block.assignee
+  .title.hide-collapsed
+    Assignee
+    = icon("spinner spin", class: "block-loading")
+    - if can?(current_user, :admin_issue, @project)
+      = link_to "Edit", "#", class: "edit-link pull-right"
+  .value.hide-collapsed
+    %span.assign-yourself.no-value{ "v-if" => "!issue.assignee" }
+      No assignee
+      - if can?(current_user, :admin_issue, @project)
+        \-
+        %a.js-assign-yourself{ href: "#" }
+          assign yourself
+    %a.author_link.bold{ href: "",
+      "v-if" => "issue.assignee" }
+      %img.avatar.avatar-inline.s32{ ":src" => "issue.assignee.avatar",
+        width: "32" }
+      %span.author
+        {{ issue.assignee.name }}
+      %span.username
+        = precede "@" do
+          {{ issue.assignee.username }}

app/views/projects/boards/components/sidebar/_due_date.html.haml

+.block.due_date
+  .title.hide-collapsed
+    Due date
+    = icon("spinner spin", class: "block-loading")
+    - if can?(current_user, :admin_issue, @project)
+      = link_to "Edit", "#", class: "edit-link pull-right"
+  .value.hide-collapsed
+    .value-content
+      %span.no-value{ "v-if" => "!issue.dueDate" }
+        No due date
+      %span.bold{ "v-if" => "issue.dueDate" }
+        {{ issue.dueDate }}
+      %span.no-value.js-remove-due-date-holder{ "v-if" => "issue.dueDate" }
+        \-
+        %a.js-remove-due-date{ href: "#", role: "button" }
+          remove due date

app/views/projects/boards/components/sidebar/_labels.html.haml

+.block.labels
+  .title.hide-collapsed
+    Labels
+    = icon("spinner spin", class: "block-loading")
+    - if can?(current_user, :admin_issue, @project)
+      = link_to "Edit", "#", class: "edit-link pull-right"
+  .value.issuable-show-labels.hide-collapsed
+    %span.no-value{ "v-if" => "issue.labels.length === 0" }
+      None
+    %a{ href: "#",
+      "v-for" => "label in issue.labels" }
+      %span.label.color-label.has-tooltip{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
+        {{ label.title }}
+  .selectbox.hide-collapsed
+    %input{ type: "hidden",
+      name: "issue[label_names][]",
+      "v-for" => "label in issue.labels",
+      ":value" => "label.id" }

app/views/projects/boards/components/sidebar/_milestone.html.haml

+.block.milestone
+  .title.hide-collapsed
+    Milestone
+    = icon("spinner spin", class: "block-loading")
+    - if can?(current_user, :admin_issue, @project)
+      = link_to "Edit", "#", class: "edit-link pull-right"
+  .value
+    %span.no-value{ "v-if" => "!issue.milestone" }
+      None
+    %span.bold.has-tooltip{ "v-if" => "issue.milestone" }
+      {{ issue.milestone.title }}
+  .selectbox
+    .dropdown
+      %button.dropdown-menu-toggle
+        Milestone
+    -# = dropdown_tag('Milestone', options: { title: 'Assign milestone', toggle_class: 'js-milestone-select js-extra-options', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: 'Search milestones', data: { show_no: true, field_name: "issue[milestone_id]", project_id: @project.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), ability_name: "issue", use_id: true }})

app/views/projects/boards/components/sidebar/_notifications.html.haml

+- if current_user
+  .block.light.subscription{ data: { url: '' } }
+    .title.hide-collapsed
+      Notifications
+    %button.btn.btn-block.btn-default.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
+      Unsubscribe
+    .subscription-status.hide-collapsed{ data: { status: '' } }
+      .unsubscribed{class: ( 'hidden' if true )}
+        You're not receiving notifications from this thread.
+      .subscribed{class: ( 'hidden' unless true )}
+        You're receiving notifications because you're subscribed to this thread.