hotfix: TrainsView watcher causing routing problems

src/router/index.ts

@@ -25,7 +25,8 @@ const routes: Array<RouteRecordRaw> = [
     name: 'DriverView',
     component: () => import('../views/DriverView.vue'),
     props: (route) => ({
-      trainId: route.query.trainId
+      trainId: route.query.trainId,
+      modalId: route.query.modalId
     })
   },
   {

src/views/DriverView.vue

@@ -7,7 +7,10 @@
             <img src="/images/icon-back.svg" alt="train icon" />
             <span>{{ $t('trains.driver-return-link') }}</span>
           </router-link>
-          <router-link :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`" class="a-button btn--image">
+          <router-link
+            :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
+            class="a-button btn--image"
+          >
             <img src="/images/icon-train.svg" alt="train icon" />
             <span class="hidable">
               {{ $t('trains.driver-journal-link') }}
@@ -50,13 +53,21 @@ import { Status } from '../typings/common';
 
 const props = defineProps({
   trainId: {
+    type: String,
     required: true
+  },
+
+  modalId: {
+    type: String
   }
 });
 
 const mainStore = useMainStore();
 const apiStore = useApiStore();
-const chosenTrain = computed(() => mainStore.trainList.find((train) => train.id == props.trainId));
+
+const chosenTrain = computed(() =>
+  mainStore.trainList.find((train) => train.id == props.trainId || train.modalId == props.modalId)
+);
 </script>
 
 <style lang="scss" scoped>

src/views/TrainsView.vue

@@ -24,7 +24,6 @@ import { TrainFilter, trainFilters } from '../components/TrainsView/typings';
 import { filteredTrainList } from '../managers/trainFilterManager';
 import TrainStats from '../components/TrainsView/TrainStats.vue';
 import { Train } from '../typings/common';
-import { useRoute, useRouter } from 'vue-router';
 
 export default defineComponent({
   components: {
@@ -56,8 +55,6 @@ export default defineComponent({
   }),
 
   setup() {
-    const router = useRouter();
-
     const store = useMainStore();
     const initTrainFilters = [...trainFilters.map((f) => ({ ...f }))];
 
@@ -91,20 +88,6 @@ export default defineComponent({
         sT.length > 0 || sD.length > 0 || sA.id != 'routeDistance' || areFiltersActive;
     });
 
-    // Backwards compatibility with external links leading to train modal
-    watch(
-      () => store.trainList,
-      (v) => {
-        if (v.length > 0 && router.currentRoute.value.query['trainId']) {
-          const queryTrainId = router.currentRoute.value.query['trainId'];
-          const train = store.trainList.find((t) => t.modalId == queryTrainId.toString());
-
-          if (!train) router.replace('/trains');
-          else router.replace(`/driver?trainId=${train.id}`);
-        }
-      }
-    );
-
     return {
       computedTrains,
       searchedTrain,
@@ -116,6 +99,12 @@ export default defineComponent({
   },
 
   activated() {
+    // Backwards compatibility with external links leading to train modal
+    if (this.trainId) {
+      this.$router.replace(`/driver?modalId=${this.trainId}`);
+      return;
+    }
+
     if (this.train) {
       this.searchedTrain = this.train;
       this.searchedDriver = this.driver || '';