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 <rohit.yadav@shapeblue.com>

ui/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) {