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 LabelTaskModel from '../../models/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 {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
@ -286,12 +286,13 @@ export default {
return foundListId
},
async createNewTask({dispatch}, {
async createNewTask({dispatch, commit}, {
title,
bucketId,
listId,
position,
}) {
setLoading({commit}, 'tasks')
const parsedTask = parseTaskText(title, getQuickAddMagicMode())
const foundListId = await dispatch('findListId', {

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

@ -140,10 +140,10 @@
<template #footer>
<div class="bucket-footer" v-if="canWrite">
<div class="field" v-if="showNewTaskInput[bucket.id]">
<div class="control" :class="{'is-loading': loading}">
<div class="control" :class="{'is-loading': loading || taskLoading}">
<input
class="input"
:disabled="loading || undefined"
:disabled="loading || taskLoading || undefined"
@focusout="toggleShowNewTaskInput(bucket.id)"
@keyup.enter="addTaskToBucket(bucket.id)"
@keyup.esc="toggleShowNewTaskInput(bucket.id)"
@ -172,7 +172,7 @@
<template #item="{element: task}">
<div class="task-item">
<kanban-card class="kanban-card" :task="task"/>
<kanban-card class="kanban-card" :task="task" :loading="taskUpdating[task.id] ?? false"/>
</div>
</template>
</draggable>
@ -424,6 +424,7 @@ export default defineComponent({
const task = newBucket.tasks[newTaskIndex]
const taskBefore = 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
newTask.bucketId = newBucket.id