2021-07-17 21:21:46 +00:00
|
|
|
<template>
|
|
|
|
<div class="task-add">
|
|
|
|
<div class="field is-grouped">
|
2021-08-13 19:47:15 +00:00
|
|
|
<p class="control has-icons-left is-expanded">
|
2021-09-26 18:22:28 +00:00
|
|
|
<textarea
|
2022-09-23 09:11:11 +00:00
|
|
|
:disabled="loading || undefined"
|
2021-11-30 20:20:40 +00:00
|
|
|
class="add-task-textarea input"
|
2022-03-27 20:37:25 +00:00
|
|
|
:class="{'textarea-empty': newTaskTitle === ''}"
|
2021-07-17 21:21:46 +00:00
|
|
|
:placeholder="$t('list.list.addPlaceholder')"
|
2021-11-30 20:20:40 +00:00
|
|
|
rows="1"
|
2021-07-17 21:21:46 +00:00
|
|
|
v-focus
|
|
|
|
v-model="newTaskTitle"
|
|
|
|
ref="newTaskInput"
|
2022-02-26 12:05:39 +00:00
|
|
|
@keyup="resetEmptyTitleError"
|
2021-09-26 18:22:28 +00:00
|
|
|
@keydown.enter="handleEnter"
|
2021-07-17 21:21:46 +00:00
|
|
|
/>
|
|
|
|
<span class="icon is-small is-left">
|
|
|
|
<icon icon="tasks"/>
|
|
|
|
</span>
|
|
|
|
</p>
|
|
|
|
<p class="control">
|
|
|
|
<x-button
|
2021-11-30 20:20:40 +00:00
|
|
|
class="add-task-button"
|
2022-09-23 09:11:11 +00:00
|
|
|
:disabled="newTaskTitle === '' || loading || undefined"
|
2021-07-17 21:21:46 +00:00
|
|
|
@click="addTask()"
|
|
|
|
icon="plus"
|
2022-09-23 09:11:11 +00:00
|
|
|
:loading="loading"
|
2022-03-27 20:37:25 +00:00
|
|
|
:aria-label="$t('list.list.add')"
|
2021-07-17 21:21:46 +00:00
|
|
|
>
|
2022-03-27 20:37:25 +00:00
|
|
|
<span class="button-text">
|
|
|
|
{{ $t('list.list.add') }}
|
|
|
|
</span>
|
2021-07-17 21:21:46 +00:00
|
|
|
</x-button>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<p class="help is-danger" v-if="errorMessage !== ''">
|
|
|
|
{{ errorMessage }}
|
|
|
|
</p>
|
2022-03-27 20:37:25 +00:00
|
|
|
<quick-add-magic v-else/>
|
2021-07-17 21:21:46 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2021-11-30 20:20:40 +00:00
|
|
|
<script setup lang="ts">
|
2022-11-17 15:39:34 +00:00
|
|
|
import {computed, ref} from 'vue'
|
2021-11-30 20:20:40 +00:00
|
|
|
import {useI18n} from 'vue-i18n'
|
|
|
|
|
2021-07-25 13:27:15 +00:00
|
|
|
import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
|
2022-09-28 17:46:12 +00:00
|
|
|
import type {ITask} from '@/modelTypes/ITask'
|
|
|
|
import {parseSubtasksViaIndention} from '@/helpers/parseSubtasksViaIndention'
|
|
|
|
import TaskRelationService from '@/services/taskRelation'
|
|
|
|
import TaskRelationModel from '@/models/taskRelation'
|
|
|
|
import {RELATION_KIND} from '@/types/IRelationKind'
|
2022-09-21 01:37:39 +00:00
|
|
|
import {useAuthStore} from '@/stores/auth'
|
2022-09-23 10:55:53 +00:00
|
|
|
import {useTaskStore} from '@/stores/tasks'
|
2022-11-17 15:39:34 +00:00
|
|
|
import {useAutoHeightTextarea} from '@/composables/useAutoHeightTextarea'
|
2022-12-04 19:19:43 +00:00
|
|
|
import {getLabelsFromPrefix} from '@/modules/parseTaskText'
|
2021-11-30 20:20:40 +00:00
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
defaultPosition: {
|
|
|
|
type: Number,
|
|
|
|
required: false,
|
2021-07-17 21:21:46 +00:00
|
|
|
},
|
2021-11-30 20:20:40 +00:00
|
|
|
})
|
|
|
|
|
2022-01-05 13:14:50 +00:00
|
|
|
const emit = defineEmits(['taskAdded'])
|
2021-11-30 20:20:40 +00:00
|
|
|
|
|
|
|
const newTaskTitle = ref('')
|
|
|
|
const newTaskInput = useAutoHeightTextarea(newTaskTitle)
|
|
|
|
|
2022-05-23 05:23:59 +00:00
|
|
|
const {t} = useI18n({useScope: 'global'})
|
2022-09-21 01:37:39 +00:00
|
|
|
const authStore = useAuthStore()
|
2022-09-23 10:55:53 +00:00
|
|
|
const taskStore = useTaskStore()
|
2021-11-30 20:20:40 +00:00
|
|
|
|
2022-01-05 13:14:50 +00:00
|
|
|
const errorMessage = ref('')
|
|
|
|
|
2022-06-11 11:58:46 +00:00
|
|
|
function resetEmptyTitleError(e) {
|
|
|
|
if (
|
|
|
|
(e.which <= 90 && e.which >= 48 || e.which >= 96 && e.which <= 105)
|
|
|
|
&& newTaskTitle.value !== ''
|
|
|
|
) {
|
2022-02-26 12:05:39 +00:00
|
|
|
errorMessage.value = ''
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-09-23 10:55:53 +00:00
|
|
|
const loading = computed(() => taskStore.isLoading)
|
2022-12-04 19:19:43 +00:00
|
|
|
|
2021-11-30 20:20:40 +00:00
|
|
|
async function addTask() {
|
|
|
|
if (newTaskTitle.value === '') {
|
|
|
|
errorMessage.value = t('list.create.addTitleRequired')
|
|
|
|
return
|
|
|
|
}
|
|
|
|
errorMessage.value = ''
|
|
|
|
|
2022-09-23 09:11:11 +00:00
|
|
|
if (loading.value) {
|
2021-11-30 20:20:40 +00:00
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
const taskTitleBackup = newTaskTitle.value
|
2022-09-30 19:31:20 +00:00
|
|
|
// This allows us to find the tasks with the title they had before being parsed
|
|
|
|
// by quick add magic.
|
|
|
|
const createdTasks: { [key: ITask['title']]: ITask } = {}
|
2022-09-28 17:46:12 +00:00
|
|
|
const tasksToCreate = parseSubtasksViaIndention(newTaskTitle.value)
|
2022-12-04 19:19:43 +00:00
|
|
|
|
|
|
|
// We ensure all labels exist prior to passing them down to the create task method
|
|
|
|
// In the store it will only ever see one task at a time so there's no way to reliably
|
|
|
|
// check if a new label was created before (because everything happens async).
|
|
|
|
const allLabels = tasksToCreate.map(({title}) => getLabelsFromPrefix(title) ?? [])
|
|
|
|
await taskStore.ensureLabelsExist(allLabels.flat())
|
|
|
|
|
2022-12-02 17:39:52 +00:00
|
|
|
const newTasks = tasksToCreate.map(async ({title, list}) => {
|
2022-09-29 16:03:23 +00:00
|
|
|
if (title === '') {
|
2021-11-30 20:20:40 +00:00
|
|
|
return
|
|
|
|
}
|
2022-12-04 19:19:43 +00:00
|
|
|
|
2022-12-02 17:39:52 +00:00
|
|
|
// If the task has a list specified, make sure to use it
|
|
|
|
let listId = null
|
|
|
|
if (list !== null) {
|
|
|
|
listId = await taskStore.findListId({list, listId: 0})
|
|
|
|
}
|
2021-11-30 20:20:40 +00:00
|
|
|
|
2022-09-23 10:55:53 +00:00
|
|
|
const task = await taskStore.createNewTask({
|
2022-09-29 16:03:23 +00:00
|
|
|
title,
|
2022-12-02 17:39:52 +00:00
|
|
|
listId: listId || authStore.settings.defaultListId,
|
2021-11-30 20:20:40 +00:00
|
|
|
position: props.defaultPosition,
|
|
|
|
})
|
2022-09-30 19:31:20 +00:00
|
|
|
createdTasks[title] = task
|
2021-11-30 20:20:40 +00:00
|
|
|
return task
|
|
|
|
})
|
|
|
|
|
|
|
|
try {
|
|
|
|
newTaskTitle.value = ''
|
|
|
|
await Promise.all(newTasks)
|
2022-09-29 16:05:25 +00:00
|
|
|
|
2022-09-28 17:46:12 +00:00
|
|
|
const taskRelationService = new TaskRelationService()
|
|
|
|
const relations = tasksToCreate.map(async t => {
|
2022-09-30 19:31:20 +00:00
|
|
|
const createdTask = createdTasks[t.title]
|
2022-09-29 16:05:25 +00:00
|
|
|
if (typeof createdTask === 'undefined') {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2022-09-28 17:46:12 +00:00
|
|
|
if (t.parent === null) {
|
|
|
|
emit('taskAdded', createdTask)
|
|
|
|
return
|
|
|
|
}
|
2022-09-29 16:05:25 +00:00
|
|
|
|
2022-09-30 19:31:20 +00:00
|
|
|
const createdParentTask = createdTasks[t.parent]
|
2022-09-28 17:46:12 +00:00
|
|
|
if (typeof createdTask === 'undefined' || typeof createdParentTask === 'undefined') {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
const rel = await taskRelationService.create(new TaskRelationModel({
|
|
|
|
taskId: createdTask.id,
|
|
|
|
otherTaskId: createdParentTask.id,
|
|
|
|
relationKind: RELATION_KIND.PARENTTASK,
|
|
|
|
}))
|
2022-09-29 16:05:25 +00:00
|
|
|
|
2022-09-28 17:46:12 +00:00
|
|
|
createdTask.relatedTasks[RELATION_KIND.PARENTTASK] = [createdParentTask]
|
|
|
|
// we're only emitting here so that the relation shows up in the task list
|
|
|
|
emit('taskAdded', createdTask)
|
2022-09-29 16:05:25 +00:00
|
|
|
|
2022-09-28 17:46:12 +00:00
|
|
|
return rel
|
|
|
|
})
|
|
|
|
await Promise.all(relations)
|
2022-10-17 11:14:07 +00:00
|
|
|
} catch (e: any) {
|
2021-11-30 20:20:40 +00:00
|
|
|
newTaskTitle.value = taskTitleBackup
|
|
|
|
if (e?.message === 'NO_LIST') {
|
|
|
|
errorMessage.value = t('list.create.addListRequired')
|
|
|
|
return
|
|
|
|
}
|
|
|
|
throw e
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleEnter(e: KeyboardEvent) {
|
|
|
|
// when pressing shift + enter we want to continue as we normally would. Otherwise, we want to create
|
|
|
|
// the new task(s). The vue event modifier don't allow this, hence this method.
|
|
|
|
if (e.shiftKey) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
e.preventDefault()
|
|
|
|
addTask()
|
2021-07-17 21:21:46 +00:00
|
|
|
}
|
2022-06-17 12:23:39 +00:00
|
|
|
|
|
|
|
function focusTaskInput() {
|
2022-07-20 19:15:35 +00:00
|
|
|
newTaskInput.value?.focus()
|
2022-06-17 12:23:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
defineExpose({
|
|
|
|
focusTaskInput,
|
|
|
|
})
|
2021-07-17 21:21:46 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.task-add {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
2021-09-26 18:22:28 +00:00
|
|
|
|
2021-11-30 20:20:40 +00:00
|
|
|
.add-task-button {
|
2022-09-23 09:13:35 +00:00
|
|
|
height: 100% !important;
|
2022-03-27 20:37:25 +00:00
|
|
|
|
|
|
|
@media screen and (max-width: $mobile) {
|
|
|
|
.button-text {
|
|
|
|
display: none;
|
|
|
|
}
|
2022-06-11 11:58:46 +00:00
|
|
|
|
2022-03-27 20:37:25 +00:00
|
|
|
:deep(.icon) {
|
|
|
|
margin: 0 !important;
|
|
|
|
}
|
|
|
|
}
|
2021-09-26 18:22:28 +00:00
|
|
|
}
|
2022-03-27 20:37:25 +00:00
|
|
|
|
2021-11-30 20:20:40 +00:00
|
|
|
.add-task-textarea {
|
|
|
|
transition: border-color $transition;
|
|
|
|
resize: none;
|
2021-11-02 18:11:24 +00:00
|
|
|
}
|
2022-03-27 20:37:25 +00:00
|
|
|
|
|
|
|
// Adding this class when the textarea has no text prevents the textarea from wrapping the placeholder.
|
|
|
|
.textarea-empty {
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
2021-07-17 21:21:46 +00:00
|
|
|
</style>
|