debian-mirror-gitlab/app/assets/javascripts/notes/components/notes_app.vue

296 lines
8.5 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2018-05-09 12:01:36 +05:30
import { mapGetters, mapActions } from 'vuex';
2019-12-21 20:55:43 +05:30
import { getLocationHash, doesHashExistInUrl } from '../../lib/utils/url_utility';
2018-05-09 12:01:36 +05:30
import Flash from '../../flash';
import * as constants from '../constants';
2018-11-08 19:23:39 +05:30
import eventHub from '../event_hub';
2018-05-09 12:01:36 +05:30
import noteableNote from './noteable_note.vue';
import noteableDiscussion from './noteable_discussion.vue';
2019-07-07 11:18:12 +05:30
import discussionFilterNote from './discussion_filter_note.vue';
2018-05-09 12:01:36 +05:30
import systemNote from '../../vue_shared/components/notes/system_note.vue';
import commentForm from './comment_form.vue';
import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue';
2020-04-22 19:07:51 +05:30
import OrderedLayout from '~/vue_shared/components/ordered_layout.vue';
2018-12-05 23:21:45 +05:30
import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';
2020-01-01 13:55:28 +05:30
import { __ } from '~/locale';
2020-03-13 15:44:24 +05:30
import initUserPopovers from '~/user_popovers';
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
export default {
name: 'NotesApp',
components: {
noteableNote,
noteableDiscussion,
systemNote,
commentForm,
placeholderNote,
placeholderSystemNote,
2019-02-15 15:39:39 +05:30
skeletonLoadingContainer,
2019-07-07 11:18:12 +05:30
discussionFilterNote,
2020-04-22 19:07:51 +05:30
OrderedLayout,
2018-05-09 12:01:36 +05:30
},
props: {
noteableData: {
type: Object,
required: true,
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
notesData: {
type: Object,
required: true,
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
userData: {
type: Object,
required: false,
default: () => ({}),
2018-03-17 18:26:18 +05:30
},
2018-11-08 19:23:39 +05:30
shouldShow: {
type: Boolean,
required: false,
default: true,
},
2019-02-15 15:39:39 +05:30
helpPagePath: {
type: String,
required: false,
default: '',
},
2018-05-09 12:01:36 +05:30
},
data() {
return {
2018-12-13 13:39:08 +05:30
isFetching: false,
currentFilter: null,
2018-05-09 12:01:36 +05:30
};
},
computed: {
2018-12-13 13:39:08 +05:30
...mapGetters([
'isNotesFetched',
'discussions',
2019-07-07 11:18:12 +05:30
'convertedDisscussionIds',
2018-12-13 13:39:08 +05:30
'getNotesDataByProp',
'isLoading',
'commentsDisabled',
2019-07-07 11:18:12 +05:30
'getNoteableData',
2019-07-31 22:56:46 +05:30
'userCanReply',
2019-12-21 20:55:43 +05:30
'discussionTabCounter',
2020-04-22 19:07:51 +05:30
'sortDirection',
2018-12-13 13:39:08 +05:30
]),
2020-04-22 19:07:51 +05:30
sortDirDesc() {
return this.sortDirection === constants.DESC;
},
2020-01-01 13:55:28 +05:30
discussionTabCounterText() {
return this.isLoading ? '' : this.discussionTabCounter;
},
2018-05-09 12:01:36 +05:30
noteableType() {
return this.noteableData.noteableType;
2018-03-17 18:26:18 +05:30
},
2018-11-08 19:23:39 +05:30
allDiscussions() {
2018-05-09 12:01:36 +05:30
if (this.isLoading) {
2019-12-04 20:38:33 +05:30
const prerenderedNotesCount = parseInt(this.notesData.prerenderedNotesCount, 10) || 0;
2018-03-17 18:26:18 +05:30
2019-12-04 20:38:33 +05:30
return new Array(prerenderedNotesCount).fill({
2018-05-09 12:01:36 +05:30
isSkeletonNote: true,
2018-03-17 18:26:18 +05:30
});
}
2018-11-08 19:23:39 +05:30
return this.discussions;
},
2019-07-07 11:18:12 +05:30
canReply() {
2019-07-31 22:56:46 +05:30
return this.userCanReply && !this.commentsDisabled;
2019-07-07 11:18:12 +05:30
},
2020-04-22 19:07:51 +05:30
slotKeys() {
return this.sortDirDesc ? ['form', 'comments'] : ['comments', 'form'];
},
2018-11-08 19:23:39 +05:30
},
watch: {
shouldShow() {
if (!this.isNotesFetched) {
this.fetchNotes();
}
2018-03-27 19:54:05 +05:30
},
2020-01-01 13:55:28 +05:30
discussionTabCounterText(val) {
if (this.discussionsCount) {
this.discussionsCount.textContent = val;
2019-07-07 11:18:12 +05:30
}
},
2018-05-09 12:01:36 +05:30
},
created() {
2019-12-21 20:55:43 +05:30
this.discussionsCount = document.querySelector('.js-discussions-count');
2019-07-07 11:18:12 +05:30
2018-05-09 12:01:36 +05:30
this.setNotesData(this.notesData);
this.setNoteableData(this.noteableData);
this.setUserData(this.userData);
2018-11-08 19:23:39 +05:30
this.setTargetNoteHash(getLocationHash());
eventHub.$once('fetchNotesData', this.fetchNotes);
2018-05-09 12:01:36 +05:30
},
mounted() {
2018-11-08 19:23:39 +05:30
if (this.shouldShow) {
this.fetchNotes();
}
2018-05-09 12:01:36 +05:30
2018-11-08 19:23:39 +05:30
const { parentElement } = this.$el;
if (parentElement && parentElement.classList.contains('js-vue-notes-event')) {
2018-05-09 12:01:36 +05:30
parentElement.addEventListener('toggleAward', event => {
const { awardName, noteId } = event.detail;
2019-02-15 15:39:39 +05:30
this.toggleAward({ awardName, noteId });
2018-05-09 12:01:36 +05:30
});
}
2019-12-26 22:10:19 +05:30
window.addEventListener('hashchange', this.handleHashChanged);
2018-05-09 12:01:36 +05:30
},
2018-12-05 23:21:45 +05:30
updated() {
2019-02-15 15:39:39 +05:30
this.$nextTick(() => {
highlightCurrentUser(this.$el.querySelectorAll('.gfm-project_member'));
initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
});
2018-12-05 23:21:45 +05:30
},
2019-09-04 21:01:54 +05:30
beforeDestroy() {
this.stopPolling();
2019-12-26 22:10:19 +05:30
window.removeEventListener('hashchange', this.handleHashChanged);
2019-09-04 21:01:54 +05:30
},
2018-05-09 12:01:36 +05:30
methods: {
2019-02-15 15:39:39 +05:30
...mapActions([
'setLoadingState',
'fetchDiscussions',
'poll',
'toggleAward',
'setNotesData',
'setNoteableData',
'setUserData',
'setLastFetchedAt',
'setTargetNoteHash',
'toggleDiscussion',
'setNotesFetchedState',
'expandDiscussion',
'startTaskList',
2019-07-07 11:18:12 +05:30
'convertToDiscussion',
2019-09-04 21:01:54 +05:30
'stopPolling',
2019-02-15 15:39:39 +05:30
]),
2020-04-22 19:07:51 +05:30
discussionIsIndividualNoteAndNotConverted(discussion) {
return discussion.individual_note && !this.convertedDisscussionIds.includes(discussion.id);
},
2019-12-26 22:10:19 +05:30
handleHashChanged() {
const noteId = this.checkLocationHash();
if (noteId) {
this.setTargetNoteHash(getLocationHash());
}
},
2018-05-09 12:01:36 +05:30
fetchNotes() {
2018-12-13 13:39:08 +05:30
if (this.isFetching) return null;
this.isFetching = true;
2019-12-21 20:55:43 +05:30
return this.fetchDiscussions(this.getFetchDiscussionsConfig())
.then(this.initPolling)
2018-05-09 12:01:36 +05:30
.then(() => {
2018-12-13 13:39:08 +05:30
this.setLoadingState(false);
2018-11-08 19:23:39 +05:30
this.setNotesFetchedState(true);
2018-11-20 20:47:30 +05:30
eventHub.$emit('fetchedNotesData');
2018-12-13 13:39:08 +05:30
this.isFetching = false;
2018-05-09 12:01:36 +05:30
})
2019-12-21 20:55:43 +05:30
.then(this.$nextTick)
.then(this.startTaskList)
.then(this.checkLocationHash)
2018-05-09 12:01:36 +05:30
.catch(() => {
2018-12-13 13:39:08 +05:30
this.setLoadingState(false);
2018-11-08 19:23:39 +05:30
this.setNotesFetchedState(true);
2019-09-30 21:07:59 +05:30
Flash(__('Something went wrong while fetching comments. Please try again.'));
2018-05-09 12:01:36 +05:30
});
},
initPolling() {
if (this.isPollingInitialized) {
return;
}
2018-03-27 19:54:05 +05:30
2018-05-09 12:01:36 +05:30
this.setLastFetchedAt(this.getNotesDataByProp('lastFetchedAt'));
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
this.poll();
this.isPollingInitialized = true;
},
checkLocationHash() {
const hash = getLocationHash();
2018-11-08 19:23:39 +05:30
const noteId = hash && hash.replace(/^note_/, '');
2018-03-17 18:26:18 +05:30
2018-11-08 19:23:39 +05:30
if (noteId) {
2019-02-15 15:39:39 +05:30
const discussion = this.discussions.find(d => d.notes.some(({ id }) => id === noteId));
if (discussion) {
this.expandDiscussion({ discussionId: discussion.id });
}
2018-05-09 12:01:36 +05:30
}
2019-12-26 22:10:19 +05:30
return noteId;
2018-03-17 18:26:18 +05:30
},
2019-07-07 11:18:12 +05:30
startReplying(discussionId) {
return this.convertToDiscussion(discussionId)
2019-12-21 20:55:43 +05:30
.then(this.$nextTick)
2019-07-07 11:18:12 +05:30
.then(() => eventHub.$emit('startReplying', discussionId));
},
2019-12-21 20:55:43 +05:30
getFetchDiscussionsConfig() {
const defaultConfig = { path: this.getNotesDataByProp('discussionsPath') };
if (doesHashExistInUrl(constants.NOTE_UNDERSCORE)) {
2020-05-24 23:13:21 +05:30
return {
...defaultConfig,
2019-12-21 20:55:43 +05:30
filter: constants.DISCUSSION_FILTERS_DEFAULT_VALUE,
persistFilter: false,
2020-05-24 23:13:21 +05:30
};
2019-12-21 20:55:43 +05:30
}
return defaultConfig;
},
2018-05-09 12:01:36 +05:30
},
2019-02-15 15:39:39 +05:30
systemNote: constants.SYSTEM_NOTE,
2018-05-09 12:01:36 +05:30
};
2018-03-17 18:26:18 +05:30
</script>
<template>
2019-02-15 15:39:39 +05:30
<div v-show="shouldShow" id="notes">
2020-04-22 19:07:51 +05:30
<ordered-layout :slot-keys="slotKeys">
<template #form>
<comment-form
v-if="!commentsDisabled"
class="js-comment-form"
:noteable-type="noteableType"
2019-02-15 15:39:39 +05:30
/>
</template>
2020-04-22 19:07:51 +05:30
<template #comments>
<ul id="notes-list" class="notes main-notes-list timeline">
<template v-for="discussion in allDiscussions">
<skeleton-loading-container v-if="discussion.isSkeletonNote" :key="discussion.id" />
<template v-else-if="discussion.isPlaceholderNote">
<placeholder-system-note
v-if="discussion.placeholderType === $options.systemNote"
:key="discussion.id"
:note="discussion.notes[0]"
/>
<placeholder-note v-else :key="discussion.id" :note="discussion.notes[0]" />
</template>
<template v-else-if="discussionIsIndividualNoteAndNotConverted(discussion)">
<system-note
v-if="discussion.notes[0].system"
:key="discussion.id"
:note="discussion.notes[0]"
/>
<noteable-note
v-else
:key="discussion.id"
:note="discussion.notes[0]"
:show-reply-button="canReply"
@startReplying="startReplying(discussion.id)"
/>
</template>
<noteable-discussion
v-else
:key="discussion.id"
:discussion="discussion"
:render-diff-file="true"
:help-page-path="helpPagePath"
/>
</template>
<discussion-filter-note v-show="commentsDisabled" />
</ul>
</template>
</ordered-layout>
2018-03-17 18:26:18 +05:30
</div>
</template>