From 4fba69dc90d9c423f491f58b62a9d814d07d7ef2 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Mon, 7 Nov 2016 10:05:58 +0000 Subject: Fixed up resolve discussions --- .../diff_notes/components/comment_resolve_btn.js.es6 | 12 +++++++++--- .../diff_notes/components/resolve_btn.js.es6 | 8 +++++--- .../diff_notes/components/resolve_count.js.es6 | 3 +++ .../diff_notes/components/resolve_discussion_btn.js.es6 | 8 +++++--- .../javascripts/diff_notes/diff_notes_bundle.js.es6 | 15 ++++++++------- app/assets/javascripts/notes.js | 3 ++- app/views/projects/merge_requests/_show.html.haml | 17 +++++++++-------- app/views/projects/notes/_note.html.haml | 4 ++-- 8 files changed, 43 insertions(+), 27 deletions(-) diff --git a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6 b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6 index bd5d8f24593..52e2846d279 100644 --- a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6 +++ b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6 @@ -1,9 +1,13 @@ /* eslint-disable */ -((w) => { - w.CommentAndResolveBtn = Vue.extend({ +(() => { + const CommentAndResolveBtn = Vue.extend({ props: { discussionId: String, - textareaIsEmpty: Boolean + }, + data() { + return { + textareaIsEmpty: true + } }, computed: { discussion: function () { @@ -47,4 +51,6 @@ $(`#new-discussion-note-form-${this.discussionId} .note-textarea`).off('input.comment-and-resolve-btn'); } }); + + Vue.component('comment-and-resolve-btn', CommentAndResolveBtn); })(window); diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6 index 3db0b4319b1..27af9fc96ad 100644 --- a/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6 +++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6 @@ -1,6 +1,6 @@ /* eslint-disable */ -((w) => { - w.ResolveBtn = Vue.extend({ +(() => { + const ResolveBtn = Vue.extend({ props: { noteId: Number, discussionId: String, @@ -101,4 +101,6 @@ CommentsStore.create(this.discussionId, this.noteId, this.canResolve, this.resolved, this.resolvedBy); } }); -})(window); + + Vue.component('resolve-btn', ResolveBtn); +})(); diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_count.js.es6 index 24a99e23132..b78d63314da 100644 --- a/app/assets/javascripts/diff_notes/components/resolve_count.js.es6 +++ b/app/assets/javascripts/diff_notes/components/resolve_count.js.es6 @@ -13,6 +13,9 @@ computed: { allResolved: function () { return this.resolvedDiscussionCount === this.discussionCount; + }, + resolvedCountText() { + return this.discussionCount === 0 ? 'discussion' : 'discussions'; } } }); diff --git a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6 index 060034f049b..b945a09fcbe 100644 --- a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6 +++ b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6 @@ -1,6 +1,6 @@ /* eslint-disable */ -((w) => { - w.ResolveDiscussionBtn = Vue.extend({ +(() => { + const ResolveDiscussionBtn = Vue.extend({ props: { discussionId: String, mergeRequestId: Number, @@ -54,4 +54,6 @@ CommentsStore.createDiscussion(this.discussionId, this.canResolve); } }); -})(window); + + Vue.component('resolve-discussion-btn', ResolveDiscussionBtn); +})(); diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6 b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6 index 6149bfd052a..cc2d8744fd7 100644 --- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6 +++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6 @@ -10,17 +10,18 @@ $(() => { window.DiffNotesApp = new Vue({ el: '#diff-notes-app', - components: { - 'resolve-btn': ResolveBtn, - 'resolve-discussion-btn': ResolveDiscussionBtn, - 'comment-and-resolve-btn': CommentAndResolveBtn - }, methods: { compileComponents: function () { - const $components = $('resolve-btn, resolve-discussion-btn, jump-to-discussion'); + const $components = $('resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn'); + if ($components.length) { $components.each(function () { - DiffNotesApp.$compile($(this).get(0)); + const $this = $(this); + const tmp = Vue.extend({ + template: $this.get(0).outerHTML, + parent: DiffNotesApp, + }); + $this.replaceWith(new tmp().$mount().$el); }); } } diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 4976eef2896..aeaf90abb77 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -647,7 +647,8 @@ var $commentBtn = form.find('comment-and-resolve-btn'); $commentBtn .attr(':discussion-id', "'" + dataHolder.data('discussionId') + "'"); - DiffNotesApp.$compile($commentBtn.get(0)); + + DiffNotesApp.compileComponents(); } form.find(".js-note-text").focus(); diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml index f57abe73977..a497f418c7c 100644 --- a/app/views/projects/merge_requests/_show.html.haml +++ b/app/views/projects/merge_requests/_show.html.haml @@ -74,14 +74,15 @@ %span.badge= @merge_request.diff_size %li#resolve-count-app.line-resolve-all-container.pull-right.prepend-top-10.hidden-xs{ "v-cloak" => true } %resolve-count{ "inline-template" => true, ":logged-out" => "#{current_user.nil?}" } - .line-resolve-all{ "v-show" => "discussionCount > 0", - ":class" => "{ 'has-next-btn': !loggedOut && resolvedDiscussionCount !== discussionCount }" } - %span.line-resolve-btn.is-disabled{ type: "button", - ":class" => "{ 'is-active': resolvedDiscussionCount === discussionCount }" } - = render "shared/icons/icon_status_success.svg" - %span.line-resolve-text - {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ discussionCount | pluralize 'discussion' }} resolved - = render "discussions/jump_to_next" + %div + .line-resolve-all{ "v-show" => "discussionCount > 0", + ":class" => "{ 'has-next-btn': !loggedOut && resolvedDiscussionCount !== discussionCount }" } + %span.line-resolve-btn.is-disabled{ type: "button", + ":class" => "{ 'is-active': resolvedDiscussionCount === discussionCount }" } + = render "shared/icons/icon_status_success.svg" + %span.line-resolve-text + {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ resolvedCountText }} resolved + = render "discussions/jump_to_next" .tab-content#diff-notes-app #notes.notes.tab-pane.voting_notes diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml index ab719e38904..afff15228c1 100644 --- a/app/views/projects/notes/_note.html.haml +++ b/app/views/projects/notes/_note.html.haml @@ -32,7 +32,7 @@ "resolved-by" => "#{note.resolved_by.try(:name)}", "v-show" => "#{can_resolve || note.resolved?}", "inline-template" => true, - "v-ref:note_#{note.id}" => true } + "ref" => "note_#{note.id}" } .note-action-button = icon("spin spinner", "v-show" => "loading") @@ -43,7 +43,7 @@ "@click" => "resolve", ":title" => "buttonText", "v-show" => "!loading", - "v-el:button" => true } + ":ref" => "'button'" } = render "shared/icons/icon_status_success.svg" -- cgit v1.2.1