Find last note created by current user through vue instead of querying the DOM
This commit is contained in:
parent
7a251207e1
commit
2845dad2af
7 changed files with 48 additions and 22 deletions
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
/* global Flash */
|
||||
|
||||
import { mapActions } from 'vuex';
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
|
||||
import markdownField from '../../vue_shared/components/markdown/field.vue';
|
||||
import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
|
||||
|
@ -30,6 +30,9 @@
|
|||
issueNoteSignedOutWidget,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'getCurrentUserLastNote',
|
||||
]),
|
||||
isLoggedIn() {
|
||||
return window.gon.current_user_id;
|
||||
},
|
||||
|
@ -126,13 +129,13 @@
|
|||
setNoteType(type) {
|
||||
this.noteType = type;
|
||||
},
|
||||
editMyLastNote() {
|
||||
editCurrentUserLastNote() {
|
||||
if (this.note === '') {
|
||||
const myLastNoteId = $('.js-my-note').last().attr('id');
|
||||
debugger;
|
||||
if (myLastNoteId) {
|
||||
const lastNote = this.getCurrentUserLastNote(window.gon.current_user_id);
|
||||
console.log(lastNote)
|
||||
if (lastNote) {
|
||||
eventHub.$emit('enterEditMode', {
|
||||
noteId: parseInt(myLastNoteId.replace('note_', ''), 10),
|
||||
noteId: lastNote.id,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -185,7 +188,7 @@
|
|||
ref="textarea"
|
||||
slot="textarea"
|
||||
placeholder="Write a comment or drag your files here..."
|
||||
@keydown.up="editMyLastNote"
|
||||
@keydown.up="editCurrentUserLastNote()"
|
||||
@keydown.meta.enter="handleSave()">
|
||||
</textarea>
|
||||
</markdown-field>
|
||||
|
|
|
@ -164,8 +164,9 @@
|
|||
<issue-note-form
|
||||
v-if="isReplying"
|
||||
saveButtonTitle="Comment"
|
||||
:update-handler="saveReply"
|
||||
:cancel-handler="cancelReplyForm"
|
||||
:discussion="note"
|
||||
@handleFormUpdate="saveReply"
|
||||
@cancelFormEdition="cancelReplyForm"
|
||||
ref="noteForm"
|
||||
/>
|
||||
<issue-note-signed-out-widget v-if="!canReply" />
|
||||
|
|
|
@ -118,7 +118,8 @@
|
|||
<li
|
||||
class="note timeline-entry"
|
||||
:id="noteAnchorId"
|
||||
:class="classNameBindings">
|
||||
:class="classNameBindings"
|
||||
:note-id="note.id">
|
||||
<div class="timeline-entry-inner">
|
||||
<div class="timeline-icon">
|
||||
<user-avatar-link
|
||||
|
|
|
@ -19,14 +19,6 @@
|
|||
required: false,
|
||||
default: false,
|
||||
},
|
||||
formUpdateHandler: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
formCancelHandler: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
issueNoteEditedText,
|
||||
|
@ -93,7 +85,7 @@
|
|||
v-if="note.last_edited_by"
|
||||
:edited-at="note.last_edited_at"
|
||||
:edited-by="note.last_edited_by"
|
||||
actionText="Edited"
|
||||
action-text="Edited"
|
||||
/>
|
||||
<issue-note-awards-list
|
||||
v-if="note.award_emoji.length"
|
||||
|
|
|
@ -18,6 +18,10 @@
|
|||
required: false,
|
||||
default: 'Save comment',
|
||||
},
|
||||
discussion: {
|
||||
type: Array,
|
||||
required: false,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const { getIssueData, getNotesData } = this.$store.getters;
|
||||
|
@ -44,9 +48,14 @@
|
|||
},
|
||||
editMyLastNote() {
|
||||
if (this.note === '') {
|
||||
// TODO: HANDLE THIS WITHOUTH JQUERY OR QUERYING THE DOM
|
||||
// FIND the discussion we are in and the last comment on that discussion
|
||||
const discussion = $(this.$el).closest('.discussion-notes');
|
||||
const myLastNoteId = discussion.find('.js-my-note').last().attr('id');
|
||||
|
||||
debugger;
|
||||
const lastNoteInDiscussion = this.$store.getters.getDiscussionLastNote(this.discussion);
|
||||
|
||||
if (myLastNoteId) {
|
||||
eventHub.$emit('enterEditMode', {
|
||||
noteId: parseInt(myLastNoteId.replace('note_', ''), 10),
|
||||
|
@ -116,7 +125,7 @@
|
|||
{{saveButtonTitle}}
|
||||
</button>
|
||||
<button
|
||||
@click="cancelHandler"
|
||||
@click="cancelHandler()"
|
||||
class="btn btn-nr btn-cancel note-edit-cancel"
|
||||
type="button">
|
||||
Cancel
|
||||
|
|
|
@ -60,6 +60,7 @@
|
|||
setNotesData: 'setNotesData',
|
||||
setIssueData: 'setIssueData',
|
||||
setUserData: 'setUserData',
|
||||
setLastFetchedAt: 'setLastFetchedAt'
|
||||
}),
|
||||
getComponentName(note) {
|
||||
if (note.isPlaceholderNote) {
|
||||
|
@ -86,7 +87,10 @@
|
|||
this.checkLocationHash();
|
||||
});
|
||||
})
|
||||
.catch(() => Flash('Something went wrong while fetching issue comments. Please try again.'));
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
Flash('Something went wrong while fetching issue comments. Please try again.')
|
||||
});
|
||||
},
|
||||
initPolling() {
|
||||
this.setLastFetchedAt(this.getNotesDataByProp('lastFetchedAt'));
|
||||
|
@ -98,7 +102,10 @@
|
|||
.then((res) => {
|
||||
this.setLastFetchedAt(res.lastFetchedAt);
|
||||
})
|
||||
.catch(() => Flash('Something went wrong while fetching latest comments.'));
|
||||
.catch((error) =>{
|
||||
console.log(error)
|
||||
Flash('Something went wrong while fetching latest comments.')
|
||||
} );
|
||||
}, 15000);
|
||||
},
|
||||
bindEventHubListeners() {
|
||||
|
|
|
@ -21,3 +21,16 @@ export const notesById = (state) => {
|
|||
|
||||
return notesByIdObject;
|
||||
};
|
||||
|
||||
const reverseNotes = array => array.slice(0).reverse();
|
||||
const isLastNote = (note, userId) => !note.system && note.author.id === userId;
|
||||
|
||||
export const getCurrentUserLastNote = state => userId => reverseNotes(state.notes)
|
||||
.reduce((acc, note) => {
|
||||
acc.push(reverseNotes(note.notes).find(el => isLastNote(el, userId)));
|
||||
return acc;
|
||||
}, []).filter(el => el !== undefined)[0];
|
||||
|
||||
export const getDiscussionLastNote = state => (discussion, userId) => reverseNotes(discussion[0].notes)
|
||||
.find(el => isLastNote(el, userId));
|
||||
|
||||
|
|
Loading…
Reference in a new issue