diff --git a/cypress/integration/task/task.spec.js b/cypress/integration/task/task.spec.js index ced98b60..34967d10 100644 --- a/cypress/integration/task/task.spec.js +++ b/cypress/integration/task/task.spec.js @@ -175,7 +175,7 @@ describe('Task', () => { .should('exist') }) - it.only('Can add a new comment', () => { + it('Can add a new comment', () => { const tasks = TaskFactory.create(1, { id: 1, }) @@ -377,5 +377,34 @@ describe('Task', () => { cy.get('.task-view .details.labels-list .multiselect .input-wrapper') .should('not.contain', labels[0].title) }) + + it('Can set a due date for a task', () => { + const tasks = TaskFactory.create(1, { + id: 1, + done: false, + }) + cy.visit(`/tasks/${tasks[0].id}`) + + cy.get('.task-view .action-buttons .button') + .contains('Set Due Date') + .click() + cy.get('.task-view .columns.details .column') + .contains('Due Date') + .get('.date-input .datepicker .show') + .click() + cy.get('.datepicker .datepicker-popup a') + .contains('Tomorrow') + .click() + cy.get('.datepicker .datepicker-popup a.button') + .contains('Confirm') + .click() + + cy.get('.task-view .columns.details .column') + .contains('Due Date') + .get('.date-input .datepicker-popup') + .should('not.exist') + cy.get('.global-notification') + .should('contain', 'Success') + }) }) }) diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue index 029b419a..4d9730af 100644 --- a/src/components/input/datepicker.vue +++ b/src/components/input/datepicker.vue @@ -113,10 +113,11 @@ import flatPickr from 'vue-flatpickr-component' import 'flatpickr/dist/flatpickr.css' -import {calculateDayInterval} from '@/helpers/time/calculateDayInterval' import {format} from 'date-fns' +import {calculateDayInterval} from '@/helpers/time/calculateDayInterval' import {calculateNearestHours} from '@/helpers/time/calculateNearestHours' import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside' +import {createDateFromString} from '@/helpers/time/createDateFromString' export default { name: 'datepicker', @@ -168,10 +169,10 @@ export default { this.date = null return } - this.date = new Date(newVal) + this.date = createDateFromString(newVal) }, flatPickrDate(newVal) { - this.date = new Date(newVal) + this.date = createDateFromString(newVal) this.updateData() }, }, diff --git a/src/helpers/time/createDateFromString.js b/src/helpers/time/createDateFromString.js new file mode 100644 index 00000000..62f22942 --- /dev/null +++ b/src/helpers/time/createDateFromString.js @@ -0,0 +1,15 @@ +/** + * Returns a new date from any format in a way that all browsers, especially safari, can understand. + * + * @see https://kolaente.dev/vikunja/frontend/issues/207 + * + * @param dateString + * @returns {Date} + */ +export const createDateFromString = dateString => { + if (dateString.includes('-')) { + dateString = dateString.replace(/-/g, "/") + } + + return new Date(dateString) +} diff --git a/src/helpers/time/createDateFromString.test.js b/src/helpers/time/createDateFromString.test.js new file mode 100644 index 00000000..8998341d --- /dev/null +++ b/src/helpers/time/createDateFromString.test.js @@ -0,0 +1,13 @@ +import {createDateFromString} from './createDateFromString' + +test('YYYY-MM-DD HH:MM', () => { + const dateString = '2021-02-06 12:00' + const date = createDateFromString(dateString) + expect(date).toBeInstanceOf(Date) + expect(date.getDate()).toBe(6) + expect(date.getMonth()).toBe(1) + expect(date.getFullYear()).toBe(2021) + expect(date.getHours()).toBe(12) + expect(date.getMinutes()).toBe(0) + expect(date.getSeconds()).toBe(0) +}) diff --git a/src/main.js b/src/main.js index d6da066a..75829e37 100644 --- a/src/main.js +++ b/src/main.js @@ -201,6 +201,7 @@ Vue.mixin({ return date ? format(date, 'PPPPpppp') : '' }, formatDateShort: date => { + console.log('short date', date) return formatDate(date, 'PPpp') }, error: (e, context, actions = []) => message.error(e, context, actions),