diff --git a/src/components/lists/ShowList.vue b/src/components/lists/ShowList.vue index 17b13f42e..da82b6adc 100644 --- a/src/components/lists/ShowList.vue +++ b/src/components/lists/ShowList.vue @@ -67,38 +67,33 @@ -
-
-
- -
- - -
-
-
-
-
- -
- - -
-
+ Reminder Dates +
+ + + +
+ +
+ +
+ +
@@ -133,12 +128,14 @@ loading: false, isTaskEdit: false, taskEditTask: {}, + lastReminder: 0, flatPickerConfig:{ altFormat: 'j M Y H:i', altInput: true, dateFormat: 'Y-m-d H:i', enableTime: true, - defaultDate: new Date(), + onOpen: this.updateLastReminderDate, + onClose: this.addReminderDate, }, } }, @@ -170,9 +167,15 @@ // Make date objects from timestamps for (const t in response.data.tasks) { let dueDate = new Date(response.data.tasks[t].dueDate * 1000) - let reminderDate = new Date(response.data.tasks[t].reminderDate * 1000) - response.data.tasks[t].dueDate = dueDate - response.data.tasks[t].reminderDate = reminderDate + if (dueDate === 0) { + response.data.tasks[t].dueDate = null + } else { + response.data.tasks[t].dueDate = dueDate + } + + for (const rd in response.data.tasks[t].reminderDates) { + response.data.tasks[t].reminderDates[rd] = new Date(response.data.tasks[t].reminderDates[rd] * 1000) + } } // This adds a new elemednt "list" to our object which contains all lists @@ -213,7 +216,7 @@ }) }, editTask(id) { - // Find the slected task and set it to the current object + // Find the selected task and set it to the current object for (const t in this.list.tasks) { if (this.list.tasks[t].id === id) { this.taskEditTask = this.list.tasks[t] @@ -221,6 +224,12 @@ } } + if (this.taskEditTask.reminderDates === null) { + this.taskEditTask.reminderDates = [] + } + this.taskEditTask.reminderDates = this.removeNullsFromArray(this.taskEditTask.reminderDates) + this.taskEditTask.reminderDates.push(null) + this.isTaskEdit = true }, editTaskSubmit() { @@ -228,18 +237,25 @@ // Convert the date in a unix timestamp let duedate = (+ new Date(this.taskEditTask.dueDate)) / 1000 - let reminderdate = (+ new Date(this.taskEditTask.reminderDate)) / 1000 this.taskEditTask.dueDate = duedate - this.taskEditTask.reminderDate = reminderdate + + // remove all nulls + this.taskEditTask.reminderDates = this.removeNullsFromArray(this.taskEditTask.reminderDates) + // Make normal timestamps from js timestamps + for (const t in this.taskEditTask.reminderDates) { + this.taskEditTask.reminderDates[t] = Math.round(this.taskEditTask.reminderDates[t] / 1000) + } HTTP.post(`tasks/` + this.taskEditTask.id, this.taskEditTask, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}}) .then(response => { response.data.dueDate = new Date(response.data.dueDate * 1000) - response.data.reminderDate = new Date(response.data.reminderDate * 1000) + response.data.reminderDates = this.makeJSReminderDatesAfterUpdate(response.data.reminderDates) + // Update the task in the list this.updateTaskByID(this.taskEditTask.id, response.data) - // Also update the current taskedit object so the ui changes - this.$set(this, 'taskEditTask', response.data) + + // Also update the current taskedit object so the ui changes + this.$set(this, 'taskEditTask', response.data) this.handleSuccess({message: 'The task was successfully updated.'}) }) .catch(e => { @@ -249,11 +265,57 @@ updateTaskByID(id, updatedTask) { for (const t in this.list.tasks) { if (this.list.tasks[t].id === id) { + //updatedTask.reminderDates = this.makeJSReminderDatesAfterUpdate(updatedTask.reminderDates) this.$set(this.list.tasks, t, updatedTask) break } } }, + updateLastReminderDate(selectedDates) { + this.lastReminder = +new Date(selectedDates[0]) + }, + addReminderDate(selectedDates, dateStr, instance) { + let newDate = +new Date(selectedDates[0]) + + // Don't update if nothing changed + if (newDate === this.lastReminder) { + return + } + + let index = parseInt(instance.input.dataset.index) + this.taskEditTask.reminderDates[index] = newDate + + let lastIndex = this.taskEditTask.reminderDates.length - 1 + // put a new null at the end if we changed something + if (lastIndex === index && !isNaN(newDate)) { + this.taskEditTask.reminderDates.push(null) + } + }, + removeReminderByIndex(index) { + this.taskEditTask.reminderDates.splice(index, 1) + // Reset the last to 0 to have the "add reminder" button + this.taskEditTask.reminderDates[this.taskEditTask.reminderDates.length - 1] = null + }, + removeNullsFromArray(array) { + for (const index in array) { + if (array[index] === null) { + array.splice(index, 1) + } + } + return array + }, + makeJSReminderDatesAfterUpdate(dates) { + // Make js timestamps from normal timestamps + for (const rd in dates) { + dates[rd] = +new Date(dates[rd] * 1000) + } + + if (dates == null) { + dates = [] + } + dates.push(null) + return dates + }, handleError(e) { this.loading = false message.error(e, this) diff --git a/src/main.js b/src/main.js index 812e435c5..78f8daa9d 100644 --- a/src/main.js +++ b/src/main.js @@ -29,6 +29,7 @@ import { faUsers } from '@fortawesome/free-solid-svg-icons' import { faUser } from '@fortawesome/free-solid-svg-icons' import { faLock } from '@fortawesome/free-solid-svg-icons' import { faPen } from '@fortawesome/free-solid-svg-icons' +import { faTimes } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(faSignOutAlt) @@ -43,6 +44,7 @@ library.add(faUsers) library.add(faUser) library.add(faLock) library.add(faPen) +library.add(faTimes) Vue.component('icon', FontAwesomeIcon) diff --git a/src/vikunja.scss b/src/vikunja.scss index b7b07cc3d..5f154bd75 100644 --- a/src/vikunja.scss +++ b/src/vikunja.scss @@ -119,6 +119,29 @@ h1,h2,h3,h4,h5,h6{ .taskedit{ min-height: calc(100% - 1rem); margin-top: 1rem; + + .reminder-input{ + margin: 0; + + &:last-child { + margin-bottom: 0.75rem; + } + + a { + color: $red; + vertical-align: sub; + } + + input { + width: 90%; + border: none; + + &:focus { + border: none; + box-shadow: none; + } + } + } } .settings{ diff --git a/vue.config.js b/vue.config.js new file mode 100644 index 000000000..c2d6f5345 --- /dev/null +++ b/vue.config.js @@ -0,0 +1,5 @@ +module.exports = { + configureWebpack: { + devtool: 'source-map' + } +} \ No newline at end of file