94 lines
2.1 KiB
Vue
94 lines
2.1 KiB
Vue
|
<template>
|
||
|
<div class="bucket-footer">
|
||
|
<div class="field" v-if="hasNewTaskInput">
|
||
|
<div class="control" :class="{'is-loading': loading}">
|
||
|
<input
|
||
|
class="input"
|
||
|
:disabled="loading || undefined"
|
||
|
@focusout="toggleShowNewTaskInput()"
|
||
|
@keyup.esc="toggleShowNewTaskInput()"
|
||
|
@keyup.enter="addTaskToBucket()"
|
||
|
:placeholder="$t('list.kanban.addTaskPlaceholder')"
|
||
|
type="text"
|
||
|
v-focus.always
|
||
|
v-model="newTaskText"
|
||
|
/>
|
||
|
</div>
|
||
|
<p class="help is-danger" v-if="newTaskError && newTaskText === ''">
|
||
|
{{ $t('list.create.addTitleRequired') }}
|
||
|
</p>
|
||
|
</div>
|
||
|
<x-button
|
||
|
@click="toggleShowNewTaskInput()"
|
||
|
class="is-fullwidth has-text-centered"
|
||
|
:shadow="false"
|
||
|
v-else
|
||
|
icon="plus"
|
||
|
variant="secondary"
|
||
|
>
|
||
|
{{ bucketIsEmpty ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask') }}
|
||
|
</x-button>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script setup lang="ts">
|
||
|
import {ref, computed} from 'vue'
|
||
|
import {useStore} from 'vuex'
|
||
|
|
||
|
import BucketModel from '@/models/bucket'
|
||
|
|
||
|
const props = defineProps<{
|
||
|
bucketId: BucketModel['id']
|
||
|
listId: BucketModel['listId']
|
||
|
bucketIsEmpty: boolean
|
||
|
}>()
|
||
|
|
||
|
const emit = defineEmits(['scrollTaskContainerToBottom'])
|
||
|
|
||
|
const loading = computed(() =>
|
||
|
store.state.loading && store.state.loadingModule === 'kanban',
|
||
|
)
|
||
|
|
||
|
const hasNewTaskInput = ref(false)
|
||
|
function toggleShowNewTaskInput() {
|
||
|
hasNewTaskInput.value = !hasNewTaskInput.value
|
||
|
}
|
||
|
|
||
|
const newTaskText = ref('')
|
||
|
const newTaskError = ref(false)
|
||
|
|
||
|
const store = useStore()
|
||
|
async function addTaskToBucket() {
|
||
|
if (newTaskText.value === '') {
|
||
|
newTaskError.value = true
|
||
|
return
|
||
|
}
|
||
|
newTaskError.value = false
|
||
|
|
||
|
const task = await store.dispatch('tasks/createNewTask', {
|
||
|
title: newTaskText.value,
|
||
|
bucketId: props.bucketId,
|
||
|
listId: props.listId,
|
||
|
})
|
||
|
newTaskText.value = ''
|
||
|
store.commit('kanban/addTaskToBucket', task)
|
||
|
emit('scrollTaskContainerToBottom')
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss">
|
||
|
.bucket-footer {
|
||
|
padding: .5rem;
|
||
|
background-color: var(--grey-100);
|
||
|
border-bottom-left-radius: $radius;
|
||
|
border-bottom-right-radius: $radius;
|
||
|
|
||
|
.button {
|
||
|
background-color: transparent;
|
||
|
|
||
|
&:hover {
|
||
|
background-color: var(--white);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|