local-it/vikunja-frontend
Archived
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Better save messages for tasks (#307)

Browse source 
Add success messages when managing assignees

Add success messages when managing labels

Add better loading animations for related tasks

Add better loading animations for comments

Don't block everything while loading

Move task heading to separate component which handles all saving related things

Make sure to only show the loading spinner and saved message when saving the description

Show a maximum of 2 notifications

Move task description to separate component

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/307
Co-Authored-By: konrad <konrad@kola-entertainments.de>
Co-Committed-By: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad 2020-11-22 16:32:35 +00:00
parent b9eeec0125
commit 148cc1dcca
11 changed files with 456 additions and 223 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/components/tasks/partials/comments.vue
View file

@ -7,9 +7,10 @@
Comments
</h1>
<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...
</progress>
</span>
<div :key="c.id" class="media comment" v-for="c in comments">
<figure class="media-left is-hidden-mobile">
<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)">
· edited {{ formatDateSince(c.updated) }}
</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>
<editor
:has-preview="true"
@ -41,6 +51,12 @@
</figure>
<div class="media-content">
<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">
<editor
:class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
@ -116,6 +132,10 @@ export default {
newComment: TaskCommentModel,
editorActive: true,
actions: {},
saved: null,
saving: null,
creating: false,
}
},
created() {
@ -164,15 +184,20 @@ export default {
// See https://github.com/NikulinIlya/vue-easymde/issues/3
this.editorActive = false
this.$nextTick(() => this.editorActive = true)
this.creating = true
this.taskCommentService.create(this.newComment)
.then(r => {
this.comments.push(r)
this.newComment.comment = ''
this.success({message: 'The comment was added successfully.'}, this)
})
.catch(e => {
this.error(e, this)
})
.finally(() => {
this.creating = false
})
},
toggleEdit(comment) {
this.isCommentEdit = !this.isCommentEdit
@ -186,6 +211,9 @@ export default {
if (this.commentEdit.comment === '') {
return
}
this.saving = this.commentEdit.id
this.commentEdit.taskId = this.taskId
this.taskCommentService.update(this.commentEdit)
.then(r => {
@ -194,12 +222,17 @@ export default {
this.$set(this.comments, c, r)
}
}
this.saved = this.commentEdit.id
setTimeout(() => {
this.saved = null
}, 2000)
})
.catch(e => {
this.error(e, this)
})
.finally(() => {
this.isCommentEdit = false
this.saving = null
})
},
deleteComment() {