Show clicked issue data in the sidebar

This commit is contained in:
Phil Hughes 2016-10-05 08:49:40 +01:00
parent 7c59f45d10
commit 6cece3f49e
13 changed files with 147 additions and 44 deletions

View file

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

View file

@ -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 = {};
}
}
});

View file

@ -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));
});

View file

@ -0,0 +1,6 @@
class ListMilestone {
constructor (obj) {
this.id = obj.id;
this.title = obj.title;
}
}

View file

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

View file

@ -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);

View file

@ -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] }

View file

@ -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"

View file

@ -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 }}

View file

@ -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

View file

@ -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" }

View file

@ -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 }})

View file

@ -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.