summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/notes/components/notes_app.vue
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/notes/components/notes_app.vue')
-rw-r--r--app/assets/javascripts/notes/components/notes_app.vue282
1 files changed, 142 insertions, 140 deletions
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index c97472c879c..a90c6d6381d 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -1,160 +1,162 @@
<script>
- import $ from 'jquery';
- import { mapGetters, mapActions } from 'vuex';
- import { getLocationHash } from '../../lib/utils/url_utility';
- import Flash from '../../flash';
- import store from '../stores/';
- import * as constants from '../constants';
- import noteableNote from './noteable_note.vue';
- import noteableDiscussion from './noteable_discussion.vue';
- 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 loadingIcon from '../../vue_shared/components/loading_icon.vue';
- import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue';
+import $ from 'jquery';
+import { mapGetters, mapActions } from 'vuex';
+import { getLocationHash } from '../../lib/utils/url_utility';
+import Flash from '../../flash';
+import store from '../stores/';
+import * as constants from '../constants';
+import noteableNote from './noteable_note.vue';
+import noteableDiscussion from './noteable_discussion.vue';
+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 loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue';
- export default {
- name: 'NotesApp',
- components: {
- noteableNote,
- noteableDiscussion,
- systemNote,
- commentForm,
- loadingIcon,
- placeholderNote,
- placeholderSystemNote,
+export default {
+ name: 'NotesApp',
+ components: {
+ noteableNote,
+ noteableDiscussion,
+ systemNote,
+ commentForm,
+ loadingIcon,
+ placeholderNote,
+ placeholderSystemNote,
+ },
+ props: {
+ noteableData: {
+ type: Object,
+ required: true,
},
- props: {
- noteableData: {
- type: Object,
- required: true,
- },
- notesData: {
- type: Object,
- required: true,
- },
- userData: {
- type: Object,
- required: false,
- default: () => ({}),
- },
+ notesData: {
+ type: Object,
+ required: true,
},
- store,
- data() {
- return {
- isLoading: true,
- };
+ userData: {
+ type: Object,
+ required: false,
+ default: () => ({}),
},
- computed: {
- ...mapGetters([
- 'notes',
- 'getNotesDataByProp',
- 'discussionCount',
- ]),
- noteableType() {
- // FIXME -- @fatihacet Get this from JSON data.
- const { ISSUE_NOTEABLE_TYPE, MERGE_REQUEST_NOTEABLE_TYPE } = constants;
+ },
+ store,
+ data() {
+ return {
+ isLoading: true,
+ };
+ },
+ computed: {
+ ...mapGetters(['notes', 'getNotesDataByProp', 'discussionCount']),
+ noteableType() {
+ // FIXME -- @fatihacet Get this from JSON data.
+ const { ISSUE_NOTEABLE_TYPE, MERGE_REQUEST_NOTEABLE_TYPE } = constants;
- return this.noteableData.merge_params ? MERGE_REQUEST_NOTEABLE_TYPE : ISSUE_NOTEABLE_TYPE;
- },
- allNotes() {
- if (this.isLoading) {
- const totalNotes = parseInt(this.notesData.totalNotes, 10) || 0;
-
- return new Array(totalNotes).fill({
- isSkeletonNote: true,
- });
- }
- return this.notes;
- },
- },
- created() {
- this.setNotesData(this.notesData);
- this.setNoteableData(this.noteableData);
- this.setUserData(this.userData);
+ return this.noteableData.merge_params
+ ? MERGE_REQUEST_NOTEABLE_TYPE
+ : ISSUE_NOTEABLE_TYPE;
},
- mounted() {
- this.fetchNotes();
+ allNotes() {
+ if (this.isLoading) {
+ const totalNotes = parseInt(this.notesData.totalNotes, 10) || 0;
- const parentElement = this.$el.parentElement;
-
- if (parentElement &&
- parentElement.classList.contains('js-vue-notes-event')) {
- parentElement.addEventListener('toggleAward', (event) => {
- const { awardName, noteId } = event.detail;
- this.actionToggleAward({ awardName, noteId });
+ return new Array(totalNotes).fill({
+ isSkeletonNote: true,
});
}
- document.addEventListener('refreshVueNotes', this.fetchNotes);
- },
- beforeDestroy() {
- document.removeEventListener('refreshVueNotes', this.fetchNotes);
+ return this.notes;
},
- methods: {
- ...mapActions({
- actionFetchNotes: 'fetchNotes',
- poll: 'poll',
- actionToggleAward: 'toggleAward',
- scrollToNoteIfNeeded: 'scrollToNoteIfNeeded',
- setNotesData: 'setNotesData',
- setNoteableData: 'setNoteableData',
- setUserData: 'setUserData',
- setLastFetchedAt: 'setLastFetchedAt',
- setTargetNoteHash: 'setTargetNoteHash',
- }),
- getComponentName(note) {
- if (note.isSkeletonNote) {
- return skeletonLoadingContainer;
- }
- if (note.isPlaceholderNote) {
- if (note.placeholderType === constants.SYSTEM_NOTE) {
- return placeholderSystemNote;
- }
- return placeholderNote;
- } else if (note.individual_note) {
- return note.notes[0].system ? systemNote : noteableNote;
- }
+ },
+ created() {
+ this.setNotesData(this.notesData);
+ this.setNoteableData(this.noteableData);
+ this.setUserData(this.userData);
+ },
+ mounted() {
+ this.fetchNotes();
+
+ const parentElement = this.$el.parentElement;
- return noteableDiscussion;
- },
- getComponentData(note) {
- return note.individual_note ? note.notes[0] : note;
- },
- fetchNotes() {
- return this.actionFetchNotes(this.getNotesDataByProp('discussionsPath'))
- .then(() => this.initPolling())
- .then(() => {
- this.isLoading = false;
- })
- .then(() => this.$nextTick())
- .then(() => this.checkLocationHash())
- .catch(() => {
- this.isLoading = false;
- Flash('Something went wrong while fetching comments. Please try again.');
- });
- },
- initPolling() {
- if (this.isPollingInitialized) {
- return;
+ if (
+ parentElement &&
+ parentElement.classList.contains('js-vue-notes-event')
+ ) {
+ parentElement.addEventListener('toggleAward', event => {
+ const { awardName, noteId } = event.detail;
+ this.actionToggleAward({ awardName, noteId });
+ });
+ }
+ document.addEventListener('refreshVueNotes', this.fetchNotes);
+ },
+ beforeDestroy() {
+ document.removeEventListener('refreshVueNotes', this.fetchNotes);
+ },
+ methods: {
+ ...mapActions({
+ actionFetchNotes: 'fetchNotes',
+ poll: 'poll',
+ actionToggleAward: 'toggleAward',
+ scrollToNoteIfNeeded: 'scrollToNoteIfNeeded',
+ setNotesData: 'setNotesData',
+ setNoteableData: 'setNoteableData',
+ setUserData: 'setUserData',
+ setLastFetchedAt: 'setLastFetchedAt',
+ setTargetNoteHash: 'setTargetNoteHash',
+ }),
+ getComponentName(note) {
+ if (note.isSkeletonNote) {
+ return skeletonLoadingContainer;
+ }
+ if (note.isPlaceholderNote) {
+ if (note.placeholderType === constants.SYSTEM_NOTE) {
+ return placeholderSystemNote;
}
+ return placeholderNote;
+ } else if (note.individual_note) {
+ return note.notes[0].system ? systemNote : noteableNote;
+ }
- this.setLastFetchedAt(this.getNotesDataByProp('lastFetchedAt'));
+ return noteableDiscussion;
+ },
+ getComponentData(note) {
+ return note.individual_note ? note.notes[0] : note;
+ },
+ fetchNotes() {
+ return this.actionFetchNotes(this.getNotesDataByProp('discussionsPath'))
+ .then(() => this.initPolling())
+ .then(() => {
+ this.isLoading = false;
+ })
+ .then(() => this.$nextTick())
+ .then(() => this.checkLocationHash())
+ .catch(() => {
+ this.isLoading = false;
+ Flash(
+ 'Something went wrong while fetching comments. Please try again.',
+ );
+ });
+ },
+ initPolling() {
+ if (this.isPollingInitialized) {
+ return;
+ }
- this.poll();
- this.isPollingInitialized = true;
- },
- checkLocationHash() {
- const hash = getLocationHash();
- const element = document.getElementById(hash);
+ this.setLastFetchedAt(this.getNotesDataByProp('lastFetchedAt'));
- if (hash && element) {
- this.setTargetNoteHash(hash);
- this.scrollToNoteIfNeeded($(element));
- }
- },
+ this.poll();
+ this.isPollingInitialized = true;
+ },
+ checkLocationHash() {
+ const hash = getLocationHash();
+ const element = document.getElementById(hash);
+
+ if (hash && element) {
+ this.setTargetNoteHash(hash);
+ this.scrollToNoteIfNeeded($(element));
+ }
},
- };
+ },
+};
</script>
<template>
View Lorry Controller Status