Fix reaktywności SRJP

src/App.vue

@@ -4,7 +4,7 @@
 
     <transition name="modal-anim">
       <keep-alive>
-        <TrainModal v-if="store.chosenModalTrain" />
+        <TrainModal v-if="store.chosenModalTrainId" />
       </keep-alive>
     </transition>
 

src/components/Global/TrainModal.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="train-modal" v-if="store.chosenModalTrain" @keydown.esc="closeModal">
+  <div class="train-modal" v-if="chosenTrain" @keydown.esc="closeModal">
     <div class="modal_background" @click="closeModal"></div>
     <div class="modal_content" ref="content" tabindex="0">
       <button class="btn exit" @click="closeModal">
         <img :src="getIcon('exit')" alt="close card" />
       </button>
 
-      <TrainInfo :train="store.chosenModalTrain" :extended="false" ref="trainInfo" />
+      <TrainInfo :train="chosenTrain" :extended="false" ref="trainInfo" />
-      <TrainSchedule :train="store.chosenModalTrain" tabindex="0" />
+      <TrainSchedule :train="chosenTrain" tabindex="0" />
     </div>
   </div>
 </template>
@@ -15,6 +15,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
 import trainInfoMixin from '../../mixins/trainInfoMixin';
 import { useStore } from '../../store/store';
 import TrainInfo from '../TrainsView/TrainInfo.vue';
