ami/tl-vikunja
1
0
Fork 0
Code Activity

Delay loading animation (#8)

Browse Source
This commit is contained in:
konrad
2018-11-27 10:23:50 +00:00
committed by Gitea
parent 12f58bc1c6
commit 74455b058a
15 changed files with 112 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/lists/EditList.vue
View File

@ -97,7 +97,7 @@
},
methods: {
loadList() {
this.loading = true
const cancel = message.setLoading(this)
HTTP.get(`lists/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
@ -105,14 +105,14 @@
if (response.data.owner.id === this.user.infos.id) {
this.userIsAdmin = true
}
this.loading = false
cancel()
})
.catch(e => {
this.handleError(e)
})
},
submit() {
this.loading = true
const cancel = message.setLoading(this)
HTTP.post(`lists/` + this.$route.params.id, this.list, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
@ -126,27 +126,30 @@
}
}
this.handleSuccess({message: 'The list was successfully updated.'})
cancel()
})
.catch(e => {
this.handleError(e)
cancel()
})
},
deleteList() {
const cancel = message.setLoading(this)
HTTP.delete(`lists/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(() => {
this.handleSuccess({message: 'The list was successfully deleted.'})
cancel()
router.push({name: 'home'})
})
.catch(e => {
this.handleError(e)
cancel()
})
},
handleError(e) {
this.loading = false
message.error(e, this)
},
handleSuccess(e) {
this.loading = false
message.success(e, this)
}
}

6
src/components/lists/NewList.vue
View File

@ -45,23 +45,23 @@
},
methods: {
newList() {
this.loading = true
const cancel = message.setLoading(this)
HTTP.put(`namespaces/` + this.$route.params.id + `/lists`, this.list, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(() => {
this.$parent.loadNamespaces()
this.handleSuccess({message: 'The list was successfully created.'})
cancel()
})
.catch(e => {
this.handleError(e)
cancel()
})
},
handleError(e) {
this.loading = false
message.error(e, this)
},
handleSuccess(e) {
this.loading = false
message.success(e, this)
}
}

21
src/components/lists/ShowList.vue
View File

@ -190,12 +190,10 @@
methods: {
loadList() {
this.isTaskEdit = false
this.loading = true
const cancel = message.setLoading(this)
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)
@ -215,36 +213,41 @@
if (this.list.tasks === null) {
this.list.tasks = []
}
cancel() // cancel the timer
})
.catch(e => {
this.handleError(e)
cancel()
})
},
addTask() {
this.loading = true
const cancel = message.setLoading(this)
HTTP.put(`lists/` + this.$route.params.id, {text: this.newTask}, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
this.list.tasks.push(response.data)
this.handleSuccess({message: 'The task was successfully created.'})
cancel() // cancel the timer
})
.catch(e => {
this.handleError(e)
cancel()
})
this.newTask = ''
},
markAsDone(e) {
this.loading = true
const cancel = message.setLoading(this)
HTTP.post(`tasks/` + e.target.id, {done: e.target.checked}, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
this.updateTaskByID(parseInt(e.target.id), response.data)
this.handleSuccess({message: 'The task was successfully ' + (e.target.checked ? 'un-' :'') + 'marked as done.'})
cancel() // To not set the spinner to loading when the request is made in less than 100ms, would lead to loading infinitly.
})
.catch(e => {
this.handleError(e)
cancel
})
},
editTask(id) {
@ -288,7 +291,7 @@
this.isTaskEdit = true
},
editTaskSubmit() {
this.loading = true
const cancel = message.setLoading(this)
// Convert the date in a unix timestamp
let duedate = (+ new Date(this.taskEditTask.dueDate)) / 1000
@ -335,9 +338,11 @@
// Also update the current taskedit object so the ui changes
this.$set(this, 'taskEditTask', response.data)
this.handleSuccess({message: 'The task was successfully updated.'})
cancel() // cancel the timers
})
.catch(e => {
this.handleError(e)
cancel()
})
},
updateTaskByID(id, updatedTask) {
@ -395,11 +400,9 @@
return dates
},
handleError(e) {
this.loading = false
message.error(e, this)
},
handleSuccess(e) {
this.loading = false
message.success(e, this)
}
}