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

feat(kanban): show loading indicators when handling tasks

Browse source
This commit is contained in:
kolaente 2022-07-19 18:33:45 +02:00
parent e7de930129
commit dac9d918b5
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/store/modules/tasks.ts
View file

@ -5,7 +5,7 @@ import TaskAssigneeService from '@/services/taskAssignee'
import TaskAssigneeModel from '../../models/taskAssignee' import TaskAssigneeModel from '../../models/taskAssignee'
import LabelTaskModel from '../../models/labelTask' import LabelTaskModel from '../../models/labelTask'
import LabelTaskService from '@/services/labelTask' import LabelTaskService from '@/services/labelTask'
import {HAS_TASKS} from '../mutation-types' import {HAS_TASKS, LOADING_MODULE} from '../mutation-types'
import {setLoading} from '../helper' import {setLoading} from '../helper'
import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode' import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
@ -286,12 +286,13 @@ export default {
return foundListId return foundListId
}, },
async createNewTask({dispatch}, { async createNewTask({dispatch, commit}, {
title, title,
bucketId, bucketId,
listId, listId,
position, position,
}) { }) {
setLoading({commit}, 'tasks')
const parsedTask = parseTaskText(title, getQuickAddMagicMode()) const parsedTask = parseTaskText(title, getQuickAddMagicMode())
const foundListId = await dispatch('findListId', { const foundListId = await dispatch('findListId', {

9
src/views/list/ListKanban.vue
View file

@ -140,10 +140,10 @@
<template #footer> <template #footer>
<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': loading}"> <div class="control" :class="{'is-loading': loading || taskLoading}">
<input <input
class="input" class="input"
:disabled="loading || undefined" :disabled="loading || taskLoading || undefined"
@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)"
@ -172,7 +172,7 @@
<template #item="{element: task}"> <template #item="{element: task}">
<div class="task-item"> <div class="task-item">
<kanban-card class="kanban-card" :task="task"/> <kanban-card class="kanban-card" :task="task" :loading="taskUpdating[task.id] ?? false"/>
</div> </div>
</template> </template>
</draggable> </draggable>
@ -424,6 +424,7 @@ export default defineComponent({
const task = newBucket.tasks[newTaskIndex] const task = newBucket.tasks[newTaskIndex]
const taskBefore = newBucket.tasks[newTaskIndex - 1] ?? null const taskBefore = newBucket.tasks[newTaskIndex - 1] ?? null
const taskAfter = newBucket.tasks[newTaskIndex + 1] ?? null const taskAfter = newBucket.tasks[newTaskIndex + 1] ?? null
this.taskUpdating[task.id] = true
const newTask = cloneDeep(task) // cloning the task to avoid vuex store mutations const newTask = cloneDeep(task) // cloning the task to avoid vuex store mutations
newTask.bucketId = newBucket.id newTask.bucketId = newBucket.id
@ -463,7 +464,7 @@ export default defineComponent({
return return
} }
this.newTaskError[bucketId] = false this.newTaskError[bucketId] = false
const task = await this.$store.dispatch('tasks/createNewTask', { const task = await this.$store.dispatch('tasks/createNewTask', {
title: this.newTaskText, title: this.newTaskText,
bucketId, bucketId,