From 15fed925345f9c1a83b07bcda76d69c754ccf723 Mon Sep 17 00:00:00 2001 From: kolaente Date: Tue, 11 Sep 2018 08:28:11 +0200 Subject: [PATCH] Added datepicker to manage dates when updating a task --- package-lock.json | 15 ++++++++++ package.json | 1 + src/components/lists/ShowList.vue | 46 +++++++++++++++++++++++++++++-- todo.md | 6 ++-- 4 files changed, 63 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index b9379e251..fc5cc9e8d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5043,6 +5043,12 @@ "write": "^0.2.1" } }, + "flatpickr": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.5.2.tgz", + "integrity": "sha512-jDy4QYGpmiy7+Qk8QvKJ4spjDdxcx9cxMydmq1x427HkKWBw0qizLYeYM2F6tMcvvqGjU5VpJS55j4LnsaBblA==", + "dev": true + }, "flatten": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz", @@ -15576,6 +15582,15 @@ "lodash": "^4.17.4" } }, + "vue-flatpickr-component": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/vue-flatpickr-component/-/vue-flatpickr-component-7.0.6.tgz", + "integrity": "sha512-u6bSP/2ONuUruR49V1YX/2in84j6jzVn+QVhsef5MuGv+OlF+PocrGd/YNLoQRdLc1FlcgYqqJ2UNiYI2PvhSw==", + "dev": true, + "requires": { + "flatpickr": "^4.5.1" + } + }, "vue-hot-reload-api": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz", diff --git a/package.json b/package.json index b42b5b1b7..9cdd29965 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "node-sass": "^4.9.3", "npm": "^6.4.1", "sass-loader": "^7.1.0", + "vue-flatpickr-component": "^7.0.6", "vue-notification": "^1.3.13", "vue-router": "^3.0.1", "vue-template-compiler": "^2.5.17" diff --git a/src/components/lists/ShowList.vue b/src/components/lists/ShowList.vue index c77a0fccf..79a973e55 100644 --- a/src/components/lists/ShowList.vue +++ b/src/components/lists/ShowList.vue @@ -75,7 +75,15 @@
- + +
@@ -83,7 +91,15 @@
- + +
@@ -107,6 +123,8 @@ import router from '../../router' import {HTTP} from '../../http-common' import message from '../../message' + import flatPickr from 'vue-flatpickr-component'; + import 'flatpickr/dist/flatpickr.css'; export default { data() { @@ -118,8 +136,18 @@ loading: false, isTaskEdit: false, taskEditTask: {}, + flatPickerConfig:{ + altFormat: 'j M Y H:i', + altInput: true, + dateFormat: 'Y-m-d H:i', + enableTime: true, + defaultDate: new Date(), + }, } }, + components: { + flatPickr + }, beforeMount() { // Check if the user is already logged in, if so, redirect him to the homepage if (!auth.user.authenticated) { @@ -141,6 +169,15 @@ HTTP.get(`lists/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}}) .then(response => { this.loading = false + + // 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 + } + // This adds a new elemednt "list" to our object which contains all lists this.$set(this, 'list', response.data) if (this.list.tasks === null) { @@ -200,7 +237,12 @@ 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) + // 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) this.handleSuccess({message: 'The task was successfully updated.'}) }) .catch(e => { diff --git a/todo.md b/todo.md index 61a10d27b..6de99b472 100644 --- a/todo.md +++ b/todo.md @@ -8,11 +8,11 @@ * [ ] Bei jedem Namespace sollte rechts neben dem Namen ein Zahnrad zum Bearbeiten sein, das tauscht dann den view mit der aktuellen Liste * [ ] Über Namespaces btn zum neuen Namespace anlegen mit popup zum Namen eingeben * [x] Btn zum Liste hinzufügen -* [ ] Tasks: +* [x] Tasks: * [x] Oben großes Eingabefeld zum Punkte hinzufügen * [x] Tasks in voller Breite drunter anzeigen * [x] Tasks bearbeiten geht mit Zahnrad rechts, da druffklicken, dann geht von Links eine card rein (halbe breite der Tasklist) mit den Optionen - * [ ] Datetimepicker einbauen für Daten etc. (vue-datepicker) - * [ ] Bug fixen der auf try dafür sorgt dass beim Abhaken die checkbox nicht geupdated wird + * [x] Datetimepicker einbauen für Daten etc. (flatpickr) + * [x] Bug fixen der auf try dafür sorgt dass beim Abhaken die checkbox nicht geupdated wird * [x] Hintergrund durch das mit den Lamas von Freepick austauschen * [ ] Lizenz einfügen! \ No newline at end of file