Sidebar details update when changing

Need to get working the subscription
Styling updates

7 files changed, 89 insertions, 30 deletions

diff --git a/app/views/projects/boards/components/_sidebar.html.haml b/app/views/projects/boards/components/_sidebar.html.haml
index b03b8384220..b4a757a40a6 100644
--- a/app/views/projects/boards/components/_sidebar.html.haml
+++ b/app/views/projects/boards/components/_sidebar.html.haml
@@ -1,5 +1,6 @@
-%board-sidebar{ "inline-template" => true }
-  %aside.right-sidebar.right-sidebar-expanded{ "v-if" => "showSidebar" }
+%board-sidebar{ "inline-template" => true,
+  ":current-user" => "#{current_user.to_json(only: [:username, :id, :name], methods: [:avatar_url]) if current_user}" }
+  %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-if" => "showSidebar" }
     .issuable-sidebar
       .block.issuable-sidebar-header
         %span.issuable-header-text.hide-collapsed.pull-left
@@ -14,8 +15,9 @@
           "@click" => "closeSidebar",
           aria: { label: "Toggle sidebar" } }
           = icon("times")
-      = 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"
+      .js-issuable-update
+        = 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"
diff --git a/app/views/projects/boards/components/sidebar/_assignee.html.haml b/app/views/projects/boards/components/sidebar/_assignee.html.haml
index 93780fc929e..35343e65097 100644
--- a/app/views/projects/boards/components/sidebar/_assignee.html.haml
+++ b/app/views/projects/boards/components/sidebar/_assignee.html.haml
@@ -20,3 +20,21 @@
       %span.username
         = precede "@" do
           {{ issue.assignee.username }}
+  - if can?(current_user, :admin_issue, @project)
+    .selectbox.hide-collapsed
+      %input{ type: "hidden",
+        name: "issue[assignee_id]",
+        id: "issue_assignee_id",
+        ":value" => "issue.assignee.id",
+        "v-if" => "issue.assignee" }
+      .dropdown
+        %button.dropdown-menu-toggle.js-user-search.js-author-search.js-issue-board-assignee{ data: { toggle: "dropdown", field_name: "issue[assignee_id]", first_user: (current_user.username if current_user), current_user: "true", project_id: @project.id, field_name: "issue[assignee_id]", null_user: "true" },
+          ":data-issuable-id" => "issue.id",
+          ":data-issue-update" => "'/root/issue-boards/issues/' + issue.id + '.json'" }
+          Select assignee
+          = icon("chevron-down")
+        .dropdown-menu.dropdown-menu-user.dropdown-menu-selectable.dropdown-menu-author
+          = dropdown_title("Assign to")
+          = dropdown_filter("Search users")
+          = dropdown_content
+          = dropdown_loading
diff --git a/app/views/projects/boards/components/sidebar/_due_date.html.haml b/app/views/projects/boards/components/sidebar/_due_date.html.haml
index 9861523824a..c9fb1378274 100644
--- a/app/views/projects/boards/components/sidebar/_due_date.html.haml
+++ b/app/views/projects/boards/components/sidebar/_due_date.html.haml
@@ -1,16 +1,31 @@
 .block.due_date
-  .title.hide-collapsed
+  .title
     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
     .value-content
       %span.no-value{ "v-if" => "!issue.dueDate" }
         No due date
       %span.bold{ "v-if" => "issue.dueDate" }
-        {{ issue.dueDate }}
+        {{ issue.dueDate | due-date }}
       %span.no-value.js-remove-due-date-holder{ "v-if" => "issue.dueDate" }
         \-
         %a.js-remove-due-date{ href: "#", role: "button" }
           remove due date
+  - if can?(current_user, :admin_issue, @project)
+    .selectbox
+      %input{ type: "hidden",
+        name: "issue[due_date]",
+        ":value" => "issue.dueDate" }
+      .dropdown
+        %button.dropdown-menu-toggle.js-due-date-select.js-issue-boards-due-date{ type: 'button',
+          data: { toggle: 'dropdown', field_name: "issue[due_date]", ability_name: "issue" },
+          ":data-issue-update" => "'/root/issue-boards/issues/' + issue.id + '.json'" }
+          %span.dropdown-toggle-text Due date
+          = icon('chevron-down')
+        .dropdown-menu.dropdown-menu-due-date
+          = dropdown_title('Due date')
+          = dropdown_content do
+            .js-due-date-calendar
diff --git a/app/views/projects/boards/components/sidebar/_labels.html.haml b/app/views/projects/boards/components/sidebar/_labels.html.haml
index b135b134a96..71dd93db7d5 100644
--- a/app/views/projects/boards/components/sidebar/_labels.html.haml
+++ b/app/views/projects/boards/components/sidebar/_labels.html.haml
@@ -1,18 +1,30 @@
 .block.labels
