kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Use mapActions, mapGetters and mapMutations for components

This commit is contained in:
Filipa Lacerda 2017-07-26 12:02:01 +01:00
parent 4e81ad2ab9
commit ffef16690c
16 changed files with 862 additions and 816 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/notes/components/issue_comment_form.vue
View File

@ -1,6 +1,7 @@
<script> <script>
/* global Flash */ /* global Flash */
import { mapActions } from 'vuex';
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
import markdownField from '../../vue_shared/components/markdown/field.vue'; import markdownField from '../../vue_shared/components/markdown/field.vue';
import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue'; import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
@ -60,6 +61,9 @@
}, },
}, },
methods: { methods: {
...mapActions([
'saveNote'
]),
handleSave(withIssueAction) { handleSave(withIssueAction) {
if (this.note.length) { if (this.note.length) {
const noteData = { const noteData = {
@ -79,7 +83,7 @@
noteData.data.note.type = constants.DISCUSSION_NOTE; noteData.data.note.type = constants.DISCUSSION_NOTE;
} }
this.$store.dispatch('saveNote', noteData) this.saveNote(noteData)
.then((res) => { .then((res) => {
if (res.errors) { if (res.errors) {
if (res.errors.commands_only) { if (res.errors.commands_only) {

52
app/assets/javascripts/notes/components/issue_discussion.vue
View File

@ -1,17 +1,19 @@
<script> <script>
/* global Flash */ /* global Flash */
import { mapActions } from 'vuex';
import { TOGGLE_DISCUSSION } from '../stores/mutation_types';
import { SYSTEM_NOTE } from '../constants';
import issueNote from './issue_note.vue';
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
import issueNoteHeader from './issue_note_header.vue';
import issueNoteActions from './issue_note_actions.vue';
import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
import issueNoteEditedText from './issue_note_edited_text.vue';
import issueNoteForm from './issue_note_form.vue';
import placeholderNote from './issue_placeholder_note.vue';
import placeholderSystemNote from './issue_placeholder_system_note.vue';
import issueNote from './issue_note.vue'; export default {
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
import issueNoteHeader from './issue_note_header.vue';
import issueNoteActions from './issue_note_actions.vue';
import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
import issueNoteEditedText from './issue_note_edited_text.vue';
import issueNoteForm from './issue_note_form.vue';
import placeholderNote from './issue_placeholder_note.vue';
import placeholderSystemNote from './issue_placeholder_system_note.vue';
export default {
props: { props: {
note: { note: {
type: Object, type: Object,
@ -47,9 +49,15 @@ export default {
}, },
}, },
methods: { methods: {
...mapActions([
'saveNote',
]),
...mapMutations({
toggleDiscussion: TOGGLE_DISCUSSION,
}),
componentName(note) { componentName(note) {
if (note.isPlaceholderNote) { if (note.isPlaceholderNote) {
if (note.placeholderType === 'systemNote') { if (note.placeholderType === SYSTEM_NOTE) {
return placeholderSystemNote; return placeholderSystemNote;
} }
return placeholderNote; return placeholderNote;
@ -61,9 +69,7 @@ export default {
return note.isPlaceholderNote ? note.notes[0] : note; return note.isPlaceholderNote ? note.notes[0] : note;
}, },
toggleDiscussion() { toggleDiscussion() {
this.$store.commit('toggleDiscussion', { this.toggleDiscussion({ discussionId: this.note.id });
discussionId: this.note.id,
});
}, },
showReplyForm() { showReplyForm() {
this.isReplying = true; this.isReplying = true;
@ -93,16 +99,14 @@ export default {
}, },
}; };
this.$store.dispatch('saveNote', replyData) this.saveNote(replyData)
.then(() => { .then(() => {
this.isReplying = false; this.isReplying = false;
}) })
.catch(() => { .catch(() => Flash('Something went wrong while adding your reply. Please try again.'));
Flash('Something went wrong while adding your reply. Please try again.');
});
}, },
}, },
}; };
</script> </script>
<template> <template>
@ -132,8 +136,7 @@ export default {
:edited-at="note.last_updated_at" :edited-at="note.last_updated_at"
:edited-by="note.last_updated_by" :edited-by="note.last_updated_by"
actionText="Last updated" actionText="Last updated"
className="discussion-headline-light js-discussion-headline" className="discussion-headline-light js-discussion-headline" />
/>
</div> </div>
</div> </div>
<div <div
@ -162,7 +165,8 @@ export default {
saveButtonTitle="Comment" saveButtonTitle="Comment"
:update-handler="saveReply" :update-handler="saveReply"
:cancel-handler="cancelReplyForm" :cancel-handler="cancelReplyForm"
ref="noteForm" /> ref="noteForm"
/>
<issue-note-signed-out-widget v-if="!canReply" /> <issue-note-signed-out-widget v-if="!canReply" />
</div> </div>
</div> </div>

48
app/assets/javascripts/notes/components/issue_note.vue
View File

@ -1,14 +1,14 @@
<script> <script>
/* global Flash */ /* global Flash */
import { mapGetters } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
import issueNoteHeader from './issue_note_header.vue'; import issueNoteHeader from './issue_note_header.vue';
import issueNoteActions from './issue_note_actions.vue'; import issueNoteActions from './issue_note_actions.vue';
import issueNoteBody from './issue_note_body.vue'; import issueNoteBody from './issue_note_body.vue';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
export default { export default {
props: { props: {
note: { note: {
type: Object, type: Object,
@ -50,6 +50,11 @@ export default {
}, },
}, },
methods: { methods: {
...mapActions([
'deleteNote',
'updateNote',
'scrollToNoteIfNeeded',
]),
editHandler() { editHandler() {
this.isEditing = true; this.isEditing = true;
}, },
@ -59,13 +64,12 @@ export default {
if (isConfirmed) { if (isConfirmed) {
this.isDeleting = true; this.isDeleting = true;
this.$store this.deleteNote(this.note)
.dispatch('deleteNote', this.note)
.then(() => { .then(() => {
this.isDeleting = false; this.isDeleting = false;
}) })
.catch(() => { .catch(() => {
new Flash('Something went wrong while deleting your note. Please try again.'); // eslint-disable-line Flash('Something went wrong while deleting your note. Please try again.');
this.isDeleting = false; this.isDeleting = false;
}); });
} }
@ -81,14 +85,12 @@ export default {
}, },
}; };
this.$store.dispatch('updateNote', data) this.updateNote(data)
.then(() => { .then(() => {
this.isEditing = false; this.isEditing = false;
$(this.$refs.noteBody.$el).renderGFM(); $(this.$refs.noteBody.$el).renderGFM();
}) })
.catch(() => { .catch(() => Flash('Something went wrong while editing your comment. Please try again.'));
Flash('Something went wrong while editing your comment. Please try again.');
});
}, },
formCancelHandler(shouldConfirm) { formCancelHandler(shouldConfirm) {
if (shouldConfirm && this.$refs.noteBody.$refs.noteForm.isDirty) { if (shouldConfirm && this.$refs.noteBody.$refs.noteForm.isDirty) {
@ -106,11 +108,11 @@ export default {
eventHub.$on('enterEditMode', ({ noteId }) => { eventHub.$on('enterEditMode', ({ noteId }) => {
if (noteId === this.note.id) { if (noteId === this.note.id) {
this.isEditing = true; this.isEditing = true;
this.$store.dispatch('scrollToNoteIfNeeded', $(this.$el)); this.scrollToNoteIfNeeded($(this.$el));
} }
}); });
}, },
}; };
</script> </script>
<template> <template>
@ -124,7 +126,8 @@ export default {
:link-href="author.path" :link-href="author.path"
:img-src="author.avatar_url" :img-src="author.avatar_url"
:img-alt="author.name" :img-alt="author.name"
:img-size="40" /> :img-size="40"
/>
</div> </div>
<div class="timeline-content"> <div class="timeline-content">
<div class="note-header"> <div class="note-header">
@ -132,7 +135,8 @@ export default {
:author="author" :author="author"
:created-at="note.created_at" :created-at="note.created_at"
:note-id="note.id" :note-id="note.id"
actionText="commented" /> actionText="commented"
/>
<issue-note-actions <issue-note-actions
:author-id="author.id" :author-id="author.id"
:note-id="note.id" :note-id="note.id"
@ -142,7 +146,8 @@ export default {
:can-report-as-abuse="canReportAsAbuse" :can-report-as-abuse="canReportAsAbuse"
:report-abuse-path="note.report_abuse_path" :report-abuse-path="note.report_abuse_path"
:edit-handler="editHandler" :edit-handler="editHandler"
:delete-handler="deleteHandler" /> :delete-handler="deleteHandler"
/>
</div> </div>
<issue-note-body <issue-note-body
:note="note" :note="note"
@ -150,7 +155,8 @@ export default {
:is-editing="isEditing" :is-editing="isEditing"
:form-update-handler="formUpdateHandler" :form-update-handler="formUpdateHandler"
:form-cancel-handler="formCancelHandler" :form-cancel-handler="formCancelHandler"
ref="noteBody" /> ref="noteBody"
/>
</div> </div>
</div> </div>
</li> </li>

27
app/assets/javascripts/notes/components/issue_note_actions.vue
View File

@ -1,10 +1,10 @@
<script> <script>
import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg'; import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
import emojiSmile from 'icons/_emoji_smile.svg'; import emojiSmile from 'icons/_emoji_smile.svg';
import emojiSmiley from 'icons/_emoji_smiley.svg'; import emojiSmiley from 'icons/_emoji_smiley.svg';
import loadingIcon from '../../vue_shared/components/loadingIcon.vue'; import loadingIcon from '../../vue_shared/components/loading_icon.vue';
export default { export default {
props: { props: {
authorId: { authorId: {
type: Number, type: Number,
@ -51,6 +51,9 @@ export default {
emojiSmiley, emojiSmiley,
}; };
}, },
components: {
loadingIcon,
},
computed: { computed: {
shouldShowActionsDropdown() { shouldShowActionsDropdown() {
return window.gon.current_user_id && (this.canEdit || this.canReportAsAbuse); return window.gon.current_user_id && (this.canEdit || this.canReportAsAbuse);
@ -62,7 +65,7 @@ export default {
return this.authorId === window.gon.current_user_id; return this.authorId === window.gon.current_user_id;
}, },
}, },
}; };
</script> </script>
<template> <template>
@ -82,13 +85,16 @@ export default {
<loading-icon /> <loading-icon />
<span <span
v-html="emojiSmiling" v-html="emojiSmiling"
class="link-highlight award-control-icon-neutral"></span> class="link-highlight award-control-icon-neutral">
</span>
<span <span
v-html="emojiSmiley" v-html="emojiSmiley"
class="link-highlight award-control-icon-positive"></span> class="link-highlight award-control-icon-positive">
</span>
<span <span
v-html="emojiSmile" v-html="emojiSmile"
class="link-highlight award-control-icon-super-positive"></span> class="link-highlight award-control-icon-super-positive">
</span>
</a> </a>
<div <div
v-if="shouldShowActionsDropdown" v-if="shouldShowActionsDropdown"
@ -101,7 +107,8 @@ export default {
data-container="body"> data-container="body">
<i <i
aria-hidden="true" aria-hidden="true"
class="fa fa-ellipsis-v icon"></i> class="fa fa-ellipsis-v icon">
</i>
</button> </button>
<ul class="dropdown-menu more-actions-dropdown dropdown-open-left"> <ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
<template v-if="canEdit"> <template v-if="canEdit">

35
app/assets/javascripts/notes/components/issue_note_awards_list.vue
View File

@ -1,12 +1,13 @@
<script> <script>
/* global Flash */ /* global Flash */
import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg'; import { mapActions } from 'vuex';
import emojiSmile from 'icons/_emoji_smile.svg'; import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
import emojiSmiley from 'icons/_emoji_smiley.svg'; import emojiSmile from 'icons/_emoji_smile.svg';
import * as Emoji from '../../emoji'; import emojiSmiley from 'icons/_emoji_smiley.svg';
import * as Emoji from '../../emoji';
export default { export default {
props: { props: {
awards: { awards: {
type: Array, type: Array,
@ -78,6 +79,9 @@ export default {
}, },
}, },
methods: { methods: {
...mapActions([
'toggleAward',
]),
getAwardHTML(name) { getAwardHTML(name) {
return Emoji.glEmojiTag(name); return Emoji.glEmojiTag(name);
}, },
@ -92,7 +96,7 @@ export default {
const restrictedEmojis = ['thumbsup', 'thumbsdown']; const restrictedEmojis = ['thumbsup', 'thumbsdown'];
const { myUserId, noteAuthorId } = this; const { myUserId, noteAuthorId } = this;
// Users can not add :+1: and :-1: to their notes // Users can not add :+1: and :-1: to their own notes
if (myUserId === noteAuthorId && restrictedEmojis.indexOf(awardName) > -1) { if (myUserId === noteAuthorId && restrictedEmojis.indexOf(awardName) > -1) {
isAllowed = false; isAllowed = false;
} }
@ -149,16 +153,14 @@ export default {
awardName, awardName,
}; };
this.$store.dispatch('toggleAward', data) this.toggleAward(data)
.then(() => { .then(() => {
$(this.$el).find('.award-control').tooltip('fixTitle'); $(this.$el).find('.award-control').tooltip('fixTitle');
}) })
.catch(() => { .catch(() => Flash('Something went wrong on our end.'));
Flash('Something went wrong on our end.');
});
}, },
}, },
}; };
</script> </script>
<template> <template>
@ -189,13 +191,16 @@ export default {
type="button"> type="button">
<span <span
v-html="emojiSmiling" v-html="emojiSmiling"
class="award-control-icon award-control-icon-neutral"></span> class="award-control-icon award-control-icon-neutral">
</span>
<span <span
v-html="emojiSmiley" v-html="emojiSmiley"
class="award-control-icon award-control-icon-positive"></span> class="award-control-icon award-control-icon-positive">
</span>
<span <span
v-html="emojiSmile" v-html="emojiSmile"
class="award-control-icon award-control-icon-super-positive"></span> class="award-control-icon award-control-icon-super-positive">
</span>
<i <i
aria-hidden="true" aria-hidden="true"
class="fa fa-spinner fa-spin award-control-icon award-control-icon-loading"></i> class="fa fa-spinner fa-spin award-control-icon award-control-icon-loading"></i>

12
app/assets/javascripts/notes/components/issue_note_body.vue
View File

@ -1,10 +1,10 @@
<script> <script>
import issueNoteEditedText from './issue_note_edited_text.vue'; import issueNoteEditedText from './issue_note_edited_text.vue';
import issueNoteAwardsList from './issue_note_awards_list.vue'; import issueNoteAwardsList from './issue_note_awards_list.vue';
import issueNoteForm from './issue_note_form.vue'; import issueNoteForm from './issue_note_form.vue';
import TaskList from '../../task_list'; import TaskList from '../../task_list';
export default { export default {
props: { props: {
note: { note: {
type: Object, type: Object,
@ -64,7 +64,7 @@ export default {
updated() { updated() {
this.initTaskList(); this.initTaskList();
}, },
}; };
</script> </script>
<template> <template>

9
app/assets/javascripts/notes/components/issue_note_edited_text.vue
View File

@ -1,7 +1,7 @@
<script> <script>
import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue'; import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
export default { export default {
props: { props: {
actionText: { actionText: {
type: String, type: String,
@ -24,7 +24,7 @@ export default {
components: { components: {
timeAgoTooltip, timeAgoTooltip,
}, },
}; };
</script> </script>
<template> <template>
@ -38,6 +38,7 @@ export default {
</a> </a>
<time-ago-tooltip <time-ago-tooltip
:time="editedAt" :time="editedAt"
tooltip-placement="bottom" /> tooltip-placement="bottom"
/>
</div> </div>
</template> </template>

8
app/assets/javascripts/notes/components/issue_note_form.vue
View File

@ -1,8 +1,8 @@
<script> <script>
import markdownField from '../../vue_shared/components/markdown/field.vue'; import markdownField from '../../vue_shared/components/markdown/field.vue';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
export default { export default {
props: { props: {
noteBody: { noteBody: {
type: String, type: String,
@ -82,7 +82,7 @@ export default {
} }
}, },
}, },
}; };
</script> </script>
<template> <template>

22
app/assets/javascripts/notes/components/issue_note_header.vue
View File

@ -1,7 +1,9 @@
<script> <script>
import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue'; import { mapMutations } from 'vuex';
import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
import * as types from '../stores/mutation_types';
export default { export default {
props: { props: {
author: { author: {
type: Object, type: Object,
@ -52,15 +54,18 @@ export default {
}, },
}, },
methods: { methods: {
...mapMutations({
setTargetNoteHash: types.SET_TARGET_NOTE_HASH,
}),
handleToggle() { handleToggle() {
this.isExpanded = !this.isExpanded; this.isExpanded = !this.isExpanded;
this.toggleHandler(); this.toggleHandler();
}, },
updateTargetNoteHash() { updateTargetNoteHash() {
this.$store.commit('setTargetNoteHash', this.noteTimestampLink); this.setTargetNoteHash(this.noteTimestampLink);
}, },
}, },
}; };
</script> </script>
<template> <template>
@ -81,13 +86,15 @@ export default {
<span <span
v-if="actionTextHtml" v-if="actionTextHtml"
v-html="actionTextHtml" v-html="actionTextHtml"
class="system-note-message"></span> class="system-note-message">
</span>
<a <a
:href="noteTimestampLink" :href="noteTimestampLink"
@click="updateTargetNoteHash"> @click="updateTargetNoteHash">
<time-ago-tooltip <time-ago-tooltip
:time="createdAt" :time="createdAt"
tooltipPlacement="bottom" /> tooltipPlacement="bottom"
/>
</a> </a>
</span> </span>
</span> </span>
@ -101,7 +108,8 @@ export default {
<i <i
:class="toggleChevronClass" :class="toggleChevronClass"
class="fa" class="fa"
aria-hidden="true"></i> aria-hidden="true">
</i>
Toggle discussion Toggle discussion
</button> </button>
</div> </div>

4
app/assets/javascripts/notes/components/issue_note_signed_out_widget.vue
View File

@ -1,5 +1,5 @@
<script> <script>
export default { export default {
data() { data() {
return { return {
signInLink: '#', signInLink: '#',
@ -12,7 +12,7 @@ export default {
this.signInLink = wrapper.dataset.newSessionPath; this.signInLink = wrapper.dataset.newSessionPath;
} }
}, },
}; };
</script> </script>
<template> <template>

81
app/assets/javascripts/notes/components/issue_notes.vue
View File

@ -1,20 +1,21 @@
<script> <script>
/* global Flash */ /* global Flash */
import Vue from 'vue'; import Vue from 'vue';
import Vuex from 'vuex'; import { mapGetters, mapActions, mapMutations } from 'vuex';
import VueResource from 'vue-resource'; import store from '../stores/';
import storeOptions from '../stores/issue_notes_store'; import * as constants from '../constants'
import eventHub from '../event_hub'; import * as types from '../stores/mutation_types';
import issueNote from './issue_note.vue'; import eventHub from '../event_hub';
import issueDiscussion from './issue_discussion.vue'; import issueNote from './issue_note.vue';
import issueSystemNote from './issue_system_note.vue'; import issueDiscussion from './issue_discussion.vue';
import issueCommentForm from './issue_comment_form.vue'; import issueSystemNote from './issue_system_note.vue';
import placeholderNote from './issue_placeholder_note.vue'; import issueCommentForm from './issue_comment_form.vue';
import placeholderSystemNote from './issue_placeholder_system_note.vue'; import placeholderNote from './issue_placeholder_note.vue';
import store from './store'; import placeholderSystemNote from './issue_placeholder_system_note.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
export default { export default {
name: 'IssueNotes', name: 'IssueNotes',
store, store,
data() { data() {
@ -27,19 +28,32 @@ export default {
issueDiscussion, issueDiscussion,
issueSystemNote, issueSystemNote,
issueCommentForm, issueCommentForm,
loadingIcon,
placeholderNote, placeholderNote,
placeholderSystemNote, placeholderSystemNote,
}, },
computed: { computed: {
...Vuex.mapGetters([ ...mapGetters([
'notes', 'notes',
'notesById', 'notesById',
]), ]),
}, },
methods: { methods: {
componentName(note) { ...mapActions({
actionFetchNotes: 'fetchNotes',
}),
...mapActions([
'poll',
'toggleAward',
'scrollToNoteIfNeeded',
]),
...mapMutations({
setLastFetchedAt: types.SET_LAST_FETCHED_AT,
setTargetNoteHash: types.SET_TARGET_NOTE_HASH,
}),
getComponentName(note) {
if (note.isPlaceholderNote) { if (note.isPlaceholderNote) {
if (note.placeholderType === 'systemNote') { if (note.placeholderType === constants.SYSTEM_NOTE) {
return placeholderSystemNote; return placeholderSystemNote;
} }
return placeholderNote; return placeholderNote;
@ -49,13 +63,13 @@ export default {
return issueDiscussion; return issueDiscussion;
}, },
componentData(note) { getComponentData(note) {
return note.individual_note ? note.notes[0] : note; return note.individual_note ? note.notes[0] : note;
}, },
fetchNotes() { fetchNotes() {
const { discussionsPath } = this.$el.parentNode.dataset; const { discussionsPath } = this.$el.parentNode.dataset;
this.$store.dispatch('fetchNotes', discussionsPath) this.actionFetchNotes(discussionsPath)
.then(() => { .then(() => {
this.isLoading = false; this.isLoading = false;
@ -70,13 +84,13 @@ export default {
}, },
initPolling() { initPolling() {
const { lastFetchedAt } = $('.js-notes-wrapper')[0].dataset; const { lastFetchedAt } = $('.js-notes-wrapper')[0].dataset;
this.$store.commit('setLastFetchedAt', lastFetchedAt); this.setLastFetchedAt(lastFetchedAt);
// FIXME: @fatihacet Implement real polling mechanism // FIXME: @fatihacet Implement real polling mechanism
setInterval(() => { setInterval(() => {
this.$store.dispatch('poll') this.poll()
.then((res) => { .then((res) => {
this.$store.commit('setLastFetchedAt', res.lastFetchedAt); this.setLastFetchedAt(res.lastFetchedAt);
}) })
.catch(() => { .catch(() => {
Flash('Something went wrong while fetching latest comments.'); Flash('Something went wrong while fetching latest comments.');
@ -88,10 +102,8 @@ export default {
const { awardName, noteId } = data; const { awardName, noteId } = data;
const endpoint = this.notesById[noteId].toggle_award_path; const endpoint = this.notesById[noteId].toggle_award_path;
this.$store.dispatch('toggleAward', { endpoint, awardName, noteId }) this.toggleAward({ endpoint, awardName, noteId })
.catch(() => { .catch(() => {new Flash('Something went wrong on our end.')});
Flash('Something went wrong on our end.');
});
}); });
$(document).on('issuable:change', (e, isClosed) => { $(document).on('issuable:change', (e, isClosed) => {
@ -103,8 +115,8 @@ export default {
const $el = $(`#${hash}`); const $el = $(`#${hash}`);
if (hash && $el) { if (hash && $el) {
this.$store.commit('setTargetNoteHash', hash); this.setTargetNoteHash(hash);
this.$store.dispatch('scrollToNoteIfNeeded', $el); this.scrollToNoteIfNeeded($el);
} }
}, },
}, },
@ -113,7 +125,7 @@ export default {
this.initPolling(); this.initPolling();
this.bindEventHubListeners(); this.bindEventHubListeners();
}, },
}; };
</script> </script>
<template> <template>
@ -121,9 +133,7 @@ export default {
<div <div
v-if="isLoading" v-if="isLoading"
class="loading"> class="loading">
<i <loading-icon />
class="fa fa-spinner fa-spin"
aria-hidden="true"></i>
</div> </div>
<ul <ul
v-if="!isLoading" v-if="!isLoading"
@ -131,9 +141,10 @@ export default {
class="notes main-notes-list timeline"> class="notes main-notes-list timeline">
<component <component
v-for="note in notes" v-for="note in notes"
:is="componentName(note)" :is="getComponentName(note)"
:note="componentData(note)" :note="getComponentData(note)"
:key="note.id" /> :key="note.id"
/>
</ul> </ul>
<issue-comment-form v-if="!isLoading" /> <issue-comment-form v-if="!isLoading" />
</div> </div>

7
app/assets/javascripts/notes/components/issue_placeholder_note.vue
View File

@ -1,5 +1,5 @@
<script> <script>
export default { export default {
props: { props: {
note: { note: {
type: Object, type: Object,
@ -11,7 +11,7 @@ export default {
currentUser: window.gl.currentUserData, currentUser: window.gl.currentUserData,
}; };
}, },
}; };
</script> </script>
<template> <template>
@ -21,7 +21,8 @@ export default {
<a :href="currentUser.path"> <a :href="currentUser.path">
<img <img
:src="currentUser.avatar_url" :src="currentUser.avatar_url"
class="avatar s40" /> class="avatar s40"
/>
</a> </a>
</div> </div>
<div <div

4
app/assets/javascripts/notes/components/issue_placeholder_system_note.vue
View File

@ -1,12 +1,12 @@
<script> <script>
export default { export default {
props: { props: {
note: { note: {
type: Object, type: Object,
required: true, required: true,
}, },
}, },
}; };
</script> </script>
<template> <template>

10
app/assets/javascripts/notes/components/issue_system_note.vue
View File

@ -1,9 +1,9 @@
<script> <script>
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import iconsMap from './issue_note_icons'; import iconsMap from './issue_note_icons';
import issueNoteHeader from './issue_note_header.vue'; import issueNoteHeader from './issue_note_header.vue';
export default { export default {
props: { props: {
note: { note: {
type: Object, type: Object,
@ -29,7 +29,7 @@ export default {
return this.targetNoteHash === this.noteAnchorId; return this.targetNoteHash === this.noteAnchorId;
}, },
}, },
}; };
</script> </script>
<template> <template>

7
app/assets/javascripts/notes/stores/actions.js
View File

@ -138,8 +138,7 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
export const poll = ({ commit, state, getters }) => { export const poll = ({ commit, state, getters }) => {
const { notesPath } = $('.js-notes-wrapper')[0].dataset; const { notesPath } = $('.js-notes-wrapper')[0].dataset;
return service return service.poll(`${notesPath}?full_data=1`, state.lastFetchedAt)
.poll(`${notesPath}?full_data=1`, state.lastFetchedAt)
.then(res => res.json()) .then(res => res.json())
.then((res) => { .then((res) => {
if (res.notes.length) { if (res.notes.length) {
@ -188,8 +187,8 @@ export const toggleAward = ({ commit, getters, dispatch }, data) => {
}); });
if (amIAwarded) { if (amIAwarded) {
Object.assign(data, { awardName: counterAward }); data.awardName = counterAward;
Object.assign(data, { skipMutalityCheck: true }); data.skipMutalityCheck = true;
dispatch(types.TOGGLE_AWARD, data); dispatch(types.TOGGLE_AWARD, data);
} }