Fix loading & disabled state on inputs when creating a new task
This commit is contained in:
parent
69b626cba9
commit
7bd081efe0
1 changed files with 8 additions and 12 deletions
|
@ -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 = ''
|
||||||
|
|
Loading…
Reference in a new issue