local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added datepicker to manage dates when updating a task

Browse source
This commit is contained in:
kolaente 2018-09-11 08:28:11 +02:00
parent f69b0bbb97
commit 15fed92534
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
4 changed files with 63 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
package-lock.json generated
View file

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

1
package.json
View file

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

46
src/components/lists/ShowList.vue
View file

@ -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 => {

6
todo.md
View file

@ -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!