fix incorrect style when switch pages but some error occurs

src/mobile-main.js

@@ -299,6 +299,24 @@ Vue.prototype.$showLoading = function (delayConditionFunc, delayMills) {
 Vue.prototype.$hideLoading = function () {
     return this.$f7.preloader.hide();
 };
+Vue.prototype.$routeBackOnError = function (errorPropertyName) {
+    const self = this;
+    const router = self.$f7router;
+
+    const unwatch = self.$watch(errorPropertyName, () => {
+        if (self[errorPropertyName]) {
+            setTimeout(() => {
+                if (unwatch) {
+                    unwatch();
+                }
+
+                router.back();
+            }, 200);
+        }
+    }, {
+        immediate: true
+    });
+};
 
 Vue.prototype.$user = userstate;
 

src/views/mobile/accounts/Edit.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-page>
+    <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title :title="$t(title)"></f7-nav-title>
@@ -320,6 +320,7 @@ export default {
         return {
             editAccountId: null,
             loading: false,
+            loadingError: null,
             account: {
                 category: 1,
                 type: self.$constants.account.allAccountTypes.SingleAccount,
@@ -384,7 +385,6 @@ export default {
     created() {
         const self = this;
         const query = self.$f7route.query;
-        const router = self.$f7router;
 
         if (query.id) {
             self.loading = true;
@@ -430,11 +430,11 @@ export default {
 
                 self.loading = false;
             }).catch(error => {
-                self.loading = false;
+                if (error.processed) {
-
+                    self.loading = false;
-                if (!error.processed) {
+                } else {
+                    self.loadingError = error;
                     self.$toast(error.message || error);
-                    router.back();
                 }
             });
         } else {
@@ -445,6 +445,9 @@ export default {
         this.autoChangeCommentTextareaSize();
     },
     methods: {
+        onPageAfterIn() {
+            this.$routeBackOnError('loadingError');
+        },
         addSubAccount() {
             const self = this;
 

src/views/mobile/accounts/List.vue

@@ -207,6 +207,7 @@ export default {
     data() {
         return {
             loading: true,
+            loadingError: null,
             showHidden: false,
             sortable: false,
             accountToDelete: null,
@@ -330,7 +331,6 @@ export default {
     },
     created() {
         const self = this;
-        const router = self.$f7router;
 
         self.loading = true;
 
@@ -339,11 +339,11 @@ export default {
         }).then(() => {
             self.loading = false;
         }).catch(error => {
-            self.loading = false;
+            if (error.processed) {
-
+                self.loading = false;
-            if (!error.processed) {
+            } else {
+                self.loadingError = error;
                 self.$toast(error.message || error);
-                router.back();
             }
         });
     },
@@ -352,6 +352,8 @@ export default {
             if (this.$store.state.accountListStateInvalid && !this.loading) {
                 this.reload(null);
             }
+
+            this.$routeBackOnError('loadingError');
         },
         reload(done) {
             if (this.sortable) {

src/views/mobile/categories/All.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-page ptr @ptr:refresh="reload">
+    <f7-page ptr @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar :title="$t('Transaction Categories')" :back-link="$t('Back')"></f7-navbar>
 
         <f7-card class="skeleton-text" v-if="loading">
@@ -29,12 +29,12 @@
 export default {
     data() {
         return {
-            loading: true
+            loading: true,
+            loadingError: null
         };
     },
     created() {
         const self = this;
-        const router = self.$f7router;
 
         self.loading = true;
 
@@ -43,15 +43,18 @@ export default {
         }).then(() => {
             self.loading = false;
         }).catch(error => {
-            self.logining = false;
+            if (error.processed) {
-
+                self.loading = false;
-            if (!error.processed) {
+            } else {
+                self.loadingError = error;
                 self.$toast(error.message || error);
-                router.back();
             }
         });
     },
     methods: {
+        onPageAfterIn() {
+            this.$routeBackOnError('loadingError');
+        },
         reload(done) {
             const self = this;
 

src/views/mobile/categories/Edit.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-page>
+    <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title :title="$t(title)"></f7-nav-title>
@@ -87,6 +87,7 @@ export default {
         return {
             editCategoryId: null,
             loading: false,
+            loadingError: null,
             category: {
                 type: parseInt(query.type),
                 name: '',
@@ -140,11 +141,10 @@ export default {
     created() {
         const self = this;
         const query = self.$f7route.query;
-        const router = self.$f7router;
 
         if (!query.id && !query.parentId) {
             self.$toast('Parameter Invalid');
-            router.back();
+            self.loadingError = 'Parameter Invalid';
             return;
         }
 
@@ -166,11 +166,11 @@ export default {
 
                 self.loading = false;
             }).catch(error => {
-                self.loading = false;
+                if (error.processed) {
-
+                    self.loading = false;
-                if (!error.processed) {
+                } else {
+                    self.loadingError = error;
                     self.$toast(error.message || error);
-                    router.back();
                 }
             });
         } else if (query.parentId) {
@@ -180,7 +180,7 @@ export default {
                 categoryType !== this.$constants.category.allCategoryTypes.Expense &&
                 categoryType !== this.$constants.category.allCategoryTypes.Transfer) {
                 self.$toast('Parameter Invalid');
-                router.back();
+                self.loadingError = 'Parameter Invalid';
                 return;
             }
 
@@ -191,6 +191,9 @@ export default {
         this.autoChangeCommentTextareaSize();
     },
     methods: {
+        onPageAfterIn() {
+            this.$routeBackOnError('loadingError');
+        },
         save() {
             const self = this;
             const router = self.$f7router;

src/views/mobile/categories/List.vue

@@ -97,6 +97,7 @@ export default {
             categoryType: 0,
             categoryId: '',
             loading: true,
+            loadingError: null,
             showHidden: false,
             sortable: false,
             categoryToDelete: null,
@@ -166,7 +167,6 @@ export default {
     created() {
         const self = this;
         const query = self.$f7route.query;
-        const router = self.$f7router;
 
         self.categoryType = parseInt(query.type);
 
@@ -174,7 +174,7 @@ export default {
             self.categoryType !== this.$constants.category.allCategoryTypes.Expense &&
             self.categoryType !== this.$constants.category.allCategoryTypes.Transfer) {
             self.$toast('Parameter Invalid');
-            router.back();
+            self.loadingError = 'Parameter Invalid';
             return;
         }
 
@@ -193,11 +193,11 @@ export default {
         }).then(() => {
             self.loading = false;
         }).catch(error => {
-            self.logining = false;
+            if (error.processed) {
-
+                self.loading = false;
-            if (!error.processed) {
+            } else {
+                self.loadingError = error;
                 self.$toast(error.message || error);
-                router.back();
             }
         });
     },
@@ -206,6 +206,8 @@ export default {
             if (this.$store.state.transactionCategoryListStateInvalid && !this.loading) {
                 this.reload(null);
             }
+
+            this.$routeBackOnError('loadingError');
         },
         reload(done) {
             if (this.sortable) {

src/views/mobile/categories/Preset.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-page>
+    <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title :title="$t('Default Categories')"></f7-nav-title>
@@ -67,6 +67,7 @@ export default {
         const self = this;
 
         return {
+            loadingError: null,
             currentLocale: self.$i18n.locale,
             categoryType: 0,
             allCategories: [],
@@ -83,7 +84,6 @@ export default {
     created() {
         const self = this;
         const query = self.$f7route.query;
-        const router = self.$f7router;
 
         self.categoryType = parseInt(query.type);
 
@@ -92,7 +92,7 @@ export default {
             self.categoryType !== this.$constants.category.allCategoryTypes.Expense &&
             self.categoryType !== this.$constants.category.allCategoryTypes.Transfer) {
             self.$toast('Parameter Invalid');
-            router.back();
+            self.loadingError = 'Parameter Invalid';
             return;
         }
 
@@ -111,6 +111,9 @@ export default {
         }
     },
     methods: {
+        onPageAfterIn() {
+            this.$routeBackOnError('loadingError');
+        },
         getDefaultCategories(categoryType) {
             switch (categoryType) {
                 case this.$constants.category.allCategoryTypes.Income:

src/views/mobile/statistics/AccountFilterSettings.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-page>
+    <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title :title="$t(title)"></f7-nav-title>
@@ -121,6 +121,7 @@ export default {
 
         return {
             loading: true,
+            loadingError: null,
             modifyDefault: false,
             filterAccountIds: {},
             collapseStates: self.getCollapseStates(),
@@ -145,7 +146,6 @@ export default {
     created() {
         const self = this;
         const query = self.$f7route.query;
-        const router = self.$f7router;
 
         self.modifyDefault = !!query.modifyDefault;
 
@@ -171,15 +171,18 @@ export default {
                 self.filterAccountIds = self.$utilities.copyObjectTo(self.$store.state.transactionStatisticsFilter.filterAccountIds, allAccountIds);
             }
         }).catch(error => {
-            self.logining = false;
+            if (error.processed) {
-
+                self.loading = false;
-            if (!error.processed) {
+            } else {
+                self.loadingError = error;
                 self.$toast(error.message || error);
-                router.back();
             }
         });
     },
     methods: {
+        onPageAfterIn() {
+            this.$routeBackOnError('loadingError');
+        },
         save() {
             const self = this;
             const router = self.$f7router;

src/views/mobile/statistics/CategoryFilterSettings.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-page>
+    <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title :title="$t(title)"></f7-nav-title>
@@ -123,6 +123,7 @@ export default {
 
         return {
             loading: true,
+            loadingError: null,
             modifyDefault: false,
             filterCategoryIds: {},
             collapseStates: self.getCollapseStates(),
@@ -144,7 +145,6 @@ export default {
     created() {
         const self = this;
         const query = self.$f7route.query;
-        const router = self.$f7router;
 
         self.modifyDefault = !!query.modifyDefault;
 
@@ -170,15 +170,18 @@ export default {
                 self.filterCategoryIds = self.$utilities.copyObjectTo(self.$store.state.transactionStatisticsFilter.filterCategoryIds, allCategoryIds);
             }
         }).catch(error => {
-            self.logining = false;
+            if (error.processed) {
-
+                self.loading = false;
-            if (!error.processed) {
+            } else {
+                self.loadingError = error;
                 self.$toast(error.message || error);
-                router.back();
             }
         });
     },
     methods: {
+        onPageAfterIn() {
+            this.$routeBackOnError('loadingError');
+        },
         save() {
             const self = this;
             const router = self.$f7router;

src/views/mobile/statistics/Transaction.vue

@@ -253,6 +253,7 @@ export default {
 
         return {
             loading: true,
+            loadingError: null,
             sortBy: self.$settings.getStatisticsSortingType(),
             showChartDataTypePopover: false,
             showDatePopover: false,
@@ -374,7 +375,6 @@ export default {
     },
     created() {
         const self = this;
-        const router = self.$f7router;
 
         let defaultChartType = self.$settings.getStatisticsDefaultChartType();
 
@@ -416,11 +416,11 @@ export default {
         }).then(() => {
             self.loading = false;
         }).catch(error => {
-            self.loading = false;
+            if (error.processed) {
-
+                self.loading = false;
-            if (!error.processed) {
+            } else {
+                self.loadingError = error;
                 self.$toast(error.message || error);
-                router.back();
             }
         });
     },
@@ -433,6 +433,8 @@ export default {
             if (this.$store.state.transactionStatisticsStateInvalid && !this.loading) {
                 this.reload(null);
             }
+
+            this.$routeBackOnError('loadingError');
         },
         reload(done) {
             const self = this;

src/views/mobile/tags/List.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-page :ptr="!sortable && !hasEditingTag" @ptr:refresh="reload">
+    <f7-page :ptr="!sortable && !hasEditingTag" @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title :title="$t('Transaction Tags')"></f7-nav-title>
@@ -168,6 +168,7 @@ export default {
                 name: ''
             },
             loading: true,
+            loadingError: null,
             showHidden: false,
             sortable: false,
             tagToDelete: null,
@@ -197,7 +198,6 @@ export default {
     },
     created() {
         const self = this;
-        const router = self.$f7router;
 
         self.loading = true;
 
@@ -206,15 +206,18 @@ export default {
         }).then(() => {
             self.loading = false;
         }).catch(error => {
-            self.loading = false;
+            if (error.processed) {
-
+                self.loading = false;
-            if (!error.processed) {
+            } else {
+                self.loadingError = error;
                 self.$toast(error.message || error);
-                router.back();
             }
         });
     },
     methods: {
+        onPageAfterIn() {
+            this.$routeBackOnError('loadingError');
+        },
         reload(done) {
             if (this.sortable || this.hasEditingTag) {
                 done();

src/views/mobile/transactions/Edit.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-page>
+    <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title :title="$t(title)"></f7-nav-title>
@@ -273,6 +273,7 @@ export default {
                 comment: ''
             },
             loading: true,
+            loadingError: null,
             submitting: false,
             showAccountBalance: self.$settings.isShowAccountBalance(),
             showSourceAmountSheet: false,
@@ -494,7 +495,6 @@ export default {
     created() {
         const self = this;
         const query = self.$f7route.query;
-        const router = self.$f7router;
 
         if (self.$f7route.path === '/transaction/edit') {
             self.mode = 'edit';
@@ -527,7 +527,7 @@ export default {
         Promise.all(promises).then(function (responses) {
             if (query.id && !responses[3]) {
                 self.$toast('Unable to get transaction');
-                router.back();
+                self.loadingError = 'Unable to get transaction';
                 return;
             }
 
@@ -626,9 +626,11 @@ export default {
         }).catch(error => {
             self.$logger.error('failed to load essential data for editing transaction', error);
 
-            if (!error.processed) {
+            if (error.processed) {
+                self.loading = false;
+            } else {
+                self.loadingError = error;
                 self.$toast(error.message || error);
-                router.back();
             }
         });
     },
@@ -636,6 +638,9 @@ export default {
         this.autoChangeCommentTextareaSize();
     },
     methods: {
+        onPageAfterIn() {
+            this.$routeBackOnError('loadingError');
+        },
         save() {
             const self = this;
             const router = self.$f7router;

src/views/mobile/transactions/List.vue

@@ -379,6 +379,7 @@ export default {
     data() {
         return {
             loading: true,
+            loadingError: null,
             loadingMore: false,
             transactionToDelete: null,
             showDatePopover: false,
@@ -473,10 +474,11 @@ export default {
             if (this.$store.state.transactionListStateInvalid && !this.loading) {
                 this.reload(null);
             }
+
+            this.$routeBackOnError('loadingError');
         },
         reload(done) {
             const self = this;
-            const router = self.$f7router;
 
             if (!done) {
                 self.loading = true;
@@ -498,18 +500,20 @@ export default {
 
                 self.loading = false;
             }).catch(error => {
-                self.loading = false;
+                if (error.processed || done) {
+                    self.loading = false;
+                }
 
                 if (done) {
                     done();
                 }
 
                 if (!error.processed) {
-                    self.$toast(error.message || error);
-
                     if (!done) {
-                        router.back();
+                        self.loadingError = error;
                     }
+
+                    self.$toast(error.message || error);
                 }
             });
         },

src/views/mobile/users/SessionList.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-page ptr @ptr:refresh="reload">
+    <f7-page ptr @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title :title="$t('Device & Sessions')"></f7-nav-title>
@@ -47,12 +47,12 @@ export default {
     data() {
         return {
             tokens: [],
-            loading: true
+            loading: true,
+            loadingError: null
         };
     },
     created() {
         const self = this;
-        const router = self.$f7router;
 
         self.loading = true;
 
@@ -60,15 +60,18 @@ export default {
             self.tokens = tokens;
             self.loading = false;
         }).catch(error => {
-            self.loading = false;
+            if (error.processed) {
-
+                self.loading = false;
-            if (!error.processed) {
+            } else {
+                self.loadingError = error;
                 self.$toast(error.message || error);
-                router.back();
             }
         });
     },
     methods: {
+        onPageAfterIn() {
+            this.$routeBackOnError('loadingError');
+        },
         reload(done) {
             const self = this;
 

src/views/mobile/users/TwoFactorAuth.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-page>
+    <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar :title="$t('Two-Factor Authentication')" :back-link="$t('Back')"></f7-navbar>
 
         <f7-card class="skeleton-text" v-if="loading">
@@ -80,6 +80,7 @@ export default {
         return {
             status: null,
             loading: true,
+            loadingError: null,
             new2FASecret: '',
             new2FAQRCode: '',
             currentPasscodeForEnable: '',
@@ -98,7 +99,6 @@ export default {
     },
     created() {
         const self = this;
-        const router = self.$f7router;
 
         self.loading = true;
 
@@ -106,15 +106,18 @@ export default {
             self.status = response.enable;
             self.loading = false;
         }).catch(error => {
-            self.loading = false;
+            if (error.processed) {
-
+                self.loading = false;
-            if (!error.processed) {
+            } else {
+                self.loadingError = error;
                 self.$toast(error.message || error);
-                router.back();
             }
         });
     },
     methods: {
+        onPageAfterIn() {
+            this.$routeBackOnError('loadingError');
+        },
         enable() {
             const self = this;
 

src/views/mobile/users/UserProfile.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-page>
+    <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title :title="$t('User Profile')"></f7-nav-title>
@@ -122,6 +122,7 @@ export default {
             },
             currentPassword: '',
             loading: true,
+            loadingError: null,
             saving: false,
             showInputPasswordSheet: false
         };
@@ -172,7 +173,6 @@ export default {
     },
     created() {
         const self = this;
-        const router = self.$f7router;
 
         self.loading = true;
 
@@ -189,15 +189,18 @@ export default {
 
             self.loading = false;
         }).catch(error => {
-            self.loading = false;
+            if (error.processed) {
-
+                self.loading = false;
-            if (!error.processed) {
+            } else {
+                self.loadingError = error;
                 self.$toast(error.message || error);
-                router.back();
             }
         });
     },
     methods: {
+        onPageAfterIn() {
+            this.$routeBackOnError('loadingError');
+        },
         save() {
             const self = this;
             const router = self.$f7router;