Fix loading & disabled state on inputs when creating a new task

This commit is contained in:
kolaente 2021-08-13 21:47:15 +02:00
parent 69b626cba9
commit 7bd081efe0
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B

View file

@ -1,9 +1,9 @@
<template> <template>
<div class="task-add"> <div class="task-add">
<div class="field is-grouped"> <div class="field is-grouped">
<p :class="{ 'is-loading': taskService.loading}" class="control has-icons-left is-expanded"> <p class="control has-icons-left is-expanded">
<input <input
:class="{ 'disabled': taskService.loading}" :disabled="taskService.loading"
@keyup.enter="addTask()" @keyup.enter="addTask()"
class="input" class="input"
:placeholder="$t('list.list.addPlaceholder')" :placeholder="$t('list.list.addPlaceholder')"
@ -19,9 +19,10 @@
</p> </p>
<p class="control"> <p class="control">
<x-button <x-button
:disabled="newTaskTitle.length === 0" :disabled="newTaskTitle === '' || taskService.loading"
@click="addTask()" @click="addTask()"
icon="plus" icon="plus"
:loading="taskService.loading"
> >
{{ $t('list.list.add') }} {{ $t('list.list.add') }}
</x-button> </x-button>
@ -35,10 +36,7 @@
</template> </template>
<script> <script>
import ListService from '../../services/list'
import TaskService from '../../services/task' import TaskService from '../../services/task'
import LabelService from '../../services/label'
import LabelTaskService from '../../services/labelTask'
import createTask from '@/components/tasks/mixins/createTask' import createTask from '@/components/tasks/mixins/createTask'
import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue' import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
@ -47,10 +45,7 @@ export default {
data() { data() {
return { return {
newTaskTitle: '', newTaskTitle: '',
listService: ListService,
taskService: TaskService, taskService: TaskService,
labelService: LabelService,
labelTaskService: LabelTaskService,
errorMessage: '', errorMessage: '',
} }
}, },
@ -61,10 +56,7 @@ export default {
QuickAddMagic, QuickAddMagic,
}, },
created() { created() {
this.listService = new ListService()
this.taskService = new TaskService() this.taskService = new TaskService()
this.labelService = new LabelService()
this.labelTaskService = new LabelTaskService()
}, },
props: { props: {
defaultPosition: { defaultPosition: {
@ -80,6 +72,10 @@ export default {
} }
this.errorMessage = '' this.errorMessage = ''
if (this.taskService.loading) {
return
}
this.createNewTask(this.newTaskTitle, 0, this.$store.state.auth.settings.defaultListId, this.defaultPosition) this.createNewTask(this.newTaskTitle, 0, this.$store.state.auth.settings.defaultListId, this.defaultPosition)
.then(task => { .then(task => {
this.newTaskTitle = '' this.newTaskTitle = ''