[cloudstack-primate] 02/02: autogenview: fix duplicate API calls issue while navigating view

[ro...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

rohit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cloudstack-primate.git

commit 19a3b025096749c36a660a1a41230ad4d5de4b42
Author: Rohit Yadav <ro...@shapeblue.com>
AuthorDate: Mon Feb 10 14:57:31 2020 +0530

    autogenview: fix duplicate API calls issue while navigating view
    
    The route config creates two groups of section components one for each
    related paths that are cache and reused. Once these two groups of
    components are mounted, on route change fetchData() is called twice
    by two of such cached components beloning to two groups of paths.
    
    This commit fixes this issue by using logical XOR to identify the
    current component against related `to` route and the path the component
    was in and only calls fetchData if `to` route and currentPath are of
    the same group of routes.
    
    Signed-off-by: Rohit Yadav <ro...@shapeblue.com>
---
 src/views/AutogenView.vue | 32 +++++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index 5baedfa..856eba6 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -308,14 +308,39 @@ export default {
       return this.selectedRowKeys.length > 0
     }
   },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
   mounted () {
+    this.currentPath = this.$route.fullPath
     this.fetchData()
   },
+  beforeRouteUpdate (to, from, next) {
+    this.currentPath = this.$route.fullPath
+    next()
+  },
+  beforeRouteLeave (to, from, next) {
+    this.currentPath = this.$route.fullPath
+    next()
+  },
   watch: {
     '$route' (to, from) {
-      if (to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) {
-        this.page = 1
+      // The route config creates two groups of section components one for each
+      // related paths. Once these two groups of components are mounted, on
+      // route changes this method is called twice causing multiple API calls.
+      // The following fixes this issue by using logical XOR to identify the
+      // current component against related `to` route and the path the component
+      // was in and only calls fetchData if `to` route and currentPath are of
+      // the same group of routes.
+
+      const related = ['/project', '/event', '/dashboard']
+      const toPath = related.map(o => to.fullPath.includes(o)).includes(true)
+      const inPath = related.map(o => this.currentPath.includes(o)).includes(true)
+      this.needToFetchData = ((toPath ^ inPath) === 0)
+      if (this.needToFetchData && to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) {
         this.searchQuery = ''
+        this.page = 1
+        this.itemCount = 0
         this.fetchData()
       }
     },
@@ -325,9 +350,6 @@ export default {
       }
     }
   },
-  beforeCreate () {
-    this.form = this.$form.createForm(this)
-  },
   methods: {
     fetchData () {
       if (this.routeName !== this.$route.name) {