From 6cece3f49eb8777929b8a18a4fea1b8249bbb9df Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 5 Oct 2016 08:49:40 +0100 Subject: [PATCH] Show clicked issue data in the sidebar --- .../boards/components/board_card.js.es6 | 3 +- .../boards/components/board_sidebar.js.es6 | 29 ++++++++++-- .../javascripts/boards/models/issue.js.es6 | 5 ++ .../boards/models/milestone.js.es6 | 6 +++ .../boards/stores/boards_store.js.es6 | 5 +- app/assets/javascripts/right_sidebar.js | 11 ++++- .../projects/boards/issues_controller.rb | 2 +- .../boards/components/_sidebar.html.haml | 47 ++++++------------- .../components/sidebar/_assignee.html.haml | 22 +++++++++ .../components/sidebar/_due_date.html.haml | 16 +++++++ .../components/sidebar/_labels.html.haml | 18 +++++++ .../components/sidebar/_milestone.html.haml | 16 +++++++ .../sidebar/_notifications.html.haml | 11 +++++ 13 files changed, 147 insertions(+), 44 deletions(-) create mode 100644 app/assets/javascripts/boards/models/milestone.js.es6 create mode 100644 app/views/projects/boards/components/sidebar/_assignee.html.haml create mode 100644 app/views/projects/boards/components/sidebar/_due_date.html.haml create mode 100644 app/views/projects/boards/components/sidebar/_labels.html.haml create mode 100644 app/views/projects/boards/components/sidebar/_milestone.html.haml create mode 100644 app/views/projects/boards/components/sidebar/_notifications.html.haml diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6 index 1bd0b19b6da..e61943de5a9 100644 --- a/app/assets/javascripts/boards/components/board_card.js.es6 +++ b/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; } } }); diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6 index e26c8209b69..c267b4f0817 100644 --- a/app/assets/javascripts/boards/components/board_sidebar.js.es6 +++ b/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 = {}; } } }); diff --git a/app/assets/javascripts/boards/models/issue.js.es6 b/app/assets/javascripts/boards/models/issue.js.es6 index eb082103de9..a8c28e27f41 100644 --- a/app/assets/javascripts/boards/models/issue.js.es6 +++ b/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)); }); diff --git a/app/assets/javascripts/boards/models/milestone.js.es6 b/app/assets/javascripts/boards/models/milestone.js.es6 new file mode 100644 index 00000000000..577adf11265 --- /dev/null +++ b/app/assets/javascripts/boards/models/milestone.js.es6 @@ -0,0 +1,6 @@ +class ListMilestone { + constructor (obj) { + this.id = obj.id; + this.title = obj.title; + } +} diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6 index 126e3f49fc8..a6c5739ee41 100644 --- a/app/assets/javascripts/boards/stores/boards_store.js.es6 +++ b/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: {}, diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js index e3d5f413c77..221460f32e7 100644 --- a/app/assets/javascripts/right_sidebar.js +++ b/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); diff --git a/app/controllers/projects/boards/issues_controller.rb b/app/controllers/projects/boards/issues_controller.rb index 095af6c35eb..b5a56d11d32 100644 --- a/app/controllers/projects/boards/issues_controller.rb +++ b/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] } diff --git a/app/views/projects/boards/components/_sidebar.html.haml b/app/views/projects/boards/components/_sidebar.html.haml index 6cec833d6dc..b03b8384220 100644 --- a/app/views/projects/boards/components/_sidebar.html.haml +++ b/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" diff --git a/app/views/projects/boards/components/sidebar/_assignee.html.haml b/app/views/projects/boards/components/sidebar/_assignee.html.haml new file mode 100644 index 00000000000..93780fc929e --- /dev/null +++ b/app/views/projects/boards/components/sidebar/_assignee.html.haml @@ -0,0 +1,22 @@ +.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 }} diff --git a/app/views/projects/boards/components/sidebar/_due_date.html.haml b/app/views/projects/boards/components/sidebar/_due_date.html.haml new file mode 100644 index 00000000000..9861523824a --- /dev/null +++ b/app/views/projects/boards/components/sidebar/_due_date.html.haml @@ -0,0 +1,16 @@ +.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 diff --git a/app/views/projects/boards/components/sidebar/_labels.html.haml b/app/views/projects/boards/components/sidebar/_labels.html.haml new file mode 100644 index 00000000000..b135b134a96 --- /dev/null +++ b/app/views/projects/boards/components/sidebar/_labels.html.haml @@ -0,0 +1,18 @@ +.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" } diff --git a/app/views/projects/boards/components/sidebar/_milestone.html.haml b/app/views/projects/boards/components/sidebar/_milestone.html.haml new file mode 100644 index 00000000000..14f521f57a4 --- /dev/null +++ b/app/views/projects/boards/components/sidebar/_milestone.html.haml @@ -0,0 +1,16 @@ +.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 }}) diff --git a/app/views/projects/boards/components/sidebar/_notifications.html.haml b/app/views/projects/boards/components/sidebar/_notifications.html.haml new file mode 100644 index 00000000000..e28be47fd8e --- /dev/null +++ b/app/views/projects/boards/components/sidebar/_notifications.html.haml @@ -0,0 +1,11 @@ +- 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.