Merge pull request #275 from ymaheshwari1/fix/routes

Fixed: routing in the app to use the tabs/ pattern when using ion-tab-bar
hotwax · Apr 19, 2024 · a856a05 · a856a05
2 parents 15b334f + 5361741
commit a856a05
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 45 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -4,21 +4,15 @@
       <ion-content>
         <ion-router-outlet />
       </ion-content>
-      <ion-footer v-if="showFooter">
-        <ion-toolbar>
-          <tab-bar />
-        </ion-toolbar>
-      </ion-footer>
     </ion-page>
   </ion-app>
 </template>
 
 <script lang="ts">
-import { IonApp, IonRouterOutlet, IonPage, IonFooter, IonToolbar, IonContent } from '@ionic/vue';
+import { IonApp, IonRouterOutlet, IonPage, IonContent } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { loadingController } from '@ionic/vue';
 import emitter from "@/event-bus"
-import TabBar from "./components/TabBar.vue"
 import { mapGetters, useStore } from 'vuex';
 import { initialise, resetConfig } from '@/adapter'
 import { useRouter } from 'vue-router';
@@ -30,9 +24,6 @@ export default defineComponent({
     IonApp,
     IonRouterOutlet,
     IonPage,
-    IonFooter,
-    IonToolbar,
-    TabBar,
     IonContent
   },
   data() {
@@ -106,10 +97,6 @@ export default defineComponent({
     resetConfig()
   },
   computed: {
-    showFooter () {
-      if (['/settings', '/search', '/upload'].includes(this.$route.path)) return true
-      return false
-    },
     ...mapGetters({
       userToken: 'user/getUserToken',
       instanceUrl: 'user/getInstanceUrl',

diff --git a/src/components/TabBar.vue b/src/components/TabBar.vue
@@ -3,15 +3,15 @@
     <ion-tabs>
       <ion-router-outlet></ion-router-outlet>
       <ion-tab-bar slot="bottom" ref="tabs">
-        <ion-tab-button v-if="hasPermission(Actions.APP_SEARCH_VIEW)" tab="search" href="/search">
+        <ion-tab-button v-if="hasPermission(Actions.APP_SEARCH_VIEW)" tab="search" href="/tabs/search">
           <ion-icon :icon="search" />
           <ion-label>{{ $t("Search") }}</ion-label>
         </ion-tab-button>
-        <ion-tab-button v-if="hasPermission(Actions.APP_UPLOAD_VIEW)" tab="upload" href="/upload">
+        <ion-tab-button v-if="hasPermission(Actions.APP_UPLOAD_VIEW)" tab="upload" href="/tabs/upload">
           <ion-icon :icon="cloudUpload" />
           <ion-label>{{ $t("Upload") }}</ion-label>
         </ion-tab-button>
-        <ion-tab-button tab="settings" href="/settings">
+        <ion-tab-button tab="settings" href="/tabs/settings">
           <ion-icon :icon="settings" />
           <ion-label>{{ $t("Settings") }}</ion-label>
         </ion-tab-button>

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -1,13 +1,11 @@
 import { createRouter, createWebHistory } from "@ionic/vue-router";
 import { RouteRecordRaw } from "vue-router";
-import Upload from "@/views/Upload.vue";
-import Settings from "@/views/Settings.vue";
 import store from "@/store";
-import Search from "@/views/Search.vue";
 import Count from "@/views/count.vue";
 import { hasPermission } from '@/authorization';
 import { showToast } from '@/utils'
 import { translate } from '@/i18n'
+import TabBar from "@/components/TabBar.vue";
 
 import 'vue-router'
 import { DxpLogin, useAuthStore } from '@hotwax/dxp-components';
@@ -43,24 +41,40 @@ const loginGuard = (to: any, from: any, next: any) => {
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
-    redirect: "/search",
+    redirect: "/tabs/search",
   },
   {
-    path: "/upload",
-    name: "upload",
-    component: Upload,
+    path: '/tabs',
+    component: TabBar,
+    children: [
+      {
+        path: '',
+        redirect: '/search'
+      },
+      {
+        path: 'search',
+        component: () => import('@/views/Search.vue'),
+        meta: {
+          permissionId: "APP_SEARCH_VIEW"
+        }
+      },
+      {
+        path: 'upload',
+        component: () => import('@/views/Upload.vue'),
+        meta: {
+          permissionId: "APP_UPLOAD_VIEW"
+        }
+      },
+      {
+        path: 'settings',
+        component: () => import('@/views/Settings.vue')
+      },
+    ],
     beforeEnter: authGuard,
     meta: {
-      permissionId: "APP_UPLOAD_VIEW"
+      permissionId: ""
     }
   },
-  {
-
-    path: "/settings",
-    name: "Settings",
-    component: Settings,
-    beforeEnter: authGuard
-  },
   {
     path: "/count/:sku",
     name: "Count",
@@ -76,15 +90,6 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Login',
     component: DxpLogin,
     beforeEnter: loginGuard
-  },
-  {
-    path: '/search',
-    name: 'Search',
-    component: Search,
-    beforeEnter: authGuard,
-    meta: {
-      permissionId: "APP_SEARCH_VIEW"
-    }
   }
 ];
 
@@ -97,7 +102,7 @@ router.beforeEach((to, from) => {
   if (to.meta.permissionId && !hasPermission(to.meta.permissionId)) {
     let redirectToPath = from.path;
     // If the user has navigated from Login page or if it is page load, redirect user to settings page without showing any toast
-    if (redirectToPath == "/login" || redirectToPath == "/") redirectToPath = "/settings";
+    if (redirectToPath == "/login" || redirectToPath == "/") redirectToPath = "/tabs/settings";
     else {
       showToast(translate('You do not have permission to access this page'));
     }

diff --git a/src/views/count.vue b/src/views/count.vue
@@ -224,10 +224,10 @@
           text: translate('View'),
           role: 'view',
           handler: () => {
-            this.router.push('/upload')
+            this.router.push('/tabs/upload')
           }
         }])
-        this.router.push('/search')
+        this.router.push('/tabs/search')
         } else {
           showToast(translate("Enter the stock count for the product"))
         }
@@ -386,7 +386,7 @@
         // removing after updation
         delete this.product.varianceQuantity;
         delete this.product.varianceReasonId
-        this.router.push('/search')
+        this.router.push('/tabs/search')
       },
     },
     setup() {