From 74455b058a01ee0df0e3395b65fc801d05074a5b Mon Sep 17 00:00:00 2001 From: konrad Date: Tue, 27 Nov 2018 10:23:50 +0000 Subject: [PATCH] Delay loading animation (#8) --- src/components/Home.vue | 6 ++++-- src/components/lists/EditList.vue | 13 +++++++----- src/components/lists/NewList.vue | 6 +++--- src/components/lists/ShowList.vue | 21 +++++++++++-------- src/components/namespaces/EditNamespace.vue | 16 ++++++++------ src/components/namespaces/NewNamespace.vue | 6 +++--- src/components/sharing/team.vue | 15 ++++++++++--- src/components/sharing/user.vue | 22 ++++++++++++++------ src/components/teams/EditTeam.vue | 19 ++++++++++++----- src/components/teams/ListTeams.vue | 5 ++--- src/components/teams/NewTeam.vue | 6 +++--- src/components/user/Login.vue | 7 ++++--- src/components/user/PasswordReset.vue | 9 ++++---- src/components/user/RequestPasswordReset.vue | 7 ++++--- src/message/index.js | 12 +++++++++++ 15 files changed, 112 insertions(+), 58 deletions(-) diff --git a/src/components/Home.vue b/src/components/Home.vue index 3802ac0d..708e3c35 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -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) } }, diff --git a/src/components/lists/EditList.vue b/src/components/lists/EditList.vue index d7825eeb..7801c693 100644 --- a/src/components/lists/EditList.vue +++ b/src/components/lists/EditList.vue @@ -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) } } diff --git a/src/components/lists/NewList.vue b/src/components/lists/NewList.vue index 909adbd4..0d2bb3d7 100644 --- a/src/components/lists/NewList.vue +++ b/src/components/lists/NewList.vue @@ -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) } } diff --git a/src/components/lists/ShowList.vue b/src/components/lists/ShowList.vue index 6ea6d44e..80034569 100644 --- a/src/components/lists/ShowList.vue +++ b/src/components/lists/ShowList.vue @@ -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) } } diff --git a/src/components/namespaces/EditNamespace.vue b/src/components/namespaces/EditNamespace.vue index 68ab4cf0..ff241f00 100644 --- a/src/components/namespaces/EditNamespace.vue +++ b/src/components/namespaces/EditNamespace.vue @@ -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.'}) - router.push({name: 'home'}) + 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) } } diff --git a/src/components/namespaces/NewNamespace.vue b/src/components/namespaces/NewNamespace.vue index 7f523fd8..abc69933 100644 --- a/src/components/namespaces/NewNamespace.vue +++ b/src/components/namespaces/NewNamespace.vue @@ -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) } } diff --git a/src/components/sharing/team.vue b/src/components/sharing/team.vue index 2f36c615..6b43370f 100644 --- a/src/components/sharing/team.vue +++ b/src/components/sharing/team.vue @@ -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) } }, diff --git a/src/components/sharing/user.vue b/src/components/sharing/user.vue index c96c3f46..8fc5ca30 100644 --- a/src/components/sharing/user.vue +++ b/src/components/sharing/user.vue @@ -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) } }, diff --git a/src/components/teams/EditTeam.vue b/src/components/teams/EditTeam.vue index d560bd2f..02aa3f15 100644 --- a/src/components/teams/EditTeam.vue +++ b/src/components/teams/EditTeam.vue @@ -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) } } diff --git a/src/components/teams/ListTeams.vue b/src/components/teams/ListTeams.vue index c6cf2c1b..8d9fe742 100644 --- a/src/components/teams/ListTeams.vue +++ b/src/components/teams/ListTeams.vue @@ -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) }, } diff --git a/src/components/teams/NewTeam.vue b/src/components/teams/NewTeam.vue index ce29c045..25aea6b5 100644 --- a/src/components/teams/NewTeam.vue +++ b/src/components/teams/NewTeam.vue @@ -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) } } diff --git a/src/components/user/Login.vue b/src/components/user/Login.vue index db80c23f..ce354f5e 100644 --- a/src/components/user/Login.vue +++ b/src/components/user/Login.vue @@ -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 }) } diff --git a/src/components/user/PasswordReset.vue b/src/components/user/PasswordReset.vue index c42a5ca7..735b7a57 100644 --- a/src/components/user/PasswordReset.vue +++ b/src/components/user/PasswordReset.vue @@ -38,6 +38,7 @@