Added markup for sidebar

app/assets/javascripts/boards/boards_bundle.js.es6

@@ -6,6 +6,7 @@
 //= require_tree ./services
 //= require_tree ./mixins
 //= require ./components/board
+//= require ./components/board_sidebar
 //= require ./components/new_list_dropdown
 //= require ./vue_resource_interceptor
@@ -22,7 +23,8 @@ $(() => {
   gl.IssueBoardsApp = new Vue({
     el: $boardApp,
     components: {
-      'board': gl.issueBoards.Board
+      'board': gl.issueBoards.Board,
+      'board-sidebar': gl.issueBoards.BoardSidebar
     },
     data: {
       state: Store.state,

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

@@ -37,6 +37,10 @@
         $('.labels-filter .dropdown-toggle-text').text(labelToggleText);
         Store.updateFiltersUrl();
+      },
+      showIssue () {
+        Store.state.detailIssue = this.issue;
+        console.log(Store.state.detailIssue);
       }
     }
   });

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

+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.BoardSidebar = Vue.extend({
+    data() {
+      return {
+        issue: Store.state.detailIssue
+      };
+    },
+    ready: function () {
+      console.log(this.issue);
+    },
+    watch: {
+      issue: {
+        handler () {
+          console.log('a');
+        },
+        deep: true
+      }
+    }
+  });
+})();

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

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

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

@@ -8,7 +8,8 @@
   ":disabled" => "disabled",
   "track-by" => "id" }
   %li.card{ ":class" => "{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id }",
-    ":index" => "index" }
+    ":index" => "index",
+    "@click" => "showIssue" }
     %h4.card-title
       = icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")
       %a{ ":href" => "issueLinkBase + '/' + issue.id",

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

+%board-sidebar{ "inline-template" => true }
+  %aside.right-sidebar.right-sidebar-expanded{ "v-if" => "showSidebar" }
+    .issuable-sidebar
+      .block.issuable-sidebar-header
+        %span.issuable-header-text.hide-collapsed.pull-left
+          %strong Test
+          %br/
+          %span #13
+        %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", 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

app/views/projects/boards/show.html.haml

@@ -10,10 +10,12 @@
 = render 'shared/issuable/filter', type: :boards
-.boards-list#board-app{ "v-cloak" => true,
+#board-app{ "v-cloak" => true,
   "data-endpoint" => "#{namespace_project_board_path(@project.namespace, @project)}",
   "data-disabled" => "#{!can?(current_user, :admin_list, @project)}",
   "data-issue-link-base" => "#{namespace_project_issues_path(@project.namespace, @project)}" }
-  .boards-app-loading.text-center{ "v-if" => "loading" }
-    = icon("spinner spin")
-  = render "projects/boards/components/board"
+  .boards-list
+    .boards-app-loading.text-center{ "v-if" => "loading" }
+      = icon("spinner spin")
+    = render "projects/boards/components/board"
+  = render "projects/boards/components/sidebar"