Add better loading animations for comments
This commit is contained in:
parent
727a27315b
commit
22bb9a9a7d
|
@ -7,9 +7,10 @@
|
||||||
Comments
|
Comments
|
||||||
</h1>
|
</h1>
|
||||||
<div class="comments">
|
<div class="comments">
|
||||||
<progress class="progress is-small is-info" max="100" v-if="taskCommentService.loading">
|
<span class="is-inline-flex is-align-items-center" v-if="taskCommentService.loading && saving === null && !creating">
|
||||||
|
<span class="loader is-inline-block mr-2"></span>
|
||||||
Loading comments...
|
Loading comments...
|
||||||
</progress>
|
</span>
|
||||||
<div :key="c.id" class="media comment" v-for="c in comments">
|
<div :key="c.id" class="media comment" v-for="c in comments">
|
||||||
<figure class="media-left is-hidden-mobile">
|
<figure class="media-left is-hidden-mobile">
|
||||||
<img :src="c.author.getAvatarUrl(48)" alt="" class="image is-avatar" height="48" width="48"/>
|
<img :src="c.author.getAvatarUrl(48)" alt="" class="image is-avatar" height="48" width="48"/>
|
||||||
|
@ -22,6 +23,15 @@
|
||||||
<span v-if="+new Date(c.created) !== +new Date(c.updated)" v-tooltip="formatDate(c.updated)">
|
<span v-if="+new Date(c.created) !== +new Date(c.updated)" v-tooltip="formatDate(c.updated)">
|
||||||
· edited {{ formatDateSince(c.updated) }}
|
· edited {{ formatDateSince(c.updated) }}
|
||||||
</span>
|
</span>
|
||||||
|
<transition name="fade">
|
||||||
|
<span class="is-inline-flex" v-if="taskCommentService.loading && saving === c.id">
|
||||||
|
<span class="loader is-inline-block mr-2"></span>
|
||||||
|
Saving...
|
||||||
|
</span>
|
||||||
|
<span class="has-text-success" v-if="!taskCommentService.loading && saved === c.id">
|
||||||
|
Saved!
|
||||||
|
</span>
|
||||||
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
<editor
|
<editor
|
||||||
:has-preview="true"
|
:has-preview="true"
|
||||||
|
@ -41,6 +51,12 @@
|
||||||
</figure>
|
</figure>
|
||||||
<div class="media-content">
|
<div class="media-content">
|
||||||
<div class="form">
|
<div class="form">
|
||||||
|
<transition name="fade">
|
||||||
|
<span class="is-inline-flex" v-if="taskCommentService.loading && creating">
|
||||||
|
<span class="loader is-inline-block mr-2"></span>
|
||||||
|
Creating comment...
|
||||||
|
</span>
|
||||||
|
</transition>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<editor
|
<editor
|
||||||
:class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
|
:class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
|
||||||
|
@ -116,6 +132,10 @@ export default {
|
||||||
newComment: TaskCommentModel,
|
newComment: TaskCommentModel,
|
||||||
editorActive: true,
|
editorActive: true,
|
||||||
actions: {},
|
actions: {},
|
||||||
|
|
||||||
|
saved: null,
|
||||||
|
saving: null,
|
||||||
|
creating: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
@ -164,15 +184,20 @@ export default {
|
||||||
// See https://github.com/NikulinIlya/vue-easymde/issues/3
|
// See https://github.com/NikulinIlya/vue-easymde/issues/3
|
||||||
this.editorActive = false
|
this.editorActive = false
|
||||||
this.$nextTick(() => this.editorActive = true)
|
this.$nextTick(() => this.editorActive = true)
|
||||||
|
this.creating = true
|
||||||
|
|
||||||
this.taskCommentService.create(this.newComment)
|
this.taskCommentService.create(this.newComment)
|
||||||
.then(r => {
|
.then(r => {
|
||||||
this.comments.push(r)
|
this.comments.push(r)
|
||||||
this.newComment.comment = ''
|
this.newComment.comment = ''
|
||||||
|
this.success({message: 'The comment was added successfully.'}, this)
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
this.error(e, this)
|
this.error(e, this)
|
||||||
})
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.creating = false
|
||||||
|
})
|
||||||
},
|
},
|
||||||
toggleEdit(comment) {
|
toggleEdit(comment) {
|
||||||
this.isCommentEdit = !this.isCommentEdit
|
this.isCommentEdit = !this.isCommentEdit
|
||||||
|
@ -186,6 +211,9 @@ export default {
|
||||||
if (this.commentEdit.comment === '') {
|
if (this.commentEdit.comment === '') {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.saving = this.commentEdit.id
|
||||||
|
|
||||||
this.commentEdit.taskId = this.taskId
|
this.commentEdit.taskId = this.taskId
|
||||||
this.taskCommentService.update(this.commentEdit)
|
this.taskCommentService.update(this.commentEdit)
|
||||||
.then(r => {
|
.then(r => {
|
||||||
|
@ -194,12 +222,17 @@ export default {
|
||||||
this.$set(this.comments, c, r)
|
this.$set(this.comments, c, r)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
this.saved = this.commentEdit.id
|
||||||
|
setTimeout(() => {
|
||||||
|
this.saved = null
|
||||||
|
}, 2000)
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
this.error(e, this)
|
this.error(e, this)
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
this.isCommentEdit = false
|
this.isCommentEdit = false
|
||||||
|
this.saving = null
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
deleteComment() {
|
deleteComment() {
|
||||||
|
|
Reference in New Issue
Block a user