@@ -22,7 +23,7 @@ import TrainSchedule from '../TrainsView/TrainSchedule.vue';
 
 export default defineComponent({
   components: { TrainInfo, TrainSchedule },
-  mixins: [trainInfoMixin, imageMixin],
+  mixins: [trainInfoMixin, modalTrainMixin, imageMixin],
 
   data() {
     return {
@@ -47,10 +48,6 @@ export default defineComponent({
   },
 
   methods: {
-    closeModal() {
-      this.store.chosenModalTrain = undefined;
-    },
-
     handleContentScroll(e: Event) {
       const trainInfoCompHeight: number = (this.$refs['trainInfo'] as any).$el.getBoundingClientRect().height;
 

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -13,8 +13,8 @@
       :class="train.stopStatus"
       :key="train.trainId"
       tabindex="0"
-      @click="selectTrain(train.trainId)"
+      @click="selectModalTrain(train.trainId)"
-      @keydown.enter="selectTrain(train.trainId)"
+      @keydown.enter="selectModalTrain(train.trainId)"
     >
       <span class="user_train">{{ train.trainNo }}</span>
       <span class="user_name">{{ train.driverName }}</span>
@@ -30,12 +30,13 @@
 
 import { computed, defineComponent } from 'vue';
 import imageMixin from '../../../mixins/imageMixin';
+import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import routerMixin from '../../../mixins/routerMixin';
 import Station from '../../../scripts/interfaces/Station';
 import { useStore } from '../../../store/store';
 
 export default defineComponent({
-  mixins: [routerMixin, imageMixin],
+  mixins: [routerMixin, imageMixin, modalTrainMixin],
 
   props: {
     station: {
@@ -66,12 +67,6 @@ export default defineComponent({
 
     return { computedStationTrains, store };
   },
-
-  methods: {
-    selectTrain(trainId: string) {
-      this.store.chosenModalTrain = this.store.trainList.find((train) => train.trainId == trainId);
-    },
-  },
 });
 </script>
 

src/components/SceneryView/SceneryTimetable.vue

@@ -45,8 +45,8 @@
         v-for="(scheduledTrain, i) in computedScheduledTrains"
         :key="i + 1"
         tabindex="0"
-        @click.prevent.stop="selectTrain(scheduledTrain.trainId)"
+        @click.prevent.stop="selectModalTrain(scheduledTrain.trainId)"
-        @keydown.enter.prevent="selectTrain(scheduledTrain.trainId)"
+        @keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId)"
       >
         <span class="timetable-general">
           <span class="general-info">
@@ -168,13 +168,14 @@ import routerMixin from '../../mixins/routerMixin';
 import Station from '../../scripts/interfaces/Station';
 import { useStore } from '../../store/store';
 import imageMixin from '../../mixins/imageMixin';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
 
 export default defineComponent({
   name: 'SceneryTimetable',
 
   components: { SelectBox, Loading, TrainModal },
 
-  mixins: [dateMixin, routerMixin, imageMixin],
+  mixins: [dateMixin, routerMixin, imageMixin, modalTrainMixin],
 
   props: {
     station: {
@@ -249,10 +250,6 @@ export default defineComponent({
     selectCheckpoint(cp: { checkpointName: string }) {
       this.selectedCheckpoint = cp.checkpointName;
     },
-
-    selectTrain(trainId: string) {
-      this.store.chosenModalTrain = this.store.trainList.find((train) => train.trainId == trainId);
-    },
   },
 
   mounted() {

src/components/TrainsView/TrainTable.vue

@@ -13,8 +13,8 @@
             class="train-row"
             v-for="train in currentTrains"
             :key="train.trainId"
-            @click.stop="selectTrain(train.trainId)"
+            @click.stop="selectModalTrain(train.trainId)"
-            @keydown.enter="selectTrain(train.trainId)"
+            @keydown.enter="selectModalTrain(train.trainId)"
           >
             <TrainInfo :train="train" />
           </li>
@@ -26,6 +26,7 @@
 
 <script lang="ts">
 import { defineComponent, inject, Ref, computed } from 'vue';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
 import returnBtnMixin from '../../mixins/returnBtnMixin';
 import Train from '../../scripts/interfaces/Train';
 import { useStore } from '../../store/store';
@@ -42,7 +43,7 @@ export default defineComponent({
     TrainModal,
   },
 
-  mixins: [returnBtnMixin],
+  mixins: [returnBtnMixin, modalTrainMixin],
 
   props: {
     trains: {
@@ -82,7 +83,7 @@ export default defineComponent({
       this.searchedTrain = query.trainNo.toString();
 
       setTimeout(() => {
-        this.selectTrain(query.driverName + <string>query.trainNo);
+        this.selectModalTrain(query.driverName + <string>query.trainNo);
       }, 20);
     }
   },
@@ -112,9 +113,6 @@ export default defineComponent({
       }, 10);
     },
 
-    selectTrain(trainId: string) {
-      this.store.chosenModalTrain = this.store.trainList.find((train) => train.trainId == trainId);
-    },
   },
 });
 </script>

src/mixins/modalTrainMixin.ts

@@ -0,0 +1,30 @@
+import { defineComponent } from 'vue';
+import { useStore } from '../store/store';
+
+export default defineComponent({
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  mounted() {
+    console.log('Mixin mounted');
+  },
+
+  computed: {
+    chosenTrain() {
+      return this.store.trainList.find((train) => train.trainId == this.store.chosenModalTrainId);
+    },
+  },
+
+  methods: {
+    selectModalTrain(trainId: string) {
+      this.store.chosenModalTrainId = trainId;
+    },
+
+    closeModal() {
+      this.store.chosenModalTrainId = undefined;
+    },
+  },
+});

src/store/store.ts

@@ -41,7 +41,7 @@ export const useStore = defineStore('store', {
       driverStatsName: '',
       driverStatsData: undefined,
 
-      chosenModalTrain: undefined as Train | undefined,
+      chosenModalTrainId: undefined,
 
       dataStatuses: {
         connection: DataStatus.Loading,

src/store/storeTypes.ts

@@ -31,7 +31,7 @@ export interface StoreState {
   driverStatsName: string;
   driverStatsData?: DriverStatsAPIData;
 
-  chosenModalTrain?: Train;
+  chosenModalTrainId?: string;
 
   dataStatuses: {
     connection: DataStatus;