fixed tab navigation bug, managing navigation to event-selector from …

…tabs parent page instead of directly from current-event-header component this fixes bug described here: ionic-team/ionic-framework#27443
voxxrin · May 11, 2023 · ee29f3d · ee29f3d
1 parent adc3f21
commit ee29f3d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/mobile/src/components/CurrentEventHeader.vue b/mobile/src/components/CurrentEventHeader.vue
@@ -2,7 +2,7 @@
   <ion-header class="ion-no-border">
     <ion-toolbar>
       <div class="viewsHeader">
-        <ion-button @click="backToEventsList" shape="round" size="default">
+        <ion-button @click="backButtonClicked" shape="round" size="default">
           <ion-icon src="/assets/icons/solid/arrow-left.svg"></ion-icon>
         </ion-button>
         <ion-button class="btnUser" shape="round" size="default">
@@ -24,7 +24,6 @@ import {useIonRouter} from "@ionic/vue";
 import CurrentEventStatus from "@/components/CurrentEventStatus.vue";
 import {PropType} from "vue";
 import {VoxxrinConferenceDescriptor} from "@/models/VoxxrinConferenceDescriptor";
-import {unsetCurrentSchedule} from "@/state/CurrentSchedule";
 
 const router = useIonRouter();
 const props = defineProps({
@@ -34,10 +33,11 @@ const props = defineProps({
     }
 })
 
-function backToEventsList() {
-    unsetCurrentSchedule();
-
-    router.navigate('/event-selector', 'back', 'pop')
+function backButtonClicked() {
+    // Using standard event dispatching through ionic's $emit is pointless here, as I didn't find
+    // how to bubble these event from <ion-router-outlet> placed into _BaseEventPages
+    // => I'm using a crappy global event (type unsafe) hack here
+    window.dispatchEvent(new CustomEvent('exit-event-requested'))
 }
 
 </script>

diff --git a/mobile/src/views/event/_BaseEventPages.vue b/mobile/src/views/event/_BaseEventPages.vue
@@ -38,12 +38,13 @@ import {
     IonRippleEffect,
     useIonRouter,
 } from '@ionic/vue';
-import {ref} from "vue";
+import {onMounted, onUnmounted, ref} from "vue";
 import {useRoute} from "vue-router";
 import {getRouteParamsValue} from "@/views/vue-utils";
 import {EventId} from "@/models/VoxxrinEvent";
 import {useCurrentConferenceDescriptor} from "@/state/CurrentConferenceDescriptor";
 import {typesafeI18n} from "@/i18n/i18n-vue";
+import {unsetCurrentSchedule} from "@/state/CurrentSchedule";
 
 const router = useIonRouter();
 const route = useRoute();
@@ -75,6 +76,21 @@ const selectedTab = ref((tabs.find(t => t.url === route.fullPath) || tabs[0]).id
 function tabClicked(tab: typeof tabs[number], event: Event) {
     selectedTab.value = tab.id;
 }
+
+onMounted(() => {
+    window.addEventListener('exit-event-requested', onExitEventRequested)
+})
+onUnmounted(() => {
+    window.removeEventListener('exit-event-requested', onExitEventRequested);
+})
+function onExitEventRequested() {
+    unsetCurrentSchedule();
+
+    // This navigation has to happen in _BaseEventPages otherwise we get navigation errors,
+    // see https://github.com/ionic-team/ionic-framework/issues/27443
+    router.navigate('/event-selector', 'back', 'pop')
+}
+
 </script>
 
 <style lang="scss" scoped>