Commit 64820f9a authored by Fatih Acet's avatar Fatih Acet

IssueNotesRefactor: Show placeholder note immediately when editing.

Obviously not one of the best commits I always do.
parent 46ed6cd8
......@@ -19,6 +19,7 @@
return {
isEditing: false,
isDeleting: false,
isRequesting: false,
};
},
components: {
......@@ -37,7 +38,8 @@
},
classNameBindings() {
return {
'is-editing': this.isEditing,
'is-editing': this.isEditing && !this.isRequesting,
'is-requesting being-posted': this.isRequesting,
'disabled-content': this.isDeleting,
target: this.targetNoteHash === this.noteAnchorId,
};
......@@ -82,21 +84,28 @@
note: { note: noteText },
},
};
this.isRequesting = true;
this.oldContent = this.note.note_html;
this.note.note_html = noteText;
this.updateNote(data)
.then(() => {
this.isEditing = false;
this.isRequesting = false;
$(this.$refs.noteBody.$el).renderGFM();
this.$refs.noteBody.resetAutoSave();
callback();
})
.catch(() => {
Flash(
'Something went wrong while editing your comment. Please try again.',
'alert',
$(parentElement));
this.isRequesting = false;
this.isEditing = true;
this.$nextTick(() => {
const msg = 'Something went wrong while editing your comment. Please try again.';
Flash(msg, 'alert', $(this.$el));
this.recoverNoteContent(noteText);
callback();
});
});
},
formCancelHandler(shouldConfirm, isDirty) {
if (shouldConfirm && isDirty) {
......@@ -104,8 +113,18 @@
if (!confirm('Are you sure you want to cancel editing this comment?')) return;
}
this.$refs.noteBody.resetAutoSave();
if (this.oldContent) {
this.note.note_html = this.oldContent;
this.oldContent = null;
}
this.isEditing = false;
},
recoverNoteContent(noteText) {
// we need to do this to prevent noteForm inconsistent content warning
// this is something we intentionally do so we need to recover the content
this.note.note = noteText;
this.$refs.noteBody.$refs.noteForm.note = noteText; // TODO: This could be better
},
},
created() {
eventHub.$on('enterEditMode', ({ noteId }) => {
......
......@@ -85,12 +85,18 @@
</span>
<a
:href="noteTimestampLink"
@click="updateTargetNoteHash">
@click="updateTargetNoteHash"
class="note-timestamp">
<time-ago-tooltip
:time="createdAt"
tooltip-placement="bottom"
/>
</a>
<i
class="fa fa-spinner fa-spin editing-spinner"
aria-label="Comment is being updated"
aria-hidden="true">
</i>
</span>
</span>
<div
......
......@@ -100,6 +100,20 @@ ul.notes {
}
}
.editing-spinner {
display: none;
}
&.is-requesting {
.note-timestamp {
display: none;
}
.editing-spinner {
display: inline-block;
}
}
&.is-editing {
.note-header,
.note-text,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment