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

fix: loading state when creating a new task from list view

Browse source
This commit is contained in:
kolaente 2022-09-23 11:11:11 +02:00
parent ede5cdd8cf
commit aa64e9835c
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/tasks/add-task.vue
View file

@ -3,7 +3,7 @@
<div class="field is-grouped"> <div class="field is-grouped">
<p class="control has-icons-left is-expanded"> <p class="control has-icons-left is-expanded">
<textarea <textarea
:disabled="taskService.loading || undefined" :disabled="loading || undefined"
class="add-task-textarea input" class="add-task-textarea input"
:class="{'textarea-empty': newTaskTitle === ''}" :class="{'textarea-empty': newTaskTitle === ''}"
:placeholder="$t('list.list.addPlaceholder')" :placeholder="$t('list.list.addPlaceholder')"
@ -21,10 +21,10 @@
<p class="control"> <p class="control">
<x-button <x-button
class="add-task-button" class="add-task-button"
:disabled="newTaskTitle === '' || taskService.loading || undefined" :disabled="newTaskTitle === '' || loading || undefined"
@click="addTask()" @click="addTask()"
icon="plus" icon="plus"
:loading="taskService.loading" :loading="loading"
:aria-label="$t('list.list.add')" :aria-label="$t('list.list.add')"
> >
<span class="button-text"> <span class="button-text">
@ -41,13 +41,13 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref, watch, unref, shallowReactive} from 'vue' import {ref, watch, unref, shallowReactive, computed} from 'vue'
import {useI18n} from 'vue-i18n' import {useI18n} from 'vue-i18n'
import {useStore} from '@/store' import {useStore} from '@/store'
import {tryOnMounted, debouncedWatch, useWindowSize, type MaybeRef} from '@vueuse/core' import {tryOnMounted, debouncedWatch, useWindowSize, type MaybeRef} from '@vueuse/core'
import TaskService from '@/services/task'
import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue' import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
function cleanupTitle(title: string) { function cleanupTitle(title: string) {
return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '') return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
@ -136,7 +136,6 @@ const newTaskInput = useAutoHeightTextarea(newTaskTitle)
const {t} = useI18n({useScope: 'global'}) const {t} = useI18n({useScope: 'global'})
const store = useStore() const store = useStore()
const taskService = shallowReactive(new TaskService())
const errorMessage = ref('') const errorMessage = ref('')
function resetEmptyTitleError(e) { function resetEmptyTitleError(e) {
@ -148,6 +147,7 @@ function resetEmptyTitleError(e) {
} }
} }
const loading = computed(() => store.state[LOADING] && store.state[LOADING_MODULE] === 'tasks')
async function addTask() { async function addTask() {
if (newTaskTitle.value === '') { if (newTaskTitle.value === '') {
errorMessage.value = t('list.create.addTitleRequired') errorMessage.value = t('list.create.addTitleRequired')
@ -155,7 +155,7 @@ async function addTask() {
} }
errorMessage.value = '' errorMessage.value = ''
if (taskService.loading) { if (loading.value) {
return return
} }