Show clicked issue data in the sidebar
This commit is contained in:
parent
7c59f45d10
commit
6cece3f49e
13 changed files with 147 additions and 44 deletions
|
@ -39,8 +39,7 @@
|
|||
Store.updateFiltersUrl();
|
||||
},
|
||||
showIssue () {
|
||||
Store.state.detailIssue = this.issue;
|
||||
console.log(Store.state.detailIssue);
|
||||
Store.detail.issue = this.issue;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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 = {};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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));
|
||||
});
|
||||
|
|
6
app/assets/javascripts/boards/models/milestone.js.es6
Normal file
6
app/assets/javascripts/boards/models/milestone.js.es6
Normal file
|
@ -0,0 +1,6 @@
|
|||
class ListMilestone {
|
||||
constructor (obj) {
|
||||
this.id = obj.id;
|
||||
this.title = obj.title;
|
||||
}
|
||||
}
|
|
@ -4,8 +4,9 @@
|
|||
|
||||
gl.issueBoards.BoardsStore = {
|
||||
disabled: false,
|
||||
state: {
|
||||
detailIssue: {}
|
||||
state: {},
|
||||
detail: {
|
||||
issue: {}
|
||||
},
|
||||
moving: {
|
||||
issue: {},
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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] }
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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 }}
|
|
@ -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
|
|
@ -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" }
|
|
@ -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 }})
|
|
@ -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.
|
Loading…
Reference in a new issue