Added datepicker to manage dates when updating a task

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",

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"

src/components/lists/ShowList.vue

@@ -75,7 +75,15 @@
 										<div class="field">
 											<label class="label" for="taskduedate">Due Date</label>
 											<div class="control">
-												<input :class="{ 'disabled': loading}" :disabled="loading" type="date" class="input" id="taskduedate" placeholder="The tasks due date is here..." v-model="taskEditTask.dueDate">
+												<flat-pickr
+														:class="{ 'disabled': loading}"
+														class="input"
+														:disabled="loading"
+														v-model="taskEditTask.dueDate"
+														:config="flatPickerConfig"
+														id="taskduedate"
+														placeholder="The tasks due date is here...">
+												</flat-pickr>
 											</div>
 										</div>
 									</div>
@@ -83,7 +91,15 @@
 										<div class="field">
 											<label class="label" for="taskreminderdate">Reminder Date</label>
 											<div class="control">
-												<input :class="{ 'disabled': loading}" :disabled="loading" type="date" class="input" id="taskreminderdate" placeholder="The tasks reminder date is here..." v-model="taskEditTask.reminderDate">
+												<flat-pickr
+														:class="{ 'disabled': loading}"
+														class="input"
+														:disabled="loading"
+														v-model="taskEditTask.reminderDate"
+														:config="flatPickerConfig"
+														id="taskreminderdate"
+														placeholder="The tasks reminder date is here...">
+												</flat-pickr>
 											</div>
 										</div>
 									</div>
@@ -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 => {

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)
+      * [x] Datetimepicker einbauen für Daten etc. (flatpickr)
-    * [ ] Bug fixen der auf try dafür sorgt dass beim Abhaken die checkbox nicht geupdated wird
+    * [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!