From af11a9592700e39f0c2bd881cbce6da3f29010da Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Sat, 3 Feb 2024 12:36:27 +0530
Subject: [PATCH 1/3] Fixed: the routing from the query page to the route list
 page

---
 src/views/BrokeringQuery.vue | 18 +++++++++++++-----
 src/views/BrokeringRoute.vue |  9 +++------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index 09187e1..6dd5d11 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -5,10 +5,7 @@
         <div class="menu">
           <ion-item lines="none">
             <ion-label>{{ currentRouting.routingName }}</ion-label>
-            <ion-chip slot="end" outline @click="router.push(`/tabs/brokering/${currentRouting.routingGroupId}/routes`)">
-              {{ getRouteIndex() }}
-              <ion-icon :icon="chevronUpOutline" />
-            </ion-chip>
+            <ion-back-button slot="end" :default-href="`/tabs/brokering/${currentRouting.routingGroupId}/routes`" :text="getRouteIndex()" :icon="chevronUpOutline"></ion-back-button>
           </ion-item>
           <ion-button expand="block" :disabled="!hasUnsavedChanges" @click="saveChanges">{{ translate("Save changes") }}</ion-button>
           <ion-item-group>
@@ -208,7 +205,7 @@
 </template>
 
 <script setup lang="ts">
-import { IonBadge, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToggle, alertController, modalController, onIonViewWillEnter, popoverController } from "@ionic/vue";
+import { IonBackButton, IonBadge, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToggle, alertController, modalController, onIonViewWillEnter, popoverController } from "@ionic/vue";
 import { addCircleOutline, chevronUpOutline, filterOutline, golfOutline, optionsOutline, playForwardOutline, swapVerticalOutline } from "ionicons/icons"
 import { onBeforeRouteLeave, useRouter } from "vue-router";
 import { computed, defineProps, ref } from "vue";
@@ -996,4 +993,15 @@ ion-chip > ion-select {
   /* Adding min-height as auto-styling is getting appLied when not using legacy select option */
   min-height: unset;
 }
+
+/* Change the position of icon inside back-button to end, as the icon inside back-button is always displayed first */
+ion-back-button::part(icon) {
+  order: 2;
+}
+
+/* As no border is displayed by default to the ion-back-button */
+ion-back-button::part(native) {
+  border: 1px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.32);
+  border-radius: 16px;
+}
 </style>
diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index df1e01b..87f7ee2 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -3,10 +3,7 @@
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="start">
-          <!-- Used ion-button, instead of ion-back-button as back-button navigates on the basis of history and thus stuck in the loop of navigation -->
-          <ion-button fill="clear" @click="router.push('/tabs/brokering')">
-            <ion-icon slot="icon-only" :icon="arrowBackOutline"/>
-          </ion-button>
+          <ion-back-button default-href="/tabs/brokering" />
         </ion-buttons>
         <ion-title>{{ translate("Brokering run name") }}</ion-title>
       </ion-toolbar>
@@ -122,8 +119,8 @@
 </template>
 
 <script setup lang="ts">
-import { IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonTextarea, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter } from "@ionic/vue";
-import { addCircleOutline, archiveOutline, arrowBackOutline, refreshOutline, reorderTwoOutline, saveOutline, timeOutline, timerOutline } from "ionicons/icons"
+import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonTextarea, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter } from "@ionic/vue";
+import { addCircleOutline, archiveOutline, refreshOutline, reorderTwoOutline, saveOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { onBeforeRouteLeave, useRouter } from "vue-router";
 import { useStore } from "vuex";
 import { computed, defineProps, ref } from "vue";

From a3ce715ed2ec0d0f7f9af65ecb55391cc333b410 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Sat, 3 Feb 2024 13:02:54 +0530
Subject: [PATCH 2/3] Improved: unwanted color property for border

---
 src/views/BrokeringQuery.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index 6dd5d11..16259a3 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -1001,7 +1001,7 @@ ion-back-button::part(icon) {
 
 /* As no border is displayed by default to the ion-back-button */
 ion-back-button::part(native) {
-  border: 1px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.32);
+  border: 1px solid;
   border-radius: 16px;
 }
 </style>

From 0e272daaacb5bb68101813c2eb01577235591451 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Wed, 14 Feb 2024 17:52:52 +0530
Subject: [PATCH 3/3] Improved: support to display the navigation bottom bar
 only on specific routes

When using router.go, the router does not always go to the route list from details page if the user moves to settings page from the details page, thus removed the tab-bar to be displayed on specific route, so that the routing works always as expected
---
 src/views/BrokeringQuery.vue | 16 ++++------------
 src/views/Tabs.vue           | 10 +++++++++-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index 1716291..b0e02d9 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -5,7 +5,10 @@
         <div class="menu">
           <ion-item lines="none">
             <ion-label>{{ currentRouting.routingName }}</ion-label>
-            <ion-back-button slot="end" :default-href="`/tabs/brokering/${currentRouting.routingGroupId}/routes`" :text="getRouteIndex()" :icon="chevronUpOutline"></ion-back-button>
+            <ion-chip slot="end" outline @click="router.go(-1)">
+              {{ getRouteIndex() }}
+              <ion-icon :icon="chevronUpOutline" />
+            </ion-chip>
           </ion-item>
           <ion-button class="ion-margin" expand="block" :disabled="!hasUnsavedChanges" @click="saveChanges">{{ translate("Save changes") }}</ion-button>
           <ion-item>
@@ -1087,17 +1090,6 @@ ion-chip > ion-select {
   min-height: unset;
 }
 
-/* Change the position of icon inside back-button to end, as the icon inside back-button is always displayed first */
-ion-back-button::part(icon) {
-  order: 2;
-}
-
-/* As no border is displayed by default to the ion-back-button */
-ion-back-button::part(native) {
-  border: 1px solid;
-  border-radius: 16px;
-}
-
 ion-input.ruleName {
   --background: var(--ion-color-light)
 }
diff --git a/src/views/Tabs.vue b/src/views/Tabs.vue
index 2fad4dd..26cd45e 100644
--- a/src/views/Tabs.vue
+++ b/src/views/Tabs.vue
@@ -2,7 +2,7 @@
   <ion-page>
     <ion-tabs>
       <ion-router-outlet></ion-router-outlet>
-      <ion-tab-bar slot="bottom">
+      <ion-tab-bar slot="bottom" v-if="showFooter()">
         <ion-tab-button tab="brokering" href="/tabs/brokering">
           <ion-icon :icon="shuffleOutline" />
           <ion-label>{{ translate("Brokering") }}</ion-label>
@@ -21,6 +21,14 @@
 import { translate } from "@/i18n";
 import { IonIcon, IonLabel, IonPage, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from "@ionic/vue";
 import { settingsOutline, shuffleOutline } from "ionicons/icons";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+function showFooter() {
+  if (['/tabs/settings', '/tabs/brokering'].includes(router.currentRoute.value.path)) return true
+  return false
+}
 </script>
 
 <style scoped>