local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki 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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Home.vue
View file

@ -57,14 +57,17 @@
auth.logout()
},
loadPendingTasks() {
this.loading = true
const cancel = message.setLoading(this)
HTTP.get(`tasks`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
this.tasks = response.data
this.tasks.sort(this.sortyByDeadline)
cancel()
this.loading = false
})
.catch(e => {
cancel()
this.loading = false
this.handleError(e)
})
},
@ -78,7 +81,6 @@
router.push({name: 'showList', params: {id: lid}})
},
handleError(e) {
this.loading = false
message.error(e, this)
}
},

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)
}
}

14
src/components/namespaces/EditNamespace.vue
View file

@ -97,7 +97,7 @@
},
methods: {
loadNamespace() {
this.loading = true
const cancel = message.setLoading(this)
HTTP.get(`namespaces/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
@ -105,14 +105,15 @@
if (response.data.owner.id === this.user.infos.id) {
this.userIsAdmin = true
}
this.loading = false
cancel()
})
.catch(e => {
this.handleError(e)
cancel()
})
},
submit() {
this.loading = true
const cancel = message.setLoading(this)
HTTP.post(`namespaces/` + this.$route.params.id, this.namespace, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
@ -124,27 +125,30 @@
}
}
this.handleSuccess({message: 'The namespace was successfully updated.'})
cancel()
})
.catch(e => {
this.handleError(e)
cancel()
})
},
deleteNamespace() {
const cancel = message.setLoading(this)
HTTP.delete(`namespaces/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(() => {
this.handleSuccess({message: 'The namespace 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/namespaces/NewNamespace.vue
View file

@ -45,23 +45,23 @@
},
methods: {
newNamespace() {
this.loading = true
const cancel = message.setLoading(this)
HTTP.put(`namespaces`, this.namespace, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(() => {
this.$parent.loadNamespaces()
this.handleSuccess({message: 'The namespace 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)
}
}

15
src/components/sharing/team.vue
View file

@ -121,27 +121,33 @@
},
methods: {
loadTeams() {
const cancel = message.setLoading(this)
HTTP.get(this.typeString + `s/` + this.id + `/teams`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
this.$set(this, 'listTeams', response.data)
this.loading = false
cancel()
})
.catch(e => {
this.handleError(e)
cancel()
})
},
deleteTeam() {
const cancel = message.setLoading(this)
HTTP.delete(this.typeString + `s/` + this.id + `/teams/` + this.teamToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(() => {
this.showTeamDeleteModal = false;
this.handleSuccess({message: 'The team was successfully deleted from the ' + this.typeString + '.'})
this.loadTeams()
cancel()
})
.catch(e => {
this.handleError(e)
cancel()
})
},
addTeam(admin) {
const cancel = message.setLoading(this)
if(admin === null) {
admin = false
}
@ -154,12 +160,15 @@
.then(() => {
this.loadTeams()
this.handleSuccess({message: 'The team was successfully added.'})
cancel()
})
.catch(e => {
this.handleError(e)
cancel()
})
},
toggleTeamType(teamid, current) {
const cancel = message.setLoading(this)
let right = 0
if (!current) {
right = 2
@ -169,17 +178,17 @@
.then(() => {
this.loadTeams()
this.handleSuccess({message: 'The team right was successfully updated.'})
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)
}
},

22
src/components/sharing/user.vue
View file

@ -142,28 +142,34 @@
},
methods: {
loadUsers() {
const cancel = message.setLoading(this)
HTTP.get(this.typeString + `s/` + this.id + `/users`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
//response.data.push(this.list.owner)
this.$set(this, 'users', response.data)
this.loading = false
cancel()
})
.catch(e => {
this.handleError(e)
cancel()
})
},
deleteUser() {
const cancel = message.setLoading(this)
HTTP.delete(this.typeString + `s/` + this.id + `/users/` + this.userToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(() => {
this.showUserDeleteModal = false;
this.handleSuccess({message: 'The user was successfully deleted from the ' + this.typeString + '.'})
this.loadUsers()
cancel()
})
.catch(e => {
this.handleError(e)
cancel()
})
},
addUser(admin) {
const cancel = message.setLoading(this)
if(admin === null) {
admin = false
}
@ -179,12 +185,15 @@
this.loadUsers()
this.newUser = {}
this.handleSuccess({message: 'The user was successfully added.'})
cancel()
})
.catch(e => {
this.handleError(e)
cancel()
})
},
toggleUserType(userid, current) {
const cancel = message.setLoading(this)
let right = 0
if (!current) {
right = 2
@ -194,16 +203,18 @@
.then(() => {
this.loadUsers()
this.handleSuccess({message: 'The user right was successfully updated.'})
cancel()
})
.catch(e => {
this.handleError(e)
cancel()
})
},
findUsers(query) {
this.loading = true;
const cancel = message.setLoading(this)
if(query === '') {
this.$set(this, 'foundUsers', [])
this.loading = false
cancel()
return
}
@ -220,10 +231,11 @@
})
}
this.loading = false
cancel()
})
.catch(e => {
this.handleError(e)
cancel()
})
},
clearAll () {
@ -233,11 +245,9 @@
return `and ${count} others`
},
handleError(e) {
this.loading = false
message.error(e, this)
},
handleSuccess(e) {
this.loading = false
message.success(e, this)
}
},

19
src/components/teams/EditTeam.vue
View file

@ -170,7 +170,7 @@
},
methods: {
loadTeam() {
this.loading = true
const cancel = message.setLoading(this)
HTTP.get(`teams/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
@ -181,14 +181,14 @@
this.userIsAdmin = true
}
}
this.loading = false
cancel()
})
.catch(e => {
this.handleError(e)
})
},
submit() {
this.loading = true
const cancel = message.setLoading(this)
HTTP.post(`teams/` + this.$route.params.id, this.team, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
@ -200,33 +200,42 @@
}
}
this.handleSuccess({message: 'The team was successfully updated.'})
cancel()
})
.catch(e => {
this.handleError(e)
cancel()
})
},
deleteTeam() {
const cancel = message.setLoading(this)
HTTP.delete(`teams/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(() => {
this.handleSuccess({message: 'The team was successfully deleted.'})
cancel()
router.push({name: 'home'})
})
.catch(e => {
cancel()
this.handleError(e)
})
},
deleteUser() {
const cancel = message.setLoading(this)
HTTP.delete(`teams/` + this.$route.params.id + `/members/` + this.userToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(() => {
this.showUserDeleteModal = false;
this.handleSuccess({message: 'The user was successfully deleted from the team.'})
this.loadTeam()
cancel()
})
.catch(e => {
cancel()
this.handleError(e)
})
},
addUser(admin) {
const cancel = message.setLoading(this)
if(admin === null) {
admin = false
}
@ -234,9 +243,11 @@
.then(() => {
this.loadTeam()
this.handleSuccess({message: 'The team member was successfully added.'})
cancel()
})
.catch(e => {
this.handleError(e)
cancel()
})
},
toggleUserType(userid, current) {
@ -246,11 +257,9 @@
this.addUser(!current)
},
handleError(e) {
this.loading = false
message.error(e, this)
},
handleSuccess(e) {
this.loading = false
message.success(e, this)
}
}

5
src/components/teams/ListTeams.vue
View file

@ -40,19 +40,18 @@
},
methods: {
loadTeams() {
this.loading = true
const cancel = message.setLoading(this)
HTTP.get(`teams`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
this.$set(this, 'teams', response.data)
this.loading = false
cancel()
})
.catch(e => {
this.handleError(e)
})
},
handleError(e) {
this.loading = false
message.error(e, this)
},
}

6
src/components/teams/NewTeam.vue
View file

@ -45,23 +45,23 @@
},
methods: {
newTeam() {
this.loading = true
const cancel = message.setLoading(this)
HTTP.put(`teams`, this.team, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
router.push({name:'editTeam', params:{id: response.data.id}})
this.handleSuccess({message: 'The team was successfully created.'})
cancel()
})
.catch(e => {
cancel()
this.handleError(e)
})
},
handleError(e) {
this.loading = false
message.error(e, this)
},
handleSuccess(e) {
this.loading = false
message.success(e, this)
}
}

7
src/components/user/Login.vue
View file

@ -36,6 +36,7 @@
import auth from '../../auth'
import router from '../../router'
import {HTTP} from '../../http-common'
import message from '../../message'
export default {
data() {
@ -53,15 +54,15 @@
// Try to verify the email
let emailVerifyToken = localStorage.getItem('emailConfirmToken')
if (emailVerifyToken) {
this.loading = true
const cancel = message.setLoading(this)
HTTP.post(`user/confirm`, {token: emailVerifyToken})
.then(() => {
localStorage.removeItem('emailConfirmToken')
this.loading = false
this.confirmedEmailSuccess = true
cancel()
})
.catch(e => {
this.loading = false
cancel()
this.error = e.response.data.message
})
}

9
src/components/user/PasswordReset.vue
View file

@ -38,6 +38,7 @@
<script>
import {HTTP} from '../../http-common'
import message from '../../message'
export default {
data() {
@ -53,11 +54,11 @@
},
methods: {
submit() {
this.loading = true
const cancel = message.setLoading(this)
this.error = ''
if (this.credentials.password2 !== this.credentials.password) {
this.loading = false
cancel()
this.error = 'Passwords don\'t match'
return
}
@ -71,17 +72,17 @@
.then(response => {
this.handleSuccess(response)
localStorage.removeItem('passwordResetToken')
cancel()
})
.catch(e => {
this.error = e.response.data.message
cancel()
})
},
handleError(e) {
this.loading = false
this.error = e.response.data.message
},
handleSuccess(e) {
this.loading = false
this.successMessage = e.data.message
}
}

7
src/components/user/RequestPasswordReset.vue
View file

@ -31,6 +31,7 @@
<script>
import {HTTP} from '../../http-common'
import message from '../../message'
export default {
data() {
@ -43,7 +44,7 @@
},
methods: {
submit() {
this.loading = true
const cancel = message.setLoading(this)
this.error = ''
let credentials = {
user_name: this.username,
@ -51,15 +52,15 @@
HTTP.post(`user/password/token`, credentials)
.then(() => {
this.loading = false
cancel()
this.isSuccess = true
})
.catch(e => {
cancel()
this.handleError(e)
})
},
handleError(e) {
this.loading = false
this.error = e.response.data.message
},
}

12
src/message/index.js
View file

@ -1,4 +1,12 @@
export default {
setLoading(context) {
const timeout = setTimeout(function () {
context.loading = true
}, 100);
return () => {
clearTimeout(timeout);
};
},
error(e, context) {
// Build the notification text from error response
let err = e.message
@ -12,6 +20,8 @@ export default {
title: 'Error',
text: err
})
context.loading = false
},
success(e, context) {
// Build the notification text from error response
@ -26,6 +36,8 @@ export default {
title: 'Success',
text: err
})
context.loading = false
},
}