diff --git a/cypress/integration/task/task.spec.js b/cypress/integration/task/task.spec.js index 98664e18..83025aaa 100644 --- a/cypress/integration/task/task.spec.js +++ b/cypress/integration/task/task.spec.js @@ -27,7 +27,7 @@ describe('Task', () => { it('Should be created new', () => { cy.visit('/lists/1/list') - cy.get('input.input[placeholder="Add a new task…"') + cy.get('.input[placeholder="Add a new task…"') .type('New Task') cy.get('.button') .contains('Add') @@ -43,7 +43,7 @@ describe('Task', () => { cy.visit('/lists/1/list') cy.get('.list-is-empty-notice') .should('not.exist') - cy.get('input.input[placeholder="Add a new task…"') + cy.get('.input[placeholder="Add a new task…"') .type('New Task') cy.get('.button') .contains('Add') diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue index 799e3ba5..799d33d9 100644 --- a/src/components/tasks/add-task.vue +++ b/src/components/tasks/add-task.vue @@ -2,16 +2,17 @@

- @@ -40,6 +41,12 @@ import TaskService from '../../services/task' import createTask from '@/components/tasks/mixins/createTask' import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue' +const INITIAL_SCROLL_HEIGHT = 40 + +const cleanupTitle = title => { + return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '') +} + export default { name: 'add-task', data() { @@ -47,6 +54,7 @@ export default { newTaskTitle: '', taskService: new TaskService(), errorMessage: '', + textAreaHeight: INITIAL_SCROLL_HEIGHT, } }, mixins: [ @@ -61,6 +69,16 @@ export default { required: false, }, }, + watch: { + newTaskTitle(newVal) { + let scrollHeight = this.$refs.newTaskInput.scrollHeight + if (scrollHeight < INITIAL_SCROLL_HEIGHT || newVal === '') { + scrollHeight = INITIAL_SCROLL_HEIGHT + } + + this.textAreaHeight = scrollHeight + }, + }, methods: { addTask() { if (this.newTaskTitle === '') { @@ -73,10 +91,20 @@ export default { return } - this.createNewTask(this.newTaskTitle, 0, this.$store.state.auth.settings.defaultListId, this.defaultPosition) - .then(task => { + const newTasks = [] + this.newTaskTitle.split(/[\r\n]+/).forEach(t => { + newTasks.push( + this.createNewTask(cleanupTitle(t), 0, this.$store.state.auth.settings.defaultListId, this.defaultPosition) + .then(task => { + this.$emit('taskAdded', task) + return task + }), + ) + }) + + Promise.all(newTasks) + .then(() => { this.newTaskTitle = '' - this.$emit('taskAdded', task) }) .catch(e => { if (e === 'NO_LIST') { @@ -86,6 +114,16 @@ export default { this.$message.error(e) }) }, + handleEnter(e) { + // 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() + this.addTask() + }, }, } @@ -98,4 +136,8 @@ export default { height: 2.5rem; } } + +.input, .textarea { + transition: border-color $transition; +}