-  .title.hide-collapsed
+  .title
     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
+  .value.issuable-show-labels
     %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" }
+  - if can?(current_user, :admin_issue, @project)
+    .selectbox
+      %input{ type: "hidden",
+        name: "issue[label_names][]",
+        "v-for" => "label in issue.labels",
+        ":value" => "label.id" }
+      .dropdown
+        %button.dropdown-menu-toggle.js-label-select.js-multiselect.js-issue-boards-label{ type: "button",
+          data: { toggle: "dropdown", field_name: "issue[label_names][]", show_no: "true", show_any: "true", project_id: @project.id, labels: namespace_project_labels_path(@project.namespace, @project, :json) },
+          ":data-issue-update" => "'/root/issue-boards/issues/' + issue.id + '.json'" }
+          %span.dropdown-toggle-text
+            Label
+          = icon('chevron-down')
+        .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
+          = render partial: "shared/issuable/label_page_default"
+          - if can? current_user, :admin_label, @project and @project
+            = render partial: "shared/issuable/label_page_create"
diff --git a/app/views/projects/boards/components/sidebar/_milestone.html.haml b/app/views/projects/boards/components/sidebar/_milestone.html.haml
index 14f521f57a4..fb88700cb3a 100644
--- a/app/views/projects/boards/components/sidebar/_milestone.html.haml
+++ b/app/views/projects/boards/components/sidebar/_milestone.html.haml
@@ -1,5 +1,5 @@
 .block.milestone
-  .title.hide-collapsed
+  .title
     Milestone
     = icon("spinner spin", class: "block-loading")
     - if can?(current_user, :admin_issue, @project)
@@ -9,8 +9,20 @@
       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 }})
+  - if can?(current_user, :admin_issue, @project)
+    .selectbox
+      %input{ type: "hidden",
+        ":value" => "issue.milestone.id",
+        name: "issue[milestone_id]",
+        "v-if" => "issue.milestone" }
+      .dropdown
+        %button.dropdown-menu-toggle.js-milestone-select.js-issue-board-sidebar{ data: { toggle: "dropdown", 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" },
+          ":data-issuable-id" => "issue.id",
+          ":data-issue-update" => "'/root/issue-boards/issues/' + issue.id + '.json'" }
+          Milestone
+          = icon("chevron-down")
+        .dropdown-menu.dropdown-select.dropdown-menu-selectable
+          = dropdown_title("Assignee milestone")
+          = dropdown_filter("Search milestones")
+          = dropdown_content
+          = dropdown_loading
diff --git a/app/views/projects/boards/components/sidebar/_notifications.html.haml b/app/views/projects/boards/components/sidebar/_notifications.html.haml
index e28be47fd8e..21c9563e9db 100644
--- a/app/views/projects/boards/components/sidebar/_notifications.html.haml
+++ b/app/views/projects/boards/components/sidebar/_notifications.html.haml
@@ -1,11 +1,11 @@
 - if current_user
-  .block.light.subscription{ data: { url: '' } }
-    .title.hide-collapsed
+  .block.light.subscription{ ":data-url" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '/toggle_subscription'" }
+    .title
       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 )}
+      {{ issue.subscribed ? 'Unsubscribe' : 'Subscribe' }}
+    .subscription-status{ ":data-status" => "issue.subscribed ? 'subscribed' : 'unsubscribed'" }
+      .unsubscribed{ "v-show" => "!issue.subscribed" }
         You're not receiving notifications from this thread.
-      .subscribed{class: ( 'hidden' unless true )}
+      .subscribed{ "v-show" => "issue.subscribed" }
         You're receiving notifications because you're subscribed to this thread.
diff --git a/app/views/projects/boards/show.html.haml b/app/views/projects/boards/show.html.haml
index 10b495363a6..432390eb03f 100644
--- a/app/views/projects/boards/show.html.haml
+++ b/app/views/projects/boards/show.html.haml
@@ -10,7 +10,7 @@
 
 = render 'shared/issuable/filter', type: :boards
 
-#board-app{ "v-cloak" => true,
+#board-app.boards-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)}" }