Resolve all comments button
Store that manages the state of each button
This commit is contained in:
parent
af5fc6e24c
commit
70b46b280c
|
@ -1,6 +1,10 @@
|
|||
#= require vue
|
||||
#= require_directory ./stores
|
||||
#= require_directory ./components
|
||||
|
||||
$ ->
|
||||
new Vue
|
||||
el: '#notes'
|
||||
|
||||
new Vue
|
||||
el: '#resolve-all-app'
|
||||
|
|
|
@ -1,19 +0,0 @@
|
|||
LineBtn = Vue.extend
|
||||
props:
|
||||
noteId: Number
|
||||
resolved: Boolean
|
||||
computed:
|
||||
buttonText: ->
|
||||
if this.resolved then "Mark as un-resolved" else "Mark as resolved"
|
||||
methods:
|
||||
updateTooltip: ->
|
||||
$(this.$el)
|
||||
.tooltip('hide')
|
||||
.tooltip('fixTitle')
|
||||
resolve: ->
|
||||
this.$set('resolved', !this.resolved)
|
||||
this.$nextTick this.updateTooltip
|
||||
compiled: ->
|
||||
$(this.$el).tooltip()
|
||||
|
||||
Vue.component 'line-btn', LineBtn
|
|
@ -0,0 +1,19 @@
|
|||
ResolveAll = Vue.extend
|
||||
data: ->
|
||||
{ comments: CommentsStore.state }
|
||||
computed:
|
||||
resolved: ->
|
||||
resolvedCount = 0
|
||||
for noteId, resolved of this.comments
|
||||
resolvedCount++ if resolved
|
||||
resolvedCount
|
||||
commentsCount: ->
|
||||
Object.keys(this.comments).length
|
||||
buttonText: ->
|
||||
if this.resolved is this.commentsCount then 'Un-resolve all' else 'Resolve all'
|
||||
methods:
|
||||
updateAll: ->
|
||||
resolveAll = !(this.resolved is this.commentsCount)
|
||||
CommentsStore.updateAll(resolveAll)
|
||||
|
||||
Vue.component 'resolve-all', ResolveAll
|
|
@ -0,0 +1,24 @@
|
|||
ResolveBtn = Vue.extend
|
||||
props:
|
||||
noteId: Number
|
||||
resolved: Boolean
|
||||
data: -> comments: CommentsStore.state
|
||||
computed:
|
||||
buttonText: ->
|
||||
if this.comments[this.noteId] then "Mark as un-resolved" else "Mark as resolved"
|
||||
isResolved: -> this.comments[this.noteId]
|
||||
methods:
|
||||
updateTooltip: ->
|
||||
$(this.$el)
|
||||
.tooltip('hide')
|
||||
.tooltip('fixTitle')
|
||||
resolve: ->
|
||||
CommentsStore.update(this.noteId, !this.comments[this.noteId])
|
||||
|
||||
this.$nextTick this.updateTooltip
|
||||
compiled: ->
|
||||
$(this.$el).tooltip()
|
||||
created: ->
|
||||
CommentsStore.create(this.noteId, this.resolved)
|
||||
|
||||
Vue.component 'resolve-btn', ResolveBtn
|
|
@ -0,0 +1,9 @@
|
|||
@CommentsStore =
|
||||
state: {}
|
||||
create: (id, resolved) ->
|
||||
Vue.set(this.state, id, resolved)
|
||||
update: (id, resolved) ->
|
||||
this.state[id] = resolved
|
||||
updateAll: (state) ->
|
||||
for id,resolved of this.state
|
||||
this.update(id, state) if resolved isnt state
|
|
@ -20,3 +20,7 @@
|
|||
.turn-off { display: block; }
|
||||
}
|
||||
}
|
||||
|
||||
[v-cloak="true"] {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
@ -44,7 +44,15 @@
|
|||
= succeed '.' do
|
||||
= link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
|
||||
|
||||
- if @commits_count.nonzero?
|
||||
#resolve-all-app{ "v-cloak" => true }
|
||||
%resolve-all{ "inline-template" => true }
|
||||
.line-resolve-all{ "v-show" => "commentsCount > 0" }
|
||||
%button.btn.btn-gray{ type: "button", "aria-label" => "Resolve all", "v-on:click" => "updateAll" }
|
||||
{{ buttonText }}
|
||||
%span.line-resolve-text
|
||||
{{ resolved }}/{{ commentsCount }} comments resolved
|
||||
|
||||
- if @commits.nonzero?
|
||||
%ul.merge-request-tabs.nav-links.no-top.no-bottom
|
||||
%li.notes-tab
|
||||
= link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: {target: 'div#notes', action: 'notes', toggle: 'tab'} do
|
||||
|
|
|
@ -21,8 +21,8 @@
|
|||
- if access and not note.system
|
||||
%span.note-role.hidden-xs= access
|
||||
- unless note.system
|
||||
%line-btn{ ":note-id" => note.id, ":resolved" => "false", "inline-template" => true }
|
||||
%button.note-action-button.line-resolve-btn{ type: "button", "v-bind:class" => "{ 'is-active': resolved }", "v-bind:aria-label" => "buttonText", "v-on:click" => "resolve", "v-bind:title" => "buttonText" }
|
||||
%resolve-btn{ ":note-id" => note.id, ":resolved" => "false", "inline-template" => true }
|
||||
%button.note-action-button.line-resolve-btn{ type: "button", "v-bind:class" => "{ 'is-active': isResolved }", "v-bind:aria-label" => "buttonText", "v-on:click" => "resolve", "v-bind:title" => "buttonText" }
|
||||
= icon("check")
|
||||
- if current_user and not note.system
|
||||
= link_to '#', title: 'Award Emoji', class: 'note-action-button note-emoji-button js-add-award js-note-emoji', data: { position: 'right' } do
|
||||
|
|
Loading…
Reference in New Issue