debian-mirror-gitlab/app/assets/javascripts/diffs/components/diff_discussions.vue

97 lines
2.5 KiB
Vue
Raw Normal View History

2018-11-08 19:23:39 +05:30
<script>
2018-11-20 20:47:30 +05:30
import { mapActions } from 'vuex';
2018-12-13 13:39:08 +05:30
import Icon from '~/vue_shared/components/icon.vue';
2018-11-08 19:23:39 +05:30
import noteableDiscussion from '../../notes/components/noteable_discussion.vue';
export default {
components: {
noteableDiscussion,
2018-12-13 13:39:08 +05:30
Icon,
2018-11-08 19:23:39 +05:30
},
props: {
discussions: {
type: Array,
required: true,
},
2019-02-15 15:39:39 +05:30
line: {
type: Object,
required: false,
default: null,
},
2018-12-13 13:39:08 +05:30
shouldCollapseDiscussions: {
type: Boolean,
required: false,
default: false,
},
renderAvatarBadge: {
type: Boolean,
required: false,
default: false,
},
2019-02-15 15:39:39 +05:30
helpPagePath: {
type: String,
required: false,
default: '',
},
2018-11-08 19:23:39 +05:30
},
2018-11-20 20:47:30 +05:30
methods: {
2018-12-13 13:39:08 +05:30
...mapActions(['toggleDiscussion']),
2018-11-20 20:47:30 +05:30
...mapActions('diffs', ['removeDiscussionsFromDiff']),
deleteNoteHandler(discussion) {
if (discussion.notes.length <= 1) {
this.removeDiscussionsFromDiff(discussion);
}
},
2018-12-13 13:39:08 +05:30
isExpanded(discussion) {
return this.shouldCollapseDiscussions ? discussion.expanded : true;
},
2018-11-20 20:47:30 +05:30
},
2018-11-08 19:23:39 +05:30
};
</script>
<template>
<div>
<div
2018-12-13 13:39:08 +05:30
v-for="(discussion, index) in discussions"
2018-11-08 19:23:39 +05:30
:key="discussion.id"
2018-12-13 13:39:08 +05:30
:class="{
2019-02-15 15:39:39 +05:30
collapsed: !isExpanded(discussion),
2018-12-13 13:39:08 +05:30
}"
class="discussion-notes diff-discussions position-relative"
2018-11-08 19:23:39 +05:30
>
2019-02-15 15:39:39 +05:30
<ul :data-discussion-id="discussion.id" class="notes">
2018-12-13 13:39:08 +05:30
<template v-if="shouldCollapseDiscussions">
<button
:class="{
'diff-notes-collapse': discussion.expanded,
2019-02-15 15:39:39 +05:30
'btn-transparent badge badge-pill': !discussion.expanded,
2018-12-13 13:39:08 +05:30
}"
type="button"
class="js-diff-notes-toggle"
2019-03-02 22:35:43 +05:30
@click="toggleDiscussion({ discussionId: discussion.id })"
2018-12-13 13:39:08 +05:30
>
2019-02-15 15:39:39 +05:30
<icon v-if="discussion.expanded" name="collapse" class="collapse-icon" />
2018-12-13 13:39:08 +05:30
<template v-else>
{{ index + 1 }}
</template>
</button>
</template>
2018-11-08 19:23:39 +05:30
<noteable-discussion
2018-12-13 13:39:08 +05:30
v-show="isExpanded(discussion)"
2018-11-08 19:23:39 +05:30
:discussion="discussion"
:render-diff-file="false"
:always-expanded="true"
2018-11-18 11:00:15 +05:30
:discussions-by-diff-order="true"
2019-02-15 15:39:39 +05:30
:line="line"
:help-page-path="helpPagePath"
2018-11-20 20:47:30 +05:30
@noteDeleted="deleteNoteHandler"
2018-12-13 13:39:08 +05:30
>
2019-02-15 15:39:39 +05:30
<span v-if="renderAvatarBadge" slot="avatar-badge" class="badge badge-pill">
2018-12-13 13:39:08 +05:30
{{ index + 1 }}
</span>
</noteable-discussion>
2018-11-08 19:23:39 +05:30
</ul>
</div>
</div>
</template>