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

Only show a loading spinner per task when updating a task on the kanban board

Browse source
This commit is contained in:
kolaente 2020-12-08 18:49:28 +01:00
parent 188d54ebe6
commit c0130b2b48
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
1 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/views/list/views/Kanban.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div :class="{ 'is-loading': loading}" class="kanban loader-container"> <div :class="{ 'is-loading': loading && !oneTaskUpdating}" class="kanban loader-container">
<div :key="`bucket${bucket.id}`" class="bucket" v-for="bucket in buckets"> <div :key="`bucket${bucket.id}`" class="bucket" v-for="bucket in buckets">
<div class="bucket-header"> <div class="bucket-header">
<h2 <h2
@ -90,8 +90,8 @@
> >
<div <div
:class="{ :class="{
'is-loading': taskService.loading && taskUpdating[task.id], 'is-loading': (taskService.loading || loading) && taskUpdating[task.id],
'draggable': !taskService.loading || !taskUpdating[task.id], 'draggable': !(taskService.loading || loading) || !taskUpdating[task.id],
'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor, 'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
}" }"
:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}" :style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
@ -154,10 +154,10 @@
</div> </div>
<div class="bucket-footer" v-if="canWrite"> <div class="bucket-footer" v-if="canWrite">
<div class="field" v-if="showNewTaskInput[bucket.id]"> <div class="field" v-if="showNewTaskInput[bucket.id]">
<div class="control" :class="{'is-loading': taskService.loading}"> <div class="control" :class="{'is-loading': taskService.loading || loading}">
<input <input
class="input" class="input"
:disabled="taskService.loading" :disabled="taskService.loading || loading"
@focusout="toggleShowNewTaskInput(bucket.id)" @focusout="toggleShowNewTaskInput(bucket.id)"
@keyup.enter="addTaskToBucket(bucket.id)" @keyup.enter="addTaskToBucket(bucket.id)"
@keyup.esc="toggleShowNewTaskInput(bucket.id)" @keyup.esc="toggleShowNewTaskInput(bucket.id)"
@ -284,6 +284,7 @@ export default {
// We're using this to show the loading animation only at the task when updating it // We're using this to show the loading animation only at the task when updating it
taskUpdating: {}, taskUpdating: {},
oneTaskUpdating: false,
} }
}, },
created() { created() {
@ -360,6 +361,7 @@ export default {
const taskAfter = typeof this.buckets[bucketIndex].tasks[taskIndex + 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex + 1] const taskAfter = typeof this.buckets[bucketIndex].tasks[taskIndex + 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex + 1]
const task = this.buckets[bucketIndex].tasks[taskIndex] const task = this.buckets[bucketIndex].tasks[taskIndex]
this.$set(this.taskUpdating, task.id, true) this.$set(this.taskUpdating, task.id, true)
this.oneTaskUpdating = true
// If there is no task before, our task is the first task in which case we let it have half of the position of the task after it // If there is no task before, our task is the first task in which case we let it have half of the position of the task after it
if (taskBefore === null && taskAfter !== null) { if (taskBefore === null && taskAfter !== null) {
@ -382,10 +384,13 @@ export default {
}) })
.finally(() => { .finally(() => {
this.$set(this.taskUpdating, task.id, false) this.$set(this.taskUpdating, task.id, false)
this.oneTaskUpdating = false
}) })
} }
}, },
markTaskAsDone(task) { markTaskAsDone(task) {
this.oneTaskUpdating = true
this.$set(this.taskUpdating, task.id, true)
task.done = !task.done task.done = !task.done
this.$store.dispatch('tasks/update', task) this.$store.dispatch('tasks/update', task)
.catch(e => { .catch(e => {
@ -393,6 +398,7 @@ export default {
}) })
.finally(() => { .finally(() => {
this.$set(this.taskUpdating, task.id, false) this.$set(this.taskUpdating, task.id, false)
this.oneTaskUpdating = false
}) })
}, },
getTaskPayload(bucketId) { getTaskPayload(bucketId) {