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> |